Đây là bảng tóm tắt tất cả các thuộc tính được sử dụng trong CSS. Sẽ rất cần thiết cho bạn tham khảo, tra cứu khi sử dụng CSS. Chi tiết từng thuộc tính sẽ giới thiệu ở từng bài riêng.
Cột “CSS” chỉ ra phiên bản CSS mà thuộc tính đó được sử dụng( CSS1, CSS2 hoặc CSS3).
Chức ănng thiết lập các thuộc tính màu nền và đường biên cho các đối tượng trên trang.
Thuộc tính | Mô tả | CSS |
---|
background
| Một thuộc tính viết tắt để đặt thuộc tính nền trong lời khai báo
| 1
|
background-attachment
| Đặt một ảnh nền để cố định hoặc cuộn với phần còn lại của trang
| 1
|
background-blend-mode
| Chỉ định các chế độ trộn của mỗi lớp nền(màu sắc/hình ảnh)
| 3
|
background-color
| Chỉ định màu nền của một phần tử
| 1
|
background-image
| Chỉ định một hoặc nhiều hình ảnh nền cho một phần tử
| 1
|
background-position
| Chỉ định vị trí của hình ảnh nền
| 1
|
background-repeat
| Thiết lập như thế nào một ảnh nền sẽ được lặp đi lặp lại
| 1
|
background-clip
| Chỉ định khu vực để sơn màu nền
| 3
|
background-origin
| Chỉ định nơi các hình nền được định vị
| 3
|
background-size
| Chỉ định kích thước của ảnh nền
| 3
|
border
| Thiết lập tất cả các thuộc tính đường viền trong lời khai báo
| 1
|
border-bottom
| Thiết lập tất cả các thuộc tính đường viền dưới trong lời khai báo
| 1
|
border-bottom-color
| Thiết lập màu của đường viền dưới
| 1
|
border-bottom-left-radius
| Xác định hình dạng của các đường viền góc dưới bên trái
| 3
|
border-bottom-right-radius
| Xác định hình dạng của các đường viền góc dưới bên phải
| 3
|
border-bottom-style
| Thiết lập kiểu (style) của đường viền dưới
| 1
|
border-bottom-width
| Thiết lập độ rộng của đường viền dưới
| 1
|
border-color
| Thiết lập màu sắc của bốn đường viền
| 1
|
border-image
| Một thuộc tính viết tắt để thiết lập tất cả các thuộc tính border-image-*
| 3
|
border-image-outset
| Chỉ định giá trị khu vực ảnh viền vượt ra ngoài vùng giới hạn của vùng bao
| 3
|
border-image-repeat
| Chỉ định ảnh viền nên được lặp đi lặp lại, tròn hoặc kéo dài
| 3
|
border-image-slice
| Chỉ định cụ thể như thế nào để cắt ảnh viền
| 3
|
border-image-source
| Chỉ định đường dẫn tới hình ảnh để sử dụng như đường viền
| 3
|
border-image-width
| Chỉ định độ rộng của ảnh-viền
| 3
|
border-left
| Thiết lập tất cả thuộc tính đường viền trái trong lời khai báo
| 1
|
border-left-color
| Thiết lập màu sắc của đường viền trái
| 1
|
border-left-style
| Thiết lập kiểu ( style) của đường viền trái
| 1
|
border-left-width
| Thiết lập độ rộng của đường viền trái
| 1
|
border-radius
| Thuộc tính viết tắt để thiết lập tất cả bốn đường viền-*-thuộc tính radius(bán kính)
| 3
|
border-right
| Thiết lập thuộc tính đường viền phải trong lời khai báo
| 1
|
border-right-color
| Thiết lập màu sắc cho đường viền phải
| 1
|
border-right-style
| Thiết lập kiểu (style) cho đường viền phải
| 1
|
border-right-width
| Thiết lập độ rộng cho đường viền phải
| 1
|
border-style
| Thiết lập kiểu (style) cho bốn đường viền
| 1
|
border-top
| Thiết lập thuộc tính đường viền trên trong lời khai báo
| 1
|
border-top-color
| Thiết lập màu sắc cho đường viền trên
| 1
|
border-top-left-radius
| Xác định hình dạng của đường viền góc trên bên trái
| 3
|
border-top-right-radius
| Xác định hình dạng của đường viền góc trên bên phải
| 3
|
border-top-style
| Thiết lập kiểu (style) cho đường viền trên
| 1
|
border-top-width
| Thiết lập độ rộng của đường viền trên
| 1
|
border-width
| Thiết lập độ rộng của bốn đường viền
| 1
|
box-decoration-break
| Thiết lập dáng vẻ của hình nền và đường viền của một phần tử tại trang ngắt, hoặc đối với phần tử in-line , tại dòng ngắt.
| 3
|
box-shadow
| Gắn một hoặc nhiều đổ bóng (drop-shadows) vào hộp
| 3
|
Thuộc tính | Mô tả | CSS |
---|
bottom
| Xác định vị trí cuối của phần tử position (vị trí)
| 2
|
clear
| Xác định hai bên của phần tử (left,right) nơi mà phần tử float không được cho phép (ngăn cản thành phần không được float trái, phải hay cả hai)
| 1
|
clip
| Xác định đoạn cho phần tử khi sử dụng thuộc tính position có giá trị “absolute“
| 2
|
display
| Chỉ định làm thế nào một phần tử HTML nào đó sẽ được hiển thị
| 1
|
float
| Xác định có hay không một box được float(trôi nổi)
| 1
|
height
| Thiết lập chiều cao của thành phần
| 1
|
left
| Xác định vị trí bên trái của phần tử position
| 2
|
margin
| Thiết lập thuộc tính margin (căn lề cho phần tử) trong một thông báo
| 1
|
margin-bottom
| Thiết lập lề dưới của một phần tử
| 1
|
margin-left
| Thiết lập lề trái của một phần tử
| 1
|
margin-right
| Thiết lập lề phải của một phần tử
| 1
|
margin-top
| Thiết lập lề trên của một phần tử
| 1
|
max-height
| Thiết lập chiều cao tối đa của một phần tử
| 2
|
max-width
| Thiết lập chiều rộng tối đa của một phần tử
| 2
|
min-height
| Thiết lập chiều cao tối thiểu của một phần tử
| 2
|
min-width
| Thiết lập chiều rộng tối thiểu của một phần tử
| 2
|
overflow
| Chỉ định những gì sẽ xảy ra nếu nội dung tràn ra ngoài phần tử hộp
| 2
|
overflow-x
| Xác định có hay không để cắt cạnh trái/phải của đoạn văn bản, nếu nó tràn ra khỏi khu vực nội dung của phần tử
| 3
|
overflow-y
| Xác định có hay không để cắt cạnh trên /dưới của đoạn văn bản, nếu nó tràn ra khỏi khu vực nội dung của phần tử
| 3
|
padding
| Thiết lập lại thuộc tính padding (vùng đệm) trong lời khai báo
| 1
|
padding-bottom
| Thiết lập vùng đệm dưới của phần tử
| 1
|
padding-left
| Thiết lập vùng đệm trái của một phần tử
| 1
|
padding-right
| Thiết lập vùng đệm phải của một phần tử
| 1
|
padding-top
| Thiết lập vùng đệm trên của một phần tử
| 1
|
position
| Xác định kiểu của phương thức định vị được sử dụng cho một phần tử (static, relative, absolute or fixed)
| 2
|
right
| Xác định vị trí phải của phần tử position
| 2
|
top
| Xác định vị trí trên của phần tử position
| 2
|
visibility
| Xác định có hay không một phần tử có thể nhìn thấy được
| 2
|
width
| Thiết lập độ rộng của phần tử
| 1
|
vertical-align
| Sắp xếp nội dung theo chiều dọc của phần tử
| 1
|
z-index
| Thiết lập thứ tự xếp chồng nhau của phần tử position
| 2
|
Thuộc tính | Mô tả | CSS |
---|
align-content
| Xác định sự căn chỉnh giữa các dòng bên trong một khối linh hoạt ( flexible container) khi các mục không sử dụng các khoảng cách có sẵn
| 3
|
align-items
| Xác định sự căn chỉnh cho các mục bên trong một khối linh hoạt ( flexible container)
| 3
|
align-self
| Xác định sự căn chỉnh cho các mục được chọn bên trong một khối linh hoạt ( flexible container)
| 3
|
flex
| Xác định độ dài của các mục, tương đối với phần còn lại
| 3
|
flex-basis
| Xác định độ dài ban đầu của một mục linh hoạt (flexible item)
| 3
|
flex-direction
| Xác định hướng của các mục linh hoạt (flexible items)
| 3
|
flex-flow
| Một thuộc tính viết tắt cho thuộc tính flex-direction và flex-wrap
| 3
|
flex-grow
| Chỉ định bao nhiêu mục sẽ tăng tương đối so với phần còn lại
| 3
|
flex-shrink
| Chỉ định bao nhiêu mục sẽ giảm tương đối so với phần còn lại
| 3
|
flex-wrap
| Chỉ định liệu các mục linh hoạt (flexible items) nên bọc hay không
| 3
|
justify-content
| Xác định sự căn chỉnh giữa các mục bên trong một khối linh hoạt (flexible container) khi các mục không sử dụng tất cả các khoảng cách có sẵn
| 3
|
order
| Thiết lập thứ tự của các mục linh hoạt (flexible items), tương đối so với phần còn lại
| 3
|
Thuộc tính | Mô tả | CSS |
---|
hanging-punctuation
| Xác định ký tự chấm câu có thể được đặt ở ngoài đường hộp
| 3
|
hyphens
| Thiết lập làm thế nào tách từ để cải thiện cách bố trí của đoạn văn
| 3
|
letter-spacing
| Tăng hoặc giảm khoảng cách giữa các ký tự trong một văn bản
| 1
|
line-break
| Xác định cách ngắt dòng
| 3
|
line-height
| Thiết lập chiều cao của dòng
| 1
|
overflow-wrap
| Xác định có hay không trình duyệt có thể ngắt dòng trong các từ để ngăn cản việc tràn (Khi một chuỗi quá dài để phù hợp với hộp chứa nó
| 3
|
tab-size
| Xác định chiều dài của các kí tự tab
| 3
|
text-align
| Xác định căn chỉnh nội dung theo chiều ngang
| 1
|
text-align-last
| Mô tả cách dòng cuối cùng của mộtđoạn hoặc một dòng ngay trước khi một ngắt dòng là căn chỉnh khi text-align là “justify”
| 3
|
text-combine-upright
| Xác định sự kết hợp của đa ký tự vào khoảng cách của một ký tự đơn
| 3
|
text-indent
| Xác định rõ sự thụt dòng đầu tiên trong một khối văn bản
| 1
|
text-justify
| Xác định phương pháp căn lề thẳng hàng hai bên sử dụng khi text-align là “justify”
| 3
|
text-transform
| Điều khiển các chữ in hoa
| 1
|
white-space
| Xác định cách mà khoảng trắng bên trong một phần tử được xử lý
| 1
|
word-break
| Xác định quy tắc ngắt dòng đối với scripts non-CJK
| 3
|
word-spacing
| Tăng hoặc giảm khoảng cách giữa các từ trong đoạn văn
| 1
|
word-wrap
| Cho phép dài, những từ dài được xuống hàng mà không làm vỡ layout
| 3
|
Thuộc tính | Mô tả | CSS |
---|
@font-face
| Một quy tắc cho phép các trang web tải và sử dụng các phông chữ khác với phông chữ “web-safe”
| 3
|
@font-feature-values
| Cho phép tác giả sử dụng một tên chung trong font-variant-alternate đối với tính năng kích hoạt khác nhau trong OpenType
| 3
|
font
| Đặt tất cả các thuộc tính font trong lời khai báo
| 1
|
font-family
| Xác định họ phông chữ cho văn bản
| 1
|
font-feature-settings
| Cho phép kiểm soát các tính năng về in tiên tiến trong OpenType fonts
| 3
|
font-kerning
| Kiểm soát việc sử dụng các thông tin kerning (cách các từ cách nhau)
| 3
|
font-language-override
| Kiểm soát việc sử dụng của ngôn ngữ cụ thể nét trạm (language-specific glyphs) trong kiểu chữ
| 3
|
font-size
| Xác định kích thước phông chữ của đoạn văn
| 1
|
font-size-adjust
| Duy trì khả năng đọc văn bản khi phông chữ dự phòng xuất hiện
| 3
|
font-stretch
| Chọn kiểu normal, condensed,hoặc expanded từ họ phông chữ
| 3
|
font-style
| Xác định kiểu chữ cho văn bản
| 1
|
font-synthesis
| Quản lí các kiểu chữ (đậm hoặc nghiêng) có thể được tổng hợp bởi trình duyệt
| 3
|
font-variant
| Xác định có hay không một văn bản được hiển thị với phông chữ small-caps
| 1
|
font-variant-alternates
| Kiểm soát việc sử dụng các nét chạm thay thế liên quan đến việc thay tên được định nghĩa trong @font-feature-values
| 3
|
font-variant-caps
| Kiểm soát việc sử dụng nét chạm (glyph)thay thế cho chữ in hoa
| 3
|
font-variant-east-asian
| Kiểm soát việc sử dụng nét chạm (glyph ) thay thế cho các kịch bản Đông Á (ví dụ như Trung Quốc và Nhật Bản)
| 3
|
font-variant-ligatures
| Kiểm soát các chữ ghép và các biểu mẫu theo ngữ cảnh được sử dụng trong các nội dung văn bản của phần tử mà nó được áp dụng
| 3
|
font-variant-numeric
| Kiểm soát việc sử dụng các họa tiết (glyph) thay thế cho số, phân số và đánh dấu thứ tự
| 3
|
font-variant-position
| Kiểm soát việc sử dụng các họa tiết thay thế kích thước nhỏ hơn vị trí như là chỉ số trên hoặc chỉ số dưới về đường cơ sở của các phông chữ
| 3
|
font-weight
| Xác định độ đậm của phông chữ
| 1
|
Thuộc tính | Mô tả | CSS |
---|
@keyframes
| Xác định mã animation
| 3
|
animation
| Một thuộc tính viết tắt cho các thuộc tính animation (ngoại trừ animation-play-state và animation-fill-mode)
| 3
|
animation-delay
| Xác định sự chậm trễ đối với sự bắt đầu của một chuyển động của hình ảnh hoặc tag (animation)
| 3
|
animation-direction
| Xác định có hay không các chuyển động nên chạy ngược lại trên chu kỳ thay thế
| 3
|
animation-duration
| Xác định có bao nhiêu giây hoặc mili giây một chuyển động cần để hoàn thành một chu kỳ
| 3
|
animation-fill-mode
| Xác định kiểu cho các phần tử khi các chuyển động không chạy (Khi nó dừng lại , hoặc khi nó bị trễ)
| 3
|
animation-iteration-count
| Xác định số lần một chuyển động được thực hiện
| 3
|
animation-name
| Xác định tên của @keyframes animation
| 3
|
animation-play-state
| Xác định xem các chuyển động đang được chạy hay tạm dừng
| 3
|
animation-timing-function
| Xác định tốc độ cong của một chuyển động của hình ảnh hoặc tag
| 3
|
Thuộc tính | Mo tả | CSS |
---|
box-sizing
| Báo cho trình duyệt các thuộc tính sizing (độ rộng và độ cao) nên có
| 3
|
content
| Sử dụng với :before và :after pseudo-elements, để chèn nội dung được tạo ra
| 2
|
cursor
| Xác định kiểu con trỏ chuột sẽ được hiển thị khi di chuyển vào phần tử nào đó
| 2
|
ime-mode
| Điều khiển trạng thái của trình soạn thảo phương thức nhập cho trường văn bản
| 3
|
nav-down
| Xác định nơi để di chuyển khi sử dụng phím mũi tên xuống
| 3
|
nav-index
| Xác định thứ tự tab của phần tử
| 3
|
nav-left
| Xác định nơi để di chuyển khi sử dụng phím mũi tên sang trái
| 3
|
nav-right
| Xác định nơi để di chuyển khi sử dụng phím mũi tên sang phải
| 3
|
nav-up
| Xác định nơi để di chuyển khi sử dụng phím mũi tên lên
| 3
|
outline
| Thiết lập thuộc tính đường viền trong lời khai báo
| 2
|
outline-color
| Đặt màu sắc của đường viền bao ngoài
| 2
|
outline-offset
| Đệm đường viền bao ngoài, và rút nó ra bên ngoài cạnh đường viền (border)
| 3
|
outline-style
| Thiết lập kiểu của đường viền bao ngoài
| 2
|
outline-width
| Thiết lập độ rộng của đường viền bao ngoài
| 2
|
resize
| Xác định có hay không một phần tử là thay đổi kích thước bởi người dùng
| 3
|
text-overflow
| Xác định các vấn đề khi văn bản tràn khỏi các phần tử container
| 3
|
Thuộc tính | Mô tả | CSS |
---|
break-after
| Xác định cách xử lý ngắt trang, ngắt cột hoặc ngắt đoạn sau khi tạo hộp
| 3
|
break-before
| Xác định cách xử lý ngắt trang, ngắt cột hoặc ngắt đoạn trước khi tạo hộp
| 3
|
break-inside
| Xác định cách xử lý ngắt trang, ngắt cột hoặc ngắt đoạn bên trong hộp được tạo ra
| 3
|
column-count
| Xác định số cột phần tử nên được chia thành
| 3
|
column-fill
| Xác định như thế nào để điền vào cột
| 3
|
column-gap
| Xác định khoảng cách giữa các cột
| 3
|
column-rule
| Một thuộc tính viết tắt để thiết lập thuộc tính column-rule-* cho các đường kẻ giữa các cột
| 3
|
column-rule-color
| Xác định màu sắc của các đường kẻ giữa các cột
| 3
|
column-rule-style
| Xác định kiểu của các đường kẻ giữa các cột
| 3
|
column-rule-width
| Xác định độ rộng của các đường kẻ giữa các cột
| 3
|
column-span
| Xác định có bao nhiêu cột chứa phần tử được trải dài
| 3
|
column-width
| Xác định độ rộng của cột
| 3
|
columns
| Một thuộc tính viết tắt để thiết lập độ rộng cột (column-width) và số cột (column-count)
| 3
|
widows
| Xác định số dòng tối thiểu phải còn lại trên một trang khi ngắt trang xảy ra bên trong phần tử
| 2
|
Thuộc tính | Mô tả | CSS |
---|
mark
| Một thuộc tính viết tắt để thiết lập thuộc tính mark-before và mark-after
| 3
|
mark-after
| Cho phép đánh dấu tên được gắn liền với những dòng âm thanh
| 3
|
mark-before
| Cho phép đánh dấu tên được gắn liền với những dòng âm thanh
| 3
|
phonemes
| xác định cách phát âm cho các văn bản chứa các phần tử tương ứng
| 3
|
rest
| Một thuộc tính viết tắt để thiết lập thuộc tính the rest-before và rest-after
| 3
|
rest-after
| Xác định phần còn lại hoặc ranh giới điệu tính được quan sát sau khi nói phần tử nội dung
| 3
|
rest-before
| Xác định phần còn lại hoặc ranh giới điệu tính để quan sát trước khi nói phần tử nội dung
| 3
|
voice-balance
| Xác định sự cân bằng giữa các kênh trái và phải
| 3
|
voice-duration
| Xác định nó phải mất bao lâu để trả lại các lựa chọn phần tử nội dung
| 3
|
voice-pitch
| Xác định mức độ trung bình (tần số) của giọng nói
| 3
|
voice-pitch-range
| Xác định sự thay đổi của tần số
| 3
|
voice-rate
| Điều khiển tốc độ nói
| 3
|
voice-stress
| Chỉ ra cường độ của sự nhấn mạnh được áp dụng
| 3
|
voice-volume
| Đề cập đến biên độ của dạng sóng đầu ra của các bài phát biểu
| 3
|