Love beautiful code? We do too.
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. |
MỤC LỤC BÀI HỌC