Đáp án Tin học ứng dụng 12 kết nối bài 13: Khái niệm, vai trò của CSS
File đáp án Tin học 12 tin học ứng dụng kết nối tri thức bài 13: Khái niệm, vai trò của CSS. Toàn bộ câu hỏi, bài tập ở trong bài học đều có đáp án. Tài liệu dạng file word, tải về dễ dàng. File đáp án này giúp kiểm tra nhanh kết quả. Chỉ có đáp án nên giúp học sinh tư duy, tránh học vẹt.
BÀI 13. KHÁI NIỆM, VAI TRÒ CỦA CSS
KHỞI ĐỘNG
Quan sát trang web trong Hình 13.1 và trả lời các câu hỏi sau:
- Mã nguồn chan web có những phần tử HTML nào?
- Định dạng các phần tử HTML này có những đặ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?
Giải chi tiết:
Hình 13.1 cung cấp thông tin về lịch sử phát triển HTML, và không trực tiếp cho thấy mã nguồn của trang web. Tuy nhiên, để trả lời các câu hỏi bạn đề ra, chúng ta sẽ dựa vào kiến thức về HTML:
Mã nguồn trang web có những phần tử HTML nào?
Một trang web HTML cơ bản thường có các phần tử sau:
<!DOCTYPE html>
<html>
<head>
<title>Tiêu đề trang web</title>
</head>
<body>
<h1>Tiêu đề chính</h1>
<p>Đoạn văn bản</p>
<a href="link.html">Liên kết</a>
<img src="image.png" alt="Mô tả hình ảnh">
<div>Khối nội dung</div>
<span>Nội dung inline</span>
</body>
</html>
Định dạng các phần tử HTML này có những đặc điểm chung nào?
Các phần tử HTML thường có cấu trúc mở đầu bằng một thẻ mở (ví dụ: <p>) và kết thúc bằng một thẻ đóng (ví dụ: </p>).
Các phần tử có thể có thuộc tính (attributes) để cung cấp thông tin thêm hoặc điều chỉnh cách hiển thị của phần tử đó. Ví dụ: <a href="link.html">Liên kết</a>, thuộc tính href chỉ định địa chỉ liên kết.
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?
Có, điều này được thực hiện bằng cách sử dụng CSS (Cascading Style Sheets). Bạn có thể định nghĩa các quy tắc định dạng trong một tập tin CSS riêng hoặc trong phần <style> của tài liệu HTML.
Ví dụ:
p {
color: blue;
font-size: 14px;
}
h1 {
color: red;
text-align: center;
}
Các quy tắc này sẽ áp dụng cho tất cả các phần tử <p> và <h1> trong tài liệu HTML.
1. Khái niệm mẫu định dạng css
Hoạt động 1: Tìm hiểu khái niệm và ý nghĩa của CSS
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.
Giải chi tiết:
Dựa trên mã nguồn trang web trong Hình 13.2, có một số nhận xét về cách thiết lập định dạng của trang này như sau:
Sử dụng CSS trong phần <style>:
Mã nguồn trang web đã sử dụng CSS để định dạng các phần tử HTML thông qua các quy tắc CSS đặt trong phần <style> của thẻ <head>.
Ví dụ:
<style>
h1 {color: red;}
h1 {border: 2px solid blue;}
p {text-indent: 15px;}
</style>
Cách áp dụng các quy tắc CSS:
Quy tắc CSS h1 {color: red;} đặt màu chữ của tất cả các thẻ <h1> thành màu đỏ.
Quy tắc h1 {border: 2px solid blue;} đặt viền của các thẻ <h1> thành viền màu xanh, dày 2 pixel và dạng đường viền solid.
Quy tắc p {text-indent: 15px;} đặt thụt lề dòng đầu tiên của tất cả các thẻ <p> (đoạn văn) 15 pixel.
Nhận xét về mã nguồn:
Mã nguồn khá đơn giản và dễ hiểu, sử dụng đúng các thẻ HTML cơ bản và các quy tắc CSS.
Tuy nhiên, có một điểm cần chú ý là việc viết nhiều quy tắc cho cùng một phần tử trong CSS (h1 {color: red;} và h1 {border: 2px solid blue;}). Điều này hoàn toàn hợp lệ nhưng có thể được gộp lại để dễ quản lý hơn:
h1 {
color: red;
border: 2px solid blue;
}
Định dạng mẫu một lần và áp dụng cho nhiều phần tử HTML:
Cách thiết lập định dạng trong mã nguồn này cho phép áp dụng các quy tắc định dạng mẫu (CSS) một lần và áp dụng cho nhiều phần tử HTML cùng loại. Ví dụ, tất cả các thẻ <h1> sẽ có cùng màu chữ và viền, tất cả các thẻ <p> sẽ có cùng thụt lề dòng đầu tiên.
2. Em thấy gì từ đoạn mã nguồn trên?
Giải chi tiết:
Trong đoạn mã nguồn ở Hình 13.2, chúng ta thấy rằng định dạng của trang web được thiết lập bằng CSS (Cascading Style Sheets). CSS là một ngôn ngữ độc lập với HTML, được sử dụng để định dạng và thiết kế trang web.
Trong Hình 13.3, chúng ta thấy ba mẫu định dạng CSS được ghi trong thẻ <style>...</style> trong phần tử <head>. Các mẫu định dạng này được áp dụng cho các phần tử HTML tương ứng trong trang web:
Mẫu định dạng đầu tiên (h1 {color: red;}) thiết lập màu chữ đỏ cho các phần tử <h1>.
Mẫu định dạng thứ hai (h1 {border: 2px solid blue;}) thiết lập một khung viền màu xanh có độ dày 2 pixel cho các phần tử <h1>.
Mẫu định dạng thứ ba (p {text-indent: 15px;}) thiết lập thụt đầu dòng vào 15 pixel cho tất cả các phần tử <p>.
Câu hỏi 1: Ngôn ngữ CSS có phải là HTML không?
Giải chi tiết:
Không, ngôn ngữ CSS không phải là HTML. CSS (Cascading Style Sheets) là một ngôn ngữ độc lập với HTML được sử dụng để định dạng và thiết kế trang web. Trong khi HTML được sử dụng để xây dựng cấu trúc và nội dung của trang web, CSS được sử dụng để điều chỉnh và định dạng giao diện và kiểu dáng của các phần tử HTML trên trang web.
Câu hỏi 2: Các mẫu định dạng CSS thường được mô tả như thế nào?
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.
Giải chi tiết:
Câu trả lời đúng là C. Các mẫu định dạng CSS có thể được viết trên nhiều hàng. Trong thẻ <style> trong phần tử <head> của trang web, bạn có thể viết các quy tắc định dạng CSS trên nhiều dòng để tăng tính rõ ràng và dễ đọc của mã nguồn. Điều này giúp cho việc quản lý và sửa đổi mẫu định dạng trở nên dễ dàng hơn.
2. CẤU TRÚC CSS
Hoạt động 2: Tìm hiểu cấu trúc tổng quát của CSS
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
Giải chi tiết:
Cấu trúc tổng quát của một mẫu định dạng CSS có hai phần:
- Vùng mô tả (declaration block): 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 “;”.
- Bộ chọn (selector): quy định những thẻ HTML nào được chọn để áp dụng định dạng này.
Câu hỏ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?
Giải chi tiết:
Để thiết lập CSS để áp dụng cho toàn bộ tệp HTML, em có thể sử dụng cách thiết lập CSS trong (internal CSS) hoặc cách thiết lập CSS ngoài (external CSS).
Câu hỏ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?
Giải chi tiết:
Sử dụng cách thiết lập CSS ngoài. Em có thể tạo một tệp CSS riêng, chứa các mẫu định dạng CSS, và sau đó liên kết tệp CSS này với các trang web khác nhau bằng cách sử dụng thẻ link hoặc lệnh @import trong phần tử <head> của trang web. Điều này giúp áp dụng đồng thời các mẫu định dạng CSS cho nhiều trang web một cách dễ dàng và thống nhất.
3. VAI TRÒ, Ý NGHĨA CỦA CSS
Hoạt động 3: Tìm hiểu ý nghĩa, vai trò của CSS
Tìm hiểu, thảo luận và trả lời các câu hỏi sau:
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?
2. Sử dụng CSS có những ưu điểm gì trong việc định dạng trang web.
Giải chi tiết:
1. Nếu không sử dụng CSS, các định dạng của trang web phải được 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. Điều này đòi hỏi thời gian và công sức để định dạng từng phần tử một và có thể dẫn đến việc không thống nhất trong cách định dạng.
2. Sử dụng CSS có những ưu điểm sau trong việc định dạng trang web:
- Tách biệt giữa nội dung (HTML) và mẫu định dạng (CSS), giúp quản lý và bảo trì trang web dễ dàng hơn.
- Mã CSS có thể viết một lần và áp dụng cho nhiều phần tử HTML, giúp tiết kiệm thời gian và công sức.
- CSS cho phép tạo ra các mẫu định dạng độc lập, mà có thể áp dụng cho nhiều trang web hoặc toàn bộ website một cách dễ dàng.
- CSS cung cấp các tính năng đa dạng như chọn lọc phần tử, kết hợp và kế thừa định dạng, giúp định dạng trang web linh hoạt và mạnh mẽ hơn.
- Sử dụng CSS, bạn có thể áp dụng hiệu ứng, tạo layout phức tạp, điều chỉnh kích thước và vị trí phần tử một cách linh hoạt.
CSS cung cấp khả năng tùy chỉnh định dạng cho các thiết bị khác nhau, như màn hình máy tính, điện thoại di động và máy in, để tối ưu trải nghiệm người dùng trên các nền tảng khác nhau.
Câu hỏ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?
Giải chi tiết:
Để thiết lập tất cả các đoạn văn bản của trang web có màu xanh (blue) bằng CSS, bạn có thể sử dụng một trong các cách sau:
- CSS nội tuyến (Inline CSS).
- CSS trong (Internal CSS).
- CSS ngoài (External CSS).
Câu hỏi 2: Giả sử có một mẫu định dạng CSS như sau:
Hãy giải thích ý nghĩa của mẫu định dạng CSS trên.
Giải chi tiết:
Mẫu định dạng CSS h1, h2, h3 { border: 2px solid red; } có ý nghĩa như sau:
- h1, h2, h3 là bộ chọn (selector) trong CSS. Trong trường hợp này, nó áp dụng định dạng cho tất cả các phần tử <h1>, <h2>, và <h3> trong tài liệu HTML.
- border: 2px solid red; là một khai báo CSS được áp dụng cho các phần tử đã được chọn. Trong trường hợp này, nó định dạng đường viền (border) của các phần tử này. Cụ thể, đường viền có độ dày 2 pixel, màu sắc đỏ, và kiểu đường viền là "solid" (đường viền liền).
LUYỆN TẬP
Câu 1: Khẳng định "Ngôn ngữ định dạng CSS chính là ngôn ngữ HTML" là đúng hay sai?
Giải chi tiết:
Khẳng định "Ngôn ngữ định dạng CSS chính là ngôn ngữ HTML" là sai. Ngôn ngữ định dạng CSS (Cascading Style Sheets) và ngôn ngữ HTML (Hypertext Markup Language) là hai ngôn ngữ khác nhau và có mục đích sử dụng khác nhau trong việc xây dựng trang web. HTML định nghĩa cấu trúc và nội dung, trong khi CSS định dạng và trình bày các phần tử HTML.
Câu 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?
Giải chi tiết:
Đúng, khi thay đổi thông tin trong một tệp CSS, bạn có thể làm thay đổi định dạng của nhiều trang web hoặc cả một website.
VẬN DỤNG
Câu 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.
Giải chi tiết:
Style Sheet trong các phần mềm soạn thảo văn bản và CSS trong trang web có sự giống nhau và tương thích với nhau trong việc định dạng và trình bày các phần tử văn bản. Sự tương đồng này cho phép bạn áp dụng kiến thức và kỹ năng CSS của bạn từ trang web sang các phần mềm soạn thảo văn bản và ngược lại.
Câu 2: Thiết lập trang web với nội dung sau và định dạng trang bằng các mẫu CSS.
Giải chi tiết:
Dưới đây là mã nguồn HTML và CSS để thiết lập trang web với nội dung trong hình và định dạng trang bằng các mẫu CSS.
<!DOCTYPE html>
<html lang="vi">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Lịch sử CSS</title>
<style>
body {
font-family: Arial, sans-serif;
line-height: 1.6;
background-color: #f4f4f4;
margin: 0;
padding: 20px;
}
h1 {
color: #333;
}
h2 {
color: #555;
border-bottom: 2px solid #ccc;
padding-bottom: 5px;
}
p {
margin: 10px 0;
text-indent: 20px;
}
.container {
max-width: 800px;
margin: 0 auto;
background: #fff;
padding: 20px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}
</style>
</head>
<body>
<div class="container">
<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 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 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 tiếp tục đượ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 <a href="https://www.w3.org/" target="_blank">https://www.w3.org/</a>.</p>
</div>
</body>
</html>
Giải thích mã nguồn:
- HTML cơ bản:
- <!DOCTYPE html>: Khai báo kiểu tài liệu HTML5.
- <html lang="vi">: Thẻ mở đầu cho tài liệu HTML, với ngôn ngữ là tiếng Việt.
- <meta charset="UTF-8">: Đặt mã hóa ký tự là UTF-8 để hiển thị chính xác các ký tự tiếng Việt.
- <meta name="viewport" content="width=device-width, initial-scale=1.0">: Đảm bảo trang web hiển thị tốt trên các thiết bị di động.
- <title>Lịch sử CSS</title>: Tiêu đề của trang web.
- CSS trong thẻ <style>:
- body: Định dạng cho toàn bộ trang, bao gồm font chữ, màu nền, và khoảng cách.
- h1 và h2: Định dạng cho các tiêu đề, bao gồm màu chữ và viền dưới cho h2.
- p: Định dạng cho đoạn văn, bao gồm khoảng cách giữa các đoạn và thụt lề đầu dòng.
- .container: Định dạng cho khối nội dung chính, bao gồm chiều rộng tối đa, căn giữa, màu nền, khoảng cách và bóng đổ.
- Nội dung chính:
- Sử dụng các thẻ <h1>, <h2>, và <p> để cấu trúc nội dung.
- Sử dụng thẻ <a> để tạo liên kết tới trang web W3C.
Trang web này sẽ hiển thị nội dung và định dạng theo yêu cầu của bạn, sử dụng các mẫu CSS để tạo ra giao diện dễ đọc và dễ quản lý.
=> Giáo án Tin học ứng dụng 12 kết nối bài 13: Khái niệm, vai trò của CSS