BÀI F7 - GIỚI THIỆU CSS (CTST

BÀI F7 - GIỚI THIỆU CSS (CTST - CS & ICT)

Đây là bài soạn gợi ý trả lời SGK tin học 12 (bộ sách Chân trời sáng tạo). Bài này là kiến thức cốt lõi chung cho cả hai định hướng: Khoa học máy tính (CS) và Tin học ứng dụng (ICT). Các em truy cập vào để tham khảo nhé. Chúc các em có nhiều sức khỏe và chăm ngoan học giỏi.

(trang 134 sách ict, trang 101 sách cs)

Trong trang web portfolio.html đã tạo ở những bài học trước, em hãy trình bày cách bổ sung mã lệnh để các đề mục đánh dấu bằng thẻ <h1> được tô màu xanh.
Giả sử em muốn thay đổi màu sắc khác và đổ bóng để các đề mục nổi bật hơn. Có thuộc tính nào đáp ứng yêu cầu này không?

Gợi ý trả lời

Cách bổ sung mã CSS để đề mục <h1> có màu xanh trong portfolio.html:
- Dùng thuộc tính style trực tiếp trong thẻ HTML:
<h1 style="color: green;">Giới thiệu bản thân</h1>
- Hoặc dùng trong phần <style>:

Nếu muốn thay màu và đổ bóng cho đề mục thì sử dụng thuộc tính text-shadow. Ví dụ:

(trang 135 sách ict, trang 102 sách cs)

Em hãy trình bày một số lợi ích của CSS trong việc xây dựng các trang web.

Gợi ý trả lời

Một số lợi ích của CSS trong việc xây dựng các trang web:
- Giúp tách biệt nội dung và định dạng ⇒ dễ bảo trì.
- Tăng tính thống nhất và đồng bộ giữa các trang.
- Tiết kiệm thời gian, dễ tái sử dụng mã CSS.
- Giúp trang web đẹp mắt và chuyên nghiệp hơn.
- Hỗ trợ thiết kế giao diện đáp ứng nhiều thiết bị.

(trang 136 sách ict, trang 103 sách cs)

1. Em hãy định kiểu cho kích thước phông chữ của các phần tử <h1> trong tệp portfolio.html là 60 pixels. Gợi ý: Sử dụng thuộc tính font-size với giá trị là 60px.
2. Em hãy thay đổi màu cho riêng để mục Giới thiệu chung từ màu xanh sang một màu sắc tuỳ ý.

Gợi ý trả lời

1. Định kiểu <h1> có kích thước 60px:

2. Đổi màu phần “Giới thiệu chung”:
- Gán lớp (class) cho phần đó:
<h2 class="gioithieu">Giới thiệu chung</h2>
- Trong CSS viết mã lệnh:
.gioithieu {
color: darkblue;
}

(trang 137 sách ict, trang 104 sách cs)

1. Theo em, HTML và CSS khác nhau ở điểm nào?
2. Em hãy mô tả các cách chèn mã lệnh CSS vào trang web.
3. Giả sử trong tệp .css, mã lệnh được viết là h1 { color: red; }, còn trong tệp .html, thẻ <h1> được viết là <h1 style="color: blue">. Khi hiển thị, đề mục h1 này sẽ có màu gì?

Gợi ý trả lời

1. Điểm khác nhau giữa HTML và CSS:
- HTML (HyperText Markup Language): dùng để xây dựng cấu trúc nội dung của trang web. Ví dụ như tạo tiêu đề, đoạn văn, bảng, hình ảnh, liên kết, ...
- CSS (Cascading Style Sheets): dùng để định dạng giao diện và trình bày của trang web như màu sắc, kích thước, kiểu chữ, vị trí, khoảng cách, v.v.
2. Cách chèn mã lệnh CSS vào trang web:
Có 3 cách chèn CSS vào trang web:
- Internal CSS (CSS nội bộ): viết trong thẻ <style< đặt trong phần <head< của tài liệu HTML.

- External CSS (CSS ngoài): viết trong một file .css riêng và liên kết vào HTML bằng thẻ <link>.

- Inline CSS (CSS nội tuyến): viết trực tiếp trong thẻ HTML bằng thuộc tính style.
<h1 style="color: blue;">Tiêu đề</h1>
3. Khi hiển thị, đề mục h1 sẽ có màu xanh (blue). Vì CSS nội dòng (inline) có độ ưu tiên cao nhất.

(trang 140 sách ict, trang 107 sách cs)

Em hãy thực hiện các yêu cầu dưới đây.
1. Chèn mã lệnh CSS để định kiểu cho tên của mình trong trang web portfolio.html với màu sắc, kích thước, hiệu ứng độ bóng và khoảng cách của các kí tự tuỳ ý sao cho nổi bật và đẹp mắt.
2. Chèn mã lệnh CSS để tô màu xanh cho hàng tiêu đề của bảng trong Nhiệm vụ 2 ở THỰC HÀNH đồng thời thay đổi màu chữ thành màu trắng.
3. Chèn mã lệnh CSS để định kiểu cho các mục <li> của các danh sách <ul> sao cho: Các mục được đánh dấu đầu dòng bằng biểu tượng đĩa tròn; phần nội dung của mỗi mục được tô nền vàng nhạt và đóng khung viền vàng đậm, bo tròn 4 góc.
Gợi ý: Sử dụng thuộc tính list-style-type với giá trị circle để thay đổi biểu tượng đánh dấu đầu dòng; thuộc tính background-color và border lần lượt cho màu nền và viển của mỗi mục; thuộc tính border-radius với giá trị 10px để bo tròn 4 góc của khung. Ngoài ra, có thể thêm thuộc tính padding với giá trị 10px để tạo khoảng trống bao quanh phần văn bản nằm trong khung.
Hình 4 là một ví dụ kết quả sau khi định kiểu bằng mã lệnh CSS.