Bài 8. Làm quen với CSS

Khởi động (SGK Cánh Diều - Trang 68)

Hướng dẫn giải

Để trình bày các đoạn văn bản, tiêu đề và nhãn có cùng màu chữ trên trang web, bạn có thể sử dụng CSS để áp dụng các quy tắc kiểu cho các phần tử tương ứng. Đầu tiên, bạn cần tạo hoặc chỉnh sửa tệp CSS để định dạng màu chữ cho các phần tử. Sau đó, liên kết tệp CSS với tệp HTML và áp dụng các quy tắc CSS cho các phần tử HTML trong trang. Điều này giúp đảm bảo rằng các đoạn văn bản, tiêu đề và nhãn trên trang web của bạn sẽ có cùng màu chữ.

(Trả lời bởi Nguyễn Việt Dũng)
Thảo luận (1)

Hoạt động (SGK Cánh Diều - Trang 70)

Hướng dẫn giải

Dưới đây là một số thuộc tính định dạng văn bản phổ biến trong hệ soạn thảo văn bản Microsoft Word:

1. Font: Cho phép bạn chọn kiểu chữ (ví dụ: Times New Roman, Arial, Calibri).

2. Kích thước: Định dạng kích thước chữ (ví dụ: 12pt, 14pt).

3. In đậm: Làm đậm chữ.

4. Nghiêng: Làm nghiêng chữ.

5. Gạch chân: Gạch chân dưới chữ.

6. Gạch ngang: Gạch ngang qua chữ.

7. Màu chữ: Thay đổi màu của chữ.

8. Dòng nổi: Tạo dòng chữ nổi lên so với văn bản xung quanh.

9. Dòng chìm: Tạo dòng chữ lõm xuống so với văn bản xung quanh.

10. Canh lề: Điều chỉnh lề trái, phải, trên, dưới của văn bản.

11. Thụt đầu dòng: Thiết lập thụt vào dòng đầu tiên của đoạn văn bản.

12. Chèn hiện thị và ẩn: Chèn hoặc ẩn văn bản trong văn bản.

13. Dòng chữ đồng đều: Canh đều cả hai lề của văn bản.

14. Chèn liên kết: Chèn liên kết đến trang web hoặc tài liệu khác.

15. Chèn chú thích: Chèn chú thích hoặc ghi chú vào văn bản.

(Trả lời bởi Nguyễn Việt Dũng)
Thảo luận (1)

Luyện tập (SGK Cánh Diều - Trang 73)

Hướng dẫn giải

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>Trang web với CSS nội bộ</title>

<style>

    body {

        background-color: cyan; /* Màu nền xanh lơ */

    }

    p {

        color: red; /* Màu chữ đỏ */

        font-family: Arial, sans-serif; /* Phông chữ Arial */

        font-size: 15px; /* Cỡ chữ 15 pixel */

    }

</style>

</head>

<body>

 

<p>Đây là đoạn văn bản thứ nhất.</p>

<p>Đây là đoạn văn bản thứ hai.</p>

</body>

</html>

(Trả lời bởi Nguyễn Việt Dũng)
Thảo luận (1)

Vận dụng (SGK Cánh Diều - Trang 73)

Hướng dẫn giải

Tạo tệp styles.css:

/* styles.css */

body {

    background-color: cyan; /* Màu nền xanh lơ */

}

 

p {

    color: red; /* Màu chữ đỏ */

    font-family: Arial, sans-serif; /* Phông chữ Arial */

    font-size: 15px; /* Cỡ chữ 15 pixel */

}

Tạo văn bản HTML mới và liên kết với tệp CSS:

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>Trang web với CSS ngoài</title>

<link rel="stylesheet" href="styles.css"> <!-- Liên kết với tệp CSS external -->

</head>

<body>

<p>Đây là đoạn văn bản thứ nhất.</p>

<p>Đây là đoạn văn bản thứ hai.</p>

</body>

</html>

(Trả lời bởi Nguyễn Việt Dũng)
Thảo luận (1)

Câu hỏi tự kiểm tra (SGK Cánh Diều - Trang 73)

Hướng dẫn giải

a) Đúng: Sử dụng CSS giúp tách biệt khai báo nội dung với định dạng và trang trí trang web. CSS cho phép bạn quản lý định dạng và trang trí của trang web một cách dễ dàng và hiệu quả, mà không làm phức tạp nội dung HTML.

b) Đúng: Để áp dụng CSS, trong văn bản HTML phải khai báo tham chiếu đến tệp CSS. Điều này thường được thực hiện bằng cách sử dụng thẻ <link> hoặc thẻ <style> trong phần <head> của tệp HTML.

c) Đúng: Sử dụng external CSS giúp cho nhiều trang web trong một website có thể dùng chung kiểu định dạng và trang trí. Bằng cách này, bạn có thể thay đổi giao diện của toàn bộ trang web chỉ bằng cách chỉnh sửa một tệp CSS duy nhất.

d) Sai: Khai báo CSS sử dụng bộ chọn phần tử như p{color=red; font-size:20px;} không đúng cú pháp. Để gán giá trị cho thuộc tính CSS, bạn cần sử dụng dấu hai chấm (:) chứ không phải dấu bằng (=). Ví dụ: p {color: red; font-size: 20px;}.

(Trả lời bởi Nguyễn Việt Dũng)
Thảo luận (1)