Đáp án Khoa học máy tính 12 Kết nối bài 13: Khái niệm, vai trò của CSS
File đáp án Khoa học máy tính 12 Kết nối 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.
Xem: => Giáo án Tin học 12 - Định hướng Khoa học máy tính kết nối tri thức
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:
- Chúng ta đã sử dụng lớp CSS "red-bold" để định dạng chữ màu đỏ và in đậm cho các phần tử <p>. Bằng cách áp dụng lớp CSS này cho nhiều phần tử <p> khác nhau, chúng ta có thể áp dụng cùng một mẫu định dạng cho nhiều phần tử HTML.
- Mã nguồn trang web có thể bao gồm nhiều phần tử HTML khác nhau như <html>, <head>, và <body>.
- Các phần tử HTML có thể được định dạng chung bằng cách sử dụng CSS để áp dụng các quy tắc định dạng cho một lớp hoặc mẫu và áp dụng nó cho nhiều phần tử.
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.
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:
Các em sử dụng mã HTML như sau để dùng kiểu chữ đậm, rồi thực hiện toàn bài.
=> Giáo án Khoa học máy tính 12 Kết nối bài 13: Khái niệm, vai trò của CSS