Thầy Cải - Quốc Thái

BÀI 9. THỰC HÀNH ĐỊNH DẠNG MỘT SỐ THUỘC TÍNH CSS
(CÁNH DIỀU - CS & ICT)

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:

Bài 1. Giới thiệu về trí tuệ nhân tạo
Bài 2. Giới thiệu về trí tuệ nhân tạo (tiếp theo)

Bài 1. Cơ sở về mạng máy tính
Bài 2. Mô hình và các giao thức mạng
Bài 3. Thực hành thiết lập kết nối và sử dụng mạng

Bài. Giữ gìn tính nhân văn trong thế giới ảo

Bài 1. Làm quen với ngôn ngữ đánh dấu siêu văn bản
Bài 2. Định dạng văn bản và tạo siêu liên kết
Bài 3. Thực hành định dạng văn bản và tạo siêu liên kết
Bài 4. Trình bày nội dung theo dạng danh sách, bảng biểu
Bài 5. Chèn hình ảnh, âm thanh, video và sử dụng khung
Bài 6. Tạo biểu mẫu
Bài 7. Thực hành tạo biểu mẫu
Bài 8. Làm quen với CSS
Bài 9. Thực hành định dạng một số thuộc tính CSS
Bài 10. Bộ chọn lớp, bộ chọn định danh
Bài 11. Mô hình hộp, bố cục trang web
Bài 12. Dự án nhỏ: Tạo trang web báo tường

Bài 1. Giới thiệu nhóm nghề Dịch vụ và Quản trị trong ngành Công nghệ thông tin
Bài 2. Một số nghề khác trong ngành Công nghệ thông tin và một số nghề ứng dụng Công nghệ thông tin
Bài 3. Dự án nhỏ: Tìm hiểu thông tin tuyển sinh và hướng nghiệp về lĩnh vực đào tạo “Máy tính và Công nghệ thông tin” ở Việt Nam.

Bài 1. Thực hành kết nối máy tính với ti vi thông minh
Bài 2. Thực hành theo nhóm: Kết nối các thiết bị không dây cho ứng dụng

Bài 1. Giới thiệu phần mềm tạo website
Bài 2. Tạo website bằng phần mềm
Bài 3. Tạo thanh điều hướng cho trang web
Bài 4. Tạo nội dung văn bản cho trang web
Bài 5. Tạo nội dung hình ảnh cho trang web
Bài 6. Tạo biểu mẫu cho trang web và xuất bản website
Bài 7. Tạo sản phẩm theo nhóm (Bài tập nhóm)

Bài 1. Môi trường truyền dẫn
Bài 2. Thiết bị mạng
Bài 3. Thiết bị mạng LAN
Bài 4. Thực hành về nhận diện thiết bị mạng và thiết kế mạng LAN (Bài tập nhóm)

Bài 1. Giới thiệu về học máy
Bài 2. Giới thiệu về khoa học dữ liệu
Bài 3. Giới thiệu về khoa học dữ liệu (tiếp theo)
Bài 4. Thực hành phân tích dữ liệu

Bài 1. Mô phỏng được sử dụng trong nhiều lĩnh vực
Bài 2. Thực hành về mô phỏng

CÁC CHUYÊN MỤC LIÊN QUAN:

☞ Kiểm tra tin học 12 - Cánh diều
☞ Lý thuyết tin học 12 - Cánh diều
☞ Thực hành tin học 12 - Cánh diều
☞ Gợi ý trả lời tin học 12 - Cánh diều
☞ Trắc nghiệm tin học 12 - Cánh diều
☞ Bài giảng điện tử tin học 12 - Cánh diều

BÀI 8. LÀM QUEN VỚI CSS (CÁNH DIỀU - CS & ICT)

Bài 8 - Làm quen với CSS (Cánh diều - cs & ict)

1. Bảng định dạng CSS

- CSS (Cascading Style Sheets) là ngôn ngữ dùng để định dạng các phần tử HTML.
- Giúp tách biệt nội dung và định dạng, dễ chỉnh sửa và tái sử dụng.
- Các trình duyệt web áp dụng CSS bằng cách nhận diện bộ chọn (selector) và thuộc tính CSS tương ứng.
- CSS có nhiều phiên bản, trong đó CSS3 là phiên bản phổ biến hiện nay.

2. Khai báo bộ chọn phần tử và áp dụng CSS

- Bộ chọn phần tử giúp định dạng cụ thể cho các phần tử HTML.