Định dạng một lần cho nhiều đoạn
Nếu mười đoạn văn đều cần cùng màu chữ, ta không muốn sửa từng đoạn mỗi lần đổi màu. CSS cho phép viết quy tắc định dạng áp dụng cho các phần tử được chọn.
Bộ chọn và khai báo
Một quy tắc có dạng `bộ_chọn { thuộc_tính: giá_trị; }`. Bộ chọn xác định phần tử; phần khai báo xác định cách trình bày. Có thể đặt CSS trong style ở head, liên kết tệp ngoài bằng link, hoặc đặt thuộc tính style trên phần tử. CSS ngoài giúp nhiều trang dùng chung định dạng.
| Bộ chọn | Chọn phần tử |
|---|---|
| p | Mọi phần tử p |
| .note | Phần tử có class note |
| #intro | Phần tử có id intro |
| p.note | Phần tử p đồng thời có class note |
| h1, h2 | Các phần tử h1 hoặc h2 |
Một class có thể dùng cho nhiều phần tử. id cần duy nhất trong tài liệu; không dùng nhiều id giống nhau để thay class.
Một lớp định dạng dùng chung
```html
<p class="note">Đọc đề trước khi làm.</p>
<div class="note">Kiểm tra kết quả.</div>
```
```css
.note { color: blue; }
p.note { font-weight: bold; }
```
Cả hai phần tử có chữ xanh vì đều thuộc class note. Chỉ p được quy tắc thứ hai đặt chữ đậm.
Thử vận dụng
Bộ chọn nào chọn phần tử có id="huong-dan"?
Dấu chấm chọn class.
Đúng: #huong-dan chọn id tương ứng.
Không có # thì được hiểu như tên phần tử.
Dấu phẩy ghép nhiều bộ chọn, không thay dấu #.
Lời giải
Dấu # đứng trước giá trị id.
Liên kết tệp CSS
```html
<link rel="stylesheet" href="style.css">
```
Đặt phần tử link trong head. Nếu style.css cùng thư mục thì đường dẫn như trên; khi chuyển tệp sang thư mục css, cần sửa href thành css/style.css. Viết đúng quy tắc trong tệp chưa đủ nếu trang không tải được tệp.
Ví dụ xem cách làm
Viết CSS đặt màu đỏ cho mọi h2 và h3 bằng một quy tắc.
Lời giải
```css
h2, h3 { color: red; }
```
Ví dụ xem cách làm
Khác nhau giữa .note và p.note là gì?
Lời giải
.note chọn mọi phần tử mang class note; p.note chỉ chọn phần tử p mang class đó. Dấu chấm gắn liền p không có nghĩa chọn một phần tử con.
Những điều cần nhớ
Trước khi tính màu hoặc cỡ chữ, xác định bộ chọn có khớp phần tử không. Viết CSS dùng chung giúp sửa ở một nơi và áp dụng cho nhiều phần tử/trang.
Đang học