CHỦ ĐỀ F. BÀI 10.BỘ CHỌN LỚP, BỘ CHỌN ĐỊNH DANH
Trang bìa
Trang bìa
Ảnh
TIN HỌC 12 CHỦ ĐỀ F. BÀI 10. BỘ CHỌN LỚP, BỘ CHỌN ĐỊNH DANH
Ảnh
Yêu cầu cần đạt
Yêu cầu cần đạt
Ảnh
Yêu cầu cần đạt
Hình vẽ
Sử dụng được bộ lớp chọn, lớp chọn định danh.
Khởi động
Khởi động
Khởi động
Trong một trang web có 5 đoạn văn bản, em có biết khai báo CSS như thế nào để trình bày đoạn văn bản đầu tiên cuối cùng chữ màu đỏ, còn các đoạn văn bản còn lại màu xanh dương?
Ảnh
1. Bộ chọn lớp
Tìm hiểu
1. Bộ chọn lớp
Mỗi bộ chọn lớp (class selector) được đặt tên, thường được dùng để khai báo các quy tắc định dạng được áp dụng chung cho nhiều phần tử trong văn bản HTML thay vì phải viết lặp lại các quy tắc này cho từng phần tử. Bộ chọn lớp được khai báo như sau:
Ảnh
Trong đó, Tên bộ chọn lớp do người tạo CSS tự định nghĩa và bắt đầu bằng dấu chấm
Tiếp
Ví dụ 1. Bảng định dạng CSS ở Hình 1 khai báo bộ chọn lớp được đặt tên là “red” và khai báo giá trị thuộc tính màu đỏ. Để áp dụng bộ chọn lớp có tên “Tên_ bộ chọn lớp” cho phần tử cụ thể của văn bản HTML, cần khai báo giá trị thuộc tính class của phần tử đó là “Tên bộ chọn lớp”.
Ảnh
Tiếp
Ví dụ 2. Văn bản HTML ở Hình 2a minh hoạ việc áp dụng bộ chọn lớp, kết quả hiển thị trên màn hình trình duyệt web như ở Hình 2b. Các phần tử có thuộc tính class = "red” đều được trình bày bằng chữ màu đỏ.
Ảnh
2. Bộ chọn định danh
Hoạt động
2. Bộ chọn định danh
Hoạt động Em có biết cách khai báo định dạng CSS để chỉ áp dụng cho một phần tử cụ thể trên trang web không?
Tìm hiểu
CSS có thể sử dụng bộ chọn định danh (ID selector) để áp dụng quy tắc định dạng cho một phần tử đã được định danh trong văn bản HTML. Khi đó, bộ chọn định danh được xác định thông qua Tên định danh của phần tử này và được khai báo như sau:
Ảnh
Tiếp
Ví dụ 4. Văn bản HTML ở Hình 4a khai báo và áp dụng quy tắc định dạng dùng bộ chọn định danh, kết quả hiển thị trên trình duyệt web, phần tử hl với định danh là “tieu-de-muc-chinh” sẽ được trình bày chữ màu đỏ như ở Hình 4b.
Ảnh
3. Thực hành sử dụng bộ chọn lớp, bộ chọn định danh
NV1. Khai báo và áp dụng cho bộ chọn lớp
3. Thực hành sử dụng bộ chọn lớp, bộ chọn định danh
Nhiệm vụ 1. Khai báo và áp dụng cho bộ chọn lớp
Soạn văn bản HTML có khai báo CSS sử dụng bộ chọn lớp để được trang web hiển thị trên màn hình trình duyệt web như ở Hình 5.
Ảnh
Tiếp (NV1. Khai báo và áp dụng cho bộ chọn lớp)
Yêu cầu 1: Em hãy sử dụng external CSS tạo bảng định dạng gồm các quy tắc sau: - Bộ chọn lớp có tên blue khai báo định dạng màu steelblue. - Bộ chọn lớp có tên red khai báo định dạng màu darkred. - Bộ chọn lớp có tên orangered để khai báo các thuộc tính định dạng CSS: tên phông chữ “Verdana”, cỡ chữ 25 pixel, màu chữ orangered. - Bộ chọn lớp có tên yellow cho phần tử input để khai báo thuộc tính CSS: màu nền yellow. - Bộ chọn lớp có tên blue cho phần tử input để khai báo thuộc tính CSS: màu nền blue, màu chữ white.
Tiếp (NV1. Khai báo và áp dụng cho bộ chọn lớp)
Hướng dẫn thực hiện: Bước 1. Tạo tệp “Bail0-NV1.css”. - Mở phần mềm Sublime Text. - Tạo tệp mới và ghi lưu với tên “Bai10-NV1.css”. Bước 2. Khai báo các quy tắc định dạng CSS như sau: blue {color: steelblue;} red {color: darkred;} orangered {font-family: "Verdana"; font-size: 25px; color: orangered;} input.yellow {background-color: yellow;} input.blue {background-color: blue; color: white;} Bước 3. Ghi lưu tệp.
Tiếp (NV1. Khai báo và áp dụng cho bộ chọn lớp)
Yêu cầu 2: Áp dụng khai báo external CSS đã hoàn thành ở Yêu cầu 1 để định dạng trình bày trang web như ở Hình 5.
Ảnh
Tiếp (NV1. Khai báo và áp dụng cho bộ chọn lớp)
Hướng dẫn thực hiện: Bước 1. Mở tệp “Bai9-NV2.html” đã soạn ở Bài 9, ghi lưu với tên tệp mới là “Bai10-NV1.html”. Lưu ý, cần lưu cùng thư mục với tệp “Bai10-NV1.ess”. Bước 2. Khai báo áp dụng định dạng external CSS. Trong nội dung phần tử head, sửa khai báo liên kết đến external CSS: .
Tiếp (NV1. Khai báo và áp dụng cho bộ chọn lớp)
Bước 3. Khai báo các thuộc tính class cho các phần tử. Trong nội dung phần tử body: - Thêm khai báo thuộc tính class cho phần tử h2 như sau:

. - Thêm khai báo thuộc tính class cho phần tử h3 của tiêu đề mục “1. Thông tin về người góp ý” như sau:

. Chú ý, giá trị của thuộc tính class có thể gồm nhiều bộ chọn lớp được viết phân tách bởi dấu cách. Khi đó, các khai báo định dạng CSS thuộc bộ chọn lớp blue và orangered đều được áp dụng. - Thêm khai báo thuộc tính class = "blue” cho các phần tử h3 khác. - Thêm khai báo thuộc tỉnh class = "yellow” cho các phần tử input nhập liệu ô text. - Thêm khai báo thuộc tính class = “blue” cho phần tử input gửi dữ liệu. Bước 4. Ghi lưu, mở tệp bằng trình duyệt web và xem kết quả.
NV2. Khai báo và áp dụng bộ chọn định danh
Nhiệm vụ 2. Khai báo và áp dụng bộ chọn định danh
Yêu cầu: Em hãy chỉnh sửa văn bản HTML đã hoàn thành ở Nhiệm vụ 1 để khai báo định dạng CSS theo bộ chọn định danh cho tiêu đề “Đóng góp ý kiến cho thư viện của nhà trường” có phông chữ “Courier New”, cỡ chữ 30 pixel, màu chữ lightsalmon.
Tiếp (NV2. Khai báo và áp dụng bộ chọn định danh)
Hướng dẫn thực hiện: Bước 1. Mở tệp “Bai10-NV1.html” đã hoàn thành ở Nhiệm vụ 1, ghi lưu với tên mới là “Bai10-NV2.html”. - Thêm khai báo #tieu-de {font-family: “Courier New”; font-size: 30px; color: lightsalmon;} vào trong phần khai báo . - Sửa khai báo phần tử h2 thành:

Đóng góp ý kiến cho thư viện của nhà trường

. Bước 2. Ghi lưu văn bản HTML, mở tệp bằng trình duyệt web và quan sát kết quả.
Vân dụng
Vận dụng 1
Vận dụng
Khai báo bộ chọn lớp, bộ chọn định danh, giá trị thuộc tính class cho phần tử body, id để hoàn thiện website cá nhân đã có ở các bài học trước. Gợi ý thực hiện. - Mở tệp “style.css”: Khai báo bộ chọn lớp có tên bg để thiết lập màu nền (ví dụ: lighigrey). Khai báo bộ chọn định danh có tên submit để trình bày màu của nút lệnh (ví dụ: blue). - Bổ sung khai báo giá trị thuộc tính class cho phần tử body của các tệp “hobbies.html” và “album.html” là bg. - Bổ sung khai báo giá trị thuộc tính id cho nút lệnh submit trong tệp "index.html" là submit.
Vận dụng 2
Vận dụng
Em hãy mở tệp “index.html” để xem website cá nhân và tự đánh giá có hài lòng với thành quả của bản thân không.
Câu hỏi tự kiểm tra
Câu hỏi 1
Câu hỏi tự kiểm tra
Bài tập trắc nghiệm
Câu hỏi 1 : Cho khai báo định dạng CSS sau: a.xanh {color: blue; font-size:15px;}. Trong các khai báo HTML sau, khai báo nào sẽ áp dụng định dạng CSS trên?
A.

Học CSS

B.Học CSS

C. Học CSS
D. Học CSS
Câu hỏi 2
Câu hỏi tự kiểm tra
Câu hỏi 2: Cô giáo yêu cầu khai báo và áp dụng CSS dễ định dạng văn bản HTML có nội dung như ở Hình 6a dể có kết quả hiển thị trên trình duyệt web như ở Hình 6b. Sau khi tìm hiểu, các bạn học sinh đã đưa ra các giải pháp sau đây. Em hãy cho biết mỗi phát biểu sau là đúng hay sai:
Ảnh
Tiếp (Câu hỏi 2)
a) Khai báo CSS sử dụng bộ chọn phần tử cho phần tử h1 vì nội dung văn bản HTML chỉ gồm các phần tử tiêu đề mục h1. b) Thực hiện các bước sau: Bước 1. Khai báo CSS sử dụng bộ chọn lớp để định dạng màu chữ khác với màu mặc định. Bước 2. Khai báo thuộc tính class= “tieudel” cho các tiêu đề mục chữ có màu đỏ, khai báo thuộc tính class= “tieude2” cho các tiêu đề mục chữ có màu xanh.
Tiếp (Câu hỏi 2)
c) Thực hiện các bước sau: Bước 1. Khai báo CSS sử dụng bộ chọn định danh để định dạng tiêu đề mục chữ có màu xanh, các tiêu đề khác sử dụng bộ chọn phần tử h1. Bước 2. Khai báo thuộc tính class = “tieudel” cho tiêu đề mục chữ có màu xanh. d) Thực hiện các bước sau: Bước 1. Kết hợp khai báo CSS sử dụng bộ chọn lớp, bộ chọn định danh: Bước 2. Khai báo thuộc tính class=“tieudel” cho các tiêu đề mục chữ màu đỏ, khai báo thuộc tính id= “tieude2” cho các tiêu đề mục chữ có màu xanh.
Tổng kết
Ghi nhớ
Ghi nhớ
Hình vẽ
Bộ chọn lớp thường dùng để khai báo các quy tắc định dạng được áp dụng chung cho nhiều phần tử trong văn bản HTML. Bộ chọn định danh được dùng để khai báo các quy tắc định dạng chỉ áp dụng cho một phần tử cụ thể trong văn bản HTML.
Kết thúc bài hoc
Ảnh