Nội dung chính Khoa học máy tính 12 Chân trời bài F9: Một số kĩ thuật định kiểu bằng vùng chọn trong CSS
Hệ thống kiến thức trọng tâm bài F9: Một số kĩ thuật định kiểu bằng vùng chọn trong CSS sách Tin học 12 - Định hướng Khoa học máy tính Chân trời sáng tạo. Với các ý rõ ràng, nội dung mạch lạc, đi thẳng vào vấn đề, hi vọng người đọc sẽ nắm trọn kiến thức trong thời gian rất ngắn. Nội dung chính được tóm tắt ngắn gọn sẽ giúp thầy cô ôn tập, củng cố kiến thức cho học sinh. Bộ tài liệu có file tải về. Mời thầy cô kéo xuống tham khảo.
Xem: => Giáo án Tin học 12 - Định hướng Khoa học máy tính chân trời sáng tạo
CHỦ ĐỀ F: GIẢI QUYẾT VẤN ĐỀ VỚI SỰ TRỢ GIÚP CỦA MÁY TÍNH
BÀI F9: MỘT SỐ KĨ THUẬT ĐỊNH KIỂU BẰNG VÙNG CHỌN TRONG CSS
1. Khái niệm vùng chọn CSS
- Trong ví dụ ở hoạt động Khởi động, phần mã lệnh CSS có thể được viết tách rời với nội dung như sau:
Để định kiểu cho các phần tử h1 như cách viết trên, em phải thực hiện thao tác chỉ định phần tử h1.
- Khái niệm: Trong CSS, vùng chọn là khuôn mẫu dùng để chỉ định phần tử HTML cụ thể sẽ được định kiểu.
Khai báo vùng chọn là cách thức thuận tiện để áp dụng cùng một kiểu CSS cho một nhóm các phần tử xác định.
- Khai báo vùng chọn: Vùng chọn của CSS có thể được khai báo theo nhiều yếu tố khác nhau, chẳng hạn như:
+ Tên phần tử.
+ Tên lớp.
+ Thuộc tính id và những thuộc tính khác của phần tử.
+ Mối quan hệ giữa các phần tử.
- Một số yếu tố của vùng chọn CSS được sử dụng phổ biến:
+ Tên phần tử.
Ví dụ: p sẽ chọn tất cả các phần tử p để định kiểu.
+ ID của phần tử.
Ví dụ: #my-id sẽ chọn các phần tử HTML có khai báo thuộc tính id là my-id để định kiểu.
+ Tên lớp.
Ví dụ: .my-class sẽ chọn các phần tử HTML có khai báo thuộc tính class là my-class để định kiểu.
- Các khai báo vùng chọn có thể được đặt trong một hoặc nhiều tệp .css (chẳng hạn style1.css, style2.css). Các tệp .css sẽ được liên kết đến bằng thẻ <link> đặt trong cặp thẻ <head></head> của tệp .html cần định kiểu:
- Lợi ích của định kiểu CSS bằng vùng chọn trong việc phát triển trang web:
+ Giúp kiểm soát các phần tử muốn định kiểu một cách chính xác và linh hoạt, kể cả việc ưu tiên định kiểu cho những vùng chọn đặc trưng hoặc ít đặc trưng hơn.
Đúng với tên gọi CSS - Cascading Style Sheets (Định kiểu theo tầng).
+ Cho phép mã lệnh CSS được tái sử dụng, hạn chế việc viết lặp lại cùng mã lệnh cho nhiều phần tử khác nhau.
Điều này càng làm rõ vai trò của HTML và CSS, đảm bảo sự nhất quán về hình thức của toàn bộ trang web, giảm bớt được mã lệnh, giúp dễ dàng bảo trì và nâng cấp trang web.
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
Để định kiểu đồng loạt cho các phần tử HTML cùng loại, em khai báo vùng chọn là tên phần tử đó theo cú pháp:
Ví dụ 1: Để định kiểu cho các phần tử trong cặp thẻ <div></div> thành màu xanh, em khai báo vùng chọn như sau:
b) Định kiểu cho các phần tử khác loại
- Để định kiểu cho các phần tử HTML khác loại, em khai báo vùng chọn là tên lớp.
- Dù cùng loại hay khác loại, các phần tử sử dụng chung tên lớp trong thuộc tính class sẽ được định kiểu giống nhau.
- Cú pháp khai báo vùng chọn tên lớp là dấu chấm (.) đứng trước tên lớp.
c) Định kiểu cho riêng một phần tử xác định
- Mỗi phần tử HTML có một thuộc tính id.
- Trong một trang web, giá trị của thuộc tính id là duy nhất.
- Để định kiểu cho riêng một phần tử xác định, em khai báo vùng chọn là giá trị id của phần tử đó.
- Cú pháp khai báo vùng chọn id là dấu thăng (#) đứng trước giá trị id.
THỰC HÀNH
Nhiệm vụ 1. Định kiểu CSS cho vùng chọn là tên thẻ
Đoạn mã CSS được viết như sau:
Nhiệm vụ 2. Định kiểu CSS cho vùng chọn là tên thẻ và tên lớp
- Tệp portfolio.html:
- Tệp style.css:
Trong đó, vùng chọn .image-style img được dùng để định kiểu cho các thẻ <img> nằm trong thẻ <div> mà có thuộc tính class là .image-style. Nói cách khác, các thẻ <img> không thuộc thẻ <div> này sẽ không được định kiểu theo vùng chọn này.
Trên chỉ là 1 phần của giáo án. Giáo án khi tải về có đầy đủ nội dung của bài. Đủ nội dung của học kì I + học kì II
Hệ thống có đầy đủ các tài liệu:
- Giáo án word (350k)
- Giáo án Powerpoint (400k)
- Trắc nghiệm theo cấu trúc mới (200k)
- Đề thi cấu trúc mới: ma trận, đáp án, thang điểm..(200k)
- Phiếu trắc nghiệm câu trả lời ngắn (200k)
- Trắc nghiệm đúng sai (200k)
- Lý thuyết bài học và kiến thức trọng tâm (200k)
- File word giải bài tập sgk (150k)
- Phiếu bài tập để học sinh luyện kiến thức (200k)
- .....
Nâng cấp lên VIP đê tải tất cả ở tài liệu trên
- Phí nâng cấp VIP: 900k
=> Chỉ gửi 500k. Tải về dùng thực tế. Nếu hài lòng, 1 ngày sau mới gửi phí còn lại
Cách tải hoặc nâng cấp:
- Bước 1: Chuyển phí vào STK: 1214136868686 - cty Fidutech - MB(QR)
- Bước 2: Nhắn tin tới Zalo Fidutech - nhấn vào đây để thông báo và nhận tài liệu