BÀI F9. MỘT SỐ THUỘC TÍNH ĐỊNH KIỂU BẰNG VÙNG CHỌN TRONG CSS (CTST

BÀI F9. MỘT SỐ THUỘC TÍNH ĐỊNH KIỂU BẰNG VÙNG CHỌN TRONG 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. Khái niệm vùng chọn CSS

Vùng chọn (selector) trong CSS là mẫu dùng để xác định phần tử HTML sẽ được định kiểu. Có thể chọn phần tử bằng:
- Tên phần tử (vd: p)
- ID (vd: #my-id)
- Class (vd: .my-class)
Vùng chọn giúp áp dụng một kiểu CSS cho nhiều phần tử, tăng tính nhất quán, dễ bảo trì và tái sử dụng.

2. Những kĩ thuật định kiểu cơ bản bằng vùng chọn

a) Định kiểu cho các phần tử cùng loại

Sử dụng tên thẻ HTML làm vùng chọn để định kiểu chung.
Ví dụ: định kiểu tất cả <div> thành chữ màu xanh.

b) Định kiểu cho các phần tử khác loại

Dùng class để định kiểu cho các phần tử khác nhau nhưng có cùng class.
Ví dụ: cả <div> và <p> có class my-class sẽ được định kiểu giống nhau.
Một phần tử có thể có nhiều class để kết hợp nhiều kiểu định dạng.

c) Định kiểu cho riêng một phần tử xác định

Sử dụng ID duy nhất cho từng phần tử.
Ví dụ: phần tử có id="my-id" sẽ được định kiểu riêng, như màu chữ đỏ.
Tóm lại: có ba kỹ thuật vùng chọn chính:
- Tên thẻ: định kiểu cho phần tử cùng loại.
- Tên lớp (class): định kiểu cho phần tử cùng hoặc khác loại.
- ID: định kiểu riêng cho một phần tử duy nhất.

THỰC HÀNH

Sử dụng với tệp portfolio.html.
Nhiệm vụ 1. Định kiểu CSS cho vùng chọn là tên thẻ
- Định kiểu cho các tiêu đề <h1>:
+ Màu chữ trắng, cỡ 20, phông Arial.
+ Nền xanh, rộng nửa trang, bo tròn góc phải.
+ Căn phải văn bản, vùng đệm 10px.
Cách làm: Tạo tệp style.css, khai báo vùng chọn là h1, dùng các thuộc tính: color, font-size, font-family, background-color, width, border-radius, text-align, padding.
Nhiệm vụ 2. Định kiểu CSS cho vùng chọn là tên thẻ và tên lớp
- Căn giữa ảnh, đặt trong nền tối, bo góc, chỉnh kích thước vừa phải.
- Các ảnh được đặt trong <div class="image-style">.
Cách làm:
- Dùng vùng chọn .image-style để căn giữa và tạo nền.
- Dùng vùng chọn .image-style img để chỉnh kích thước ảnh nằm trong khối div đó.

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