Bộ chọn (selectors) được dùng để chọn các thành phần muốn định dạng css.
| Bộ chọn | Ví dụ | Mô tả |
|---|---|---|
| * | * | Chọn tất cả các thành phần html. |
| tag | p | Chọn tất cả các thành phần cùng loại. |
| tag01 tag02 | div p | Chọn tất cả thành phần <tag02> bên trong thành phần <tag01>. |
| tag01,tag02 | div,p | Chọn tất cả thành phần <tag01> và <tag02>. |
| tag01+tag02 | div+p | Chọn tất cả thành phần <tag02> được đặt kế và sau thành phần <tag01>. |
| tag01>tag02 | div>p | Chọn tất cả thành phần <tag02> có thành phần cha là <tag01>. |
| .class | .className | Chọn tất cả các thành phần có cùng tên class. |
| #id | #idName | Chọn tất cả các thành phần có cùng tên id. |
| :active | a:active | Chọn các liên kết được kích hoạt. |
| :after | p:after | Thêm nội dung ngay phía sau thành phần. |
| :before | p:before | Thêm nội dung ngay phía trước thành phần. |
| :first-child | p:first-child | Chọn thành phần đầu tiên của thành phần cha chứa nó. |
| :first-letter | p:first-letter | Chọn ký tự đầu tiên của một thành phần. |
| :first-line | p:first-line | Chọn dòng đầu tiên của một thành phần. |
| :focus | input:focus | Thành phần sẽ focus khi được chọn. |
| :hover | a:hover | Chọn các liên kết được hover (di chuyển chuột lên thành phần). |
| :lang(mã ngôn ngữ) | p:lang(vi) | Chọn thành phần với thuộc tính ngôn ngữ có giá trị bắt đầu với "mã ngôn ngữ". |
| :link | a:link | Định dạng cho tất cả liên kết khi chưa được click. |
| :visited | a:visited | Định dạng cho các thành phần đã được click. |
| [Thuộc tính] | [target] | Chọn tất cả các thành phần có cùng thuộc tính (attribute). |
| [Thuộc tính|=ngôn ngữ] | [lang|=vi] | Được sử dụng để chọn tất cả các thành phần với thuộc tính có giá trị = "ngôn ngữ". |
| [attribute~=value] | [title~=myWeb] | Chọn tất cả các thành phần với thuộc tính chứa một giá trị. |
| [attribute=value] | [target=_blank] | Chọn tất cả các thành phần với thuộc tính bằng giá trị. |
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ủatable 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 tất cả thuộc tính cho một danh sách trong một khai báo. |
| margin | margin: 15px; | Thiết lập các thuộc tính margin trong một khai báo. |
| 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 của thành 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í. |
Ví dụ về thuộc tính font
Ví dụ về background
Ví dụ về thuộc tính border
Ví dụ về thuộc tính display
- display: block - Hiển thị dạng khối
- display: inline - Hiển thị dạng nội tuyến
- display: inline-block - Hiển thị dạng khối nội tuyến
- display: inline-table - Hiển thị dạng bảng nội tuyến
- display: list-item - Hiển thị dạng danh sách
- display: none - Không hiển thị
- display: table - Hiển thị dạng bảng
- display: table-caption - Hiển thị dạng chú thích của bảng
- display: table-cell - Hiển thị dạng phần tử của bảng
- display: table-column - Hiển thị dạng cột của bảng
- display: table-column-group - Hiển thị dạng nhóm nhiều cột của bảng
- display: table-footer-group - Hiển thị dạng phần cuối của bảng
- display: table-header-group - Hiển thị dạng phần đầu của bảng
- display: table-row - Hiển thị dạng hàng của bảng
- display: table-row-group - Hiển thị dạng nhóm nhiều hàng của bảng
Ví dụ về thuộc tính text-align
Ví dụ về thuộc tính vertical-align
- vertical-align - Sắp xếp thành phần theo chiều dọc
- vertical-align: baseline - Sắp xếp thành phần theo cùng đường cơ bản
- vertical-align: sub - Sắp xếp thành phần giống như sử dụng subscript
- vertical-align: super - Sắp xếp thành phần giống như sử dụng superscript
- vertical-align: top - Sắp xếp thành phần theo phần trên cùng cao nhất
- vertical-align: text-top - Sắp xếp thành phần theo phần trên cùng cao nhất của text
- vertical-align: middle - Thành phần canh giữa theo chiều dọc
- vertical-align: bottom - Sắp xếp thành phần theo phần dưới cùng thấp nhất
- vertical-align: text-bottom - Sắp xếp thành phần theo phần dưới cùng thấp nhất của text
Ví dụ về thuộc tính list-style
Ví dụ về thuộc tính margin
Ví dụ về thuộc tính padding
Ví dụ về thuộc tính float
Ví dụ về thuộc tính overflow
Ví dụ về thuộc tính position
Ví dụ về thuộc tính z-index
Ví dụ về thuộc tính content
- content: "thêm text" - Thêm nội dung cho thành phần
- content: attr(alt) - Thêm nội dung thông qua thuộc tính attr
- content: open-quote - Thêm dấu ngoặc mở vào thành phần
- content: close-quote - Thêm dấu ngoặc đóng vào thành phần
- content: no-open-quote - Bỏ dấu ngoặc mở của thành phần.
- content: no-close-quote - Bỏ dấu ngoặc đóng của thành phần
No Comment to " Các thuộc tính CSS "