Trong chương này, mình sẽ liệt kê hầu như tất cả các thuộc tính trong CSS để giúp bạn tiện tìm kiếm và tham khảo. Trong List dưới đây, mình tổng hợp và phân loại các thuộc tính liên quan với nhau thành một nhóm để bạn tiện theo dõi.
Thuộc tính thường sử dụng trong CSS và CSS3
Thuộc tính CSS
| Thuộc tính | Ví dụ | Mô tả |
|---|---|---|
| background | background: #ff0000; | Định dạng nền (background) cho thành phần. |
| border | border: 1px solid #ff0000; | Định dạng đường viền cho thành phần. |
| border-collapse | border-collapse: collapse; | Thuộc tính border-collapse xác định đường viền của table có tách biệt ra hay không. |
| border-spacing | border-spacing: 10px; | Xác định khoảng cách giữa các đường viền của các cột lân cận. |
| bottom | bottom: 10px; | Xác định vị trí dưới cùng của thành phần được định vị trí. |
| caption-side | caption-side: bottom; | Xác định vị trí một chú thích của table. |
| clear | clear: both; | Xác định 2 bên của phần tử (left, right), nơi mà phần tử float không được cho phép. |
| clip | clip: rect(0,0,50px,10px); | Xác định đoạn cho thành phần khi sử dụng thuộc tính position có giá trị "absolute". |
| color | color: #ff0000; | Xác định màu sắc cho text. |
| content | content: "." | Sử dụng kèm với bộ chọn ":before", ":after" để chèn nội dung được tạo. |
| counter-increment | counter-increment: section; | Gia tăng một hoặc nhiều counter (sắp xếp có thứ tự, có hiển thị số) |
| counter-reset | counter-reset: subsection; | Tạo hoặc reset một hoặc nhiều counter. |
| cursor | cursor: pointer; | Xác định kiểu con trỏ chuột được hiển thị. |
| direction | direction: ltr; | Xác định hướng cho văn bản. |
| display | display: inline; | Xác định loại hiển thị của thành phần. |
| empty-cells | empty-cells: hide; | Xác định có hay không có đường viền và nền trong một cột rỗng của table |
| float | float: left; | Xác định có hay không một thành phần được float. |
| font | font: 12px arial,sans-serif; | Thiết lập font cho thành phần, bao gồm font chữ, độ rộng, ... |
| height | height: 50px; | Thiết lập chiều cao của thành phần. |
| left | left: 10px; | Xác định vị trí bên trái của thành phần định vị trí (như position) |
| letter-spacing | letter-spacing: 2px; | Tăng hoặc giảm khoảng cách giữa các ký tự trong đoạn text. |
| line-height | line-height: 1.5; | Thiết lập chiều cao giữa các dòng. |
| list-style | list-style: decimal; | Thiết lập kiểu cho một danh sách. |
| margin | margin: 15px; | Canh lề cho thành phần. |
| max-height | max-height: 200px; | Thiết lập chiều cao tối đa của thành phần. |
| max-width | max-width: 900px; | Thiết lập chiều rộng tối đa của thành phần. |
| min-height | min-height: 100px; | Thiết lập chiều cao tối thiểu của thành phần. |
| min-width | min-width: 600px; | Thiết lập chiều rộng tối thiểu của thành phần. |
| outline | outline: dotted; | Định dạng các đường viền bao ngoài |
| overflow | overflow: scroll; | Xác định điều gì sẽ xảy ra nếu một thành phần box tràn nội dung. |
| padding | padding: 15px; | Thiết lập các thuộc tính padding trong một khai báo. |
| page-break-after | page-break-after: alway; | Xác định các phân chia văn bản ngay sau thành phần. |
| page-break-before | page-break-before: alway; | Xác định các phân chia văn bản ngay trước thành phần. |
| page-break-inside | page-break-inside: alway; | Xác định các phân chia văn bản ngay bên trong thành phần. |
| position | position: absolute; | Xác định loại của phương pháp định vị trí cho thành phần. |
| quotes | "‘" "’" | Thiết lập các loại dấu ngoặc bao ngoài khi nhúng một trích dẫn. |
| right | right: 10px; | Xác định vị trí bên phải của thành phần định vị trí (như position) |
| table-layout | table-layout: fixed; | Thiết lập các thuật toán layout được sử dụng cho table. |
| text-align | text-align: center; | Sắp xếp các nội dung theo chiều ngang. |
| text-decoration | text-decoration: underline; | Xác định các trang trí thêm cho text. |
| text-indent | text-indent: 10px; | Ghi rõ thụt đầu dòng của dòng đầu tiên trong một khối văn bản. |
| text-transform | text-transform: uppercase; | Thiết lập các ký tự viết hoa cho văn bản. |
| top | top: 10px; | Xác định vị trí bên trên của thành phần định vị trí (như position) |
| vertical-align | vertical-align: middle; | Sắp xếp các nội dung theo chiều dọc. |
| visibility | visibility: visible; | Xác định thành phần có được nhìn thấy hay không. |
| white-space | white-space: nowrap; | Xác định khoảng trắng có bên trong thành phần được xử lý như thế nào. |
| width | width: 800px; | Thiết lập chiều rộng cho thành phần. |
| word-spacing | word-spacing: 5px; | Tăng hoặc giảm không gian giữa các từ trong đoạn văn bản. |
| z-index | z-index: 100; | Thiết lập thứ tự xếp chồng nhau của một thành phần vị trí. |
Thuộc tính CSS3
Ngoài những thuộc tính của CSS1 và CSS2, ở CSS3 còn có thêm những thuộc tính sau:
| Thuộc tính | Mô tả |
|---|---|
| animation | Xác định một chuyển động của một thành phần. |
| appearance | Định dạng cho thành phần trông như giao diện chuẩn gần với người dùng. |
| backface-visibility | Xác định bề mặt sau của thành phần khi thực hiện một chuyển động xoay. |
| background-clip | Xác định vùng backgroud được cắt bớt theo vùng được giới hạn. |
| background-origin | Xác định giá trị tương đối của background giới hạn theo vùng giới hạn. |
| background-size | Xác định lại chiều rộng và chiều cao cho background. |
| background gradient | Tạo màu sắc cho background theo biên độ giảm dần. |
| Nhiều background | Sử dụng để khai báo nhiều dạng background khác nhau trong cùng một thẻ. |
| border-image | Dùng để định dạng các dạng border bằng hình ảnh. |
| border-radius | Dùng để định dạng các dạng bo góc của border. |
| box-align | Xác định vị trí cho thành phần theo chiều dọc hoặc theo chiều thẳng đứng. |
| box-direction | Xác định hướng cho thành phần. |
| box-flex | Xác định sự ưu tiên linh hoạt theo các thành phần khác. |
| box-ordinal-group | Cho biết thứ tự ưu tiên của các thành phần. |
| box-orient | Xác định thành phần dọc theo phương hướng khối hoặc theo trục. |
| box-pack | Định vị trí của thành phần theo mép rìa của thành phần. |
| box-sizing | Xác định lại chiều rộng và chiều cao của thành phần. |
| box-shadow | Định dạng bóng cho thành phần. |
| column | Dùng để chia nội dung thành phần thành nhiều cột khác nhau. |
| @font-face | Định dạng các dạng font chữ khác nhau theo các dạng font riêng. |
| font-size-adjust | Dùng để định dạng điều chỉnh cho font chữ, độ lớn của chữ được thể hiện bởi phép nhân. |
| @keyframes | Dùng để điều khiển diễn biến một hoạt động của thành phần, được dùng kèm với thuộc tính animation. |
| nav | Di chuyển qua lại giữa các thành phần điều hướng (navigate) bằng cách di chuyển các phím mũi tên. |
| opacity | Hiển thị cấp độ trong suốt cho thành phần. |
| perspective | Cho ta thấy được chiều sâu của thành phần trong khai báo 3D. |
| perspective-origin | Định nghĩa trục quay cho thành phần có sử dụng perspective. |
| resize | Định dạng cho vùng nội dung mà người dùng có thể thay đổi được kích thước. |
| text-justify | Tăng hoặc giảm khoảng cách giữa các từ và giữa các ký tự sao cho dàn đều thành phần. |
| text-overflow | Xác định vùng text được cắt bớt. |
| text-shadow | Xác định bóng đỗ cho text. |
| transform | Xác định một chuyển đổi 2 chiều, 3 chiều, có thể là xoay, tỷ lệ, di chuyển, nghiêng, ... |
| transform-origin | Xác định trục cho một chuyển đổi 2 chiều, 3 chiều. |
| transform-style | Các thành phần bên trong sẽ giữ vị trí 3D của nó. |
| transition | Xác định một quá trình chuyển đổi khi có một hành động. |
| word-break | Sẽ làm cho những chữ trong một từ không còn là một thể thống nhất, nghĩa là có thể xuống hàng bất cứ vị trí nào trong từ. |
| word-wrap | Sẽ làm cho những từ dài xuống hàng mà không làm vỡ layout. |
| THUỘC TÍNH CHƯA ĐƯỢC HỖ TRỢ BỞI TRÌNH DUYỆT | |
| grid-columns | Xác định chiều rộng cho các cột trong định dạng lưới. |
| grid-rows | Xác định chiều rộng cho các hàng trong dạng lưới. |
| hanging-punctuation | Xác định một dấu chấm câu có thể đặt ở đầu hoặc ở cuối của một dòng văn bản. |
| icon | |
| punctuation-trim | Xác định một ký tự dấu chấm câu nên được cắt nếu nó xuất hiện ở đầu hoặc cuối của một dòng, hoặc tiếp giáp với một ký tự dấu chấm câu đầy đủ chiều rộng khác. |
| rotation | Xoay một thành phần theo một điểm. |
| target | Xác định cách thức mở ra một liên kết như: tab, popup, ... |
| text-outline | Xác định dạng vùng biên cho text. |
| text-wrap | Định dạng dòng text có bị ngắt đoạn hay không. |
