Cấu Trúc HTML
Hello World
Các Phần Tử Phổ Biến
Văn Bản & Tiêu Đề
Heading 1
...Heading 6
Paragraph text
Bold ItalicLinks & Hình Ảnh
Danh Sách
- Item
- First
Forms
Loại Input
Select & Textarea
HTML Ngữ Nghĩa
| <header> | Nội dung giới thiệu hoặc container điều hướng |
| <nav> | Các liên kết điều hướng |
| <main> | Nội dung chính của trang (một lần mỗi trang) |
| <section> | Nhóm nội dung theo chủ đề |
| <article> | Nội dung tự đứng vững |
| <aside> | Sidebar hoặc nội dung bên lề |
| <footer> | Phần chân cho section hoặc trang |
| <figure> | Hình ảnh/biểu đồ có chú thích |
| <figcaption> | Chú thích cho |
Selectors CSS
Selectors Cơ Bản
| 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
| 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
| :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
| 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
| 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ị
| 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
| 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 |