Bài 13. Khái niệm, vai trò của CSS
SAU BÀI HỌC NÀY EM SẼ:
Quan sát trang web trong Hình 13.1, trả lời các câu hỏi sau:
Lịch sử phát triển HTML
Ý tưởng ban đầu của Berners-Lee là muốn thiết lập một chuẩn chung để thể hiện và chia sẻ các văn bản có thể trao đổi bên trong cơ quan CERN.
Hình 13.1. Trang web
1. KHÁI NIỆM MẪU ĐỊNH DẠNG CSS
Hoạt động 1
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Lịch sử phát triển HTML</title>
<style>
h1 {color: red;}
h1 {border: 2px solid blue;}
p {text-indent: 15px;}
</style>
</head>
<body>
<h1>Lịch sử phát triển HTML</h1>
<p>Các chuẩn HTML của trang web hiện nay được nhà vật lí Tim Berners-Lee đưa ra lần đầu tiên vào những năm 1990 của thế kỉ XX tại trung tâm vật lí hạt nhân CERN.</p>
<p>Ý tưởng ban đầu của Berners-Lee là muốn thiết lập một chuẩn chung để thể hiện và chia sẻ các văn bản có thể trao đổi bên trong cơ quan CERN.</p>
</body>
</html>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.
<style>
h1 {color: red;}
h1 {border: 2px solid blue;}
p {text-indent: 15px;}
</style>CSS là ngôn ngữ đị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.
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> (trong phần tử head): 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>.
Như vậy, CSS có thể hiểu là tập các mẫu định dạng viết độc lập với mã nguồn HTML của trang web và dùng để định dạng cho các phần tử HTML tương ứng. CSS có cách viết (ngôn ngữ CSS) độc lập với ngôn ngữ HTML. 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ử, ví dụ <h1> và <p> trong trang web trên.
Mẫu định dạng CSS là một công cụ hỗ trợ giúp định dạng nội dung trang web. CSS sử dụng một ngôn ngữ mô tả riêng, độc lập với HTML.
Hoạt động 2
Quan sát, tìm hiểu và thảo luận về cấu trúc tổng quát của các mẫu định dạng 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) và vùng mô tả (declaration block). Vùng mô tả bao gồm một hay nhiều quy định có dạng {thuộc tính: giá trị;}, các quy định được viết cách nhau bởi dấu chấm phẩy. Bộ chọn sẽ quy định những thẻ HTML nào được chọn để áp dụng định dạng này.
Cấu trúc CSS có thể ở dạng đơn giản, trong đó vùng mô tả chỉ có một quy định:
bộ chọn {thuộc tính: giá trị;}hoặc nhiều quy định ở vùng mô tả như sau:
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;
}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ề đầu dòng 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;}Bộ chọn có thể là một thẻ để áp dụng như hai ví dụ trên hoặc đồng thời nhiều thẻ. Cách viết này giúp cho CSS dễ thiết lập và áp dụng.
Ví dụ 3: 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ẻ được viết cách nhau bởi dấu phẩy.
h1, h2, h3 {color: red;}Có ba cách thiết lập CSS là CSS trong (internal CSS), CSS ngoài (external CSS) và CSS nội tuyến (inline CSS).
a) Cách thiết lập CSS trong
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. Với cách thiết lập này, 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. Với cách thiết lập CSS trong, các mẫu định dạng CSS chỉ được áp dụng cho tệp HTML hiện thời. Cách thiết lập CSS trong ví dụ ở Hoạt động 1 là thiết lập CSS trong.
b) Cách thiết lập CSS ngoài
Các mẫu định dạng CSS được viết trong một tệp CSS, bên ngoài tệp HTML. Tệp CSS này sẽ bao gồm các mẫu định dạng như đã mô tả ở trên, theo ngôn ngữ CSS. 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.
Tệp styles.css sau là ví dụ cách thiết lập tệp CSS ngoài. Các chú thích dưới dạng /*...*/ và có thể viết trên nhiều dòng.
styles.css
/* tệp thông tin CSS */
h1 {color: red;}
h1 {border: 2px solid blue;}
p {text-indent: 15px;}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ụ:
<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, ví dụ:
<style>
@import "styles.css";
</style>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ó 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ách làm này mất thời gian nhưng thời gian thực hiện sẽ nhanh. Các lợi ích khác của cách thiết lập CSS nội tuyến sẽ được trình bày trong phần sau.
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.
Hoạt động 3
Tìm hiểu, thảo luận và trả lời các câu hỏi sau:
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. Nếu có nhiều trang web và có nhiều phần tử HTML thì công việc này mất nhiều thời gian và có thể không thống nhất. 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 được thiết lập với mục đích làm cho 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ó thể được dùng chung cho nhiều trang web.
Hãy giải thích ý nghĩa của mẫu định dạng CSS trên.
LUYỆN TẬP
Lịch sử CSS
Ý tưởng
Ý tưởng chính của CSS là tạo ra các mẫu định dạng riêng, độc lập cho các phần tử HTML của trang web. Cách tạo ngôn ngữ định dạng riêng này sẽ giúp ích rất nhiều nếu so sánh với việc định dạng theo từng thẻ HTML.
Lịch sử các phiên bản CSS đầu tiên
Các ý tưởng ban đầu được Håkon Wium Lie đưa ra năm 1994 nhưng phiên bản CSS1 chính thức mãi đến năm 1996 mới ra đời.
Phiên bản tiếp theo CSS2 được khởi động ngay sau đó nhưng mãi đến năm 1998 mới hoàn thiện. Phiên bản chính thức hoàn thiện nhất của CSS2 là CSS2.1 ra đời năm 2011, bản CSS2.1 nâng cấp được hoàn thiện năm 2016.
Các phiên bản CSS tiếp theo
Hiện tại, hiệp hội W3C chịu trách nhiệm phát triển các chuẩn của HTML, CSS và các công nghệ có liên quan.
Từ bản CSS3 trở đi, CSS được phát triển theo từng gói riêng biệt. Hiện nay các mô-đun của CSS3 vẫn đang được phát triển và hoàn thiện. Đồng thời, một số chuẩn của CSS4 và CSS5 vẫn đang được tiếp tục thiết lập mới.