1. Thứ tự viết code CSS hợp lý
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 |
{ display: ; /* Where and how the box is placed */ position: ; float: ; clear: ; visibility: ; /* Can the box be seen? */ opacity: ; z-index: ; margin: ; /* Layers of the box model */ outline: ; border: ; background: ; padding: ; width: ; /* Content dimensions and scrollbars */ height: ; overflow: ; color: ; /* Text */ text: ; font: ; } |
2. Variable CSS
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
<style> :root { --main-color: #ffa400; --base-size: 60px } .square { background: var(--main-color); width: var(--base-size); height: var(--base-size); } .rectangle { background: var(--color); width: calc(var(--i) * var(--base-size)); height: calc(var(--j) * var(--base-size)); } </style> <div class="square"></div><br/> <div class="rectangle" style="--i:5;--j:2;--color:green"></div><br/> |
3. CSS Selector
| # | Type | Example |
| 1 | Basic CSS Selectors | |
| 2 | Descendant CSS Selectors | |
| 3 | Multiple CSS Selector | |
| 4 | Combination CSS Selectors | |
| 5 | Sibling CSS Selectors | |
| 6 | Pseudo CSS Selectors | |
| 7 | Pseudo CSS Selectors (link và input) | |
| 8 | Attribute CSS Selectors |
| Loại | Ví dụ | Giải thích |
| descendant selector | div p | Tất cả element p là hậu duệ bên trong div |
| Child combinator | div > p | Tất cả element p là con trực tiếp (hậu duệ đời 1) của div |
| younger siblings | div ~ ul | Tất cả element ul là anh chị em cùng cấp trẻ hơn của div |
| younger adjacent sibling | div + ul | Tương tự div ~ ul, nhưng chỉ lấy ul liền kề ngay sau của div |
