1. Layout & Display
Quản lý cách phần tử hiển thị, chiếm chỗ, sắp xếp trên trang web.
| Thuộc tính | Mô tả |
|---|---|
display |
Xác định kiểu hiển thị của phần tử (block, inline, flex, grid, ...) |
position |
Định vị trí của phần tử (static, relative, absolute, fixed, sticky) |
top, right, bottom, left |
Xác định khoảng cách từ cạnh của phần tử tới container |
z-index |
Quyết định thứ tự chồng lớp của phần tử |
float |
Đẩy phần tử sang trái/phải để các phần tử khác bao quanh |
clear |
Xóa tác động của float |
overflow |
Xử lý khi nội dung vượt ra ngoài phần tử (hidden, scroll, auto) |
clip-path |
Cắt phần tử theo hình dạng tùy chỉnh |
visibility |
Hiển thị hoặc ẩn phần tử mà vẫn giữ chỗ |
2. Flexbox & Grid
Cung cấp hệ thống sắp xếp mạnh mẽ và linh hoạt.
| Thuộc tính | Mô tả |
|---|---|
flex-direction |
Xác định hướng chính của flex container |
flex-wrap |
Cho phép phần tử con xuống dòng khi tràn |
justify-content |
Căn chỉnh phần tử con theo trục chính |
align-items |
Căn chỉnh phần tử con theo trục chéo |
align-content |
Căn chỉnh nhiều hàng trong flex/grid |
grid-template-columns |
Định nghĩa số cột và kích thước trong grid |
grid-template-rows |
Định nghĩa số hàng và kích thước trong grid |
grid-gap / gap |
Khoảng cách giữa các ô trong grid/flex |
grid-area |
Xác định vị trí phần tử trong grid |
3. Box Model (Kích thước & Khoảng cách)
Điều chỉnh kích thước, viền, khoảng cách trong và ngoài phần tử.
| Thuộc tính | Mô tả |
|---|---|
width, height |
Chiều rộng và chiều cao phần tử |
min-width, max-width |
Giới hạn chiều rộng tối thiểu/tối đa |
min-height, max-height |
Giới hạn chiều cao tối thiểu/tối đa |
margin |
Khoảng cách bên ngoài phần tử |
padding |
Khoảng cách bên trong phần tử |
border |
Viền của phần tử |
border-radius |
Bo tròn góc phần tử |
box-sizing |
Quy định cách tính kích thước phần tử (content-box / border-box) |
box-shadow |
Đổ bóng cho phần tử |
4. Background & Color
Tùy chỉnh nền và màu sắc.
| Thuộc tính | Mô tả |
|---|---|
background-color |
Màu nền của phần tử |
background-image |
Ảnh nền của phần tử |
background-repeat |
Lặp lại ảnh nền |
background-size |
Kích thước ảnh nền |
background-position |
Vị trí hiển thị ảnh nền |
background-attachment |
Cuộn ảnh nền cùng trang hoặc cố định |
color |
Màu chữ trong phần tử |
opacity |
Độ trong suốt của phần tử |
5. Typography (Chữ & Văn bản)
Quản lý cách hiển thị văn bản.
| Thuộc tính | Mô tả |
|---|---|
font-family |
Chọn kiểu chữ |
font-size |
Kích thước chữ |
font-weight |
Độ đậm của chữ |
font-style |
Kiểu chữ (nghiêng, thường) |
line-height |
Khoảng cách giữa các dòng |
letter-spacing |
Khoảng cách giữa các ký tự |
text-align |
Căn chỉnh văn bản |
text-decoration |
Trang trí chữ (gạch chân, gạch ngang, ...) |
text-transform |
Biến đổi chữ (in hoa, thường) |
white-space |
Cách xử lý khoảng trắng |
word-break |
Cách chia từ khi xuống dòng |
6. Transforms & Animation
Tạo hiệu ứng động và biến đổi phần tử.
| Thuộc tính | Mô tả |
|---|---|
transform |
Biến đổi phần tử (rotate, scale, translate, ...) |
transform-origin |
Điểm gốc của phép biến đổi |
transition |
Hiệu ứng chuyển đổi thuộc tính |
transition-delay |
Thời gian trễ trước khi chuyển đổi |
transition-duration |
Thời gian hiệu ứng |
transition-property |
Thuộc tính áp dụng hiệu ứng |
animation |
Định nghĩa hiệu ứng animation |
animation-delay |
Thời gian trễ animation |
animation-duration |
Thời gian chạy animation |
animation-iteration-count |
Số lần lặp |
animation-timing-function |
Tốc độ animation |
7. Table Properties
Tùy chỉnh bảng HTML.
| Thuộc tính | Mô tả |
|---|---|
border-collapse |
Gộp hoặc tách đường viền bảng |
border-spacing |
Khoảng cách giữa ô |
caption-side |
Vị trí tiêu đề bảng |
empty-cells |
Hiển thị hoặc ẩn ô trống |
table-layout |
Cách sắp xếp ô bảng |
8. Miscellaneous (Khác)
Các thuộc tính tiện ích khác.
| Thuộc tính | Mô tả |
|---|---|
cursor |
Kiểu con trỏ khi di chuột |
pointer-events |
Điều khiển sự kiện chuột |
user-select |
Cho phép/bỏ chọn văn bản |
filter |
Hiệu ứng hình ảnh (blur, brightness, contrast, ...) |
resize |
Cho phép thay đổi kích thước phần tử |
will-change |
Tối ưu cho hiệu suất trước khi animation/transform |
content |
Sinh nội dung trong ::before hoặc ::after |
9. Multi-Column Layout
Dùng để chia nội dung văn bản thành nhiều cột, giống báo/magazine.
| Thuộc tính | Mô tả |
|---|---|
columns |
Thiết lập số lượng và chiều rộng cột |
column-count |
Số cột hiển thị |
column-width |
Chiều rộng của mỗi cột |
column-gap |
Khoảng cách giữa các cột |
column-rule |
Đường phân cách giữa các cột |
column-span |
Cho phép phần tử trải dài nhiều cột |
column-fill |
Cách chia nội dung khi không đầy cột |
10. Lists & Markers
Tùy chỉnh danh sách (<ul>, <ol>) và ký hiệu đánh dấu.
| Thuộc tính | Mô tả |
|---|---|
list-style |
Viết tắt cho kiểu danh sách |
list-style-type |
Kiểu ký hiệu (disc, decimal, circle, ...) |
list-style-image |
Dùng ảnh thay ký hiệu |
list-style-position |
Vị trí ký hiệu (inside, outside) |
marker |
Tùy chỉnh ký hiệu danh sách (CSS mới) |
11. Filters & Effects
Áp dụng hiệu ứng hình ảnh trực tiếp trên phần tử.
| Thuộc tính | Mô tả |
|---|---|
filter |
Áp dụng hiệu ứng (blur, brightness, contrast, drop-shadow, ...) |
backdrop-filter |
Hiệu ứng lên nền phía sau phần tử (thường dùng với glassmorphism) |
12. Masking & Clipping
Dùng để ẩn/hiển thị một phần phần tử theo hình dạng.
| Thuộc tính | Mô tả |
|---|---|
mask |
Viết tắt cho thuộc tính mặt nạ |
mask-image |
Ảnh mặt nạ |
mask-mode |
Chế độ hiển thị mặt nạ |
mask-repeat |
Cách lặp ảnh mặt nạ |
mask-position |
Vị trí ảnh mặt nạ |
mask-size |
Kích thước ảnh mặt nạ |
clip-path |
Cắt phần tử theo hình dạng vector (circle, polygon, …) |
13. Shapes & Flow
Tạo hình dạng để nội dung văn bản bao quanh.
| Thuộc tính | Mô tả |
|---|---|
shape-outside |
Xác định hình dạng bao quanh văn bản |
shape-margin |
Khoảng cách giữa văn bản và hình dạng |
shape-image-threshold |
Độ trong suốt dùng để tính hình dạng từ ảnh |
14. Scroll & Overflow Control
Điều khiển hành vi cuộn nội dung.
| Thuộc tính | Mô tả |
|---|---|
overflow-x / overflow-y |
Điều khiển cuộn theo trục X/Y |
scroll-behavior |
Kiểu cuộn (auto, smooth) |
scroll-snap-type |
Xác định cách cuộn “bắt dính” (snap) |
scroll-snap-align |
Vị trí phần tử khi cuộn dính |
scroll-padding |
Khoảng đệm trong khi cuộn dính |
scroll-margin |
Khoảng cách lề trong khi cuộn dính |
overscroll-behavior |
Điều khiển hành vi cuộn tràn (ngăn cuộn dây chuyền) |
15. Generated Content & Counters
Sinh nội dung động và đánh số tùy chỉnh.
| Thuộc tính | Mô tả |
|---|---|
content |
Sinh nội dung trong ::before, ::after |
counter-reset |
Khởi tạo bộ đếm |
counter-increment |
Tăng giá trị bộ đếm |
counter() |
Hàm chèn giá trị bộ đếm |
quotes |
Tùy chỉnh ký hiệu dấu ngoặc kép |
16. Accessibility & Interaction
Các thuộc tính giúp tăng tính tương tác và hỗ trợ truy cập.
| Thuộc tính | Mô tả |
|---|---|
caret-color |
Màu con trỏ văn bản |
accent-color |
Màu mặc định cho checkbox, radio, range, ... |
user-select |
Cho phép/bỏ chọn văn bản |
pointer-events |
Điều khiển sự kiện chuột |
touch-action |
Điều khiển thao tác chạm (zoom, pan, ...) |
cursor |
Thay đổi kiểu con trỏ chuột |
17. CSS Variables & Functions
Cho phép tái sử dụng giá trị và tính toán động trong CSS.
| Thuộc tính/Hàm | Mô tả |
|---|---|
--custom-property |
Khai báo biến CSS tùy chỉnh |
var(--name, fallback) |
Gọi giá trị của biến, có thể kèm giá trị dự phòng |
calc() |
Thực hiện phép tính toán học trong CSS (+, -, *, /) |
min() |
Lấy giá trị nhỏ nhất trong các tham số |
max() |
Lấy giá trị lớn nhất trong các tham số |
clamp(min, preferred, max) |
Giới hạn giá trị trong khoảng min–max, ưu tiên preferred |
attr() |
Lấy giá trị từ thuộc tính HTML (chủ yếu cho content) |
env() |
Truy xuất giá trị từ môi trường (ví dụ: safe-area-inset trên iOS) |
inherit |
Kế thừa giá trị từ phần tử cha |
initial |
Trả về giá trị mặc định của thuộc tính |
unset |
Hủy bỏ, trả về inherit hoặc initial tùy ngữ cảnh |
revert |
Trả về giá trị từ stylesheet gốc của user-agent hoặc user |
18. CSS Logical Properties
Thay thế các thuộc tính phụ thuộc hướng (left/right, top/bottom) để hỗ trợ đa ngôn ngữ (LTR, RTL).
| Thuộc tính | Thay thế cho | Mô tả |
|---|---|---|
margin-inline-start |
margin-left |
Khoảng cách lề đầu dòng (LTR = left, RTL = right) |
margin-inline-end |
margin-right |
Khoảng cách lề cuối dòng |
margin-block-start |
margin-top |
Khoảng cách lề phía trên khối |
margin-block-end |
margin-bottom |
Khoảng cách lề phía dưới khối |
padding-inline-start |
padding-left |
Khoảng cách trong đầu dòng |
padding-inline-end |
padding-right |
Khoảng cách trong cuối dòng |
padding-block-start |
padding-top |
Khoảng cách trong phía trên khối |
padding-block-end |
padding-bottom |
Khoảng cách trong phía dưới khối |
border-inline-start |
border-left |
Viền ở đầu dòng |
border-inline-end |
border-right |
Viền ở cuối dòng |
border-block-start |
border-top |
Viền phía trên khối |
border-block-end |
border-bottom |
Viền phía dưới khối |
inset-inline-start |
left |
Vị trí bắt đầu theo chiều ngang |
inset-inline-end |
right |
Vị trí kết thúc theo chiều ngang |
inset-block-start |
top |
Vị trí phía trên khối |
inset-block-end |
bottom |
Vị trí phía dưới khối |
✅ Kết luận
Việc nắm vững và sử dụng thành thạo các thuộc tính CSS là nền tảng quan trọng để xây dựng giao diện web đẹp, tối ưu trải nghiệm người dùng và thân thiện với SEO.
-
Nhóm Layout, Flexbox, Grid giúp bố cục trang gọn gàng, linh hoạt.
-
Nhóm Typography, Background, Box Model hỗ trợ tối ưu hiển thị nội dung.
-
Nhóm Animation, Transform, Effects mang lại trải nghiệm sinh động.
-
Các nhóm nâng cao như Logical Properties, Variables, Functions giúp code dễ bảo trì và hỗ trợ đa ngôn ngữ.
Phản hồi (0)