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.
Note: Trang này giới thiệu một module CSS. Để tìm danh sách đầy đủ tất cả các giá trị, kiểu và hàm được định nghĩa bởi các đặc tả CSS, xem trang tham khảo values.
Tham khảo
Thuộc tính
Hàm
abs()acos()asin()atan()atan2()attr()calc()calc-size()clamp()cos()exp()hypot()<ident()>if()inherit()log()max()min()mod()pow()progress()random()rem()round()sibling-count()sibling-index()sign()sin()sqrt()tan()url()
Module CSS values and units cũng giới thiệu các hàm calc-mix(), first-valid(), integrity(), random-item(), src(), type() và toggle(). Hiện tại, chưa có trình duyệt nào hỗ trợ các tính năng này.
Kiểu dữ liệu
<angle-percentage><angle><attr-name><attr-type><calc-keyword>(e,pi,infinity, NaN)<calc-size-basis><calc-sum><custom-ident><dashed-ident><dimension><easing-function><ident><integer><length-percentage><length><number><percentage><position><ratio><resolution><rounding-strategy>(down,up,to-zero)<string><syntax><time-percentage><time><url><url-modifier>
Module CSS values and units cũng giới thiệu các kiểu dữ liệu <frequency> và <frequency-percentage>. Hiện tại, chưa có trình duyệt nào hỗ trợ các tính năng này.
Đơn vị
%(percentage)capchcmdegdpcmdpidppxdvbdvhdvidvmaxdvmindvwemexgradHzicinkHzlhlvblvhlvilvmaxlvminlvwmmmspcptpxQradrcaprchremrexricrlhssvbsvhsvisvmaxsvminsvwturnvbvhvivmaxvminvwx
Flex units (fr) và container units (cqb, cqh, cqi, cqmax, cqmin, cqw) được định nghĩa trong các module CSS grid layout và CSS conditional rules tương ứng.
Phân loại đơn vị
- Đơn vị độ dài tuyệt đối (
cm,in,mm,pc,pt,px,Q) - Đơn vị góc (
deg,grad,rad,turn) - Đơn vị viewport mặc định (
vb,vh,vi,vmax,vmin,vw) - Đơn vị viewport động (
dvb,dvh,dvi,dvmax,dvmin,dvw) - Đơn vị tần số (
Hz,kHz) - Đơn vị viewport lớn (
lvb,lvh,lvi,lvmax,lvmin,lvw) - Đơn vị độ dài tương đối theo font cục bộ (
cap,ch,em,ex,ic,lh) - Đơn vị vật lý (
cm,in,mm,pc,pt,Q) - Đơn vị độ dài tương đối (
cap,ch,em,ex,ic,lh,rem,rlh,vb,vh,vi,vmax,vmin,vw) - Đơn vị độ phân giải (
dpcm,dpi,dppx,x) - Đơn vị độ dài tương đối theo font gốc (
rcap,rch,rem,rex,ric,rlh) - Đơn vị viewport nhỏ (
svb,svh,svi,svmax,svmin,svw) - Đơn vị thời gian (
ms,s) - Đơn vị viewport (
dvh,dvw,lvh,lvw,svh,svw,vb,vh,vi,vmax,vmin,vw) - Đơn vị góc nhìn (
px)
Khái niệm chính
Hướng dẫn
- Kiểu dữ liệu CSS
-
Giới thiệu các kiểu dữ liệu CSS định nghĩa các giá trị điển hình được chấp nhận bởi các thuộc tính và hàm CSS.
- Kiểu dữ liệu số
-
Tổng quan về các kiểu dữ liệu số, bao gồm integers, numbers, percentages và dimensions, cùng với các dimensions tương đối và tuyệt đối, đơn vị góc và đơn vị thời gian.
- Kiểu dữ liệu văn bản
-
Tổng quan về các kiểu dữ liệu văn bản, bao gồm các giá trị từ khóa được định nghĩa sẵn, các giá trị từ khóa CSS toàn cầu và URL.
- Hàm giá trị CSS
-
Tổng quan về các câu lệnh CSS gọi xử lý dữ liệu hoặc tính toán đặc biệt để trả về giá trị CSS cho một thuộc tính CSS.
- Sử dụng hàm toán học CSS
-
Các hàm toán học CSS cho phép viết giá trị thuộc tính dưới dạng biểu thức toán học.
- Cú pháp định nghĩa giá trị
-
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 các thuộc tính và hàm CSS.
- Sử dụng phép tính kiểu đánh máy CSS
-
Giải thích hành vi phép tính kiểu đánh máy CSS và các trường hợp sử dụng được kích hoạt bởi nó.
- Học: Values and units
-
Tìm hiểu một số kiểu giá trị được sử dụng thường xuyên nhất, chúng là gì và cách hoạt động.
- Tuần tự hóa giá trị CSS
-
Cách CSSOM APIs tuần tự hóa màu sắc và các giá trị khác thành các biểu diễn chuỗi chuẩn hóa.
Liên quan
-
Module CSS grid layout
<flex>- Flex units (
fr)
-
Module CSS conditional rules
- Container units (
cqb,cqh,cqi,cqmax,cqmin,cqw)
- Container units (
-
Module CSS colors
-
Module CSS images
Đặc tả kỹ thuật
| Specification |
|---|
| CSS Values and Units Module Level 3 |
| CSS Values and Units Module Level 4 |
| CSS Values and Units Module Level 5 |
Xem thêm
- Module CSS syntax
- Module CSS selectors