Giải tin học ứng dụng 12 cánh diều bài 10: Bộ chọn lớp, bộ chọn định danh

Giải bài 10: Bộ chọn lớp, bộ chọn định danh sách Tin học ứng dụng 12 cánh diều. Phần đáp án chuẩn, hướng dẫn giải chi tiết cho từng bài tập có trong chương trình học của sách giáo khoa. Hi vọng, các em học sinh hiểu và nắm vững kiến thức môn Tin học 12 Tin học ứng dụng cánh diều chương trình mới

B. Bài tập và hướng dẫn giải

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 và cuối cùng chữ màu đỏ, còn các đoạn văn bản còn lại chữ màu xanh không?

1. BỘ CHỌN LỚP

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?

3. THỰC HÀNH SỬ DỤNG BỘ CHỌN LỚP, BỘ CHỌN ĐỊNH DANH

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ụ: lightgrey). 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.

Câu 2:  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.

TỰ KIỂM TRA

Câu 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. <p class="xanh">Học CSS </p>

B. <p id= "xanh">Học CSS </p>

C. <a href="https://www.w3schools.com" id = "xanh">Học CSS </a>

D. <a href="https://www.w3schools.com" class = "xanh">Học CSS </a>

Câu 2: Cô giáo yêu câu khai báo và áp dụng CSS để định dạng văn bản HTML có nội dung như ở Hình ba để 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:

a) Khai báo CSS sử dụng bộ chọn phần tử cho phần tử hỉ vì nội dung văn bản HTML chỉ gồm các phần tử tiêu đề mục hl.

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.

<style>

tieudel {color: red;}

tieude2 {color: blue;}

</style>

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.

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ử hl.

<style>

#tieude1 {color: blue;} h1 {color: red;}

</style>

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:

<style>

tieudel {color: red;}

#tieude2 {color: blue;}

</style>

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.

Nội dung quan tâm khác

Thêm kiến thức môn học

Từ khóa tìm kiếm:

Giải SGK Tin học ứng dụng 12 cánh diều, Giải chi tiết Tin học ứng dụng 12 cánh diều mới, Giải Tin học ứng dụng 12 cánh diều bài 10: Bộ chọn lớp, bộ chọn định

Bình luận

Giải bài tập những môn khác