CSS guides

Trang này liệt kê các module CSS, phản ánh cách các đặc tả CSS được cấu trúc. Mỗi module cung cấp tổng quan về đặc tả, liệt kê các tính năng mà nó cung cấp (chẳng hạn như thuộc tính, at-rule và kiểu dữ liệu), đồng thời cho thấy cách chúng liên quan đến các phần khác của CSS và nền tảng web. Bạn có thể sử dụng các trang module làm điểm khởi đầu để điều hướng qua các hướng dẫn liên quan và đi sâu hơn vào tài liệu tham chiếu cho các tính năng cụ thể.

Để truy cập các hướng dẫn riêng lẻ trong mỗi module, hãy nhấp vào tên module từ danh sách sau để truy cập trang đích của nó, hoặc sử dụng thanh bên để điều hướng trực tiếp đến một chủ đề và khám phá tất cả các hướng dẫn liên quan.

CSS anchor positioning

Module CSS anchor positioning định nghĩa các tính năng cho phép bạn gắn kết các phần tử lại với nhau. Một số phần tử được định nghĩa là anchor element (phần tử neo); các anchor-positioned element (phần tử được định vị bằng anchor) có thể được thiết lập kích thước và vị trí dựa trên kích thước và vị trí của các anchor element mà chúng được liên kết tới.

CSS animations

Module CSS animations cho phép bạn tạo animation cho các giá trị thuộc tính CSS, chẳng hạn như background-position và transform, theo thời gian bằng cách sử dụng keyframe. Mỗi keyframe mô tả cách phần tử được tạo animation sẽ hiển thị tại một thời điểm nhất định trong chuỗi animation. Bạn có thể sử dụng các thuộc tính trong module animations để kiểm soát thời lượng, số lần lặp, thời gian trì hoãn bắt đầu và các khía cạnh khác của animation.

CSS backgrounds and borders

Module CSS backgrounds and borders cung cấp các thuộc tính để thêm background, border, rounded corners và box shadow cho các phần tử.

CSS basic user interface

Module CSS basic user interface cho phép bạn xác định việc hiển thị và chức năng của các tính năng liên quan đến giao diện người dùng, bao gồm các thuộc tính outline, phản hồi trực quan cho thiết bị trỏ và bàn phím, và sửa đổi giao diện mặc định của các widget giao diện người dùng.

CSS borders and box decorations

Module CSS borders and box decorations cung cấp các thuộc tính để thêm border, góc bo tròn và box shadow cho các phần tử. Module này mở rộng border và box decoration được giới thiệu trong module CSS backgrounds and borders, bổ sung các thuộc tính corner-shape và border-shape, các thuộc tính border-radius theo hướng logic, các thuộc tính longhand cho thuộc tính box-shadow, và các thuộc tính để tạo border một phần.

CSS box alignment

Module CSS box alignment xác định các tính năng CSS liên quan đến việc căn chỉnh các hộp (box) trong container của chúng. Module này định nghĩa cách căn chỉnh cho các mô hình bố cục CSS khác nhau bao gồm block layout, table layout, flexible box layout (flexbox) và grid layout, tạo ra một phương pháp căn chỉnh nhất quán xuyên suốt toàn bộ CSS.

CSS box model

Module CSS box model định nghĩa các thuộc tính margin và padding, cùng với các thuộc tính height, width và border, tạo nên box model của CSS.

CSS box sizing

Module CSS box sizing cho phép bạn chỉ định cách các phần tử vừa khít với nội dung của chúng hoặc vừa khít trong một ngữ cảnh layout cụ thể. Module này định nghĩa các thuộc tính sizing, minimum sizing và maximum sizing, đồng thời mở rộng các thuộc tính sizing của CSS với các từ khóa đại diện cho intrinsic size dựa trên nội dung và extrinsic size dựa trên ngữ cảnh.

CSS cascading and inheritance

Module CSS cascading and inheritance định nghĩa các quy tắc gán giá trị cho các thuộc tính thông qua cascading và inheritance. Module này chỉ định các quy tắc để tìm giá trị đã chỉ định cho tất cả các thuộc tính trên tất cả các phần tử.

CSS color adjustment

Mô-đun CSS color adjustment cung cấp mô hình và các công cụ điều chỉnh màu sắc tự động của trình duyệt để xử lý tùy chọn người dùng, chẳng hạn như "Chế độ tối" (Dark Mode), điều chỉnh độ tương phản và các tùy chọn bảng màu khác.

CSS colors

Mô-đun CSS colors định nghĩa màu sắc, các kiểu màu, pha trộn màu, độ trong suốt, và cách bạn có thể áp dụng những màu sắc và hiệu ứng này cho nội dung HTML.

CSS compositing and blending

Module CSS compositing and blending định nghĩa cách các lớp nền của một phần tử có thể được pha trộn với nhau, cách một phần tử có thể được pha trộn với container của nó, và liệu phần tử có cần tạo stacking context mới hay không.

CSS conditional rules

Module CSS conditional rules định nghĩa media query và supports query CSS, cho phép bạn định nghĩa các style chỉ được áp dụng nếu các điều kiện cụ thể được thỏa mãn. Các conditional rules được định nghĩa trong module này dựa trên khả năng của thiết bị, user-agent, và viewport. Với conditional rules, bạn có thể nhắm mục tiêu các CSS style dựa trên giá trị truy vấn hay tính năng trình duyệt và thiết bị, độc lập với tài liệu đang được render.

CSS containment

Module CSS containment định nghĩa containment và container queries.

CSS counter styles

Module CSS counter styles cho phép bạn định nghĩa các kiểu counter tùy chỉnh của riêng mình để quản lý sự xuất hiện của các markers trong danh sách và counters trong generated content. Nó cũng cho phép bạn mở rộng các kiểu danh sách trình duyệt gốc với các tùy chỉnh của riêng bạn.

CSS custom functions and mixins

Module CSS custom functions and mixins cho phép các nhà phát triển tạo các khối mã CSS có thể tái sử dụng, chấp nhận các đối số, chứa logic phức tạp (được định nghĩa bằng các tính năng như các hàm CSS if() và at-rules @media), và trả về các giá trị dựa trên logic đó.

CSS custom highlight API

Module CSS custom highlight API cung cấp một cách lập trình để nhắm vào các phạm vi văn bản cụ thể được xác định bởi các đối tượng range, mà không ảnh hưởng đến cấu trúc DOM bên dưới. Các đối tượng range sau đó có thể được chọn thông qua pseudo-element ::highlight(), và có thể thêm hoặc xóa các style highlight. Các tính năng của module này có thể tạo ra các hiệu ứng highlight tương tự như cách các trình soạn thảo văn bản highlight lỗi chính tả hoặc ngữ pháp, và các trình soạn thảo code highlight lỗi cú pháp.

CSS custom properties for cascading variables

Mô-đun CSS custom properties for cascading variables bổ sung hỗ trợ cho các biến cascading trong thuộc tính CSS, đồng thời cho phép bạn tạo custom properties để định nghĩa các biến này cùng với cơ chế sử dụng chúng làm giá trị cho các thuộc tính CSS khác.

CSS display

Module CSS display định nghĩa cách cây hộp định dạng CSS được tạo ra từ cây phần tử tài liệu và định nghĩa các thuộc tính kiểm soát nó.

CSS easing functions

Module CSS easing functions định nghĩa các easing functions, cung cấp phương tiện để kiểm soát sự biến đổi của các giá trị. Các functions được định nghĩa bao gồm linear, cubic bezier và step easing functions. Các easing functions này có thể được áp dụng cho animations và transitions.

CSS environment variables

Module CSS environment variables định nghĩa khái niệm environment variables và hàm env. Environment variables hoạt động tương tự như custom properties và hàm var, ngoại trừ chúng được định nghĩa toàn cục; chúng là các biến toàn cục có phạm vi trên toàn bộ tài liệu. Chúng là các giá trị user agent, được cung cấp bởi trình duyệt hoặc hệ điều hành, mà bạn có thể truy cập bằng hàm env, cho phép bạn điều chỉnh styles của mình theo thiết bị hoặc ngữ cảnh của người dùng.

CSS filter effects

Các thuộc tính trong module CSS filter effects cho phép bạn xác định cách xử lý phần hiển thị của một phần tử trước khi phần tử đó được hiển thị trong tài liệu. Ví dụ về các hiệu ứng như vậy bao gồm làm mờ và thay đổi cường độ màu sắc của phần tử.

CSS flexible box layout

Module CSS flexible box layout định nghĩa một mô hình CSS box được tối ưu cho thiết kế giao diện người dùng và bố cục các phần tử theo một chiều. Trong mô hình flex layout, các phần tử con của flex container có thể được sắp xếp theo bất kỳ hướng nào và có thể "co giãn" kích thước của chúng, hoặc phát triển để lấp đầy không gian trống hoặc thu nhỏ để tránh tràn ra ngoài phần tử cha. Cả căn chỉnh ngang và dọc của các phần tử con đều có thể được thao tác dễ dàng.

CSS font loading

Module CSS font loading mô tả các sự kiện và interface được sử dụng để tải động các tài nguyên font.

CSS fonts

Module CSS fonts định nghĩa các thuộc tính liên quan đến font và cách tải tài nguyên font. Nó cho phép bạn định nghĩa kiểu của font, chẳng hạn như họ font, kích thước và độ đậm, cũng như các biến thể glyph cần sử dụng khi có nhiều biến thể cho một ký tự.

CSS fragmentation

Module CSS fragmentation định nghĩa cách nội dung được hiển thị khi nó bị ngắt (phân mảnh) và chảy qua nhiều trang, vùng, hoặc cột. Module này định nghĩa các tính năng cho phân trang, ngắt với kích thước và hướng fragment thay đổi, widows và orphans.

CSS generated content

Module CSS generated content định nghĩa cách thay thế nội dung của một phần tử và cách thêm nội dung vào tài liệu bằng CSS.

CSS grid layout

Module CSS grid layout xuất sắc trong việc chia trang thành các vùng chính hoặc xác định mối quan hệ về kích thước, vị trí và lớp chồng giữa các phần của một giao diện được xây dựng từ các phần tử HTML cơ bản.

CSS images

Module CSS images định nghĩa các loại image có thể được sử dụng (kiểu image, chứa URL, gradient và các loại image khác), cách thay đổi kích thước chúng và cách chúng, cùng với các replaced content khác, tương tác với các layout model khác nhau.

CSS inline layout

Module CSS inline layout định nghĩa căn chỉnh và kích thước theo trục khối (block-axis) của nội dung inline-level và thêm chế độ bố cục đặc biệt cho drop-caps. Nó mô tả mô hình định dạng CSS cho luồng các phần tử và văn bản bên trong một container để ngắt dòng trên nhiều dòng.

CSS lists and counters

Module CSS lists and counters cho phép định style và định vị các dấu đầu dòng (bullet) của list item và thao tác với giá trị của chúng bằng cách kết hợp các chuỗi, counters và các tính năng khác.

CSS logical properties and values

Module CSS logical properties and values định nghĩa các thuộc tính và giá trị logic có thể kiểm soát bố cục thông qua các ánh xạ hướng và chiều logic thay vì vật lý. Logical properties định nghĩa các tương đương hướng tương đối với các thuộc tính vật lý tương ứng của chúng.

CSS masking

Module CSS masking định nghĩa masking và clipping — hai thao tác đồ họa khác nhau được dùng để ẩn một phần hoặc toàn bộ các phần tử hiển thị.

CSS media queries

Module CSS media queries cho phép kiểm tra và truy vấn các giá trị viewport cũng như các tính năng của trình duyệt hay thiết bị, để áp dụng có điều kiện các style CSS dựa trên môi trường người dùng hiện tại. Media query được sử dụng trong quy tắc CSS @media và các ngữ cảnh cũng như ngôn ngữ khác như HTML và JavaScript.

CSS motion path

Module CSS motion path cho phép tác giả tạo hoạt ảnh cho bất kỳ đối tượng đồ họa nào dọc theo một đường dẫn tùy chỉnh.

CSS multi-column layout

Module CSS multi-column layout cho phép bạn chia nội dung thành nhiều cột. Bằng cách sử dụng các thuộc tính trong module này, bạn có thể xác định số lượng và chiều rộng ưa thích của các cột, kích thước khoảng trống giữa các cột, và giao diện trực quan của các đường ngăn cách cột tùy chọn (được gọi là column rules). Bạn cũng có thể xác định cách nội dung nên chuyển từ cột này sang cột khác và cách ngắt nội dung giữa các cột.

CSS namespaces

Module CSS namespaces định nghĩa cú pháp để sử dụng namespaces trong CSS.

CSS nesting

Module CSS nesting định nghĩa cú pháp để lồng các selector, cung cấp khả năng lồng một quy tắc style bên trong một quy tắc khác, trong đó selector của quy tắc con có quan hệ tương đối với selector của quy tắc cha.

CSS overflow

Các thuộc tính của module CSS overflow giúp bạn xử lý scrollable overflow trong phương tiện trực quan.

CSS overscroll behavior

Module CSS overscroll behavior cung cấp các thuộc tính để kiểm soát hành vi của scroll container khi vị trí cuộn của nó đạt đến scroll boundary. Kiểm soát khía cạnh này đặc biệt hữu ích trong các tình huống mà các vùng có thể cuộn được nhúng không nên kích hoạt cuộn trên container cha.

CSS paged media

Module CSS paged media định nghĩa các thuộc tính kiểm soát cách trình bày nội dung để in hoặc cho bất kỳ phương tiện nào chia nội dung thành các trang rời biệt. Nó cho phép bạn đặt page break, kiểm soát vùng có thể in, và tạo kiểu khác nhau cho trang trái và trang phải.

CSS positioned layout

Module CSS positioned layout định nghĩa các scheme định vị và bù đắp dựa trên tọa độ có sẵn trong CSS, cùng với các thuộc tính dùng để định vị và xếp chồng các phần tử trên trang web. Module này nổi tiếng nhất với việc xác định các phương pháp định vị cơ bản, bao gồm relative positioning, sticky positioning, absolute positioning và fixed positioning. Nó cũng định nghĩa cách các phần tử được định vị được vẽ và xếp lớp, làm rõ hành vi stacking và thứ tự hiển thị.

CSS properties and values API

Module CSS properties and values API định nghĩa một phương pháp để đăng ký các thuộc tính CSS mới, xác định kiểu dữ liệu của thuộc tính, hành vi kế thừa và tùy chọn giá trị ban đầu. API này mở rộng module CSS custom properties for cascading variables, cho phép tác giả định nghĩa các thuộc tính tùy chỉnh trong CSS bằng cú pháp hai gạch ngang (--). CSS properties and values API là một phần của nhóm API CSS Houdini.

CSS pseudo-elements

Module CSS pseudo-element định nghĩa các phần tử trừu tượng không có mặt trực tiếp trong cây tài liệu. Các phần tử trừu tượng này, được gọi là pseudo-elements, đại diện cho các phần của render tree có thể được chọn và tạo style. Pseudo-elements được dùng để tạo ra các trừu tượng về cây tài liệu ngoài những gì cây tài liệu cung cấp.

CSS round display

Module CSS round display định nghĩa các phần mở rộng CSS để hỗ trợ màn hình tròn, chẳng hạn như đồng hồ đeo tay, giúp các nhà phát triển xây dựng các trang web phù hợp với các thiết bị đó.

CSS ruby layout

Module CSS ruby layout cung cấp mô hình hiển thị và các điều khiển định dạng liên quan đến việc hiển thị chú thích ruby. Chú thích ruby là một dạng chú thích xen dòng, bao gồm các chuỗi văn bản ngắn bên cạnh văn bản cơ sở. Chúng thường được dùng trong các tài liệu Đông Á để chỉ cách phát âm hoặc định nghĩa ý nghĩa.

CSS scoping

Module CSS scoping định nghĩa các cơ chế scoping và đóng gói CSS, tập trung vào cơ chế scoping của Shadow DOM.

CSS scroll anchoring

Module CSS scroll anchoring định nghĩa một cơ chế để ngăn trang bị dịch chuyển do các thay đổi DOM phía trên vùng hiển thị của một scroll container khi người dùng đang xem nội dung.

CSS scroll snap

Module CSS scroll snap cung cấp các thuộc tính cho phép bạn kiểm soát hành vi panning và cuộn bằng cách định nghĩa các snap position. Nội dung có thể snap vào vị trí khi người dùng cuộn qua nội dung tràn trong một scroll container, tạo ra khả năng phân trang và định vị cuộn.

CSS scroll-driven animations

Module CSS scroll-driven animations cung cấp chức năng xây dựng trên module CSS animations và Web Animations API. Nó cho phép bạn animate các giá trị thuộc tính theo timeline dựa trên cuộn thay vì timeline tài liệu dựa trên thời gian mặc định. Điều này có nghĩa là bạn có thể animate một phần tử bằng cách cuộn phần tử đó, scroll container của nó, hoặc phần tử gốc của nó, thay vì chỉ bằng sự trôi qua của thời gian.

CSS scrollbars styling

Module CSS scrollbars styling định nghĩa các thuộc tính mà bạn có thể dùng để tạo kiểu hiển thị cho thanh cuộn. Bạn có thể tùy chỉnh độ rộng của thanh cuộn theo nhu cầu. Bạn cũng có thể tùy chỉnh màu sắc của track (phần nền của thanh cuộn) và màu sắc của thumb (tay cầm kéo thả được) của thanh cuộn.

CSS selectors

Module CSS selectors định nghĩa các mẫu để chọn các phần tử mà một tập hợp quy tắc CSS sau đó sẽ được áp dụng cùng với specificity của chúng. Module CSS selectors cung cấp hơn 60 selector và năm combinator. Các module khác cung cấp thêm các pseudo-class selector và pseudo-element.

CSS shadow parts

Module CSS shadow parts định nghĩa pseudo-element ::part() có thể được đặt trên một shadow host. Sử dụng pseudo-element này, bạn có thể cho phép shadow host hiển thị phần tử được chọn trong shadow tree ra ngoài trang để tạo kiểu.

CSS shapes

Module CSS shapes mô tả các hình học hình học. Nó cũng định nghĩa các thuộc tính CSS có thể sử dụng các shape để kiểm soát vùng float của phần tử; vùng này sau đó có thể được áp dụng cho exclusion hoặc xác định vùng nội dung của phần tử.

CSS syntax

Module CSS syntax mô tả, theo nghĩa chung, cấu trúc và cú pháp của cascading stylesheets, hay CSS. Nó định nghĩa CSS là ngôn ngữ dùng để mô tả việc hiển thị các tài liệu có cấu trúc (như HTML và XML), trên web và các nơi khác.

CSS table

Module CSS table giúp bạn định nghĩa cách bố cục dữ liệu bảng.

CSS text

Module CSS text định nghĩa cách thực hiện thao tác văn bản, như ngắt dòng, căn đều và căn lề, xử lý khoảng trắng, và biến đổi văn bản.

CSS text decoration

Module CSS text decoration định nghĩa các tính năng liên quan đến trang trí văn bản, như gạch chân, text shadow và emphasis mark. Các tính năng trang trí văn bản có thể cung cấp các gợi ý thị giác cho lỗi chính tả, vấn đề ngữ pháp và các liên kết. Những tính năng này có thể giúp cải thiện tính khả dụng, khả năng truy cập, chức năng và tính thẩm mỹ của văn bản của bạn.

CSS transforms

Module CSS transforms định nghĩa cách các phần tử được tạo kiểu bằng CSS có thể được biến đổi trong không gian hai chiều hoặc ba chiều.

CSS transitions

Module CSS transitions quy định chức năng tạo ra các transition (chuyển tiếp) dần dần giữa các giá trị thuộc tính CSS khác nhau. Hành vi của các transition này có thể được kiểm soát bằng cách chỉ định hàm easing, thời gian và các giá trị khác.

CSS values and units

Mỗi khai báo CSS bao gồm một cặp thuộc tính/giá trị. Giá trị có thể có nhiều dạng khác nhau tùy thuộc vào thuộc tính, chẳng hạn như một số nguyên đơn lẻ, từ khóa, hàm hoặc kết hợp của các mục khác nhau; một số giá trị có đơn vị, trong khi các giá trị khác thì không. Mỗi thuộc tính cũng chấp nhận các giá trị toàn CSS (CSS-wide values). Module CSS values and units định nghĩa các kiểu dữ liệu — giá trị và đơn vị — mà các thuộc tính CSS chấp nhận. Module này cũng định nghĩa cú pháp định nghĩa giá trị CSS, hay ngữ pháp hình thức, được dùng để định nghĩa tập hợp các giá trị hợp lệ cho mọi thuộc tính và hàm CSS.

CSS view transitions

Module CSS view transitions định nghĩa hành vi của View Transition API, cho phép các nhà phát triển tạo ra các hiệu ứng chuyển tiếp có animation giữa các trạng thái khác nhau trong một tài liệu và giữa các tài liệu. Module này cũng định nghĩa các thuộc tính CSS và pseudo-element để tạo kiểu cho các hiệu ứng chuyển tiếp này.

CSS viewport

Module CSS viewport cho phép chỉ định kích thước, hệ số thu phóng và hướng của khối chứa ban đầu của user-agent, hay còn gọi là viewport.

CSS writing modes

Module CSS writing modes định nghĩa hỗ trợ cho các chế độ viết quốc tế khác nhau và các tổ hợp của chúng, bao gồm thứ tự văn bản từ trái sang phải và từ phải sang trái cũng như hướng ngang và dọc.

CSSOM view

Module CSSOM view cho phép bạn thao tác với chế độ xem trực quan của tài liệu, bao gồm lấy vị trí của các layout boxes của phần tử, lấy chiều rộng hoặc chiều cao của viewport thông qua script, và cuộn phần tử.