CSS (Cascading Style Sheets) quyết định giao diện của trang web: màu sắc, phông chữ, khoảng cách, bố cục, hiệu ứng. Bài đầu tiên giải thích CSS hoạt động ra sao, cú pháp một quy tắc và ba cách đưa CSS vào trang HTML.
- Hiểu vai trò của CSS bên cạnh HTML và JavaScript
- Đọc, viết đúng một quy tắc CSS
- Chèn CSS nội tuyến, nội bộ, tệp ngoài
- Viết chú thích và tổ chức tệp CSS
- Quy tắc (rule)
- Bộ chọn + khối khai báo trong ngoặc nhọn.
- Bộ chọn (selector)
- Chỉ ra phần tử nào được định dạng.
- Khai báo (declaration)
- Cặp thuộc tính: giá trị; kết thúc bằng dấu chấm phẩy.
- Cascading
- Nhiều quy tắc chồng lên nhau, trình duyệt chọn quy tắc thắng theo thứ tự ưu tiên.
Một số khái niệm
HTML mô tả nội dung là gì, CSS mô tả nội dung trông như thế nào. Tách hai phần giúp đổi giao diện cả website chỉ bằng một tệp CSS, trang tải nhanh hơn (trình duyệt lưu đệm tệp CSS) và mã dễ bảo trì.
Trình duyệt đọc HTML thành cây DOM, đọc CSS thành các quy tắc, rồi với mỗi phần tử tính ra giá trị cuối cùng của từng thuộc tính (computed style) để vẽ. Bạn có thể xem kết quả này trong DevTools (F12) → Elements → Styles / Computed.
h1 { /* bộ chọn */
color: #2e7d32; /* thuộc tính: giá trị; */
font-size: 32px;
}Ba cách chèn CSS
<!-- 1. Nội tuyến: thuộc tính style -->
<p style="color: crimson;">Đoạn văn màu đỏ (nội tuyến)</p>
<!-- 2. Nội bộ: thẻ <style> trong <head> -->
<style>
.hop { background: #e8f5e9; padding: 10px; border-left: 4px solid #2e7d32; }
</style>
<div class="hop">Hộp định dạng bằng CSS nội bộ</div><!-- 3. Tệp ngoài (khuyên dùng): đặt trong <head> -->
<link rel="stylesheet" href="/css/style.css">| Cách | Ưu điểm | Nhược điểm |
|---|---|---|
| Nội tuyến | Nhanh, ưu tiên cao | Lặp lại, khó bảo trì |
| Nội bộ | Gọn cho một trang | Không dùng chung giữa các trang |
| Tệp ngoài | Dùng chung, được cache, tách biệt | Thêm một yêu cầu HTTP |
Chú thích và định dạng mã
/* Chú thích một hoặc nhiều dòng */
/* ===== Phần đầu trang ===== */
.header { padding: 16px; }
/* Viết mỗi khai báo một dòng, thụt lề 2 dấu cách, có dấu ; ở cuối */CSS không có chú thích một dòng kiểu //. Thứ tự hợp lý trong tệp: biến và thiết lập chung → phần tử cơ bản (body, h1, a) → bố cục → thành phần (nút, thẻ) → tiện ích → media query.
DevTools: người bạn thân
- Nhấp chuột phải → Kiểm tra để xem phần tử và các quy tắc đang áp dụng.
- Quy tắc bị gạch ngang là đã bị quy tắc khác ghi đè.
- Bấm vào giá trị để sửa thử trực tiếp; thêm thuộc tính bằng dấu + (New Style Rule).
- Tab Computed cho biết giá trị cuối cùng và quy tắc nào tạo ra nó.
Đặt tên tệp style.css trong thư mục css/; khi sửa CSS mà trình duyệt chưa đổi, nhấn Ctrl+F5 để tải lại không dùng bộ nhớ đệm.
Thiếu dấu ; hoặc } làm hỏng các khai báo phía sau mà không báo lỗi. Dùng VS Code để được tô màu và cảnh báo cú pháp.
- Tạo index.html và css/style.css, liên kết bằng thẻ link.
- Định dạng h1 màu xanh, p cỡ 18px, body nền xám nhạt.
- Viết cùng một quy tắc theo 3 cách và quan sát cách nào thắng.
- Dùng DevTools đổi màu tiêu đề của một website bất kỳ.
- CSS = bộ chọn { thuộc tính: giá trị; }.
- Ưu tiên tệp CSS ngoài; nội tuyến dùng hạn chế.
- Chú thích bằng /* */.
- DevTools giúp xem và thử CSS trực tiếp.