Bài 15. CSS: màu sắc, phông chữ và mô hình hộp
Bài học này giới thiệu cách dùng CSS để đổi màu chữ, màu nền và chọn phông chữ cho trang web, đồng thời giải thích mô hình hộp (box model) - nguyên tắc mà trình duyệt dùng để tính khoảng cách quanh mọi phần tử trên trang.
- Chân trời sáng tạoTin học 12 (Khoa học máy tính) - Bài F8. Một số thuộc tính cơ bản của CSStr. 108
- Chân trời sáng tạoTin học 12 (Tin học ứng dụng) - Bài F8. Một số thuộc tính cơ bản của CSStr. 141
- Cánh DiềuTin học 12 (Khoa học máy tính) - Chủ đề F · Bài 9. Thực hành định dạng một số thuộc tính CSStr. 74
- Cánh DiềuTin học 12 (Tin học ứng dụng) - Chủ đề F · Bài 9. Thực hành định dạng một số thuộc tính CSStr. 74
- Kết nối tri thứcTin học 12 (Khoa học máy tính) - Bài 14. Định dạng văn bản bằng CSStr. 76–82
- Kết nối tri thứcTin học 12 (Tin học ứng dụng) - Bài 14. Định dạng văn bản bằng CSStr. 76
Xem thêm 2 quyển
- Kết nối tri thứcTin học 12 (Khoa học máy tính) - Bài 15. Tạo màu cho chữ và nềntr. 83–88
- Kết nối tri thứcTin học 12 (Tin học ứng dụng) - Bài 15. Tạo màu cho chữ và nềntr. 83
Bắt đầu bằng một hình dung
Hãy tưởng tượng một phòng triển lãm tranh. Mỗi bức tranh treo trên tường không chỉ là phần hình vẽ ở giữa: sát mép tranh luôn có một khoảng đệm trắng để bức tranh không bị chật chội, bao quanh khoảng đệm đó là một cái khung gỗ hoặc khung kim loại, và xa hơn nữa là khoảng trống trên tường tách khung tranh này ra khỏi khung tranh bên cạnh. Bốn lớp ấy - hình vẽ, khoảng đệm, khung, khoảng cách với tranh khác - cùng nhau quyết định một bức tranh ‘chiếm’ bao nhiêu chỗ trên tường và trông cách biệt hay san sát với những bức tranh xung quanh.
Một phần tử trên trang web cũng được trình duyệt dựng lên đúng theo cách đó. Chữ hoặc hình bên trong đóng vai trò như bức tranh; CSS gọi khoảng đệm quanh nó là padding, cái khung là border, và khoảng cách với phần tử bên cạnh là margin. Trước khi tìm hiểu kĩ bốn lớp này, ta xem qua hai việc đơn giản và quen mắt hơn trước đã: đổi màu và chọn phông chữ.
Nội dung bài học
- Đổi màu chữ, màu nền và chọn phông chữ
- Mô hình hộp: bốn lớp bao quanh nội dung
Tóm tắt lý thuyết cần nhớ
colorchỉnh màu chữ,background-colorchỉnh màu nền; giá trị màu viết bằng tên dựng sẵn hoặc mã#RRGGBBgồm ba cặp số hex cho đỏ, xanh lá, xanh dương.font-family,font-size,font-weightlần lượt chỉnh họ phông, cỡ chữ và độ đậm của chữ;text-aligncanh chữ trái, giữa hoặc phải.- Mỗi phần tử là một hộp gồm bốn lớp lồng nhau tính từ trong ra ngoài: nội dung →
padding(đệm trong) →border(viền) →margin(lề ngoài). - Hiểu đúng mô hình hộp giúp bạn căn khoảng cách quanh mỗi phần tử theo đúng ý muốn, thay vì chỉnh số liệu một cách mò mẫm.
Thuật ngữ tiếng Anh trong bài
| Tiếng Anh | Đọc là | Nghĩa |
|---|---|---|
| font-family | phông phe-mi-li | kiểu phông chữ Thuộc tính CSS để chọn kiểu (họ) phông chữ. |
| font-size | phông sai | cỡ chữ Thuộc tính CSS để đặt chữ to hay nhỏ. |
| font-weight | phông uây | độ đậm chữ Thuộc tính CSS để làm chữ đậm hay mảnh. |
| text-align | tếch ơ-lain | canh lề chữ Thuộc tính CSS để canh chữ sang trái, vào giữa hay sang phải. |
| text-decoration | tếch đê-cơ-rê-sần | trang trí chữ Thuộc tính CSS để trang trí chữ, như thêm gạch chân. |
| line-height | lain hai | khoảng cách dòng Thuộc tính CSS để đặt khoảng cách giữa các dòng chữ. |
| serif | xe-ríp | phông có chân Kiểu phông chữ có nét chân nhỏ ở đầu và cuối mỗi chữ. |
| sans-serif | xan xe-ríp | phông không chân Kiểu phông chữ trơn, không có nét chân. |
| underline | ăn-đơ-lain | gạch chân Giá trị CSS để kẻ một gạch ở dưới chữ. |
| 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. |
| border | bo-đơ | đường viền Thuộc tính CSS để vẽ đường viền bao quanh một khối. |
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ó đủ 28 câu, chấm điểm tự động và giải thích từng câu sai.
background-colortext-colorcolorfont-color
color là thuộc tính quy định màu chữ. background-color quy định màu nền chứ không phải màu chữ, còn text-color và font-color không phải là thuộc tính CSS hợp lệ.#ffffff biểu diễn màu gì?- Đen
- Trắng
- Đỏ thuần
- Xanh dương thuần
#RRGGBB gồm ba cặp số hex cho đỏ, xanh lá, xanh dương, mỗi cặp chạy từ 00 đến ff. #ffffff có cả ba cặp ở mức cao nhất (ff), tức trộn đủ ba màu ở cường độ tối đa, cho ra màu trắng.marginborderpaddingtext-align
padding là đệm trong, nằm giữa nội dung và viền (border). margin là lề ngoài, nằm bên ngoài viền; text-align chỉ canh chữ chứ không tạo khoảng đệm.- a)
background-colorlà thuộc tính CSS dùng để đổi màu nền của một phần tử.Đúng - b)Mã màu dạng
#RRGGBBchỉ có thể biểu diễn được đúng 16 màu khác nhau.Sai - c)Trong mô hình hộp,
paddingnằm giữa nội dung và viền (border) của phần tử.Đúng - d)Trong mô hình hộp,
marginnằm bên trong viền (border), sát ngay với nội dung.Sai
- (a) Đúng -
background-colorchính là thuộc tính quy định màu nền của phần tử. - (b) Sai - mỗi cặp hex trong
RRGGBBcó 256 giá trị (từ00đếnff), nên mã màu này biểu diễn được 256 × 256 × 256 ≈ 16,7 triệu màu, không phải chỉ 16 màu. - (c) Đúng -
paddinglà đệm trong, đúng vị trí nằm giữa nội dung và viền. - (d) Sai -
marginlà lề ngoài, nằm bên ngoài viền chứ không sát nội dung; lớp nằm sát nội dung nhất (ngay sau nội dung) chính làpadding.
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 đủ, 28 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.