Cheat sheet CSS
Cập nhật lần cuối
Selector
Cách chọn những phần tử bạn muốn tạo kiểu.
| Selector | Khớp với |
|---|---|
* | Mọi phần tử |
p | Mọi phần tử <p> (theo thẻ) |
.btn | Các phần tử có class="btn" |
#main | Phần tử có id="main" |
div p | Mọi <p> nằm trong một <div> (con cháu) |
div > p | Chỉ các phần tử con trực tiếp |
a:hover | Liên kết đang được rê chuột (pseudo-class) |
li:first-child | <li> đầu tiên trong phần tử cha |
li:nth-child(2n) | Mọi <li> ở vị trí chẵn |
input[type="text"] | Các ô input có thuộc tính đó |
p::before | Nội dung được tạo trước <p> (pseudo-element) |
Box model
Mỗi phần tử là một hộp: nội dung, padding, viền, margin.
| Thuộc tính | Tác dụng |
|---|---|
width / height | Kích thước vùng nội dung |
padding | Khoảng trống bên trong viền |
border | 1px solid #333: độ dày, kiểu, màu |
margin | Khoảng trống bên ngoài viền |
box-sizing: border-box | Tính cả padding và viền vào width |
margin: 0 auto | Căn giữa phần tử khối theo chiều ngang |
overflow: hidden | Cắt bỏ phần nội dung tràn ra ngoài |
Kiểu chữ và màu sắc
| Thuộc tính | Ví dụ |
|---|---|
color | color: #333: màu chữ |
background | background: #fff hoặc một hình ảnh/gradient |
font-family | font-family: system-ui, sans-serif |
font-size | font-size: 16px (hoặc rem, em) |
font-weight | 400 (thường) … 700 (đậm) |
line-height | 1.5: khoảng cách giữa các dòng |
text-align | left, center, right, justify |
text-decoration | underline, none |
Flexbox
Bố cục một chiều: theo hàng hoặc theo cột. Đặt display: flex cho phần tử cha.
| Thuộc tính (trên container) | Tác dụng |
|---|---|
display: flex | Biến các phần tử con thành flex item |
flex-direction | row (mặc định) hoặc column |
justify-content | Căn theo trục chính (center, space-between) |
align-items | Căn theo trục phụ (center, stretch) |
gap | Khoảng cách giữa các item, ví dụ gap: 16px |
flex-wrap | wrap cho phép item xuống dòng mới |
flex: 1 (trên phần tử con) | Item giãn ra lấp đầy khoảng trống còn lại |
Grid
Bố cục hai chiều. Đặt display: grid cho phần tử cha.
| Thuộc tính | Tác dụng |
|---|---|
display: grid | Biến các phần tử con thành grid item |
grid-template-columns | 1fr 1fr 1fr hoặc repeat(3, 1fr) |
grid-template-rows | Xác định kích thước các hàng |
gap | Khoảng cách giữa các hàng và cột |
grid-column | 1 / 3: cho một item trải qua nhiều cột |
auto-fit / minmax | repeat(auto-fit, minmax(200px, 1fr)) cho grid responsive |
place-items: center | Căn giữa mọi item trong ô của nó |
Định vị và hiển thị
| Thuộc tính / giá trị | Tác dụng |
|---|---|
position: static | Mặc định: nằm trong luồng bình thường |
position: relative | Dịch chuyển so với vị trí bình thường |
position: absolute | Định vị theo phần tử tổ tiên gần nhất đã được định vị |
position: fixed | Cố định theo khung nhìn (viewport) |
position: sticky | Dính lại khi cuộn tới một ngưỡng |
top / right / bottom / left | Độ lệch cho các phần tử đã được định vị |
z-index | Thứ tự xếp chồng (càng cao càng nằm trên) |
display: none | Loại phần tử khỏi bố cục |
display: inline-block | Nằm cùng dòng nhưng nhận được width/height |
Transition và transform
| Thuộc tính | Ví dụ |
|---|---|
transition | transition: all 0.2s ease |
transform: translate | translate(10px, 0): di chuyển |
transform: scale | scale(1.1): phóng to, thu nhỏ |
transform: rotate | rotate(45deg) |
opacity | 0 (vô hình) … 1 (hiện rõ hoàn toàn) |
box-shadow | 0 2px 8px rgba(0,0,0,.15) |
border-radius | 8px: bo tròn góc |
Đơn vị và thiết kế responsive
| Đơn vị / tính năng | Ý nghĩa |
|---|---|
px | Pixel tuyệt đối |
% | Tương đối so với phần tử cha |
rem | Tương đối so với cỡ chữ gốc |
em | Tương đối so với cỡ chữ hiện tại |
vw / vh | 1% chiều rộng / chiều cao khung nhìn |
fr | Một phần của khoảng trống còn lại (grid) |
@media (max-width: 600px) { … } | Áp dụng quy tắc khi màn hình nhỏ hơn một breakpoint |
Selector, box model, flexbox, grid và những thuộc tính bạn hay quên, gom trong một trang. Cheat sheet CSS này là bảng tra cứu nhanh để tạo kiểu và bố cục trang web, từ cách chọn phần tử đến cách căn giữa chúng.
Mọi thứ ở đây đều là CSS chuẩn, chạy được trên các trình duyệt hiện đại. Sao chép một quy tắc, hoặc thử ngay trong playground HTML, nơi bạn sửa CSS và xem kết quả tức thì. Dùng kèm cheat sheet HTML cho phần markup, hoặc học bố cục từ đầu với khóa học CSS tương tác miễn phí của Coddy.
Câu hỏi thường gặp về cheat sheet CSS
Cheat sheet CSS này có miễn phí không?
Có. Cheat sheet CSS này miễn phí, không cần đăng ký. Lưu trang lại và dùng bất cứ khi nào bạn cần tra một selector, thuộc tính hay mẫu bố cục.
Nên dùng flexbox hay grid?
Dùng flexbox cho bố cục một chiều: một hàng nút, thanh điều hướng, các item trên một hàng hoặc một cột. Dùng grid cho bố cục hai chiều, khi bạn cần kiểm soát cả hàng lẫn cột cùng lúc, như bố cục trang hay bộ sưu tập thẻ. Hai cách này kết hợp rất tốt: một grid gồm nhiều thẻ, mỗi thẻ bên trong lại dùng flexbox, là cách làm rất phổ biến.
Làm sao căn giữa một div bằng CSS?
display: flex; justify-content: center; align-items: center; sẽ căn giữa phần tử con theo cả chiều ngang lẫn chiều dọc. Nếu chỉ cần căn giữa theo chiều ngang một phần tử khối có width cố định, margin: 0 auto vẫn dùng tốt.Có thể luyện tập CSS online không?
Có. Mở playground HTML để viết HTML và CSS cùng lúc và xem kết quả trực tiếp. Khi muốn học có lộ trình, khóa học CSS tương tác miễn phí của Coddy hướng dẫn bạn từng bước về selector, box model, flexbox và grid.
Cheat sheet này có phù hợp cho người mới bắt đầu không?
Có. Nội dung đi từ selector và box model (phần nền tảng) đến flexbox, grid và transition, nên bạn có thể bắt đầu với các phần đầu rồi dần làm chủ bố cục hiện đại.
Tài nguyên liên quan
Thêm cheat sheet
