Nội dung chính Tin học ứng dụng 12 kết nối bài 13: Khái niệm, vai trò của CSS

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

1. KHÁI NIỆM MẪU ĐỊNH DẠNG CSS

- Trong đoạn mã nguồn ở Hình 13.2, các dòng từ 6 đến 10 là một loại ngôn ngữ đặc biệt dùng để thiết lập các mẫu định dạng cho trang web. Các mẫu định dạng này được gọi là Cascading Style Sheets và viết tắt là CSS.

Hình 13.3. Mẫu định dạng CSS

- Khái niệm: CSS là định dạng độc lập với chuẩn HTML, được dùng để thiết lập các mẫu định dạng dùng trong trang web.

- Trong Hình 13.3, ba mẫu định dạng tương ứng với ba dòng được ghi trong thẻ <style>...</style>: 

+ Mẫu thứ nhất thiết lập màu chữ đỏ cho các phần tử <h1>.

+ Mẫu thứ hai thiết lập khung viền màu xanh có độ dày 2 pixel cũng được áp dụng cho các phần tử <h1>. 

+ Mẫu thứ ba thiết lập dòng đầu thụt vào 15 pixel cho tất cả các phần tử <p>.

CSS có cách viết riêng (ngôn ngữ CSS), độc lập với ngôn ngữ HTML và dùng để định dạng cho các phần tử HTML tương ứng.

- Phạm vi áp dụng: Chỉ cần viết mẫu định dạng một lần và được áp dụng đồng thời cho tất cả các phần tử.

2. CẤU TRÚC CSS

- Cấu trúc tổng quát của một mẫu định dạng CSS có hai phần: 

+ Bộ chọn (selector): quy định những thẻ HTML nào được chọn để áp dụng định dạng này.

+ Vùng mô tả (declaration block): bao gồm một hay nhiều quy định có dạng

, các quy định được viết cách nhau bởi dấu ";". 

- Cấu trúc CSS có thể ở dạng đơn giản, trong đó vùng mô tả chỉ có một quy định:

hoặc nhiều quy định ở vùng mô tả như sau:

- Có ba cách thiết lập CSS là: 

+ CSS trong (internal CSS).

+ CSS ngoài (external CSS).

+ CSS nội tuyến (inline CSS).

a) Cách thiết lập CSS trong

- Cách thiết lập: Các mẫu định dạng được viết bên trong thẻ <style> và đặt trong phần tử head của tệp HTML. 

- Phạm vi áp dụng: Các mẫu định dạng CSS chỉ được áp dụng cho tệp HTML hiện thời. 

b) Cách thiết lập CSS ngoài

- Cách thiết lập: Các mẫu định dạng CSS được viết trong một tệp CSS, bên ngoài tệp HTML. 

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

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

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

* 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.

c) Cách thiết lập CSS nội tuyến 

- Cách thiết lập: Có thể định dạng CSS trực tiếp bên trong thẻ của các phần tử HTML bằng cách chỉ ra các thuộc tính và giá trị cho thuộc tính style.

- Đặc điểm: Cách làm này mất thời gian nhưng thời gian thực hiện sẽ nhanh.

3. VAI TRÒ, Ý NGHĨA CỦA CSS

- Ý nghĩa: Nếu không dùng CSS thì khi định dạng nội dung trang web ta phải thực hiện thông qua việc thiết lập các thuộc tính cho từng phần tử HTML.

- Vai trò: CSS ra đời để phục vụ việc định dạng nội dung trang web một cách thống nhất, nhanh chóng và thuận tiện:

+ CSS tách việc nhập nội dung trang web bằng thẻ HTML và việc định dạng thành hai công việc độc lập với nhau. 

Giúp giảm nhẹ công việc nhập nội dung, tăng tính chuyên nghiệp của việc định dạng.

+ Các mẫu định dạng của CSS có thể được viết ngay trong phần head của trang HTML, chỉ cần viết một lần và áp dụng cho tất cả các phần tử trong bộ chọn. 

Các định CSS được thiết lập một lần và được dùng nhiều lần.

+ Các mẫu định dạng có thể viết trong tệp CSS ngoài và kết nối vào bất kì trang web nào. 

Tính năng này cho phép định dạng một lần và áp dụng cho nhiều trang web, thậm chí cả một website. Nếu một website (hay trang web) cần thay đổi định dạng thì có thể chỉ cần chỉnh sửa một lần.