BÀI 13 - KHÁI NIỆM, VAI TRÒ CỦA CSS

🧾 1. KHÁI NIỆM CSS

CSS (Cascading Style Sheets) là ngôn ngữ định dạng cho các phần tử HTML trong trang web.
CSS độc lập với HTML, không chứa nội dung mà chỉ định dạng hiển thị (màu sắc, căn lề, viền...).
CSS giúp tách riêng phần nội dung (HTML) và phần định dạng (CSS), giúp quản lý dễ dàng hơn.
Mẫu định dạng CSS được khai báo trong thẻ <style> (trong phần <head>), hoặc trong file .css.

Ví dụ:

h1 { color: red; }      /* chữ đỏ cho tiêu đề */
p { text-indent: 15px; color: blue; }  /* đoạn văn có lề đầu và màu xanh */

🧾 2. CẤU TRÚC CSS

Một mẫu định dạng CSS có 2 thành phần chính:

Bộ chọn (selector): chỉ định phần tử HTML được áp dụng.
Vùng mô tả (declaration block): định dạng cho phần tử, gồm {thuộc_tính: giá_trị;}

Ví dụ:

h1, h2 { color: red; }   /* áp dụng cùng lúc cho nhiều thẻ */

🔸 3 Cách thiết lập CSS

CSS nội tuyến (inline): Viết trực tiếp trong thẻ HTML qua thuộc tính style.

Ví dụ: <h1 style="color:red;">Tiêu đề</h1>

CSS trong (internal): Viết trong thẻ <style> bên trong phần <head> của tệp HTML.
CSS ngoài (external): Viết trong file .css và kết nối vào HTML bằng <link> hoặc @import.

Cách kết nối tệp HTML với CSS như sau:

Cách 1: Sử dụng thẻ link đặt trong vùng head của trang web, ví dụ:

Cách 2: Sử dụng lệnh @import đặt trong phần tử style và nằm trong phần tử head của trang web, ví dụ:

Một tệp CSS có thể được thiết lập để đồng thời áp dụng cho nhiều trang web, giúp cho việc định dạng nhiều trang web thống nhất và khi cần chỉnh sửa định dạng thì chỉ cần sửa một lần trong tệp định dạng css.

Lợi ích của CSS ngoài: