Chọn đến phần học sinh cần nhanh chóng thông qua mục lục bằng cách click đến phần đó
I. Lý thuyết trọng tâm
1. Khái niệm mẫu định dạng CSS
1.1. CSS là gì?
CSS là viết tắt của cụm từ Cascading Style Sheets, được hiểu 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.
Khi xây dựng một trang web, ngoài việc sử dụng các thẻ HTML để tạo nội dung, chúng ta cần định dạng để trang web trở nên đẹp mắt và chuyên nghiệp hơn. CSS chính là công cụ giúp thực hiện công việc định dạng này.
Đặc điểm quan trọng của CSS:
- 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 trong trang web
- CSS có cách viết riêng (ngôn ngữ CSS), độc lập với ngôn ngữ HTML
- Các mẫu định dạng CSS được viết độc lập với mã nguồn HTML và dùng để định dạng cho các phần tử HTML tương ứng
1.2. Ví dụ minh họa
Quan sát đoạn mã nguồn sau của một trang web:
Trong đoạn mã nguồn trên, các dòng từ 6 đến 10 chính là mẫu định dạng CSS:
<style>
h1 {color: red;}
h1 {border: 2px solid blue;}
p {text-indent: 15px;}
</style>
Giải thích từng mẫu định dạng:
| Mẫu CSS | Ý nghĩa |
|---|---|
h1 {color: red;} |
Thiết lập màu chữ đỏ cho tất cả các phần tử <h1> |
h1 {border: 2px solid blue;} |
Thiết lập khung viền màu xanh có độ dày 2 pixel cho các phần tử <h1> |
p {text-indent: 15px;} |
Thiết lập dòng đầu thụt vào 15 pixel cho tất cả các phần tử <p> |
Lưu ý: 1 pixel = 2,54/96 cm
Kết quả hiển thị của trang web sau khi áp dụng CSS:
1.3. Ưu điểm nổi bật của CSS
Điểm đặc biệt của CSS là 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ử phù hợp trong trang web. Ví dụ, trong đoạn mã trên, tất cả các thẻ <h1> sẽ tự động có màu chữ đỏ và khung viền xanh, tất cả các thẻ <p> sẽ tự động có dòng đầu thụt vào 15 pixel.
Ghi nhớ: Mẫu định dạng CSS là một công cụ hỗ trợ giúp định dạng nội dung trang web nhanh hơn, thuận tiện hơn bằng cách định nghĩa một lần và sử dụng nhiều lần. CSS sử dụng ngôn ngữ mô tả riêng, độc lập với HTML.
2. Cấu trúc CSS
2.1. Cấu trúc tổng quát
Mỗi mẫu định dạng CSS bao gồm hai phần chính:
| Thành phần | Tên tiếng Anh | Chức năng |
|---|---|---|
| Bộ chọn | Selector | Quy định những thẻ HTML nào được chọn để áp dụng định dạng |
| Vùng mô tả | Declaration block | Bao gồm một hay nhiều quy định có dạng {thuộc tính: giá trị;} |
Các quy định trong vùng mô tả được viết cách nhau bởi dấu chấm phẩy (;).
2.2. Cú pháp CSS
Dạng đơn giản (chỉ có một quy định):
bộ_chọn {thuộc_tính: giá_trị;}
Dạng có nhiều quy định:
bộ_chọn {
thuộc_tính_1: giá_trị_1;
thuộc_tính_2: giá_trị_2;
...
thuộc_tính_n: giá_trị_n;
}
2.3. Các ví dụ về cấu trúc CSS
Ví dụ 1: Mẫu CSS thiết lập màu chữ đỏ cho bộ chọn là tất cả các thẻ h1:
h1 {color: red;}
Ví dụ 2: Mẫu CSS gồm hai quy định (thụt lề dòng đầu và chữ màu xanh) áp dụng cho bộ chọn là tất cả các thẻ p:
p {text-indent: 15px; color: blue;}
Ví dụ 3: Bộ chọn có thể là đồng thời nhiều thẻ. Mẫu CSS sau thiết lập định dạng chữ đỏ cho đồng thời các thẻ h1, h2, h3. Các thẻ này được viết cách nhau bởi dấu phẩy:
h1, h2, h3 {color: red;}
Cách viết bộ chọn gồm nhiều thẻ giúp cho CSS dễ thiết lập và áp dụng hơn.
2.4. Ba cách thiết lập CSS
Có ba cách để thiết lập CSS trong trang web:
| Cách thiết lập | Tên tiếng Anh | Vị trí đặt CSS | Phạm vi áp dụng |
|---|---|---|---|
| CSS trong | Internal CSS | Trong thẻ <style>, đặt ở phần <head> |
Chỉ tệp HTML hiện tại |
| CSS ngoài | External CSS | Trong tệp .css riêng biệt | Nhiều trang web, cả website |
| CSS nội tuyến | Inline CSS | Trong thuộc tính style của thẻ HTML |
Chỉ phần tử HTML cụ thể đó |
a) Cách thiết lập CSS trong (Internal CSS)
Cách thiết lập này đưa toàn bộ các mẫu định dạng vào bên trong thẻ <style> và đặt trong phần tử head của tệp HTML.
<head>
<style>
h1 {color: red;}
h1 {border: 2px solid blue;}
p {text-indent: 15px;}
</style>
</head>
Đặc điểm:
- Các định dạng sẽ áp dụng cho tất cả các phần tử HTML của trang web phù hợp với mô tả bộ chọn của CSS
- 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 (External CSS)
Các mẫu định dạng CSS được viết trong một tệp CSS riêng biệt, bên ngoài tệp HTML. Sau đó, cần thực hiện thao tác kết nối, liên kết tệp HTML với tệp định dạng CSS.
Ví dụ tệp styles.css:
/* tệp thông tin CSS */
h1 {color: red;}
h1 {border: 2px solid blue;}
p {text-indent: 15px;}
Lưu ý: Các dòng chú thích trong CSS có dạng /* ... */ và có thể trên nhiều dòng.
Cách kết nối tệp HTML với tệp CSS:
Cách 1: Sử dụng thẻ <link> đặt trong vùng head của trang web:
<head>
<link href="styles.css" rel="stylesheet" type="text/css">
</head>
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:
<style>
@import "styles.css";
</style>
Ưu điểm của CSS ngoài:
- 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
- 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 (Inline CSS)
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.
<h1 style="color: red; border: 2px solid blue;">Tiêu đề</h1>
<p style="text-indent: 15px;">Đoạn văn bản</p>
Đặc điểm:
- Cách làm này mất nhiều thời gian hơn nhưng thời gian thực hiện sẽ nhanh
- Chỉ áp dụng cho phần tử HTML cụ thể được thiết lập
Ghi nhớ: Cấu trúc tổng quát của CSS bao gồm các mẫu định dạng dùng để tạo khuôn cho các phần tử HTML của trang web. Mỗi mẫu này bao gồm hai phần: bộ chọn và vùng mô tả. Có thể thiết lập CSS trong, ngoài thông qua tệp CSS hoặc đặt nội tuyến trực tiếp bên trong các phần tử HTML thông qua thuộc tính style.
3. Vai trò, ý nghĩa của CSS
3.1. Nếu không dùng CSS
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 riêng lẻ.
Hạn chế khi không dùng CSS:
- Nếu có nhiều trang web và có nhiều phần tử HTML thì công việc này mất rất nhiều thời gian
- Định dạng có thể không thống nhất giữa các phần tử và các trang
3.2. Ưu điểm khi sử dụng CSS
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.
| Ưu điểm | Chi tiết |
|---|---|
| Tách biệt nội dung và định dạng | CSS giúp 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. Điều này làm 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 |
| Thiết lập một lần, dùng nhiều lần | 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 |
| Định dạng một lần, áp dụng cho nhiều trang | 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 |
| Dễ dàng chỉnh sửa | 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 trong tệp CSS |
Ghi nhớ: CSS được thiết lập với mục đích làm cho công việc định dạng nội dung trang web trở nên khoa học hơn, nhanh hơn, thuận tiện hơn. Với CSS, các mẫu định dạng được thiết kế độc lập, có thể viết ra một lần nhưng được áp dụng nhiều lần.
Thầy Phạm Thành Danh
(Người kiểm duyệt, ra đề)
Chức vụ: Trưởng ban biên soạn môn Tin Học THPT
Trình độ: Cử nhân Sư phạm Tin học, Chứng chỉ hạng II, Chứng chỉ Tin học, Ngoại ngữ B1
Kinh nghiệm: 8+ năm kinh nghiệm tại Trường THPT Thuận Hóa