1. Kiến thức trọng tâm
CSS (Cascading Style Sheets) là ngôn ngữ dùng để định dạng và trình bày trang web: màu sắc, phông chữ, cỡ chữ, khoảng cách, bố cục. Nếu HTML là khung xương và nội dung của trang web thì CSS là lớp trang điểm làm cho trang đẹp và dễ đọc. Một quy tắc CSS gồm bộ chọn (selector) chỉ phần tử cần định dạng và khối khai báo chứa các cặp thuộc tính – giá trị, ví dụ color: red;. CSS có thể viết trực tiếp trong thuộc tính style của thẻ (nội tuyến), trong thẻ <style> ở đầu trang (nội bộ) hoặc trong tệp .css riêng rồi liên kết vào trang (ngoại bộ). Trong ba cách, tệp CSS ngoại bộ được khuyên dùng vì một tệp có thể phục vụ nhiều trang, giúp toàn bộ website có giao diện thống nhất và dễ bảo trì. CSS giúp tách nội dung khỏi trình bày, nhờ đó người làm web thay đổi giao diện mà không cần sửa từng trang.
2. Ví dụ minh họa
Yêu cầu: dùng CSS để tất cả tiêu đề cấp 1 có màu xanh dương và cỡ chữ 28px, viết theo cách nội bộ và ngoại bộ.
Lời giải:
<!-- Cách nội bộ -->
<style>
h1 { color: blue; font-size: 28px; }
</style>
<!-- Cách ngoại bộ: trong tệp kieu.css -->
h1 { color: blue; font-size: 28px; }
Và trong trang HTML liên kết tới tệp: <link rel="stylesheet" href="kieu.css">.
Giải thích: bộ chọn h1 áp dụng cho mọi tiêu đề cấp 1; hai khai báo đặt màu chữ và cỡ chữ. Cách ngoại bộ dùng chung cho nhiều trang nên khi muốn đổi màu tiêu đề, chỉ cần sửa một tệp duy nhất.
3. Ghi nhớ
- CSS định dạng trang web: màu sắc, phông chữ, cỡ chữ, khoảng cách, bố cục.
- Quy tắc CSS gồm bộ chọn và khối khai báo chứa các cặp thuộc tính – giá trị.
- Ba cách viết: nội tuyến, nội bộ, ngoại bộ; nên ưu tiên tệp CSS ngoại bộ.
- CSS tách nội dung khỏi trình bày, giúp website thống nhất và dễ bảo trì.