Bài 14. CSS là gì và cách áp dụng
Bài này giúp bạn hiểu CSS là gì, vì sao nó tách rời khỏi HTML, và cách viết một quy tắc CSS để đổi màu chữ, cỡ chữ, cách sắp xếp cho một trang web.
- Chân trời sáng tạoTin học 12 (Khoa học máy tính) - Bài F7. Giới thiệu CSStr. 101
- Chân trời sáng tạoTin học 12 (Tin học ứng dụng) - Bài F7. Giới thiệu CSStr. 134
- Cánh DiềuTin học 12 (Khoa học máy tính) - Chủ đề F · Bài 8. Làm quen với CSStr. 68
- Cánh DiềuTin học 12 (Tin học ứng dụng) - Chủ đề F · Bài 8. Làm quen với CSStr. 68
- Kết nối tri thứcTin học 12 (Khoa học máy tính) - Bài 13. Khái niệm, vai trò của CSStr. 71–75
- Kết nối tri thứcTin học 12 (Tin học ứng dụng) - Bài 13. Khái niệm, vai trò của CSStr. 71
Bắt đầu bằng một hình dung
Hãy tưởng tượng bạn vừa xây xong một ngôi nhà. Tường đã dựng, cột đã đổ, phòng khách, phòng ngủ, nhà bếp đã ngăn vách rõ ràng. Nhưng đó mới chỉ là nhà thô: tường trần xi măng, chưa sơn, chưa lát sàn, chưa có món nội thất nào. Ngôi nhà đã dùng được về mặt cấu trúc, nhưng nhìn qua rất khô khan.
Các thẻ HTML mà bạn đã học ở những bài trước - <h1>, <p>, <img> và nhiều thẻ khác - chính là công đoạn “xây thô” đó: dựng lên cấu trúc và nội dung của trang web. Còn việc sơn tường màu gì, chọn phông chữ cho biển hiệu, kê bàn ghế sao cho cân đối - đó là việc của một ngôn ngữ khác, gọi là CSS. Điều đáng chú ý: cùng một ngôi nhà, tức cùng một cấu trúc HTML, chỉ cần đổi cách trang trí - đổi CSS - là diện mạo có thể khác hẳn mà không cần xây lại từ đầu.
Nội dung bài học
- CSS lo phần trình bày, HTML lo phần cấu trúc
- Cú pháp một quy tắc CSS
- Ba cách gắn CSS vào trang HTML
Tóm tắt lý thuyết cần nhớ
- HTML tạo cấu trúc và nội dung của trang; CSS lo phần trình bày: màu sắc, phông chữ, kích thước, bố cục.
- Một quy tắc CSS có dạng
bộ-chọn { thuộc-tính: giá-trị; }, các khai báo bên trong dấu ngoặc nhọn kết thúc bằng dấu chấm phẩy. - Ba bộ chọn cơ bản: theo tên thẻ (
p,h1...) áp dụng cho mọi thẻ cùng loại; theo lớp (.tenlop) dùng lại được cho nhiều thẻ; theo id (#tenid) chỉ dùng cho đúng một thẻ duy nhất. - Có ba cách gắn CSS: trong thuộc tính
stylecủa thẻ, trong cặp thẻ<style>ở<head>, hoặc tách ra file.cssriêng rồi liên kết bằng<link>- cách tách riêng được khuyên dùng vì dễ bảo trì và dùng lại cho nhiều trang.
Thuật ngữ tiếng Anh trong bài
| Tiếng Anh | Đọc là | Nghĩa |
|---|---|---|
| color | cơ-lơ | màu chữ Thuộc tính CSS để đặt màu cho chữ. |
| background-color | béc-grao cơ-lơ | màu nền Thuộc tính CSS để tô màu nền phía sau chữ và hình. |
Câu hỏi trắc nghiệm có đáp án
Mấy câu mẫu để bạn tự kiểm tra ngay. Trong ứng dụng, bài này có đủ 24 câu, chấm điểm tự động và giải thích từng câu sai.
- Tạo cấu trúc và nội dung của trang, ví dụ đâu là tiêu đề, đâu là đoạn văn
- Quy định cách trang được trình bày: màu sắc, phông chữ, kích thước, bố cục
- Xử lí dữ liệu do người dùng nhập vào ô tìm kiếm
- Lưu trữ dữ liệu của trang trên máy chủ
bộ-chọn { thuộc-tính: giá-trị; }thuộc-tính { bộ-chọn: giá-trị; }<bộ-chọn thuộc-tính='giá-trị'>giá-trị: thuộc-tính { bộ-chọn }
<p> có trên trang, bộ chọn phù hợp là gì?.p { ... }#p { ... }p { ... }*p { ... }
p sẽ chọn tất cả thẻ <p>. Dấu chấm dùng cho bộ chọn theo lớp, dấu thăng dùng cho bộ chọn theo id.- a)Bộ chọn
páp dụng cho mọi thẻ<p>có trên trang.Đúng - b)Bộ chọn
.thongbaokhớp với thẻ có thuộc tínhid='thongbao'.Sai - c)Có thể gắn CSS trực tiếp vào một thẻ bằng thuộc tính
stylecủa chính thẻ đó.Đúng - d)Nếu chỉ muốn định dạng riêng cho đúng một thẻ duy nhất trên trang, cách phù hợp nhất là dùng bộ chọn theo lớp (class).Sai
- (a) Đúng - bộ chọn theo tên thẻ áp dụng cho mọi thẻ cùng loại.
- (b) Sai - bộ chọn bắt đầu bằng dấu chấm khớp với thuộc tính class, còn khớp id phải dùng dấu thăng, tức
#thongbao. - (c) Đúng - đây chính là cách gắn CSS trực tiếp qua thuộc tính style.
- (d) Sai - lớp (class) phù hợp khi cần dùng lại cho nhiều thẻ; khi chỉ cần định dạng riêng đúng một thẻ duy nhất, cách phù hợp hơn là dùng bộ chọn theo id.
Thử ngay: minh hoạ từng bước
Bấm từng bước để tự xem cơ chế hoạt động, hoặc bấm “Tự chạy” cho nó tiến mỗi giây một lần. Đổi được dữ liệu đầu vào - không cần đăng nhập.
Học trọn bài này trong ứng dụng
Bài giảng đầy đủ, 24 câu luyện tập chấm tự động, thi thử đúng cấu trúc đề tốt nghiệp (24 trắc nghiệm + 4 Đúng/Sai), bài thực hành máy tự chấm và gia sư AI giải thích chỗ sai.
Phần học miễn phí, không cần tạo tài khoản.
Bài liên quan - Ứng dụng tin học & Thiết kế web
Cùng mạch kiến thức với bài này, học nối tiếp cho chắc phần lí thuyết.