BÀI 8. LÀM QUEN VỚI CSS
KHỞI ĐỘNG
Theo em, làm thế nào để trình bày các đoạn văn bản, tiêu đề, nhãn trong trang web có cùng màu chữ?
Giải rút gọn:
Để 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 để định dạng màu cho các phần tử này. Đầu tiên, tạo hoặc chỉnh sửa tệp CSS để đặt 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. Điều này đảm bảo rằng các đoạn văn bản, tiêu đề và nhãn trên trang web sẽ có cùng màu chữ.
1. BẢNG ĐỊNH DẠNG CSS
2. KHAI BÁO BỘ CHỌN PHẦN TỬ VÀ ÁP DỤNG CSS
3. MỘT SỐ THUỘC TÍNH ĐỊNH DẠNG CSS
Em hãy cho biết mỗi phát biểu sau về AI là đúng hay sai?
a) “Turing Test” là bài kiểm tra trí tuệ của máy tính
b) Nhờ mở rộng phạm vi ứng dụng mà AI yếu phát triển thành AI mạnh
c) AI tạo sinh có thể giúp học sinh viết được một bài văn tả cảnh đẹp của quê hương
d) AI có thể tự hành động một cách hợp lí.
Giải rút gọn:
……………………………………………………………………………………
HOẠT ĐỘNG
Em hãy nêu một số thuộc tính định dạng văn bản mà em đã dùng trong hệ soạn thảo văn bản Microsoft Word.
Giải rút gọn:
Dưới đây là một số thuộc tính định dạng văn bản phổ biến trong Microsoft Word:
- Font: Chọn kiểu chữ (Times New Roman, Arial, Calibri).
- Kích thước: Định kích thước chữ (12pt, 14pt).
- In đậm: Làm đậm chữ.
- Nghiêng: Làm nghiêng chữ.
- Gạch chân: Gạch chân dưới chữ.
- Gạch ngang: Gạch ngang qua chữ.
- Màu chữ: Thay đổi màu chữ.
- Dòng nổi: Chữ nổi lên so với văn bản xung quanh.
- Dòng chìm: Chữ lõm xuống so với văn bản xung quanh.
- Canh lề: Điều chỉnh lề trái, phải, trên, dưới.
- Thụt đầu dòng: Thụt vào dòng đầu tiên của đoạn.
- Chèn hiện/ẩn: Chèn hoặc ẩn văn bản.
- Dòng chữ đồng đều: Canh đều hai lề.
- Chèn liên kết: Chèn liên kết đến trang web hoặc tài liệu khác.
- Chèn chú thích: Chèn chú thích hoặc ghi chú.
LUYỆN TẬP
Em hãy soạn văn bản HTML có hai đoạn văn bản được tạo bởi phần tử p. Khai báo và áp dụng internal CSS để trình bày trang web có nền màu xanh lơ (cyan); đoạn văn bản có chữ màu đỏ, phông chữ Arial, cỡ chữ 15 pixel.
Giải rút gọn:
<!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>
VẬN DỤNG
Em hãy chuyển các khai báo internal CSS trong mục Luyện tập thành khai báo external CSS ghi lưu với tên tệp “styles.css”, tạo mới văn bản HTML để áp dụng bảng định dạng styles.css này.
Giải rút gọn:
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>
TỰ KIỂM TRA
Mỗi phát biểu sau đây về CSS là đúng hay sai?
a) 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.
(b) Để áp dụng CSS, trong văn bản HTML phải khai báo tham chiếu đến tệp CSS.
c) 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í.
d) Khai báo CSS sử dụng bộ chọn phần tử: p{color=red; font-size:20px;} là đúng cú pháp.
Giải rút gọn:
a) Đúng: Sử dụng CSS giúp tách biệt nội dung với định dạng, quản lý trang trí trang web dễ dàng và hiệu quả mà không phức tạp hóa nội dung HTML.
b) Đúng: Để áp dụng CSS trong HTML, cần khai báo tham chiếu đến tệp CSS, thường qua thẻ <link> hoặc <style> trong phần <head>.
c) Đúng: External CSS cho phép nhiều trang web dùng chung kiểu định dạng và trang trí, thay đổi giao diện toàn bộ trang web bằng cách chỉnh sửa một tệp CSS.
d) Sai: Cú pháp p{color=red; font-size:20px;} không đúng. Cú pháp đúng là p {color: red; font-size: 20px;}.