Bài 13. Khái niệm, vai trò của CSS – Tóm tắt Tin học 12

1. Khái niệm CSS

HTML giúp dựng nên bộ khung và nội dung của trang web; còn CSS lo phần tô màu, sắp xếp bố cục cho trang web ấy trở nên dễ nhìn, dễ dùng.

Định nghĩa

CSS (viết tắt của Cascading Style Sheets, tạm dịch là các tờ định kiểu xếp chồng) là ngôn ngữ định kiểu dùng để mô tả cách trình bày của một tài liệu viết bằng ngôn ngữ đánh dấu, thường là HTML.

Cụ thể, CSS quy định cách các phần tử HTML được hiển thị trên màn hình, trên giấy in hay các phương tiện khác: màu chữ, cỡ chữ, phông chữ, khoảng cách, đường viền, vị trí các khối nội dung,…

2. Vai trò của CSS

Tách biệt nội dung và hình thức: HTML giữ phần nội dung, CSS giữ phần trình bày, giúp mã nguồn rõ ràng, dễ quản lí.
Làm đẹp trang web: định dạng màu nền, màu chữ, phông chữ, viền, khoảng cách,…cho trang web trực quan, hấp dẫn hơn.
Tiết kiệm công sức: viết định kiểu một lần cho một bộ chọn thì mọi phần tử tương đồng đều được áp dụng cùng lúc, không phải sửa lần lượt từng chỗ.
Điều khiển bố cục nhiều trang web cùng lúc: nhờ tách phần định kiểu ra tệp ngoài, việc sửa một tệp sẽ cập nhật đồng thời mọi trang đang liên kết.

3. Cú pháp CSS

Cú pháp một câu lệnh CSS

Bộ chọn (selector): chỉ ra phần tử HTML cần định kiểu, ví dụ p, h1, .lop, .tieu-de.
Khối khai báo: đặt trong cặp dấu ngoặc nhọn, chứa các cặp thuộc tính – giá trị.
Thuộc tính: giá trị: mỗi cặp viết dạng thuộc tính: giá trị; và phân cách nhau bằng dấu chấm phẩy.

selector { thuộc tính: giá trị; thuộc tính: giá trị; }

Ví dụ 1

Định dạng màu chữ đỏ, cỡ chữ 20 điểm cho các đoạn văn p.

Lời giải · 2 bước

p {
  color: red;
  font-size: 20pt;
}

Bước 2

Bộ chọn là p; thuộc tính color nhận giá trị red; thuộc tính font-size nhận giá trị 20pt.

Chú thích và tính kế thừa

Chú thích trong CSS viết giữa /* và */, trình duyệt bỏ qua phần này.
Tính kế thừa: nhiều thuộc tính (như color, font-family, font-size) đặt cho phần tử cha sẽ được các phần tử con bên trong thừa hưởng, nếu phần tử con không được định dạng riêng. Ví dụ đặt color cho body thì chữ trong các p bên trong cũng có màu đó.

4. Ba cách đưa CSS vào trang web

4.1 CSS nội tuyến (inline)

Ghi thuộc tính style ngay trong thẻ mở của phần tử cần định kiểu.

<p style="color: red; font-size: 20pt;">Nội dung đoạn văn</p>

Cách này tiện khi chỉ định dạng một phần tử riêng lẻ; nhưng khi có nhiều phần tử cần cùng kiểu thì rất mất công.

4.2 CSS trong trang (internal)

Đặt khối style trong phần đầu của trang.

<head>
  <style>
    p { color: red; font-size: 20pt; }
  </style>
</head>

Một lần khai báo áp dụng cho mọi phần tử p trên cả trang. Tuy nhiên, cách này chỉ tác động đến trang đang viết.

4.3 CSS ngoài trang (external)

Viết phần định kiểu vào tệp riêng có đuôi css, rồi liên kết vào trang ở phần đầu.

Tệp định kiểu dinhdang.css:

p { color: red; font-size: 20pt; }

Trang trangchu.html:

<head>
  <link rel="stylesheet" type="text/css" href="dinhdang.css">
</head>

Đây là cách được khuyến khích: viết một lần, dùng cho nhiều trang; sửa tệp định kiểu là cập nhật đồng loạt mọi trang.

Cách dùng	Vị trí viết CSS	Phạm vi tác động
Nội tuyến	Thuộc tính `style` trong thẻ phần tử	Chỉ một phần tử
Trong trang	Khối `style` ở phần `head`	Cả trang hiện tại
Ngoài trang	Tệp `css` liên kết bằng `link`	Nhiều trang cùng lúc

5. Lưu ý và lỗi hay gặp

Lưu ý

Quên dấu chấm phẩy ở cuối mỗi khai báo có thể làm câu lệnh tiếp theo bị bỏ qua.
Viết sai tên thuộc tính hoặc sai giá trị (ví dụ colo: red) thì trình duyệt không hiểu, định dạng không được áp dụng.
Khi dùng CSS ngoài, kiểm tra kỹ đường dẫn trong href cho đúng tên và vị trí tệp định kiểu.
Không nên lạm dụng CSS nội tuyến vì làm mã nguồn rối, khó bảo trì.

6. Câu hỏi ôn tập

Câu hỏi 1

1.
CSS là gì? Nêu vai trò chính của CSS trong thiết kế trang web.
2.
Trình bày cú pháp chung của một câu lệnh CSS và giải thích ý nghĩa các thành phần.
3.
Kể tên ba cách đưa CSS vào trang web; nêu ưu, nhược điểm của mỗi cách.
4.
Vì sao nên dùng CSS ngoài trang khi thiết kế nhiều trang cho cùng một website?

Gợi ý trả lời

1.
CSS là ngôn ngữ định kiểu mô tả cách trình bày tài liệu HTML. Vai trò: tách biệt nội dung và hình thức, làm đẹp trang web, tiết kiệm công sức, điều khiển bố cục nhiều trang cùng lúc.
2.
Cú pháp gồm bộ chọn, rồi đến khối khai báo trong cặp ngoặc nhọn; bên trong là các cặp thuộc tính – giá trị phân cách bằng dấu chấm phẩy.
3.
Ba cách: nội tuyến (trong thẻ), trong trang (khối style), ngoài trang (tệp css). Nội tuyến dễ viết nhưng không tiết kiệm; trong trang gọn cho một trang; ngoài trang tái sử dụng được cho nhiều trang.
4.
Vì một tệp css có thể liên kết vào nhiều trang; sửa một chỗ là mọi trang đổi theo, giúp nhất quán và tiết kiệm thời gian.

Nhớ nhanh