|
## Selectors CSS
### Selectors Cơ Bản
| Command | Description |
|---------|-------------|
| `element` | `p { }` — tất cả phần tử |
| `.class` | `.card { }` — selector class |
| `#id` | `#main { }` — selector id |
| `*` | Selector toàn thể (tất cả phần tử) |
### Combinators
| Command | Description |
|---------|-------------|
| `A B` | Con cháu (B bên trong A) |
| `A > B` | Chỉ con trực tiếp |
| `A + B` | Anh em liền kề (B ngay sau A) |
| `A ~ B` | Anh em chung (B sau A) |
### Pseudo-classes
| Command | Description |
|---------|-------------|
| `:hover` | Chuột di qua phần tử |
| `:focus` | Phần tử có focus |
| `:first-child` | Con đầu tiên của cha |
| `:nth-child(n)` | Con thứ n (2n = chẵn, odd = lẻ) |
## Box Model
```
.box {
margin: 10px; /* outside */
border: 1px solid #333; /* edge */
padding: 15px; /* inside */
width: 200px;
box-sizing: border-box; /* include pad+border */
}
```
### Cú Pháp Rút Gọn
| Command | Description |
|---------|-------------|
| `margin: 10px` | Tất cả các cạnh |
| `margin: 10px 20px` | Trên/dưới \| trái/phải |
| `margin: 10px 20px 15px` | Trên \| trái/phải \| dưới |
| `margin: 10px 20px 15px 5px` | Trên \| phải \| dưới \| trái |
## Flexbox
### Container
```
.flex-container {
display: flex;
flex-direction: row; /* row | column */
justify-content: center; /* main axis */
align-items: center; /* cross axis */
gap: 10px;
flex-wrap: wrap;
}
```
### Thuộc Tính Item
| Command | Description |
|---------|-------------|
| `flex: 1` | Mở rộng để lấp đầy không gian có sẵn |
| `flex-grow: 2` | Tỷ lệ mở rộng so với anh em |
| `flex-shrink: 0` | Không thu nhỏ dưới kích thước cơ sở |
| `flex-basis: 200px` | Kích thước ban đầu trước khi mở/thu |
| `align-self: flex-end` | Ghi đè căn chỉnh container |
| `order: -1` | Thứ tự hiển thị (mặc định 0) |
## Grid
### Container
```
.grid {
display: grid;
grid-template-columns: 1fr 2fr 1fr;
grid-template-rows: auto;
gap: 10px;
}
```
### Đặt Vị Trí Item
```
.item {
grid-column: 1 / 3; /* span col 1-2 */
grid-row: 1 / 2;
}
/* shorthand: repeat, minmax */
grid-template-columns: repeat(3, 1fr);
grid-template-columns:
repeat(auto-fit, minmax(200px, 1fr));
```
## Định Vị
| Command | Description |
|---------|-------------|
| `static` | Luồng mặc định (không có thuộc tính offset) |
| `relative` | Offset từ vị trí thông thường |
| `absolute` | Offset từ tổ tiên được định vị gần nhất |
| `fixed` | Offset từ viewport (giữ nguyên khi cuộn) |
| `sticky` | Relative đến ngưỡng cuộn, sau đó cố định |
### Ví Dụ
```
.parent { position: relative; }
.child {
position: absolute;
top: 0; right: 0; /* top-right corner */
}
```
## Media Queries
```
/* Mobile-first: base styles for small screens */
.container { padding: 10px; }
@media (min-width: 768px) {
.container { max-width: 720px; }
}
@media (min-width: 1024px) {
.container { max-width: 960px; }
}
```
### Breakpoints Phổ Biến
| Command | Description |
|---------|-------------|
| `480px` | Điện thoại nhỏ |
| `768px` | Máy tính bảng |
| `1024px` | Máy tính nhỏ / tablet ngang |
| `1280px` | Máy tính để bàn |
```
### Danh Sách
```