BÀI F8. MỘT SỐ THUỘC TÍNH CƠ BẢN CỦA CSS (CTST

BÀI F8. MỘT SỐ THUỘC TÍNH CƠ BẢN CỦA CSS (CTST - CS & ICT)

Đây là bài soạn lý thuyết tin học 12 - sách Chân trời sáng tạo. 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). 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.

1. Những thuộc tính định kiểu cho màu sắc và phông chữ

Hình thức trình bày văn bản như màu sắc và phông chữ ảnh hưởng đến cảm nhận của người xem. CSS hỗ trợ các thuộc tính:
- font-family: tên phông chữ
- font-size: cỡ chữ
- font-style: kiểu chữ (như nghiêng)
- font-weight: độ đậm nhạt
- color: màu chữ (có thể dùng tên màu, mã màu, hoặc hàm màu như rgba)
Ví dụ: sử dụng thẻ <span> để định kiểu một phần văn bản, như từ “Vô địch” bằng phông Georgia, cỡ lớn, nghiêng và đậm.

2. Những thuộc tính định kiểu cho văn bản

CSS cung cấp nhiều cách định dạng văn bản:
- text-align: căn ngang (trái, phải, giữa, đều hàng)
- vertical-align: căn dọc (trên, dưới, giữa, chỉ số trên/dưới)
- Các thuộc tính khác: letter-spacing (khoảng cách ký tự), word-spacing (khoảng cách từ), text-shadow (đổ bóng),...
Ví dụ: bổ sung căn giữa cho tiêu đề bằng text-align: center.

3. Những thuộc tính định kiểu cho nền

Nền của phần tử HTML có thể được định dạng bằng:
- background-color: màu nền
- background-image: ảnh nền (dùng hàm url())
- background: thuộc tính tổng hợp
- Các thuộc tính khác: opacity, background-repeat,...
Ví dụ: tạo nền chuyển sắc cho phần nội dung bằng cách đặt mã CSS trong thẻ <div>.

4. Những thuộc tính định kiểu cho đường viền, lề và vùng đệm

- border: định kiểu viền (độ dày, kiểu nét, màu)
- margin: khoảng cách ngoài viền (lề)
- padding: khoảng cách bên trong viền (vùng đệm)
Ví dụ: trong một <div>, đặt border: 1px solid gray, margin: 20px 50px 50px 250px, padding: 20px, border-radius để bo tròn góc.

THỰC HÀNH

Áp dụng cho trang web portfolio.html.
Nhiệm vụ 1. Định kiểu CSS cho văn bản và nền
- Căn phải phần thông tin cá nhân.
- Dùng ảnh hinhnen.jpg làm nền phủ toàn bộ chiều ngang.
- Dùng text-align: right, background-image, background-size: cover, color: #ffffff, padding để tăng tính thẩm mỹ và dễ đọc.
Nhiệm vụ 2. Định kiểu CSS cho đường viền, lề và vùng đệm
- Mỗi mục Sở thích nằm trong một <div> có:
+ Viền 1px xám, nền trắng.
+ Chiều cao 30px, độ rộng 50% trang web.
+ Góc bo tròn.
+ Lề và vùng đệm đều 20px.

CÙNG CHUYÊN MỤC:

CHỦ ĐỀ A. MÁY TÍNH VÀ XÃ HỘI TRI THỨC

Bài A1. Giới thiệu Trí tuệ nhân tạo
Bài A2. Trí tuệ nhân tạo và cuộc sống
Bài A3(ict). Thực hành kết nối thiết bị số với máy tính
Bài A4(ict). Thực hành kết nối thiết bị số với máy tính (tiếp theo)

CHỦ ĐỀ B. MẠNG MÁY TÍNH VÀ INTERNET

Bài B1. Thiết bị và giao thức mạng
Bài B2. Các chức năng mạng của hệ điều hành
Bài B3. Thực hành kết nối và sử dụng mạng trên thiết bị thông minh
Bài B4(cs). Vai trò của các thiết bị mạng
Bài B5(cs). Đường truyền hữu tuyến và vô tuyến
Bài B6(cs). Thiết kế mạng nội bộ
Bài B7(cs). Thực hành thiết kế mạng nội bộ

CHỦ ĐỀ D. ĐẠO ĐỨC, PHÁP LUẬT VÀ VĂN HÓA TRONG MÔI TRƯỜNG SỐ

Bài D1. Giao tiếp trong không gian mạng
Bài D2. Giữ gìn tính nhân văn trong không gian mạng

CHỦ ĐỀ E. ỨNG DỤNG TIN HỌC

Bài E1(ict). Tạo trang web, thiết lập giao diện và xem trước trang web
Bài E2(ict). Tạo, hiệu chỉnh trang web và thiết kế thanh điều hướng
Bài E3(ict). Tạo văn bản, chèn hình ảnh và tạo chân trang
Bài E4(ict). Sử dụng Content Blocks, Buttun, Divider
Bài E5(ict). Nhúng mã và tạo băng chuyền hình ảnh
Bài E6(ict). Chèn YouTube, Calendar, Drive và Collapsible group
Bài E7(ict). Sử dụng Map, Form và các thiết lập trang web
Bài E8(ict). Hoàn thiện và xuất bản trang web

CHỦ ĐỀ F. GIẢI QUYẾT VẤN ĐỀ VỚI SỰ TRỢ GIÚP CỦA MÁY TÍNH