Bài 17 Các mức ưu tiên của bộ chọn
Lớp 12Tin Học10 câu hỏiBài tập
Phần 1
Câu 1
(Câu 17.1 trang 46 SBT Tin học 12) Câu nào sau đây là đúng nhất về pseudo-class (lớp giả)?
ALớp giả là lớp mô tả các trạng thái đặc biệt của các phần tử phụ thuộc vào thao tác người dùng trên trình duyệt, ví dụ như thao tác chuột, thao tác nhập liệu trên biểu mẫu và một số trạng thái đặc biệt khác.
BLớp giả là lớp các phần tử đã được định nghĩa lớp có sẵn trong trang web không do người viết chương trình tạo ra.
CLớp giả là lớp mặc định các phần tử đặc biệt nào đó do CSS định nghĩa trước.
DLớp giả là lớp mô tả các trạng thái đặc biệt của một số phần tử đặc biệt của HTML.
Câu 2
(Câu 17.2 trang 46 SBT Tin học 12) Câu nào sau đây là đúng nhất về pseudo-element (phần tử giả)?
APhần tử giả được định nghĩa để mô tả một số phần, thành phần đặc biệt có ý nghĩa của các phần tử HTML, ví dụ dòng đầu tiên, chữ cái đầu tiên; các thành phần này có nhu cầu thiết lập định dạng riêng.
BPhần tử giả là các phần tử HTML nhưng ảo, không hiển thị ngay trên màn hình.
CPhần tử giả là các phần tử HTML đặc biệt do CSS thiết lập riêng.
DPhần tử giả là tất cả các thành phần riêng biệt, độc lập của các phần tử HTML.
Câu 3
(Câu 17.3 trang 46 SBT Tin học 12) Cho mẫu định dạng CSS: :active { color: red; }. Câu nào sau đây mô tả đúng chức năng của mẫu định dạng trên?
ATrong khi nhấn và giữ chuột lên phần tử đang được kích hoạt thì chữ của phần tử đó chuyển màu đỏ.
BMẫu này không có tác dụng lên bất cứ phần tử nào của tệp HTML hiện thời.
CSau khi nháy chuột lên cửa sổ trình duyệt thì toàn bộ chữ của trang web chuyển màu đỏ.
DKhi di chuyển chuột lên cửa sổ trình duyệt thì toàn bộ chữ của trang web chuyển màu đỏ.
Câu 4
(Câu 17.4 trang 46 SBT Tin học 12) Nếu hai mẫu định dạng CSS có trọng số bằng nhau cùng áp dụng cho một phần tử thì trình duyệt sẽ ưu tiên dùng mẫu nào?
AƯu tiên áp dụng mẫu cuối cùng.
BƯu tiên áp dụng mẫu CSS có từ khoá !important, nếu không có thì dùng mẫu đầu tiên trong danh sách.
CTrình duyệt sẽ áp dụng mẫu định dạng có mô tả thuộc tính nhiều hơn.
DƯu tiên áp dụng mẫu đầu tiên.
Câu 5
(Câu 17.6 trang 47 SBT Tin học 12) Nêu ý nghĩa của mẫu định dạng CSS sau: h1.test + p:hover {font-size: 2em; }.
AKhi di chuyển chuột lên phần tử p nằm ngay sau h1 với điều kiện h1 thuộc lớp test thì chữ của đoạn này sẽ cao gấp hai lần kiểu chữ hiện có.
BKhi di chuyển chuột lên một đoạn văn bản bất kì, tức phần tử p bất kì, thì chữ sẽ cao lên gấp đôi.
CKhi di chuyển chuột lên phần tử p nằm ngay sau h1 thì chữ sẽ cao lên gấp đôi.
DKhi di chuyển chuột lên phần tử p nằm ngay sau h1 với điều kiện h1 thuộc lớp test thì chữ của đoạn này sẽ cao gấp hai lần kiểu chữ của phần tử gốc.
Câu 6
(Câu 17.7 trang 47 SBT Tin học 12) Cho đoạn mã HTML/CSS sau: 1 <!DOCTYPE html> / 2 <html> / 3 <head> / 4 <style> / 5 p > strong ~ em {color: blue;} / 6 p > strong {color: green;} / 7 em {color: cyan;} / 8 strong {color: red;} / 9 </style> / 10 </head> / 11 <body> / 12 <h1 class="test">Tìm hiểu về HTML</h1> / 13 <p><strong>HTML</strong> - tên viết tắt của <em>HyperText Markup Language</em>, 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> / 14 </body> / 15 </html>. Từ “HTML” trong văn bản trên sẽ có màu gì trên trình duyệt?
Agreen.
Bblue.
Cred.
Dcyan.
Câu 7
(Câu 17.8 trang 47 SBT Tin học 12) Với đoạn mã HTML/CSS ở Câu 17.7, cụm từ “HyperText Markup Language” khi hiển thị sẽ có màu gì?
Ablue.
Bred.
Cgreen.
Dcyan.
Câu 8
(Câu 17.9 trang 48 SBT Tin học 12) Giả sử đã thiết lập trang HTML như sau: 1 <!DOCTYPE html> / 2 <html> / 3 <head> / 4 <style> / 5 p { color: blue; } / 6 *.test { color: red; } / 7 </style> / 8 </head> / 9 <body> / 10 <h1 class="test">Tiêu đề kiến thức</h1> / 11 <p>Đoạn văn bản đầu tiên</p> / 12 </body> / 13 </html>. Màu của các cụm từ “Tiêu đề kiến thức” và “Đoạn văn bản đầu tiên” lần lượt là gì?
AĐỏ, xanh dương.
BĐỏ, đỏ.
CXanh dương, đỏ.
DXanh dương, xanh dương.
Phần 2
Câu 1
(Câu 17.5 trang 47 SBT Tin học 12) Tính trọng số của các mẫu định dạng CSS với các bộ chọn đã cho. Mỗi phát biểu sau là đúng hay sai?
a)Bộ chọn div > p có trọng số là (0, 0, 2).
b)Bộ chọn div.test + #p1 có trọng số là (1, 1, 1).
c)Bộ chọn p.test1 p.test2 có trọng số là (0, 2, 2).
d)Bộ chọn h1:first-line có trọng số là (1, 0, 1).
Câu 2
(Câu 17.10 trang 48 SBT Tin học 12) Giả sử đã thiết lập trang HTML như sau: <!DOCTYPE html> / <html> / <head> / </head> / <body> / <div>Hãy di chuyển chuột lên tôi, bạn sẽ thấy... <p id="hidden">Sự kì diệu của CSS!</p> </div> / </body> / </html>. Xét đoạn CSS: p#hidden { display: none; background-color: yellow; color: red; padding: 10px; } div { background-color: cyan; padding: 20px; } div:hover p#hidden { display: block; }. Mỗi phát biểu sau là đúng hay sai?
a)Quy tắc p#hidden { display: none; ... } làm cho dòng chữ “Sự kì diệu của CSS!” được ẩn đi khi duyệt bình thường.
b)Quy tắc div { background-color: cyan; padding: 20px; } làm cho khung chứa dòng chữ “Hãy di chuyển...” có nền xanh lam và vùng đệm 20 px.
c)Khi di chuyển chuột lên khung div, quy tắc div:hover p#hidden { display: block; } làm cho dòng chữ “Sự kì diệu của CSS!” xuất hiện.
d)Đoạn CSS trên thiết lập vùng đệm của dòng chữ “Sự kì diệu của CSS!” là 20 px.