CSS (Cascading Style Sheets) là ngôn ngữ định dạng nền tảng cho giao diện web, tách biệt hoàn toàn giữa cấu trúc (HTML) và trình bày (CSS), từ đó nâng cao khả năng bảo trì, tái sử dụng và kiểm soát thiết kế.
1. Vai trò và nguyên tắc thiết kế
HTML tập trung vào ý nghĩa nội dung — như tiêu đề, đoạn văn, danh sách — trong khi CSS đảm nhiệm việc định dạng trực quan: màu sắc, khoảng cách, font chữ, bố cục. Việc tách biệt này giúp mã nguồn rõ ràng, dễ mở rộng và tối ưu hóa hiệu suất.
2. Cú pháp cơ bản
Một quy tắc CSS gồm hai phần chính: trình chọn (selector) và khối khai báo (declaration block). Khối khai báo chứa các cặp tên-thuộc-tính: giá-trị, ngăn cách bởi dấu chấm phẩy (;):
<head>
<style>
h1 {
color: #2c3e50;
font-size: 2rem;
margin-bottom: 0.5em;
}
</style>
</head>Lưu ý: thẻ <style> luôn đặt trong phần <head>; mỗi thuộc tính phải có đơn vị hợp lệ (ví dụ: px, rem, %) nếu yêu cầu.
3. Các trình chọn cơ bản
- Trình chọn thẻ: áp dụng cho mọi phần tử cùng tên thẻ (ví dụ:
p,div). Ưu điểm: đơn giản, nhanh chóng; nhược điểm: thiếu tính linh hoạt khi cần phân biệt từng trường hợp. - Trình chọn lớp (
.class-name): được khai báo qua thuộc tínhclasstrên HTML. Một phần tử có thể sở hữu nhiều lớp đồng thời, hỗ trợ tổ chức kiểu dáng theo chức năng hoặc trạng thái:<p class="highlight warning large-text">Thông báo quan trọng</p> - Trình chọn ID (
#id-name): chỉ nên dùng duy nhất một lần trên mỗi trang. Phù hợp cho các thành phần đặc biệt như thanh điều hướng chính hoặc footer. - Trình chọn toàn cục (
*): ảnh hưởng đến tất cả phần tử. Nên hạn chế sử dụng vì ảnh hưởng đến hiệu năng và gây khó kiểm soát.
4. Kiểm soát kiểu chữ
Các thuộc tính liên quan đến font bao gồm:
font-family: liệt kê ưu tiên các font, ngăn cách bằng dấu phẩy. Hệ thống sẽ thử từng font từ trái sang phải:body { font-family: "Segoe UI", system-ui, sans-serif; }font-size: kích thước chữ, thường dùng đơn vị tương đối nhưremđể đảm bảo khả năng tiếp cận và phản ứng với cài đặt người dùng.font-weight: độ đậm, nhận giá trị số (100–900) hoặc từ khóa nhưnormal,bold.font-style:normalhoặcitalic.font(viết tắt): kết hợp nhiều thuộc tính trong một dòng. Thứ tự bắt buộc:font-style font-weight font-size/line-height font-family:h2 { font: italic 600 1.5rem/1.4 "Noto Sans"; }
5. Thuộc tính văn bản
color: xác định màu chữ (có thể dùng hex, RGB, tên màu hoặccurrentColor).text-align: căn lề ngang (left,center,right,justify).text-decoration: thêm đường viền (dưới, trên, xuyên qua):a:hover { text-decoration: underline wavy #3498db; }text-indent: thụt đầu dòng đoạn văn, khuyến khích dùng đơn vịemđể giữ tỷ lệ tương thích với kích thước chữ.line-height: chiều cao dòng — không phải khoảng cách giữa các dòng mà là khoảng cách từ đường cơ sở (baseline) của dòng này đến dòng kế tiếp. Giá trị không đơn vị (ví dụ:1.6) được tính dựa trên kích thước font hiện tại.
6. Cách nhúng CSS vào tài liệu
| Loại | Cách triển khai | Ưu điểm | Hạn chế |
|---|---|---|---|
| Inline | <p style="color: #e74c3c;">Nội dung</p> |
Ưu tiên cao nhất, phù hợp thử nghiệm nhanh | Không tái sử dụng, khó bảo trì, vi phạm nguyên tắc tách biệt |
| Nhúng trong <head> | <style>...</style> |
Không cần tải file riêng, phù hợp trang đơn | Không chia sẻ giữa các trang, tăng kích thước HTML |
| Tập tin ngoài | <link rel="stylesheet" href="styles/main.css"> |
Tái sử dụng cao, bộ nhớ đệm hiệu quả, dễ quản lý | Cần thêm request HTTP, cần cấu trúc thư mục rõ ràng |
7. Công cụ gỡ lỗi trong Chrome DevTools
Để kiểm tra và tinh chỉnh CSS hiệu quả:
- Mở công cụ bằng Ctrl+Shift+I (Windows/Linux) hoặc Cmd+Option+I (macOS).
- Chọn tab Elements để xem cây DOM và bảng thuộc tính CSS bên phải.
- Bật/tắt thuộc tính bằng cách click vào ô vuông trước tên thuộc tính.
- Sửa giá trị trực tiếp trong DevTools — thay đổi tức thì nhưng không lưu vĩnh viễn.
- Dùng phím Ctrl+0 để đặt lại tỷ lệ zoom của trình duyệt.