HTML CSS JAVASCRIPT SQL PYTHON PHP HOW TO W3.CSS JAVA JQUERY C++ R React
ภาษาไทย Afrikaans العربية čeština Deutsch Español Français हिन्दी Bahasa Indonesia Italiano 日本語 한국어 မြန်မာဘာသာ Nederlands Polski Português Русский Türkçe Tiếng Việt

Hướng dẫn CSS

TRANG CHỦ CSS Giới thiệu CSS Cú pháp CSS Bộ chọn CSS CSS Cách thực hiện Nhận xét CSS Màu CSS
Màu sắc RGB HEX HSL
Nền CSS
Màu nền Hình nền Bối cảnh Lặp lại Tệp đính kèm nền Tốc ký nền
Đường viền CSS
Biên giới Chiều rộng biên giới Màu viền Các mặt biên giới Tốc ký biên giới Viền tròn
Lề CSS
Lợi nhuận Margin Collapse
CSS Padding Chiều cao / Chiều rộng CSS Mô hình hộp CSS Đề cương CSS
Outline Outline Width Outline Color Outline Shorthand Outline Offset
Văn bản CSS
Văn bản màu Căn chỉnh văn bản Trang trí văn bản Chuyển đổi văn bản Khoảng cách văn bản Bóng văn bản
Phông chữ CSS
Font Family Font Web Safe Font Fallbacks Font Style Font Size Font Google Font Pairings Font Shorthand
Biểu tượng CSS Liên kết CSS Danh sách CSS Bảng CSS
Table Borders Table Size Table Alignment Table Style Table Responsive
Hiển thị CSS Chiều rộng tối đa CSS Vị trí CSS CSS Z-index CSS Overflow CSS Float
Float Clear Float Examples
Khối nội tuyến CSS Căn chỉnh CSS Bộ kết hợp CSS Lớp giả CSS Phần tử giả CSS Độ mờ của CSS Thanh điều hướng CSS
Navbar Vertical Navbar Horizontal Navbar
Trình đơn thả xuống CSS Thư viện hình ảnh CSS Hình ảnh CSS Sprites Bộ chọn CSS Attr Biểu mẫu CSS Bộ đếm CSS Bố cục trang web CSS Đơn vị CSS Đặc tính CSS CSS! Quan trọng Các hàm toán học CSS

CSS nâng cao

Góc làm tròn CSS Hình ảnh đường viền CSS Nền CSS Màu CSS Từ khóa màu CSS CSS Gradients
Linear Gradients Radial Gradients Conic Gradients
Bóng CSS
Shadow Effects Box Shadow
Hiệu ứng văn bản CSS Phông chữ Web CSS Chuyển đổi CSS 2D Chuyển đổi CSS 3D Chuyển đổi CSS Hoạt ảnh CSS Chú giải công cụ CSS Hình ảnh phong cách CSS Phản chiếu hình ảnh CSS CSS object-fit Vị trí đối tượng CSS Mặt nạ CSS Các nút CSS Phân trang CSS CSS Nhiều cột Giao diện người dùng CSS Biến CSS
The var() Function Overriding Variables Variables and JavaScript Variables in Media Queries
Kích thước hộp CSS Truy vấn phương tiện CSS Ví dụ về CSS MQ CSS Flexbox
CSS Flexbox CSS Flex Container CSS Flex Items CSS Flex Responsive

CSS đáp ứng

Giới thiệu về RWD RWD Viewport Chế độ xem lưới RWD Truy vấn phương tiện RWD Hình ảnh RWD RWD Video Khung RWD Mẫu RWD

Lưới CSS

Grid Intro Vùng chứa lưới Mục lưới

CSS SASS

Hướng dẫn SASS

Ví dụ về CSS

Mẫu CSS Ví dụ về CSS câu đố css Bài tập CSS Chứng chỉ CSS

Tham chiếu CSS

Tham chiếu CSS Bộ chọn CSS Chức năng CSS Tham chiếu CSS Aural Phông chữ An toàn trên Web CSS Hoạt hình CSS Đơn vị CSS Công cụ chuyển đổi CSS PX-EM Màu CSS Giá trị màu CSS Giá trị mặc định của CSS Hỗ trợ trình duyệt CSS

Bóng văn bản CSS

❮ Trước Kế tiếp ❯

Bóng văn bản

Thuộc text-shadowtính thêm bóng cho văn bản.

Trong cách sử dụng đơn giản nhất, bạn chỉ xác định bóng ngang (2px) và bóng dọc (2px):

Hiệu ứng bóng chữ!

Thí dụ

h1 {
  text-shadow: 2px 2px;
}

Tiếp theo, thêm màu (đỏ) vào bóng:

Hiệu ứng bóng chữ!

Thí dụ

h1 {
  text-shadow: 2px 2px red;
}

Sau đó, thêm hiệu ứng mờ (5px) vào bóng:

Hiệu ứng bóng chữ!

Thí dụ

h1 {
  text-shadow: 2px 2px 5px red;
}

Thêm ví dụ về bóng văn bản

ví dụ 1

Bóng văn bản trên văn bản trắng:

h1 {
  color: white;
  text-shadow: 2px 2px 4px #000000;
}

Ví dụ 2

Bóng chữ với ánh sáng neon đỏ:

h1 {
  text-shadow: 0 0 3px #ff0000;
}

Ví dụ 3

Bóng chữ với ánh sáng neon màu đỏ và xanh lam:

h1 {
  text-shadow: 0 0 3px #ff0000, 0 0 5px #0000ff;
}

Ví dụ 4

h1 {
  color: white;
  text-shadow: 1px 1px 2px black, 0 0 25px blue, 0 0 5px darkblue;
}

Mẹo: Đi tới chương Phông chữ CSS của chúng tôi để tìm hiểu về cách thay đổi phông chữ, kích thước văn bản và kiểu của văn bản.

Mẹo: Đi tới chương Hiệu ứng văn bản CSS của chúng tôi để tìm hiểu về các hiệu ứng văn bản khác nhau.

Kiểm tra bản thân với các bài tập

Bài tập:

Thay đổi màu văn bản của tất cả các phần tử <p> thành "đỏ".

<style>
p {
  : red;
}
</style>

<body>
  <h1>This is a heading</h1>
  <p>This is a paragraph</p>
  <p>This is a paragraph</p>
</body>

Tất cả các thuộc tính văn bản CSS

Property Description
color Sets the color of text
direction Specifies the text direction/writing direction
letter-spacing Increases or decreases the space between characters in a text
line-height Sets the line height
text-align Specifies the horizontal alignment of text
text-align-last Specifies how to align the last line of a text
text-decoration Specifies the decoration added to text
text-indent Specifies the indentation of the first line in a text-block
text-justify Specifies how justified text should be aligned and spaced
text-overflow Specifies how overflowed content that is not displayed should be signaled to the user
text-shadow Specifies the shadow effect added to text
text-transform Controls the capitalization of text
unicode-bidi Used together with the direction property to set or return whether the text should be overridden to support multiple languages in the same document
vertical-align Sets the vertical alignment of an element
white-space Specifies how white-space inside an element is handled
word-spacing Increases or decreases the space between words in a text

❮ Trước Kế tiếp ❯