12_Lesson17.kntt

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

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

a. Bộ chọn pseudo-class

Pseudo-class (lớp giả) là khái niệm chỉ các trạng thái đặc biệt của phần tử HTML. Các trạng thái này không cần định nghĩa và mặc định được coi như các lớp có sẵn của CSS. Trong CSS, các lớp giả quy định viết sau dấu “:” theo cú pháp:

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

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

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

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

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

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

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

Pseudo-element (phần tử giả) là khái niệm chỉ một phần (hoặc một thành phần) của các phần tử bình thường. Các phần này có thể coi là một phần tử giả và có thể thiết lập mẫu định dạng CSS. Quy định phần tử giả viết sau dấu “::” theo cú pháp:

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

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

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

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

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

Multiple Choice

Thiết lập bộ chọn là "#home {font-size: 150%;}", điều nào sau đây sẽ xảy ra khi di chuyển con trỏ chuột lên phần tử có id là "home" ?

• Đối tượng được in đậm màu lên 150%.

• Màu sắc của phông chữ sẽ thay đổi.

• Kích thước phông chữ sẽ tăng 150%.

• Kích thước phông chữ sẽ giảm 150%.

Multiple Choice

Bộ định dạng nào sau đây KHÔNG thuộc kiểu pseudo-element?

• ::visited

• ::selection

• ::first-line

• ::first-let

Multiple Choice

Pseudo-class được sử dụng để:

• Định nghĩa kiểu chữ đặc biệt

• Tạo các lớp giả định của phần tử HTML

• Thay đổi màu nền của trang web

• Tạo hiệu ứng động cho các hình ảnh

Multiple Choice

Cú pháp đúng để áp dụng pseudo-element trong CSS là:

• ::pseudo-element {thuộc tính : giá trị ;}

• pseudo-element {thuộc tính : giá trị ;}

• :pseudo-element {thuộc tính : giá trị ;}

• ::pseudo-class {thuộc tính : giá trị ;}

Multiple Choice

Pseudo-class :hover được sử dụng để:

• Thay đổi nội dung của phần tử khi nhấn vào

• Thay đổi kiểu chữ khi chuột di chuyển qua

• Ẩn phần tử khi trang được tải

• Tạo hiệu ứng động khi trang cuộn

Multiple Choice

Pseudo-element ::before thường được sử dụng để:

• Thêm nội dung trước phần tử

• Thay đổi màu nền của phần tử

• Thêm đường viền cho phần tử

• Thay đổi kích thước của phần tử

Multiple Choice

Pseudo-class :first-child được sử dụng để:

• Áp dụng định dạng cho phần tử đầu tiên trong một nhóm

• Áp dụng định dạng cho phần tử cuối cùng trong một nhóm

• Áp dụng định dạng cho tất cả các phần tử trong nhóm

• Áp dụng định dạng cho phần tử duy nhất trong nhóm

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

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

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

Multiple Choice

Bộ chọn nào sau đây có tổng trọng số là 102?

• .test #p11

• p.test em.more

• p > em#p123

• p >em

Multiple Choice

Bộ chọn ".main #name" có tổng trọng số là

• 10.

• 100.

• 110.

• 120.

Multiple Choice

Trong trường hợp có nhiều mẫu định dạng CSS áp dụng cho cùng một phần tử, quy tắc nào được áp dụng?

• Mẫu định dạng đầu tiên trong tệp CSS

• Mẫu định dạng có thuộc tính màu sắc

• Mẫu định dạng có trọng số cao nhất

• Mẫu định dạng có thứ tự cuối cùng

Multiple Choice

Trọng số CSS không bao gồm yếu tố nào sau đây?

• Số lượng ID

• Số lượng class

• Số lượng thẻ HTML

• Số lượng thuộc tính

Multiple Choice

Nguyên tắc ưu tiên trong CSS được xác định bằng:

• Thứ tự xuất hiện của các quy tắc trong tệp CSS

• Số lượng phần tử trong trang HTML

• Số lượng liên kết trong tệp CSS

• Tính kế thừa và trọng số của các bộ chọn

Multiple Choice

Trọng số của một mẫu định dạng CSS được xác định dựa trên:

• Vị trí của tệp CSS trong trang

• Số lượng các kiểu chữ khác nhau

• Số lượng ID, class và thẻ HTML

• Số lượng các màu sắc được sử dụng

Multiple Choice

Nếu một phần tử HTML có cả ID và class, mẫu định dạng nào sẽ được ưu tiên?

• Mẫu định dạng với thuộc tính màu sắc

• Mẫu định dạng được viết sau cùng

• Mẫu định dạng với class

• Mẫu định dạng với ID

Multiple Choice

Phát biểu sau đúng hai sai?

Bộ chọn pseudo-class (lớp giả) được viết sau dấu hai chấm (:) theo cú pháp: :pseudo-class {thuộc tính: giá trị;}.

• đúng

• sai

Multiple Choice

Phát biểu sau đúng hai sai?

Bộ chọn pseudo-element (phần tử giả) được viết sau dấu hai chấm kép (::) theo cú pháp: ::pseudo-element {thuộc tính: giá trị;}.

• đúng

• sai

Multiple Choice

Phát biểu sau đúng hai sai?

Pseudo-class mô tả các trạng thái đặc biệt của phần tử HTML, còn pseudo-element mô tả các phần nhỏ hơn của phần tử HTML.

• đúng

• sai

Multiple Choice

Phát biểu sau đúng hai sai?

Trong CSS, các lớp giả và phần tử giả đều có thể định dạng các trạng thái và phần tử của HTML.

• đúng

• sai

Multiple Choice

Phát biểu sau đúng hai sai?

Trong CSS, tính kế thừa và quy định về thứ tự cuối cùng (cascading) có mức ưu tiên cao hơn trọng số của bộ chọn.

• đúng

• sai

Multiple Choice

Phát biểu sau đúng hai sai?

Khi có nhiều mẫu định dạng CSS có thể áp dụng cho một phần tử HTML, mẫu CSS có trọng số cao nhất sẽ được ưu tiên áp dụng.

• đúng

• sai

​Bài 16. Định dạng khung

​Bài 16. Định dạng khung

Multiple Choice

Áp dụng một bộ chọn có quy định display: none; được hiểu là

• loại bỏ phần tử khỏi không gian của nó trong tài liệu.

• ẩn phần tử và giữ không gian của nó trong tài liệu.

• hiển thị phần tử tương tự như một phần tử nội dòng.

• hiển thị phần tử tương tự như một phần tử khối.

Multiple Choice

Phần tử nào dưới đây mặc định là display: inline;?

• <div>

• <h1>

• <p>

• <span>

​Bài 16. Định dạng khung

​Bài 16. Định dạng khung

​Bài 16. Định dạng khung

​3. Một số bộ chọn đặc biệt của CSS

a. Thiết lập bộ chọn là một lớp các phần tử có ý nghĩa gần giống nhau

.class {thuộc tính: giá trị;}

 Ví dụ, thiết lập bộ chọn lớp như sau:

​Bài 16. Định dạng khung

​3. Một số bộ chọn đặc biệt của CSS

b. Thiết lập bộ chọn riêng cho từng phần tử riêng biệt có mã định danh id

#idname {thuộc tính: giá trị;}

Mỗi phần tử được gán một mã định danh ở trên là duy nhất trong một trang web.

​Bài 16. Định dạng khung

​3. Một số bộ chọn đặc biệt của CSS

c. Thiết lập bộ chọn thuộc tính CSS

Sử dụng bộ chọn này giúp thiết lập vào các thuộc tính của thẻ mà người lập trình mong muốn.

​Bài 16. Định dạng khung

​3. Một số bộ chọn đặc biệt của CSS

c. Thiết lập bộ chọn thuộc tính CSS

Khi đặt tên cho id và class:

• Tên của id và class phân biệt chữ in hoa, in thường.

• Tên bắt buộc phải có ít nhất một kí tự không là số, không bắt đầu bằng số, không chứa dấu cách và các kí tự đặc biệt khác.

• Một phần tử có thể thuộc nhiều lớp khác nhau. Để khai báo, chúng ta đặt các tên lớp cách nhau bởi dấu cách. 

Multiple Choice

Giải thích về bộ chọn div#bat_dau > p nào sau đây là đúng?

• Chọn toàn bộ mọi phần tử <p> nằm bên trong mọi phần tử <div> có thuộc tính id là bat_dau.

• Chọn tất cả các phần tử <p> là con trực tiếp của phần tử <div> có thuộc tính id là bat_dau.

• Chọn tất cả các phần tử <div> và <p> mà cả hai đều có chung cùng thuộc tính id là bat_dau.

• Chọn tất cả các phần tử <div> có thuộc tính id là bat_dau và có chứa phần tử <p> bên trong.

Multiple Choice

Phần tử khối trong HTML thường có đặc điểm gì?

• Luôn nằm trong một phần tử khác

• Không có chiều rộng cố định

• Bắt đầu từ đầu hàng và kéo dài suốt chiều rộng của trang web

• Luôn là phần tử inline

Multiple Choice

Thuộc tính display: none; trong CSS có tác dụng gì?

• Ẩn phần tử mà không hiển thị trên trang web

• Chuyển phần tử thành phần tử inline

• Chuyển phần tử thành phần tử block

• Chuyển phần tử thành phần tử nội tuyến

Multiple Choice

Các thuộc tính khung trong CSS không áp dụng được cho loại phần tử nào?

• Phần tử khối

• Phần tử nội tuyến

• Phần tử block

• Phần tử với ID cụ thể

Multiple Choice

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

• ID

• Class

• Inline

• Block

Multiple Choice

Mỗi phần tử HTML có thể có bao nhiêu ID?

• Một ID

• Nhiều ID

• Không có ID

• Tùy thuộc vào phần tử

Multiple Choice

Khi đặt tên cho ID và class, điều nào không đúng?

• Tên phải phân biệt chữ hoa và chữ thường

• Không chứa dấu cách và các ký tự đặc biệt

• Phải có ít nhất một ký tự không phải là số

• Tên bắt đầu bằng số

Multiple Choice

Bộ chọn CSS với ID được viết như thế nào?

• .idname {thuộc tính: giá trị;}

• id=idname {thuộc tính: giá trị;}

• .id {thuộc tính: giá trị;}

• #idname {thuộc tính: giá trị;}

Multiple Choice

Phần tử có thể thuộc nhiều class bằng cách nào?

• Dùng dấu phẩy giữa các tên class

• Dùng dấu chấm giữa các tên class

• Đặt các tên class cách nhau bởi dấu cách

• Không thể có nhiều class

Multiple Choice

Nhận định sau đúng hay sai

Phần tử khối thường bắt đầu từ đầu hàng và kéo dài suốt chiều rộng của trang web.

• đúng

• sai

Multiple Choice

Nhận định sau đúng hay sai

Thuộc tính display: none; làm ẩn phần tử, không hiển thị trên trang web.

• đúng

• sai

Multiple Choice

Nhận định sau đúng hay sai

Tất cả các phần tử HTML đều thuộc loại phần tử khối.

• đúng

• sai

Multiple Choice

Nhận định sau đúng hay sai

Phần tử nội tuyến có thể chứa các phần tử khối.

• đúng

• sai

Multiple Choice

Nhận định sau đúng hay sai

Phần tử nội tuyến có thể thiết lập chiều cao và chiều rộng của khung.

• đúng

• sai

Multiple Choice

Nhận định sau đúng hay sai

Các thuộc tính liên quan đến khung có tính kế thừa.

• đúng

• sai

Multiple Choice

Nhận định sau đúng hay sai

Phần tử khối có thể thiết lập khung với đầy đủ tính chất như chiều cao và chiều rộng.

• đúng

• sai

Multiple Choice

Nhận định sau đúng hay sai

Bộ chọn lớp (class) được sử dụng để định dạng chung cho nhóm phần tử có cùng ý nghĩa.

• đúng

• sai