Tìm hiểu Class selector và ID selector

0
40

Giới thiệu

Ở video trước chúng ta đã học UniversalType/Element và Grouping Selector
mình nhắc lại cho các bạn còn nhớ, nào ôn lại chút nhé :), dzô…

Universal: là loại selector mà tất cả các phần tử trang web sẽ được chọn khi ta sử dụng.
Tuy nhiên loại selector này không được khuyến khích sử dụng.

Type/Element Selector: là loại selector này sẽ tìm kiếm dựa trên tên của các thẻ (phần tử trang)
cú pháp element { thuộc tính }

Grouping: nhiều thẻ có cùng chung một style,để công việc này được đơn giản hơn (làm mã css gọn lại), chúng ta có thể “gom nhóm”
chúng lại với nhau và được ngăn cách bằng dấu “,” (phẩy)
cú pháp element, element, element … {thuộc tính}

Trong video này chúng ta sẽ tìm hiểu selector khá phổ biến đó là Class selector và ID selector
bạn thử nghĩ xem nếu ta có thể nhóm các kiểu style thông qua Grouping, kỹ thuật
này khá hữu ích nhưng bất tiện, vì khi truy xuất các style chung này rất khó khăn, thậm chí không thể
vì thế ta nghĩ tới nhóm mà đưa các element vào nhóm đó đây được gọi là class selector

Cú pháp như thế này .tênclass
VD :

<h2 class="text-group">Giới thiệu</h2>
<p class="text-group">...</p>

Thật tuyệt với khi này thẻ h2,p đã có cùng một kiểu style text-group ta có ví dụ như sau

<h2>Giới Thiệu</h2>
<h2>Nguyên liệu</h2>
<h2>cách làm</h2>
<h2>Hướng dẫn</h2>

Vậy làm sao ta có thể định dạng một phần tử cụ thể h2 này
lúc này ta có thể dùng đó là id selector được viết trong css là #tênID
bây giờ ta xem qua vd sau:

<h2 id="intro">Giới thiệu</h2>
<h2 id="metarial">Nguyên liệu</h2>
<h2 id="how-to">Cách làm</h2>
<h2 id="images">Hình ảnh</h2>

Các bạn nên nhớ id không thể trùng nhau và duy nhất trong trang, lúc đó
ta có thể định dạng cho thẻ h2 bất ký với id của nó
ở đây

#info {
  font-style: italic;
  color: blue;
}

Thì lúc này h2 có id="info" có định dạng chữ in nghiêng và màu xanh

Kết luận:

Vậy là chúng ta đã tìm hiểu xong video class selector và id selector,
các bạn suy nghĩ xem có gì khác nhau
trong class selector và id selector thì độ ưu tiên của id selector cao hơn phải không bạn
chúc mừng bạn đã trả lời đúng, chúc các bạn học tốt.

Tài liệu tham khảo

  1. http://www.w3.org/TR/CSS21/selector.html#pattern-matching
  2. http://www.w3.org/wiki/CSS/Training/Priority_level_of_selector
  3. http://www.w3.org/wiki/CSS/Training/Priority_level_of_selector
1

BÌNH LUẬN

Nhập bình luận của bạn
Vui lòng nhập tên