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

  • Mục tiêu bài học:
    • Biết được cách dùng CSS cho các kiểu bộ chọn khác nhau như id, class, pseudo-class (lớp giả), pseudo-element (phần tử giả);
    • Sử dụng CSS thực hiện các mẫu định dạng theo thứ tự ưu tiên.

1. Kiểu bộ chọn dạng pseudo-class và pseudo-element

a. Bộ chọn pseudo-class (lớp giả)

Chúng ta đã biết dùng CSS để định dạng các phần tử tĩnh. Vậy làm thế nào để định dạng CSS thay đổi theo tương tác của người dùng, ví dụ như khi di chuột hoặc nhấp chuột lên phần tử nào đó?

Khái niệm: Là các trạng thái đặc biệt của phần tử HTML mà không cần định nghĩa trước.

Cú pháp: :pseudo-class { thuộc tính: giá trị; }

Một số lớp giả phổ biến:

Bộ chọnÝ nghĩaVí dụ
:linkLiên kết chưa được nhấna:link {color: blue;}
:visitedLiên kết đã được nhấna:visited {color: gray;}
:hoverKhi con trỏ chuột di chuyển qua phần tử#home:hover {font-size: 150%;}

Ví dụ minh họa:

<style>
    a:link {color: red;}
    a:visited {color: green;}
    a:hover {color: magenta;}
</style>
<a href="https://www.w3schools.com" target="_blank">Tự học nhanh CSS</a>

Kết quả định dạng liên kết:

  • Màu đỏ khi chưa nhấn.
  • Màu hồng khi di chuột qua.
  • Màu xanh khi đã nhấn.
Tin học 12 Bài 17 Bộ chọn pseudo class lớp giả

Ý nghĩa: Khai báo lớp giả để làm thay đổi các giá trị mặc định của đối tượng gây sự chú ý.

b. Bộ chọn kiểu pseudo-element (phần tử giả)

Khái niệm: chỉ một phần hoặc một thành phần của phần tử HTML bình thường.

Cú pháp: ::pseudo-element {thuộc tính: giá trị;}

Bảng một số phần tử giả phổ biến

Bộ chọnMô tảVí dụ
::first-lineĐịnh dạng dòng đầu tiên của đối tượng.p.test::first-line { font-family: monospace; }
::first-letterĐịnh dạng ký tự đầu tiên của đối tượng.p#first::first-letter { font-size: 200%; color: red; }
::selectionĐịnh dạng phần văn bản được chọn bằng chuột.::selection { background-color: lime; }

Ví dụ minh họa:

<style>
    p::first-letter {
        color: blue;
        font-size: 300%;
        font-weight: 900;
    }
</style>
<p>Đây là một đoạn văn bản minh họa sử dụng pseudo-element.</p>

Kết quả: chữ cái đầu trong nội dung của phần tử <p> được định dạng

Tin học 12 Bài 17 Bộ chọn kiểu pseudo element phần tử giả

Ý nghĩa: Khai báo phần tử giả để thiết lập các mẫu định dạng đặc biệt cho phần tử giả đó khác so với mặc định.

Một số phần tử giả khác: ::before; ::after; ::backdrop; ::first-line; ::first-letter; ::selection

Câu hỏi luyện tập (SGK trang 98)

Câu 1. Muốn áp dụng đổi màu chữ một vùng trên màn hình khi nháy chuột tại vùng đó thì cần phải dùng định dạng CSS nào?

Cần dùng mẫu CSS dạng :active {color : ;}

Câu 2: Muốn tăng kích thước một đoạn văn bản khi di chuyển chuột qua đoạn văn bản đó thì cần dùng định dạng CSS nào?

Cần dùng mẫu CSS dạng :hover {font-size: 150% ;}

2. Mức độ ưu tiên khi áp dụng CSS

Thứ tự ưu tiên và trọng số

Khi một phần tử HTML có nhiều định dạng CSS khác nhau, CSS sẽ chọn định dạng nào được ưu tiên cao nhất để áp dụng. Thứ tự ưu tiên này được liệt kê chi tiết trong bảng sau:

STTCSSGiải thích
1!importantĐược ưu tiên cao nhất
2CSS inlineCSS viết trực tiếp trong thẻ HTML qua thuộc tính style
3Media typeCSS điều chỉnh hiển thị theo kích thước màn hình.
VD: @media (max-width: 600px) {font-size: 150%;}
4Trọng số CSSCSS có trọng số cao hơn sẽ được ưu tiên áp dụng
5Thứ tự code (nguyên tắc thứ tự cuối cùng)CSS được viết sau sẽ được ưu tiên hơn
6Kế thừaDùng thuộc tính CSS của phần tử cha nếu không có định dạng riêng
7Mặc địnhSử dụng giá trị mặc định của trình duyệt nếu không có CSS nào được áp dụng

Như vậy: Nếu có nhiều mẫu định dạng CSS cùng mức ưu tiên áp dụng cho một phần tử HTML thì mẫu CSS nào có trọng số cao nhất sẽ được áp dụng.

Cách tính trọng số: là tổng trọng số từng thành phần của bộ chọn đó. Giá trị trọng số của từng thành phần trong bộ chọn được quy định trong bảng sau:

Tin học 12 Bài 17 Thứ tự ưu tiên và trọng số

Một số ví dụ về cách tính trọng số:

Tin học 12 Bài 17 Thứ tự ưu tiên và trọng số

Câu hỏi luyện tập (SGK trang 100)

Câu 1. Tính trọng số của các mẫu định dạng sau:

a) #n12 > .test
100 + 10 = 110 (1 id và 1 lớp)
b) h1, h2, h3, h4 > #new
1 + 1 + 1 + 1 + 100 = 104 (4 phần tử và 1 id)
c) p + em.test
1 + 1 + 10 = 12 (2 phần tử: p, em; 1 lớp: test)

Câu 2. Khi nào nguyên tắc cascading (thứ tự cuối cùng) được áp dụng cho một dãy các định dạng CSS

Khi dãy các định dạng CSS có trọng số bằng nhau. Dựa theo thứ tự ưu tiên trong bảng 17.3 (trang 99).

3. Thực hành

Nhiệm vụ 1: Nhập tệp HTML

Yâu cầu: Nhập tệp HTML với nội dung như sau:

Tin học 12 Bài 17 Nhiệm vụ 1 Nhập tệp HTML

Thực hiện: (gợi ý code mẫu xem và chạy thử: https://otth.vn/codeweb/view_shared.php?id=10)

<h1>Giới thiệu HTML và CSS</h1>
<nav>
    <ul style="list-style-type:none">
        <li><a href="#P1">Giới thiệu HTML</a></li>
        <li><a href="#P2">Giới thiệu CSS</a></li>
    </ul>
</nav>
<h2>Giới thiệu HTML</h2>
<h3>HTML là gì</h3>
<p>HTML - tên viết tắt của HyperText Markup Language, ngôn ngữ đánh dấu siêu văn bản, là ngôn ngữ đặc biệt dùng để
    thiết kế nội dung các trang web và được thể hiện bằng trình duyệt.</p>
<p>Cấu trúc mỗi tệp HTML là một cấu trúc dạng cây của các phần tử HTML.</p>
<p class="img">Xem logo của HTML.</p>
<img src="https://cdn-icons-png.flaticon.com/512/5968/5968267.png" alt="Logo HTML5">

<p>Link xem thêm chi tiết về HTML tại đây (https://en.wikipedia.org/wiki/HTML).</p>
<p>Link xem và tự học HTML tại đây (https://www.w3schools.com/html/default.asp).</p>

<h2>Giới thiệu CSS</h2>
<h3>CSS là gì</h3>
<p>CSS (Cascading Style Sheets) là ngôn ngữ định dạng đặc biệt được dùng để mô tả cách thể hiện của văn bản HTML
    trong trang web.</p>
<p>Mỗi định dạng CSS đều có dạng chuẩn là bộ chọn {thuộc tính : giá trị ;}.</p>
<p class="img">Xem logo của CSS.</p>
<img src="https://cdn4.iconfinder.com/data/icons/flat-brand-logo-2/512/css3-512.png" alt="Logo CSS3">

<p>Link xem thêm chi tiết về CSS tại đây (https://en.wikipedia.org/wiki/CSS).</p>
<p>Link xem và tự học CSS tại đây (https://www.w3schools.com/css/default.asp).</p>

Nhiệm vụ 2: Thiết lập định dạng bằng CSS

Định dạng cho tệp HTML ở nhiệm vụ 1 để được kết quả tương tự mẫu sau: code mẫu xem và chạy thử https://otth.vn/codeweb/view_shared.php?id=9

Tin học 12 Bài 17 Nhiệm vụ 2 Thiết lập định dạng bằng CSS

Code gợi ý:

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Giới thiệu HTML và CSS</title>
    <style>
        h1 {
            color: red;
            text-align: center;
        }

        h2 {
            color: blue;
        }

        nav {
            text-align: right;
        }

        li {
            display: inline;
            border: 1px solid blue;
            padding: 5px;
            background-color: lime;
        }

        a:hover {
            color: red;
            background-color: cyan;
        }

        h2+p {
            color: red;
        }

        img {
            display: none;
        }

        .img:active+img {
            display: block;
        }
    </style>
</head>

<body>

    <h1>Giới thiệu HTML và CSS</h1>
    <nav>
        <ul>
            <li><a href="#P1">Giới thiệu HTML</a></li>
            <li><a href="#P2">Giới thiệu CSS</a></li>
        </ul>
    </nav>
    <h2>Giới thiệu HTML</h2>
    <h3>HTML là gì</h3>
    <p>HTML - tên viết tắt của HyperText Markup Language, ngôn ngữ đánh dấu siêu văn bản, là ngôn ngữ đặc biệt dùng để
        thiết kế nội dung các trang web và được thể hiện bằng trình duyệt.</p>
    <p>Cấu trúc mỗi tệp HTML là một cấu trúc dạng cây của các phần tử HTML.</p>
    <p class="img">Xem logo của HTML.</p>
    <img src="https://cdn-icons-png.flaticon.com/512/5968/5968267.png" alt="Logo HTML5">

    <p>Link xem thêm chi tiết về HTML tại đây (https://en.wikipedia.org/wiki/HTML).</p>
    <p>Link xem và tự học HTML tại đây (https://www.w3schools.com/html/default.asp).</p>

    <h2>Giới thiệu CSS</h2>
    <h3>CSS là gì</h3>
    <p>CSS (Cascading Style Sheets) là ngôn ngữ định dạng đặc biệt được dùng để mô tả cách thể hiện của văn bản HTML
        trong trang web.</p>
    <p>Mỗi định dạng CSS đều có dạng chuẩn là bộ chọn {thuộc tính : giá trị ;}.</p>
    <p class="img">Xem logo của CSS.</p>
    <img src="https://cdn4.iconfinder.com/data/icons/flat-brand-logo-2/512/css3-512.png" alt="Logo CSS3">

    <p>Link xem thêm chi tiết về CSS tại đây (https://en.wikipedia.org/wiki/CSS).</p>
    <p>Link xem và tự học CSS tại đây (https://www.w3schools.com/css/default.asp).</p>
</body>

</html>

Câu hỏi trắc nghiệm dạng D1 và D2 Tin học 12 bài 17: Các mức ưu tiên của bộ chọn

Thời gian làm bài: 30 phút
Đáp án chỉ hiển thị sau khi hoàn thành bài làm
Câu hỏi sẽ được hiển thị ngẫu nhiên
Vui lòng nhập họ và tên để bắt đầu làm bài

NB

Thuộc tính CSS nào được dùng để thay đổi loại phần tử HTML?

NB

Giá trị nào của thuộc tính display sẽ làm ẩn hoàn toàn phần tử trên trang web?

TH

Cho đoạn CSS sau: span {display: block;}
Đoạn code trên có tác dụng gì?

NB

Đâu là ý nghĩa của thuộc tính padding trong CSS?

NB

Thuộc tính CSS nào dùng để thiết lập màu của viền khung?

TH

Thuộc tính CSS border: 2px solid red; tương đương với việc thiết lập các thuộc tính nào?

NB

Giá trị nào của thuộc tính border-style tạo ra đường viền khung dạng đường đôi?

TH

Cho đoạn CSS sau:
h1 {
    border: 5px ridge blue;
    margin: 20px;
}
Đoạn code trên có tác dụng gì?

NB

Để định dạng một nhóm các phần tử có cùng ý nghĩa, ta sử dụng bộ chọn nào trong CSS?

TH

Cho đoạn HTML sau:
<p class="test warning">Thông tin cần warning.</p>
Để định dạng đoạn văn bản trên, bộ chọn CSS nào sau đây là đúng?

NB

Mỗi phần tử HTML có bao nhiêu mã định danh id duy nhất trong một trang web?

TH

Cho đoạn CSS sau: [href] {border: 1px solid blue;}
Đoạn code trên có tác dụng gì?


<a href="https://www.example.com" target="_blank">Link</a>
Bộ chọn CSS nào sau đây sẽ được áp dụng cho thẻ <a> trên?’ a=’a[target="_blank"]‘ b=’[href]‘ c=’a‘ d=’Tất cả các đáp án trên’ correct=’d’]
NB

Cấu trúc chung của định dạng CSS liên quan đến class là gì?


NB

Cấu trúc chung của định dạng CSS với bộ chọn ID là?


TH

Cho đoạn CSS sau: #home {color: red;}
Đoạn code trên có tác dụng gì?

NB

CSS cho phép thiết lập bộ chọn là gì?

TH

Phát biểu nào sau đây là đúng về tên của id và class trong CSS?

VD

Cho đoạn HTML sau:
<p class="test more once">Đoạn chương trình cần kiểm tra.</p>
Đoạn văn bản trên thuộc bao nhiêu lớp?

VD

Cho đoạn CSS sau: .test .test_more {background-color: red;}
Đoạn code trên có tác dụng gì?

Một trang web có nhiều thẻ <p>. Bạn muốn đoạn P1 có định dạng khác biệt, P2 và P3 có cùng kiểu định dạng khác với P1, và các đoạn còn lại có định dạng giống nhau.

NB Có thể sử dụng thuộc tính id để định dạng riêng cho P1

NB Có thể sử dụng thuộc tính class để định dạng chung cho P2 và P3

TH Cần tạo 4 class khác nhau để thực hiện yêu cầu trên

VD Có thể thiết lập định dạng CSS cho các khung với thông số khung, viền trên, dưới, trái, phải khác nhau

Bạn muốn tạo một trang web hiển thị thông tin về sản phẩm. Bạn muốn mỗi sản phẩm được hiển thị trong một khung riêng biệt với viền và lề khác nhau.

NB Thuộc tính margin dùng để chỉ khoảng cách giữa nội dung sản phẩm và viền của khung

NB Chỉ có thể thiết lập chiều rộng và chiều cao cho phần tử dạng khối

TH Có thể sử dụng thuộc tính border-style để tạo viền có kiểu dáng khác nhau như đường liền, đường chấm chấm, đường gạch nối

VD Các thuộc tính liên quan đến khung của một phần tử HTML có tính kế thừa

Một trang web sử dụng CSS để định dạng các phần tử. Một số phần tử có id và class trùng nhau.

VD Các định dạng CSS áp dụng cho id sẽ ghi đè các định dạng áp dụng cho class nếu chúng xung đột

NB Một phần tử HTML có thể thuộc nhiều lớp class khác nhau

TH Tên của id và class không được bắt đầu bằng số

VD Các định dạng được gán trực tiếp cho phần tử HTML sẽ có độ ưu tiên cao nhất so với định dạng từ CSS bên ngoài

Bảng xếp hạng

Hạng Họ tên Điểm số Thời gian
1
guỳ 1 lần thi
86/100
 3 phút 18 giây
2
Bb 1 lần thi
40/100
 35 phút 51 giây
Cập nhật lần cuối: 18:13 29/04/2025
Top 1 Top 2 Top 3
admin
admin
Bài viết: 67

Bài viết liên quan

Để lại một bình luận

Email của bạn sẽ không được hiển thị công khai. Các trường bắt buộc được đánh dấu *

Xu hướng hiện tại

Tổng quan Chuyên đề 1 IC3 GS6 - Công nghệ Thông tin Cơ bản
CĐ1. Công nghệ thông tin cơ bản (IC3 GS6): phần cứng, phần mềm, mạng & khắc phục sự cố
Tin học 12 – Bài 9: Tạo danh sách và bảng
Tin học 12 – Bài 10: Tạo liên kết
Tin học 12 – Bài 11. Chèn tệp tin đa phương tiện và khung nội tuyến vào trang web