Bài 13. Khái niệm, vai trò của CSS – Tin học 12 · Kết nối tri thức · Chung, Khoa học máy tính và Tin học ứng dụng Kết nối tri thức

Mục tiêu bài học

Giải thích và vận dụng nội dung khái niệm, vai trò của css qua dữ kiện cụ thể.
Tạo hoặc đánh giá sản phẩm, nêu điều kiện đúng và kiểm tra kết quả bằng bằng chứng.

Bài giảng

Hiểu cách hoạt động

CSS mô tả cách trình bày nội dung HTML: màu, phông, khoảng cách, bố cục. Một quy tắc gồm bộ chọn và khối khai báo; mỗi khai báo có thuộc tính: giá trị, thường ngăn bằng dấu chấm phẩy. Bộ chọn phần tử p áp dụng cho p, .luu-y chọn lớp, #muc-tieu chọn id. Có ba cách gắn CSS: thuộc tính style trực tiếp, thẻ style trong head, tệp ngoài liên kết qua link rel="stylesheet" href="style.css". Tệp CSS ngoài không chứa thẻ style; nhiều trang dùng chung giúp bảo trì. CSS không thay ý nghĩa thẻ, không tự kiểm đúng nội dung hay tạo dịch vụ lưu biểu mẫu.

Làm và tự kiểm tra

Mã mẫu tự biên soạn; lưu UTF-8 theo tên tệp trong nhiệm vụ.

<!doctype html><html lang="vi"><head><meta charset="UTF-8">
<title>Ghi chép vườn</title>
<style>
 p { color: navy; }
 .luu-y { font-weight: bold; }
 #muc-tieu { border: 1px solid navy; }
</style></head><body>
<h1 id="muc-tieu">Theo dõi hạt</h1>
<p>Ghi ngày gieo.</p><p class="luu-y">Không tưới quá nhiều.</p>
</body></html>

Kết quả suy ra từ cấu trúc mã: hai p có màu navy; p lớp luu-y còn đậm; h1 có viền navy. Kiểu chữ nhìn thấy có thể phụ thuộc phông sẵn có và cài đặt người đọc. Không coi mô tả này là ảnh chụp hay kết quả đã thao tác trên máy người học.

Ghi nhớ

CSS mô tả cách trình bày nội dung HTML: màu, phông, khoảng cách, bố cục.

Bài tập

Đã đúng 0/6 câu

Câu 1Mức 2Trắc nghiệm 1 đáp án
Cú pháp khai báo CSS đúng là gì?
Câu 2Mức 2Trắc nghiệm 1 đáp án
Bộ chọn .luu-y chọn gì?
Câu 3Mức 2Đúng / Sai
Tệp style.css bên ngoài phải bọc các quy tắc trong <style>.
Câu 4Mức 2Ghép nối
Ghép cách gắn CSS.
Chạm một ý bên trái rồi chạm ý tương ứng bên phải để ghép cặp.
Câu 5Mức 2Trả lời ngắn
Quy tắc p {color: navy; font-size:18px;} có bao nhiêu khai báo?
Câu 6Mức 2Trắc nghiệm 1 đáp án
Lợi ích chính của CSS ngoài dùng chung nhiều trang là gì?
Câu 7Mức 3Tự luận
Tạo trang như mẫu: h1 id muc-tieu có viền, hai p cùng màu navy, riêng lời lưu ý đậm. Nêu các bộ chọn và kết quả.
0 từ
0/10 ảnh
Có thể chụp nhiều trang. Ảnh được lưu cùng bài làm và giáo viên sẽ chấm trên ảnh.
Vẽ bài làm
Ảnh bài làm
Cuộn chuột hoặc chụm hai ngón để phóng to · kéo để di chuyển · phím R để xoay
Câu 8Mức 3Tự luận
Tách p {color: navy;} ra style.css và viết dòng HTML liên kết, không để mất phần head.
0 từ
0/10 ảnh
Có thể chụp nhiều trang. Ảnh được lưu cùng bài làm và giáo viên sẽ chấm trên ảnh.
Vẽ bài làm
Ảnh bài làm
Cuộn chuột hoặc chụm hai ngón để phóng to · kéo để di chuyển · phím R để xoay