BÀI 9. THỰC HÀNH ĐỊNH DẠNG MỘT SỐ THUỘC TÍNH CSS<br/>(CÁNH DIỀU

Bài 9 - Thực hành định dạng một số thuộc tính CSS (Cánh diều - cs & ict)

Đây là bài soạn lý thuyết tin học 12 - sách Cánh diều. Bài học 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). Lý thuyết được tóm tắt ngắn gọn, dễ hiểu, bám sát nội dung cốt lõi của bài học. Quý Thầy Cô và các em học sinh truy cập để làm tài liệu tham khảo nhé. Chúc Thầy Cô dạy tốt, chúc các em học sinh học giỏi.

Nhiệm vụ 1. Khai báo và áp dụng quy tắc định dạng internal CSS

Yêu cầu:
Khai báo định dạng internal CSS cho văn bản HTML “Bai7-NV1.html” mà em đã hoàn thành ở Bài 7 để được trang web như Hình 1.

Hướng dẫn thực hiện:
Bước 1: Mở tệp HTML “Bai7-NV1.html", lưu với tên mới “Bai9-NV1.html".
Bước 2: Khai báo CSS.
- Thêm cặp thẻ <style></style> trong phần <head>.
- Trong thẻ <style>, khai báo các quy tắc định dạng.
Bước 3: Ghi lưu tệp, mở bằng trình duyệt web để kiểm tra kết quả.

Nhiệm vụ 2. Khai báo và áp dụng quy tắc định dạng external CSS

Yêu cầu 1:
Soạn tệp quy tắc định dạng "Bai9-NV2.css" gồm các quy tắc sau:
- h2: phông chữ Verdana, màu chữ firebrick.
- h3: màu chữ indianred.
- label: cỡ chữ 20px.
- input: nền màu yellow.
- textarea: nền màu ivory.
Hướng dẫn thực hiện:
Bước 1: Tạo tệp "Bai9-NV2.css".
- Sử dụng Sublime Text, tạo tệp mới và lưu với tên “Bai9-NV2.css".
Bước 2: Khai báo định dạng CSS theo yêu cầu.
Bước 3: Ghi lưu tệp CSS.
Yêu cầu 2:
Áp dụng bảng định dạng "Bai9-NV2.css" vào văn bản HTML “Bai7-NV2.html" để hiển thị giống Hình 2.

Hướng dẫn thực hiện:
Bước 1: Mở tệp HTML "Bai7-NV2.html", lưu với tên mới "Bai9-NV2.html".
Bước 2: Áp dụng external CSS.
- Mở tệp "Bai9-NV2.html".
- Trong phần <head>, thêm khai báo:

Bước 3: Ghi lưu tệp, mở bằng trình duyệt để kiểm tra kết quả.

Nhiệm vụ 3. Áp dụng bảng định dạng external CSS đã có cho văn bản HTML

Yêu cầu:
Áp dụng "Bai9-NV2.css" vào văn bản HTML “Bai7-NV3.html” để hiển thị như Hình 3.

Hướng dẫn thực hiện:
Bước 1: Mở tệp "Bai7-NV3.html", lưu với tên mới "Bai9-NV3.html".
Bước 2: Áp dụng external CSS.
- Mở tệp "Bai9-NV3.html".
- Thêm khai báo CSS trong <head>.
Bước 3: Ghi lưu tệp, mở bằng trình duyệt để kiểm tra kết quả.
Lưu ý: Để thêm chú thích trong CSS, sử dụng cú pháp:

/* Đây là nội dung chú thích */

---The End!---

CÙNG CHUYÊN MỤC: