HTML tạo cấu trúc, CSS định dạng cách trình bày
HTML đánh dấu tiêu đề, đoạn văn và các thành phần nội dung. CSS, viết tắt của Cascading Style Sheets, là ngôn ngữ định dạng dùng để đặt màu, phông, đường viền và nhiều đặc điểm trình bày khác.
CSS có cú pháp riêng, không phải là HTML. Có thể viết một quy tắc rồi áp dụng cho nhiều phần tử phù hợp, giúp định dạng thống nhất và sửa thuận tiện hơn. Trang chưa có CSS do người soạn đặt vẫn có thể hiện tiêu đề, đoạn văn theo kiểu mặc định của trình duyệt.
Bộ chọn và vùng mô tả
```css
p {
color: maroon;
text-indent: 12px;
}
```
Bộ chọn `p` chọn các phần tử p trong tài liệu. Cặp ngoặc nhọn bao vùng mô tả. Mỗi khai báo gồm **thuộc tính: giá trị;**. Ví dụ có hai khai báo: màu chữ maroon và dòng đầu thụt vào 12 pixel CSS.
Trong ví dụ không có quy tắc khác đổi các thuộc tính ấy, nên mọi p đều nhận màu chữ nâu đỏ và độ thụt dòng đầu 12px. `color` đặt màu chữ; `background-color` đặt màu nền, hai thuộc tính không thay thế nhau.
Một vùng mô tả dùng cho nhiều bộ chọn
```css
h1, h2 {
color: navy;
border: 2px solid teal;
}
```
Dấu phẩy liệt kê h1 và h2. Quy tắc đặt chữ màu navy và đường viền liền màu teal dày 2px cho các phần tử thuộc một trong hai loại. Nó không chỉ chọn h2 ở bên trong h1.
Có thể viết quy tắc trên một dòng hoặc nhiều dòng cho dễ đọc. Dấu hai chấm nối thuộc tính với giá trị; dấu chấm phẩy ngăn các khai báo. Trong bài, ghi dấu chấm phẩy sau mỗi khai báo để tránh dính hai khai báo khi bổ sung.
Bài luyện
Trong p { color: maroon; }, bộ chọn là phần nào?
maroon là giá trị màu.
color là thuộc tính.
Đúng. p chọn các phần tử cần định dạng.
Dấu chấm phẩy phân cách khai báo.
Lời giải
p đứng trước vùng ngoặc nhọn và là bộ chọn. Trong vùng mô tả, color là thuộc tính, maroon là giá trị; quy tắc đặt màu chữ cho phần tử p được chọn.
Bài luyện
Cần đặt màu chữ blue cho các p, không đặt màu nền. Khai báo nào phù hợp?
Đúng. color điều khiển màu chữ.
background-color điều khiển màu nền.
text-indent cần giá trị độ thụt, không dùng màu như vậy.
border liên quan đường viền, không đặt màu chữ.
Lời giải
Mục tiêu là màu chữ nên dùng color: blue;. background-color: blue; đặt nền xanh, chưa đáp ứng việc đổi màu chữ.
Bài luyện
h1, h2 { border: 2px solid teal; } mô tả điều gì trong ví dụ không có quy tắc khác?
Dấu phẩy liệt kê hai bộ chọn, không mô tả quan hệ chứa.
Bộ chọn không dùng vị trí phần tử thứ hai.
CSS không đổi loại thẻ theo cách này.
Đúng. Hai loại phần tử nhận cùng khai báo viền.
Lời giải
Danh sách bộ chọn h1, h2 áp dụng khai báo cho các phần tử h1 hoặc h2. border gồm độ dày 2px, kiểu solid và màu teal; không phải quy tắc đổi cấu trúc HTML.
Bài luyện
Về cách viết quy tắc CSS trong bài, nhận xét nào đúng?
CSS không bắt buộc một dòng.
Đúng. Xuống dòng giúp đọc nhưng không thay cú pháp.
Khai báo CSS không bắt đầu bằng thẻ HTML như vậy.
Khai báo dùng thuộc tính: giá trị, không thay bằng dấu bằng.
Lời giải
Một vùng mô tả có thể trải trên nhiều dòng. Cần giữ bộ chọn, ngoặc nhọn và các cặp thuộc tính–giá trị đúng cú pháp; cách xuống dòng không biến CSS thành HTML.
Đang học