Selector

Selector Cơ Bản

*	Tổng quát — tất cả phần tử
div	Loại — tất cả phần tử
.class	Class — phần tử có class
#id	ID — phần tử có id
[attr]	Thuộc tính — có thuộc tính
[attr="val"]	Thuộc tính bằng giá trị

Combinator

A B	Con cháu (độ sâu bất kỳ)
A > B	Chỉ con trực tiếp
A + B	Anh em liền kề (tiếp theo)
A ~ B	Anh em chung (tất cả phía sau)

Pseudo-class

:hover	Chuột di qua phần tử
:focus	Phần tử được focus
:first-child	Con đầu tiên của parent
:nth-child(n)	Con thứ n (1-based, `odd`, `even`, `2n+1`)
:not(sel)	Phủ định — loại trừ kết quả khớp
:has(sel)	Selector parent (chứa kết quả khớp)

Pseudo-element

::before	Chèn nội dung trước phần tử
::after	Chèn nội dung sau phần tử
::placeholder	Style văn bản placeholder của input
::selection	Style văn bản được chọn

Box Model

Box Sizing

/* Include padding/border in width */
*, *::before, *::after {
  box-sizing: border-box;
}

Thuộc Tính

margin	Khoảng cách ngoài border
border	Viền bao quanh padding
padding	Khoảng cách trong border
width / height	Kích thước nội dung
outline	Vòng ngoài margin (không chiếm không gian)

Viết Tắt

margin: 10px;           /* all sides */
margin: 10px 20px;      /* vertical | horizontal */
margin: 10px 20px 30px; /* top | horiz | bottom */
margin: 10px 20px 30px 40px; /* T R B L */

Flexbox

Container

.flex {
  display: flex;
  justify-content: center; /* main axis */
  align-items: center;     /* cross axis */
  gap: 1rem;
}

Thuộc Tính Container

flex-direction	`row` \| `column` \| `row-reverse` \| `column-reverse`
flex-wrap	`nowrap` \| `wrap` \| `wrap-reverse`
justify-content	`flex-start` \| `center` \| `space-between` \| `space-around` \| `space-evenly`
align-items	`stretch` \| `center` \| `flex-start` \| `flex-end` \| `baseline`
align-content	Căn chỉnh trục chéo nhiều dòng
gap	Khoảng cách giữa các flex item

Thuộc Tính Item

flex: 1	Mở rộng để lấp đầy không gian
flex: 0 0 200px	Chiều rộng cố định, không co dãn
align-self	Ghi đè align-items cho một item
order	Thay đổi thứ tự hiển thị (mặc định 0)

Grid

Container

.grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: auto 1fr auto;
  gap: 1rem;
}

Thuộc Tính Container

grid-template-columns	Định nghĩa cột: `1fr 2fr`, `repeat(3, 1fr)`
grid-template-rows	Định nghĩa hàng
grid-template-areas	Vùng có tên: `"header header" "nav main"`
gap	Khoảng cách hàng và cột
justify-items	Căn chỉnh item theo chiều ngang
align-items	Căn chỉnh item theo chiều dọc

Đặt Vị Trí Item

.item {
  grid-column: 1 / 3;   /* span cols 1-2 */
  grid-row: 1 / -1;     /* span all rows */
  grid-area: header;    /* named area */
}

Typography

Thuộc Tính Font

font-family	Bộ font: `'Inter', sans-serif`
font-size	Kích thước: `1rem`, `16px`, `clamp(1rem, 2vw, 2rem)`
font-weight	`normal` (400) \| `bold` (700) \| `100`-`900`
font-style	`normal` \| `italic` \| `oblique`
line-height	Khoảng cách dòng: `1.5` (không đơn vị, được khuyến nghị)
letter-spacing	Khoảng cách ký tự: `0.05em`

Thuộc Tính Văn Bản

text-align	`left` \| `center` \| `right` \| `justify`
text-decoration	`none` \| `underline` \| `line-through`
text-transform	`uppercase` \| `lowercase` \| `capitalize`
text-overflow	`ellipsis` (với overflow: hidden)
white-space	`nowrap` \| `pre` \| `pre-wrap`
word-break	`break-all` \| `break-word`

Màu Sắc & Nền

Định Dạng Màu

color: #ff6600;             /* hex */
color: rgb(255, 102, 0);    /* rgb */
color: hsl(24, 100%, 50%);  /* hsl */
color: oklch(70% 0.15 50);  /* oklch */

Thuộc Tính Nền

background-color	Màu nền: `#f0f0f0`
background-image	`url(img.jpg)` hoặc gradient
background-size	`cover` \| `contain` \| `100px 200px`
background-position	`center` \| `top right` \| `50% 50%`
background-repeat	`no-repeat` \| `repeat-x` \| `repeat-y`

Gradient

background: linear-gradient(to right, #f00, #00f);
background: radial-gradient(circle, #fff, #000);
background: conic-gradient(red, yellow, green);

Transition & Animation

Transition

.btn {
  transition: background 0.3s ease, transform 0.2s;
}
.btn:hover {
  background: #0056b3;
  transform: scale(1.05);
}

Thuộc Tính Transition

transition-property	Thuộc tính nào được animate
transition-duration	Thời lượng: `0.3s`, `300ms`
transition-timing-function	`ease` \| `linear` \| `ease-in-out` \| `cubic-bezier()`
transition-delay	Chờ trước khi bắt đầu

Keyframe Animation

@keyframes spin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}
.icon { animation: spin 1s linear infinite; }

Thuộc Tính Animation

animation-name	Tham chiếu tên @keyframes
animation-duration	Độ dài một chu kỳ
animation-iteration-count	`1` \| `3` \| `infinite`
animation-direction	`normal` \| `alternate` \| `reverse`
animation-fill-mode	`forwards` \| `backwards` \| `both`

Thiết Kế Responsive

Media Query

@media (max-width: 768px) {
  .sidebar { display: none; }
}
@media (prefers-color-scheme: dark) {
  body { background: #1a1a1a; color: #eee; }
}

Điểm Ngắt Phổ Biến

max-width: 480px	Điện thoại di động
max-width: 768px	Máy tính bảng
max-width: 1024px	Laptop nhỏ
max-width: 1280px	Desktop

Đơn Vị Viewport

vw / vh	% chiều rộng / chiều cao viewport
dvh	Dynamic viewport height (an toàn cho mobile)
svh / lvh	Chiều cao viewport nhỏ / lớn
cqi	Kích thước inline container query

Container Query

.card-wrapper { container-type: inline-size; }
@container (min-width: 400px) {
  .card { flex-direction: row; }
}

Vị Trí

Giá Trị Position

static	Mặc định — luồng tài liệu bình thường
relative	Lệch so với vị trí bình thường; giữ không gian
absolute	Căn theo ancestor có position gần nhất
fixed	Căn theo viewport; không cuộn
sticky	Chuyển đổi relative/fixed theo cuộn

Căn Giữa

/* Flex center */
display: flex;
justify-content: center;
align-items: center;

/* Grid center */
display: grid;
place-items: center;

Xếp Chồng

z-index	Thứ tự xếp chồng (cao hơn = trên cùng); cần `position`
isolation: isolate	Tạo ngữ cảnh xếp chồng mới

Thuộc Tính Tùy Chỉnh

Khai Báo & Sử Dụng

:root {
  --color-primary: #3b82f6;
  --spacing-md: 1rem;
}
.btn {
  background: var(--color-primary);
  padding: var(--spacing-md);
}

Giá Trị Dự Phòng

color: var(--accent, #ff6600);
/* uses #ff6600 if --accent is not defined */

Theming Động

[data-theme="dark"] {
  --bg: #1a1a2e;
  --text: #e0e0e0;
}
body { background: var(--bg); color: var(--text); }

CSS THAM KHẢO NHANH