Các kiểu dữ liệu CSS

Các kiểu dữ liệu CSS định nghĩa các giá trị điển hình (bao gồm từ khóa và đơn vị) được chấp nhận bởi các thuộc tính và hàm CSS. Chúng là một loại đặc biệt của kiểu giá trị thành phần.

Các kiểu được dùng phổ biến nhất được định nghĩa trong module CSS Values and Units. Module này cũng định nghĩa ký hiệu hàm, cho phép các kiểu hoặc phép xử lý phức tạp hơn. Các kiểu khác được định nghĩa trong các thông số kỹ thuật mà chúng áp dụng.

Dưới đây là tài liệu tham khảo về các kiểu bạn có khả năng gặp nhất, nhưng đây không phải là tài liệu tham khảo toàn diện cho tất cả các kiểu được định nghĩa trong mọi thông số kỹ thuật CSS.

Cú pháp

Trong cú pháp CSS chính thức, các kiểu dữ liệu được biểu thị bằng một từ khóa đặt giữa dấu ngoặc nhọn < và >. Chúng không tương ứng với bất kỳ thực thể mã CSS nào có thể chạm vào được.

Kiểu dữ liệu văn bản

Các kiểu này bao gồm từ khóa và định danh cũng như chuỗi và URL.

Từ khóa định nghĩa sẵn

Các từ khóa có nghĩa được định nghĩa trước, ví dụ như giá trị collapse cho thuộc tính border-collapse.

Từ khóa CSS toàn cục

Tất cả các thuộc tính, bao gồm thuộc tính tùy chỉnh, đều chấp nhận các từ khóa CSS toàn cục:

initial: Giá trị được chỉ định là giá trị ban đầu của thuộc tính.
inherit: Giá trị tính toán của thuộc tính trên phần tử cha.
revert: Khôi phục tầng xếp về giá trị của nguồn gốc trước đó.
revert-layer: Khôi phục tầng xếp về giá trị của tầng xếp trước đó.
unset: Hoạt động như inherit hoặc initial tùy thuộc vào việc thuộc tính có được kế thừa hay không.

<custom-ident>

Một định danh do người dùng định nghĩa, ví dụ như tên được gán bằng thuộc tính grid-area.

<dashed-ident>

Một <custom-ident> với yêu cầu bổ sung là phải bắt đầu bằng hai dấu gạch ngang, ví dụ như với Thuộc tính tùy chỉnh CSS.

<string>

Một chuỗi được trích dẫn, chẳng hạn như được dùng cho giá trị của thuộc tính content.

<url>

Một con trỏ đến một tài nguyên, ví dụ như giá trị của background-image.

Kiểu dữ liệu số

Các kiểu dữ liệu này được dùng để chỉ định số lượng, chỉ số và vị trí. Hầu hết các kiểu này được định nghĩa trong module giá trị và đơn vị CSS, tuy nhiên các kiểu bổ sung được mô tả trong các module khác khi chúng chỉ áp dụng cho thông số kỹ thuật đó — ví dụ như đơn vị fr trong module bố cục lưới CSS.

<integer>: Một hoặc nhiều chữ số thập phân từ 0 đến 9, tùy chọn đứng trước bởi - hoặc +.
<number>: Số thực có thể có thành phần thập phân, ví dụ 1 hoặc 1.34.
<dimension>: Một số với đơn vị đi kèm, ví dụ 90deg, 50ms, hoặc 15em. Kiểu này bao gồm khoảng cách (<length>), thời lượng (<time>), tần số (<frequency>), độ phân giải (<resolution>) và các đại lượng khác.
<percentage>: Một số với dấu phần trăm đi kèm, ví dụ 10%.
<ratio>: Một tỉ lệ, được viết theo cú pháp <number> / <number>.
<flex>: Độ dài linh hoạt được giới thiệu cho bố cục lưới CSS, được viết là <number> với đơn vị fr đi kèm và được dùng để xác định kích thước đường ray lưới.

Đại lượng

Các kiểu <dimension> này được dùng để chỉ định khoảng cách và các đại lượng khác.

<length>: Độ dài là một <dimension> và biểu thị khoảng cách.
<angle>: Góc được dùng trong các thuộc tính như linear-gradient() và là một <dimension> với một trong các đơn vị deg, grad, rad, hoặc turn đi kèm.
<time>: Đơn vị thời lượng là một <dimension> với đơn vị s hoặc ms.
<frequency>: Tần số là một <dimension> với đơn vị Hz hoặc kHz đi kèm.
<resolution>: Là một <dimension> với định danh đơn vị dpi, dpcm, dppx, hoặc x.

Kết hợp các kiểu

Một số thuộc tính CSS có thể nhận giá trị <dimension> hoặc <percentage>. Trong trường hợp này, giá trị phần trăm sẽ được giải quyết thành đại lượng khớp với kích thước được phép. Các thuộc tính có thể chấp nhận phần trăm ngoài kích thước sẽ dùng một trong các kiểu được liệt kê dưới đây.

<length-percentage>: Một kiểu có thể chấp nhận độ dài hoặc phần trăm làm giá trị.
<frequency-percentage>: Một kiểu có thể chấp nhận tần số hoặc phần trăm làm giá trị.
<angle-percentage>: Một kiểu có thể chấp nhận góc hoặc phần trăm làm giá trị.
<time-percentage>: Một kiểu có thể chấp nhận thời gian hoặc phần trăm làm giá trị.

Màu sắc

Module màu sắc CSS định nghĩa kiểu dữ liệu <color> và các kiểu khác liên quan đến màu sắc trong CSS.

<color>: Được chỉ định dưới dạng từ khóa hoặc giá trị màu số.
<alpha-value>: Chỉ định độ trong suốt của màu. Có thể là <number>, trong đó 0 là hoàn toàn trong suốt và 1 là hoàn toàn không trong suốt, hoặc là <percentage>, trong đó 0% là hoàn toàn trong suốt và 100% là hoàn toàn không trong suốt.
<hue>: Chỉ định <angle> với định danh đơn vị deg, grad, rad, hoặc turn, hoặc <number> không đơn vị được hiểu là deg, của vòng tròn màu đặc trưng cho <absolute-color-functions> mà nó là thành phần.

Hình ảnh

Module hình ảnh CSS định nghĩa các kiểu dữ liệu xử lý hình ảnh, bao gồm gradient.

<image>: Một tham chiếu URL đến hình ảnh hoặc gradient màu.
<color-stop-list>: Danh sách gồm hai hoặc nhiều điểm dừng màu với thông tin chuyển tiếp tùy chọn bằng gợi ý màu.
<linear-color-stop>: Một <color> và một <length-percentage> để chỉ định điểm dừng màu cho phần này của gradient.
<linear-color-hint>: Một <length-percentage> để chỉ định cách màu nội suy.
<ending-shape>: Được dùng cho gradient hướng tâm; có thể có giá trị từ khóa circle hoặc ellipse.
<size>: Xác định kích thước hình kết thúc của gradient hướng tâm. Chấp nhận giá trị từ khóa hoặc <length> nhưng không phải phần trăm.

Định vị 2D

Kiểu dữ liệu <position> được hiểu như được định nghĩa cho thuộc tính <background-position>.

<position>: Định nghĩa vị trí của một vùng đối tượng. Chấp nhận giá trị từ khóa như top hoặc left, hoặc <length-percentage>.

Kiểu dữ liệu tính toán

Các kiểu dữ liệu này được dùng trong các phép tính hàm toán học CSS.

<calc-sum>: Một phép tính là chuỗi các giá trị tính toán xen kẽ với các toán tử cộng (+) và trừ (-). Kiểu dữ liệu này yêu cầu cả hai giá trị đều có đơn vị.
<calc-product>: Một phép tính là chuỗi các giá trị tính toán xen kẽ với các toán tử nhân (*) và chia (/). Khi nhân, một giá trị phải không có đơn vị. Khi chia, giá trị thứ hai phải không có đơn vị.
<calc-value>: Định nghĩa các giá trị được chấp nhận trong phép tính, chẳng hạn như <number>, <dimension>, <percentage>, <calc-keyword> hoặc các phép tính <calc-sum> lồng nhau.
<calc-keyword>: Định nghĩa một số từ khóa CSS biểu diễn các hằng số số như e và π, có thể được dùng trong các hàm toán học CSS.

Kiểu dữ liệu hình dạng

Các module hình dạng CSS và đường viền và trang trí hộp CSS định nghĩa các kiểu dữ liệu hình dạng:

<basic-shape>: Mô tả các hàm hình dạng được dùng trong các thuộc tính clip-path, shape-outside, và offset-path.
<corner-shape-value>: Mô tả hình dạng của góc container. Được dùng bởi thuộc tính viết tắt corner-shape và các thuộc tính cấu thành của nó để chỉ định hình dạng áp dụng cho các góc container bị ảnh hưởng.

Chỉ mục bảng chữ cái các kiểu dữ liệu

Thông số kỹ thuật

Specification
CSS Values and Units Module Level 4

Help improve MDN

Learn how to contribute

This page was last modified on Jan 1, 1970 by MDN contributors.

View this page on GitHub • Report a problem with this content