Bạn sẽ tạo kiểu cho phần giới thiệu và các liên kết bài viết mà không làm mọi đoạn văn hoặc liên kết trên website đổi theo. Bài học giúp chọn phạm vi CSS dựa vào vai trò thành phần.

Dùng tiếp website Góc học web từ môn HTML. Mỗi thư mục ví dụ là một phiên bản độc lập: before.html và before.css để so sánh, index.html và styles.css là kết quả sau bài học. Hãy sửa một quy tắc, tải lại và giải thích điều thay đổi.

Vì sao sửa một chỗ lại ảnh hưởng nhiều chỗ?

Selector p chọn tất cả đoạn văn trong phạm vi tài liệu, a chọn mọi liên kết. Chúng phù hợp với một số quy tắc nền tảng, nhưng không đủ phân biệt liên kết trong menu và nút đọc bài. Một selector quá rộng có thể làm thay đổi nhiều vị trí ngoài mục tiêu.

Class tạo một nhãn có thể dùng lại, như intro cho đoạn giới thiệu, card cho thẻ bài và button cho liên kết có hình thức nút. Tên class nên nói lên vai trò ổn định thay vì một màu cụ thể sẽ thay đổi sau này.

Phân biệt kiểu selector

Dấu phẩy tạo danh sách selector riêng, không phải dấu nối quan hệ cha con. .card, h3 chọn tất cả card và mọi h3, khác với .card h3. Một phần tử có thể có nhiều class, phân tách bằng khoảng trắng trong thuộc tính class.

Class và ID không phải hai mức trang trí

ID phải duy nhất trong một tài liệu và hữu ích cho fragment hoặc nối label. Class dùng lại cho nhiều phần tử. Không nên thêm một ID mới cho từng thẻ bài chỉ để tạo kiểu chung; như vậy vừa dài vừa làm các quy tắc khó thay đổi.

Bạn không cần gắn class lên mọi thẻ. Khi một vùng có class rõ ràng, một selector con ngắn có thể đủ. Cũng tránh selector gắn chặt vào quá nhiều tầng của DOM, vì sửa HTML nhỏ có thể làm quy tắc ngừng khớp.

Áp dụng và quan sát phạm vi

Trong ví dụ, class intro đổi cách hiển thị một đoạn giới thiệu; heading và liên kết trong card được tạo kiểu theo vùng. Những liên kết trong menu không tự nhận mọi quy tắc của card. Dùng Inspect để kiểm tra phần tử có đúng class và selector có khớp.

Chưa cần học hết mọi selector nâng cao. Hãy nắm selector kiểu phần tử, class, tổ hợp con và descendant trước; pseudo-class và trạng thái sẽ được dùng khi học tương tác và form.

Mã của phần đang học

Giữ lại cấu trúc HTML có ý nghĩa. Đoạn dưới là phần HTML liên quan đến tình huống; bộ tải về có cả tài liệu hoàn chỉnh và stylesheet tích lũy từ các bài trước.

<p class="intro">Đoạn này dùng class intro.</p><p>Đoạn thông thường vẫn giữ kiểu nền tảng.</p>

Thêm hoặc sửa trong styles.css

.intro { font-size: 1.125rem; color: #425a73; }
.card h3 { color: #173957; }
.card a { text-decoration-thickness: 0.12em; }
.site-nav > a { color: #125a82; }

So sánh trước và sau

So sánh đoạn giới thiệu với đoạn thường và liên kết trong menu với liên kết trong card. Mục tiêu là điều khiển phạm vi, không làm toàn bộ website có cùng một kiểu.

Xem trước khi sửa · Xem sau khi sửa · Tải 20 phiên bản và website hoàn chỉnh

Lỗi thường gặp và cách sửa

• Viết .card, h3 khi muốn chọn h3 trong card: bỏ dấu phẩy.
• Dùng tên class red cho một vai trò sẽ đổi màu: đặt tên theo thành phần.
• Chọn ID cho mọi quy tắc: dùng class cho thành phần lặp.

Tự kiểm tra

• Thêm class intro vào một đoạn khác rồi quan sát quy tắc được dùng lại.
• Giải thích khác nhau giữa > và khoảng trắng trong selector.

Những điều cần nhớ

Đối chiếu kết quả với mục tiêu của bài, không chỉ nhìn xem giao diện có giống ảnh mẫu. Dùng DevTools kiểm tra quy tắc thực sự được áp dụng và thử một nội dung dài hơn hoặc khung nhìn hẹp hơn trước khi kết luận đã xong.

Đọc thêm khi cần

Tài liệu gốc về chủ đề này trên MDN

Mục lục CSS 20 bài · Ôn lại HTML