NeoEdu
Tin học 12 · Kết nối tri thức · Chung, Khoa học máy tính và Tin học ứng dụng
Tin họcLớp 12Phần 4. Chủ đề 4 · Giải quyết vấn đề với sự trợ giúp của máy tính · Chung

Bài 17. Các mức ưu tiên của bộ chọn

Mục tiêu bài học

  • Giải thích và vận dụng nội dung các mức ưu tiên của bộ chọn qua dữ kiện cụ thể.
  • Tạo hoặc đánh giá sản phẩm, nêu điều kiện đúng và kiểm tra kết quả bằng bằng chứng.

Bài giảng

Hiểu cách hoạt động

Khi nhiều khai báo cùng thuộc tính áp dụng, trình duyệt xét tầng nguồn/quy tắc ưu tiên, mức quan trọng rồi độ đặc hiệu và thứ tự phù hợp. Trong phạm vi bài so các quy tắc tác giả thông thường, cùng mức quan trọng và không xét tầng CSS: id đặc hiệu hơn class/thuộc tính/lớp giả; nhóm này hơn tên phần tử/phần tử giả; bằng độ đặc hiệu thì khai báo sau thắng. Có thể xem độ đặc hiệu là bộ số (id, class, phần tử), so từ trái, không cộng đơn giản để nhiều class vượt một id. Kiểu trực tiếp trên phần tử thường thắng các bộ chọn thường cùng nguồn; !important đổi mức ưu tiên, không nên dùng để che thiết kế rối. Giá trị trực tiếp trên con cũng cần phân biệt với giá trị chỉ thừa kế từ cha.

Làm và tự kiểm tra

Mã mẫu tự biên soạn; lưu UTF-8 theo tên tệp trong nhiệm vụ.

<style>
p { color: navy; }
.ghi { color: green; }
#ket-qua { color: maroon; }
p.ghi { font-weight: bold; }
.ghi { background-color: white; }
.ghi { background-color: yellow; }
a:link { color: navy; } a:visited { color: purple; }
a:hover { text-decoration: underline; } a:active { color: maroon; }
</style>
<p id="ket-qua" class="ghi">Chiều cao 4cm.</p>

Kết quả suy ra từ cấu trúc mã: p có màu maroon do id thắng class và tên phần tử; font-weight bold do p.ghi áp dụng không xung đột màu; nền yellow vì hai .ghi ngang đặc hiệu và khai báo nền sau thắng. Trạng thái liên kết minh họa link/visited/hover/active, không có liên kết cụ thể trong phần body này. Không coi mô tả này là ảnh chụp hay kết quả đã thao tác trên máy người học.

Ghi nhớ

Khi nhiều khai báo cùng thuộc tính áp dụng, trình duyệt xét tầng nguồn/quy tắc ưu tiên, mức quan trọng rồi độ đặc hiệu và thứ tự phù hợp.

Bài tập

Đã đúng 0/6 câu

  1. Câu 1Mức 2Trắc nghiệm 1 đáp án

    Cùng nguồn và mức quan trọng như bài, bộ chọn nào đặc hiệu cao nhất?

  2. Câu 2Mức 2Trắc nghiệm 1 đáp án

    Hai quy tắc .ghi cùng đặt nền khác nhau, cùng điều kiện; quy tắc nào thắng?

  3. Câu 3Mức 2Đúng / Sai

    Mười một class luôn vượt một id vì có thể cộng thành 110 lớn hơn 100.

  4. Câu 4Mức 2Ghép nối

    Ghép bộ chọn với đối tượng/trạng thái.

    Chạm một ý bên trái rồi chạm ý tương ứng bên phải để ghép cặp.

  5. Câu 5Mức 2Trắc nghiệm 1 đáp án

    Với #k{color: maroon}.x{color: green} và <p id="k" class="x">A</p>, màu theo các quy tắc thường này là gì?

  6. Câu 6Mức 2Đúng / Sai

    CSS đặt trực tiếp color: green cho p có thể thắng màu chỉ thừa kế từ cha dù cha được chọn bằng id.

  7. Câu 7Mức 3Tự luận

    Phân tích đoạn mã sau: p có màu gì, đậm không, nền gì? Giải thích từng xung đột, không dùng !important. Giả thiết chỉ có các quy tắc tác giả thông thường dưới đây, cùng tầng và mức quan trọng.

    <style>
p {color:navy;}
.ghi {color:green;}
#ket-qua {color:maroon;}
p.ghi {font-weight:bold;}
.ghi {background-color:white;}
.ghi {background-color:yellow;}
</style>
<p id="ket-qua" class="ghi">Chiều cao 4 cm.</p>

    0 từ

    0/10 ảnh

    Có thể chụp nhiều trang. Ảnh được lưu cùng bài làm và giáo viên sẽ chấm trên ảnh.

    Vẽ bài làm

    Ảnh bài làm

    Cuộn chuột hoặc chụm hai ngón để phóng to · kéo để di chuyển · phím R để xoay

  8. Câu 8Mức 3Tự luận

    Có p{color: navy} ở đầu style.css và p{color: green} ở cuối, không có quy tắc khác. Muốn mọi p thống nhất navy mà không dùng !important, em sửa thế nào?

    0 từ

    0/10 ảnh

    Có thể chụp nhiều trang. Ảnh được lưu cùng bài làm và giáo viên sẽ chấm trên ảnh.

    Vẽ bài làm

    Ảnh bài làm

    Cuộn chuột hoặc chụm hai ngón để phóng to · kéo để di chuyển · phím R để xoay