CSS
Bộ chọn CSS (selectors)
Bộ chọn (selectors) được dùng để chọn các thành phần muốn định dạng css.
| Bộ chọn | Mô tả |
|---|---|
| * | Chọn tất cả các thành phần html. |
| tag | Chọn tất cả các thành phần cùng loại. |
| tag01 tag02 | Chọn tất cả thành phần <tag02> bên trong thành phần <tag01>. |
| tag01,tag02 | Chọn tất cả thành phần <tag01> và <tag02>. |
| tag01+tag02 | Chọn tất cả thành phần <tag02> được đặt kế và sau thành phần <tag01>. |
| tag01>tag02 | Chọn tất cả thành phần <tag02> có thành phần cha là <tag01>. |
| .class | Chọn tất cả các thành phần có cùng tên class. |
| #id | Chọn tất cả các thành phần có cùng tên id. |
| :active | Chọn các liên kết được kích hoạt. |
| :after | Thêm nội dung ngay phía sau thành phần. |
| :before | Thêm nội dung ngay phía trước thành phần. |
| :first-child | Chọn thành phần đầu tiên của thành phần cha chứa nó. |
| :first-letter | Chọn ký tự đầu tiên của một thành phần. |
| :first-line | Chọn dòng đầu tiên của một thành phần. |
| :focus | Thành phần sẽ focus khi được chọn. |
| :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ữ) | 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 | Định dạng cho tất cả liên kết khi chưa được click. |
| :visited | Định dạng cho các thành phần đã được click. |
| [Thuộc tính] | 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ữ] | Đượ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ữ”. |
| [Thuộc tính~=giá trị] | Chọn tất cả các thành phần với thuộc tính chứa một giá trị. |
| [Thuộc tính=giá trị] | 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 | Mô tả |
|---|---|
| background | Định dạng nền (background) cho thành phần. |
| border | Định dạng đường viền cho thành phần. |
| border-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 | 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 | Xác định vị trí dưới cùng của thành phần được định vị trí. |
| caption-side | Xác định vị trí một chú thích của table. |
| clear | 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 | Xác định đoạn cho thành phần khi sử dụng thuộc tính position có giá trị “absolute”. |
| color | Xác định màu sắc cho text. |
| content | Sử dụng kèm với bộ chọn “:before”, “:after” để chèn nội dung được tạo. |
| counter-increment | Gia tăng một hoặc nhiều counter (sắp xếp có thứ tự, có hiển thị số) |
| counter-reset | Tạo hoặc reset một hoặc nhiều counter. |
| cursor | Xác định kiểu con trỏ chuột được hiển thị. |
| direction | Xác định hướng cho văn bản. |
| display | Xác định loại hiển thị của thành phần. |
| empty-cells | 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 | Xác định có hay không một thành phần được float. |
| font | Thiết lập font cho thành phần, bao gồm font chữ, độ rộng, … |
| height | Thiết lập chiều cao của thành phần. |
| left | Xác định vị trí bên trái của thành phần định vị trí (như position) |
| letter-spacing | Tăng hoặc giảm khoảng cách giữa các ký tự trong đoạn text. |
| line-height | Thiết lập chiều cao giữa các dòng. |
| list-style | Thiết lập tất cả thuộc tính cho một danh sách trong một khai báo. |
| margin | Thiết lập các thuộc tính margin trong một khai báo. |
| max-height | Thiết lập chiều cao tối đa của thành phần. |
| max-width | Thiết lập chiều rộng tối đa của thành phần. |
| min-height | Thiết lập chiều cao tối thiểu của thành phần. |
| min-width | Thiết lập chiều rộng tối thiểu của thành phần. |
| outline | Định dạng các đường viền bao ngoài |
| overflow | 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 | Thiết lập các thuộc tính padding trong một khai báo. |
| page-break-after | Xác định các phân chia văn bản ngay sau thành phần. |
| page-break-before | Xác định các phân chia văn bản ngay trước thành phần. |
| page-break-inside | Xác định các phân chia văn bản ngay bên trong thành phần. |
| position | 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 | Xác định vị trí bên phải của thành phần định vị trí (như position) |
| table-layout | Thiết lập các thuật toán layout được sử dụng cho table. |
| text-align | Sắp xếp các nội dung theo chiều ngang. |
| text-decoration | Xác định các trang trí thêm cho text. |
| text-indent | 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 | Thiết lập các ký tự viết hoa cho văn bản. |
| top | Xác định vị trí bên trên của thành phần định vị trí (như position) |
| vertical-align | Sắp xếp các nội dung theo chiều dọc. |
| visibility | Xác định thành phần có được nhìn thấy hay không. |
| white-space | Xác định khoảng trắng có bên trong thành phần được xử lý như thế nào. |
| width | Thiết lập chiều rộng của thành Thành phần |
| word-spacing | Tăng hoặc giảm không gian giữa các từ trong đoạn văn bản. |
| z-index | Thiết lập thứ tự xếp chồng nhau của một thành phần vị trí. |
