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 đó
Câu hỏi mở đầu trang 71
Đề bài: Quan sát trang web trong Hình 13.1, trả lời các câu hỏi sau:
- Mã nguồn trang web có những phần tử HTML nào?
- Định dạng các phần tử HTML này có đặc điểm chung nào?
- Có thể định dạng mẫu một lần để áp dụng mẫu đó cho nhiều phần tử HTML được không?
Lời giải:
- Các phần tử HTML có trong mã nguồn:
<html>,<head>,<meta>,<title>,<style>,<body>,<h1>,<p>. - Đặc điểm chung của định dạng: các phần tử cùng loại có cùng định dạng (tất cả
<h1>có màu chữ đỏ và khung viền xanh; tất cả<p>đều thụt lề dòng đầu 15 pixel). - Có thể định dạng mẫu một lần rồi áp dụng cho nhiều phần tử HTML nhờ CSS (Cascading Style Sheets).
1. Khái niệm mẫu định dạng CSS
Hoạt động 1 trang 71
Đề bài:
1. Hình 13.2 là mã nguồn của trang web trong Hình 13.1. Em có nhận xét gì về cách thiết lập định dạng của trang này?
Lời giải:
- Định dạng của trang được viết trong thẻ
<style>đặt ở phần<head>. - Không định dạng riêng cho từng thẻ, mà viết một mẫu chung cho tất cả các thẻ cùng loại.
- Cụ thể: mẫu định dạng cho
<h1>(màu đỏ, khung viền xanh) sẽ áp dụng cho tất cả các thẻ<h1>; mẫu cho<p>(thụt lề 15px) áp dụng cho tất cả các thẻ<p>.
2. Em thấy gì từ đoạn mã nguồn trên?
Lời giải:
- Các dòng nằm trong thẻ
<style>được viết bằng một ngôn ngữ đặc biệt, không giống HTML. - Ngôn ngữ này dùng để thiết lập mẫu định dạng cho trang web, gọi là CSS.
- CSS có cách viết riêng, độc lập với HTML. Chỉ cần viết một lần và được áp dụng đồng thời cho tất cả các phần tử cùng loại.
Câu hỏi củng cố mục 1 trang 72
Đề bài:
1. Ngôn ngữ CSS có phải là HTML không?
Lời giải:
Không. CSS là ngôn ngữ định dạng riêng, độc lập với HTML. HTML dùng để đánh dấu nội dung trang web, còn CSS dùng để định dạng cách hiển thị cho nội dung đó. Hai ngôn ngữ có cú pháp khác nhau.
2. Các mẫu định dạng CSS thường được mô tả như thế nào? Chọn phương án đúng.
- A. Trong một bảng.
- B. Phải viết trên một hàng.
- C. Có thể viết trên nhiều hàng.
Lời giải:
Chọn C. Các mẫu định dạng CSS có thể viết trên nhiều hàng, mỗi quy định (thuộc tính: giá trị;) được viết trên một hàng riêng để dễ đọc.
2. Cấu trúc CSS
Hoạt động 2 trang 72
Đề bài: 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.
Lời giải:
Cấu trúc tổng quát của một mẫu định dạng CSS gồm hai phần:
- Bộ chọn (selector): chỉ định thẻ HTML nào sẽ được áp dụng định dạng.
- Vùng mô tả (declaration block): chứa một hoặc nhiều quy định dạng
{thuộc tính: giá trị;}, các quy định cách nhau bởi dấu;.
Dạng đơn giản (một quy định):
bộ chọn {thuộc tính: giá trị;}
Dạng 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;
}
Bộ chọn có thể là nhiều thẻ, viết cách nhau bởi dấu phẩy. Ví dụ: h1, h2, h3 {color: red;} áp dụng chữ đỏ cho cả h1, h2, h3.
Câu hỏi củng cố mục 2 trang 74
Đề bài:
1. Nếu muốn thiết lập CSS để áp dụng cho toàn bộ tệp HTML thì làm cách nào?
Lời giải:
Dùng cách CSS trong (internal CSS): đặt toàn bộ các mẫu định dạng vào bên trong thẻ <style> trong phần <head> của tệp HTML. Khi đó, các định dạng sẽ áp dụng cho tất cả phần tử HTML phù hợp với bộ chọn trong tệp hiện thời.
2. Nếu muốn thiết lập CSS để có thể áp dụng đồng thời cho nhiều trang web thì làm cách nào?
Lời giải:
Dùng cách CSS ngoài (external CSS): viết các mẫu định dạng CSS vào một tệp .css riêng, sau đó liên kết tệp này với các trang HTML bằng một trong hai cách:
- Cách 1: Dùng thẻ
<link>trong<head>:
<head>
<link href="styles.css" rel="stylesheet" type="text/css">
</head>
- Cách 2: Dùng lệnh
@importtrong thẻ<style>:
<style>
@import "styles.css";
</style>
Nhờ vậy, khi cần chỉnh sửa định dạng chỉ cần sửa một lần trong tệp CSS, tất cả các trang liên kết sẽ tự cập nhật.
3. Vai trò, ý nghĩa của CSS
Hoạt động 3 trang 74
Đề bài:
1. Nếu không dùng CSS thì các định dạng của trang web phải thực hiện theo cách nào?
Lời giải:
Nếu không dùng CSS, phải thiết lập thuộc tính trực tiếp cho từng phần tử HTML một cách riêng lẻ. Với nhiều trang web và nhiều phần tử HTML, cách làm này tốn nhiều thời gian và khó thống nhất định dạng giữa các phần tử cùng loại.
2. Sử dụng CSS có những ưu điểm gì trong việc định dạng trang web?
Lời giải:
Một số ưu điểm của CSS:
- Tách việc nhập nội dung và định dạng thành hai công việc độc lập → giảm nhẹ công việc, tăng tính chuyên nghiệp.
- Viết một lần, áp dụng nhiều lần: một mẫu CSS áp dụng cho tất cả các phần tử trong bộ chọn.
- Dùng cho nhiều trang web: khi viết CSS trong tệp ngoài, có thể áp dụng cho nhiều trang trong cùng website.
- Chỉnh sửa dễ dàng: khi cần thay đổi định dạng chỉ cần sửa một lần trong tệp CSS.
Câu hỏi củng cố mục 3 trang 75
Đề bài:
1. Nếu muốn tất cả các đoạn văn bản của trang web có màu xanh (blue) thì cần thiết lập định dạng CSS như thế nào?
Lời giải:
Vì trong HTML, các đoạn văn bản được đánh dấu bởi thẻ <p>, nên cần viết mẫu CSS với bộ chọn là p:
p {color: blue;}
2. Giả sử có một mẫu định dạng CSS như sau: h1,h2,h3 {border: 2px solid red;}. Hãy giải thích ý nghĩa của mẫu định dạng CSS trên.
Lời giải:
- Bộ chọn gồm ba thẻ:
h1,h2,h3(viết cách nhau bởi dấu phẩy). - Vùng mô tả có một quy định:
border: 2px solid red;→ tạo đường viền dày 2 pixel, kiểu nét liền (solid), màu đỏ (red).
→ Ý nghĩa: tất cả các phần tử <h1>, <h2>, <h3> trên trang web sẽ được viền một khung nét liền màu đỏ, dày 2 pixel.
Luyện tập
Luyện tập trang 75
Đề bài:
1. Khẳng định “Ngôn ngữ định dạng CSS chính là ngôn ngữ HTML” là đúng hay sai?
Lời giải:
Sai. CSS và HTML là hai ngôn ngữ khác nhau, có cú pháp khác nhau và vai trò khác nhau:
- HTML dùng để đánh dấu và tạo cấu trúc cho nội dung trang web.
- CSS dùng để định dạng cách hiển thị nội dung đó.
CSS là ngôn ngữ định dạng độc lập với HTML.
2. Khẳng định “Có thể chỉ cần thay đổi thông tin của một tệp CSS sẽ làm thay đổi định dạng của nhiều trang web, thậm chí cả một website” là đúng hay sai?
Lời giải:
Đúng. Vì một tệp CSS ngoài có thể được liên kết với nhiều trang HTML. Khi chỉ cần chỉnh sửa nội dung trong tệp CSS đó, tất cả các trang liên kết sẽ tự động cập nhật định dạng mới. Đây chính là ưu điểm nổi bật của cách thiết lập CSS ngoài.
Vận dụng
Vận dụng trang 75
Đề bài:
1. Trong các phần mềm soạn thảo văn bản thường có chức năng tạo các mẫu định dạng Style Sheet, dùng để tạo khuôn cho các đoạn (paragraph) của văn bản. Em hãy trình bày sự giống nhau và tương thích của Style Sheet trong các phần mềm soạn thảo văn bản với CSS của trang web.
Lời giải:
Điểm giống nhau và tương thích:
- Cả hai đều là mẫu định dạng được tạo sẵn, dùng để định dạng cho nhiều đối tượng cùng loại.
- Đều định nghĩa một lần, áp dụng nhiều lần: Style Sheet áp dụng cho các đoạn văn bản trong tài liệu, CSS áp dụng cho các phần tử HTML trong trang web.
- Đều tách công việc nhập nội dung với công việc định dạng thành hai bước độc lập.
- Khi cần thay đổi định dạng, chỉ cần sửa mẫu định dạng, tất cả các đoạn/phần tử áp dụng mẫu đó sẽ được cập nhật.
→ Về ý tưởng thiết kế, CSS trong web hoạt động tương tự Style Sheet trong soạn thảo văn bản.
2. Thiết lập trang web với nội dung “Lịch sử CSS” (như trong sách) và định dạng trang bằng các mẫu CSS.
Lời giải:
Có thể viết mã nguồn HTML kết hợp CSS trong (internal CSS) như sau:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Lịch sử CSS</title>
<style>
h1 {color: blue; text-align: center;}
h2 {color: red;}
p {text-indent: 20px;}
</style>
</head>
<body>
<h1>Lịch sử CSS</h1>
<p>Ý tưởng của CSS do kĩ sư Håkon Wium Lie, người Na Uy, thiết lập năm 1994 trong khi làm việc với Tim Berners-Lee tại viện Vật lí hạt nhân CERN.</p>
<p>Ý 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.</p>
<h2>Lịch sử các phiên bản CSS đầu tiên</h2>
<p>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 ra đời năm 1996.</p>
<p>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.</p>
<h2>Các phiên bản CSS tiếp theo</h2>
<p>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 gói 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.</p>
<p>Hiện tại, hiệp hội 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 là tổ chức World Wide Web Consortium (W3C), có địa chỉ tại https://www.w3.org/.</p>
</body>
</html>
Giải thích các mẫu CSS đã dùng:
h1 {color: blue; text-align: center;}→ tiêu đề chính màu xanh, canh giữa.h2 {color: red;}→ các tiêu đề phụ có màu đỏ.p {text-indent: 20px;}→ tất cả đoạn văn thụt lề dòng đầu 20 pixel.
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