Giải Tin học 12 - Định hướng khoa học máy tính trang 76

Lời giải chi tiết SGK Lớp 12 · Môn Tin Há»c · Trang 76–77

Nguon: Tin Hoc 12 KHMT (trang 76 – 77)

⚠️ Lưu ý: Nội dung trong hình thuộc trang 74 – 75 của sách. Mình sẽ giải đầy đủ toàn bộ câu hỏi, hoạt động, phần Luyện tập và Vận dụng có trong hai trang này.

🔍 Kiến thức cần nhớ

CSS (Cascading Style Sheets) là ngôn ngữ dùng để định dạng nội dung trang web, tách riêng phần nội dung (viết bằng HTML) khỏi phần trình bày (viết bằng CSS).

Cấu trúc một mẫu định dạng CSS gồm hai phần:

Bộ chọn (selector): chỉ ra phần tử HTML nào sẽ được áp dụng.
Vùng mô tả: nằm trong cặp { }, gồm các cặp thuộc-tính: giá-trị, ngăn cách bằng dấu chấm phẩy.

Có ba cách thiết lập CSS:

CSS nội tuyến (inline): viết trực tiếp trong thuộc tính style của thẻ HTML.
CSS trong (internal): viết trong phần tử style, đặt ở phần head.
CSS ngoài (external): viết trong tệp .css riêng, liên kết vào trang web bằng thẻ link hoặc lệnh @import.

💡 Mẹo nhớ: "Trong – Ngoài – Nội tuyến" tương ứng "head – tệp .css – thẻ HTML". Phạm vi áp dụng tăng dần khi dùng tệp ngoài (dùng cho cả website).

⚙️ Bài tập

Câu hỏi 1 (trang 74 – sau mục 2c)

Đề bài:

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?
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?

Cách 1 — Dựa vào ba cách thiết lập CSS

Ý 1: Để áp dụng cho toàn bộ một tệp HTML, ta dùng CSS trong (internal CSS). Cách làm là viết các mẫu định dạng trong phần tử style đặt ở phần head của trang web. Khi đó mọi phần tử thuộc bộ chọn trong toàn trang đều được áp dụng định dạng.

Ví dụ:

Ý 2: Để áp dụng đồng thời cho nhiều trang web, ta dùng CSS ngoài (external CSS). Cách làm là viết tất cả mẫu định dạng vào một tệp .css riêng, sau đó liên kết tệp này vào từng trang web cần định dạng.

Có hai cách liên kết:

Dùng thẻ link trong phần head:

Hoặc dùng lệnh @import trong phần tử style:

💡 Mẹo nhớ: Một tệp .css → nhiều trang dùng chung → sửa một lần, áp dụng cho tất cả.

Câu hỏi 2 — Hoạt động 3 (trang 74)

Đề bài:

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?
Sử dụng CSS có những ưu điểm gì trong việc định dạng trang web?

Cách 1 — Phân tích theo sách giáo khoa

Ý 1: Nếu không dùng CSS, việc định dạng phải thực hiện trực tiếp bằng cách thiết lập thuộc tính cho từng phần tử HTML. Khi có nhiều trang web và nhiều phần tử HTML thì công việc này:

Mất rất nhiều thời gian (phải định dạng lặp lại cho từng thẻ).
Dễ dẫn đến định dạng không thống nhất giữa các phần và các trang.

Ý 2: Ưu điểm của CSS:

Tách việc nhập nội dung (bằng HTML) và việc định dạng thành hai công việc độc lập, làm giảm nhẹ công việc và tăng tính chuyên nghiệp.
Các mẫu định dạng chỉ cần viết một lần (trong head hoặc tệp ngoài) nhưng áp dụng được nhiều lần cho mọi phần tử trong bộ chọn.
Khi viết trong tệp CSS ngoài, có thể định dạng một lần và áp dụng cho nhiều trang, thậm chí cả website.
Khi cần thay đổi định dạng, chỉ cần chỉnh sửa một lần là toàn bộ trang/website thay đổi theo.

🎯 Tóm gọn: CSS giúp định dạng trang web khoa học hơn, nhanh hơn, thuận tiện hơn nhờ nguyên tắc "viết một lần, dùng nhiều lần".

Câu hỏi 3 (trang 75)

Đề bài:

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ả 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.

Cách 1 — Áp dụng cấu trúc bộ chọn và vùng mô tả

Ý 1: Đoạn văn bản trong HTML được tạo bằng thẻ p. Muốn tất cả các đoạn văn bản có màu xanh, ta dùng bộ chọn là p và thiết lập thuộc tính color có giá trị blue:

p { color: blue; }

Mẫu định dạng này có thể đặt trong phần tử style ở head (áp dụng cho cả trang) hoặc trong tệp CSS ngoài (áp dụng cho nhiều trang).

Ý 2: Giải thích mẫu h1,h2,h3 {border: 2px solid red;}:

Bộ chọn h1, h2, h3 (các tiêu đề cấp 1, 2, 3) được ngăn cách bằng dấu phẩy, nghĩa là cùng áp dụng một định dạng.
Vùng mô tả border: 2px solid red thiết lập đường viền cho các phần tử này:
2px: độ dày đường viền là 2 pixel.
solid: kiểu đường viền là nét liền.
red: màu đường viền là màu đỏ.

→ Ý nghĩa: Tất cả tiêu đề h1, h2, h3 trong trang web sẽ có đường viền bao quanh, dày 2px, nét liền, màu đỏ.

⚠️ Lưu ý thi: Khi nhiều bộ chọn dùng chung định dạng, ta liệt kê chúng cách nhau bởi dấu phẩy. Đây là cách tiết kiệm và hay được hỏi trong đề.

Luyện tập

Đề bài:

Ngôn ngữ định dạng CSS chính là ngôn ngữ HTML, đúng hay sai?
Khẳng định sau là đúng hay sai: 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.

Cách 1 — Đối chiếu khái niệm

Câu 1: SAI.

CSS và HTML là hai ngôn ngữ khác nhau với vai trò khác nhau:

HTML dùng để tạo nội dung và cấu trúc trang web.
CSS dùng để định dạng (trình bày) nội dung đó.

Tuy CSS được nhúng vào trang HTML nhưng nó không phải là ngôn ngữ HTML.

Câu 2: ĐÚNG.

Khi nhiều trang web cùng liên kết tới một tệp CSS ngoài, chỉ cần chỉnh sửa nội dung tệp CSS đó một lần là định dạng của tất cả các trang (cả website) sẽ thay đổi theo. Đây chính là ưu điểm "viết một lần, dùng nhiều lần" của CSS ngoài.

Vận dụng

Đề bài:

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.
Thiết lập trang web với nội dung "Lịch sử CSS" và định dạng trang bằng các mẫu CSS.

Câu 1 — So sánh Style Sheet (soạn thảo văn bản) với CSS (web)

Điểm giống nhau và tương thích:

Cùng ý tưởng cốt lõi: tạo sẵn các mẫu định dạng (khuôn) và áp dụng cho nhiều đối tượng, thay vì định dạng thủ công từng phần.
Trong phần mềm soạn thảo (ví dụ Word), Style Sheet định dạng cho các đoạn (Heading 1, Heading 2, Normal...); trong web, CSS định dạng cho các phần tử HTML (h1, h2, p...). Cách tổ chức rất tương đồng: mỗi mẫu gồm một tên (tương ứng bộ chọn) và tập thuộc tính định dạng (phông chữ, cỡ chữ, màu, căn lề...).
Cùng nguyên tắc "định nghĩa một lần, áp dụng nhiều lần": khi sửa một style/mẫu CSS, tất cả đối tượng dùng nó đều thay đổi theo.
Cùng mục đích: làm cho việc định dạng nhanh, nhất quán và dễ chỉnh sửa.

Như vậy người đã quen tạo Style trong Word sẽ dễ dàng hiểu và làm việc với CSS, vì chúng dựa trên cùng một tư tưởng định dạng theo khuôn mẫu.

Câu 2 — Trang web "Lịch sử CSS" có định dạng CSS

Dưới đây là một trang HTML hoàn chỉnh sử dụng CSS trong (đặt ở phần head) để định dạng nội dung "Lịch sử CSS":




  
  Lịch sử CSS
  


  Lịch sử CSS

  Ý 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.

  Ý 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
  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 đưa ra năm 1994 nhưng phiên bản CSS1 chính
  thức ra đời năm 1996. Phiên bản CSS2 khởi động ngay sau đó nhưng đến
  1998 mới hoàn thiện. Bản hoàn thiện nhất của CSS2 là CSS2.1 ra đời năm
  2011 và được nâng cấp hoàn thiện năm 2016.

  Các phiên bản CSS tiếp theo
  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 thiết lập mới.

  Hiện tại tổ chức chịu trách nhiệm phát triển các chuẩn của HTML, CSS
  và các công nghệ liên quan là World Wide Web Consortium (W3C), có địa
  chỉ tại https://www.w3.org/.

Giải thích các mẫu CSS đã dùng:

body: thiết lập phông chữ, màu nền, lề và màu chữ chung cho cả trang.
h1: định dạng tiêu đề chính (màu, căn giữa, có đường gạch chân).
h2: định dạng các tiêu đề mục con.
p: định dạng các đoạn văn (giãn dòng, căn đều hai bên).
a: định dạng màu cho liên kết.

💡 Mẹo nhớ: Khi cần đổi toàn bộ giao diện, chỉ cần sửa trong khối style (hoặc tách ra tệp .css ngoài) là cả trang đổi theo, không phải sửa từng thẻ.

🎯 Ghi nhớ: - CSS và HTML là hai ngôn ngữ khác nhau: HTML tạo nội dung, CSS định dạng. - Ba cách thiết lập: nội tuyến (style trong thẻ), trong (style ở head), ngoài (tệp .css liên kết). - Mỗi mẫu CSS gồm bộ chọn và vùng mô tả { thuộc tính: giá trị; }. - Sức mạnh lớn nhất của CSS: viết một lần, dùng nhiều lần, sửa một lần là đổi toàn bộ.

Chế độ đọc sách →