giải thích về mức độ ưu tiên trong css

Giải thích chi tiết dễ hiểu về độ ưu tiên trong CSS8 phút đọc

CSS là một ngôn ngữ dễ học dễ nhớ tuy nhiên để thành thạo và hiểu sâu nó thì không hề đơn giản tí nào.Bạn phải thực hành rất nhiều rồi từ đó đúc kết ra những kinh nghiệm riêng cho bản thân mình.

Một trong số những kiến thức cơ bản nền tảng rất quan trọng mà bất cứ ai muốn giỏi CSS đều phải nắm rõ đó là mức độ ưu tiên trong CSS.

Bài viết hôm nay mình sẽ giải thích một cách chi tiết dễ hiểu tất tần tật về mức độ ưu tiên trong CSS cho các bạn.Nào cùng mình tìm hiểu luôn và ngay nhé.

Mức độ ưu tiên trong CSS là gì ?

Mức độ ưu tiên trong CSS có lẽ không còn mới đối với nhiều bạn sử dụng CSS hàng ngày.Nhưng sẽ là một cái gì đó khá mới và bỡ ngỡ với những bạn đang học CSS.

Mức độ ưu tiên trong CSS giải thích một cách ngắn gọn dễ hiểu là thứ tự áp dụng một thuộc tính CSS nào đó cho một đối tượng trong trang HTML.

Một ví dụ thực tế mà chúng ta hay gặp đó là khi viết CSS mặc dù chúng ta đã khai báo đầy đủ chính xác thuộc tính nhưng nó không có tác dụng với yếu tố HTML đã chọn.

Lý do là vì yếu tố HTML bạn chọn nó bị ảnh hưởng bởi một thuộc tính nào khác đã khai báo trước đó.Để nó có tác dụng thì bạn phải thay đổi độ ưu tiên trong CSS cho yếu tố đó.

Bạn đã hiểu độ ưu tiên trong CSS là gì và tầm quan trọng của nó rồi giờ thì chúng ta sẽ đi sâu vào tìm hiểu thêm.

Ví dụ minh họa

Giờ mình sẽ lấy một đoạn HTML đơn giản dưới đây làm ví dụ minh họa cho các bạn.Khi đọc bài viết này tốt nhất bạn nên mở trình soạn thảo lên và làm theo từng bước như những ví dụ trong bài viết này.

Như vậy thì bạn sẽ hiểu nhanh và sâu hơn rất nhiều.Đó cũng là cách mà mình đã học trước đây.

HTML

Các bạn chú ý là file CSS trỏ bên ngoài vào trong file HTML sẽ có mức độ ưu tiên kém hơn so với thuộc tính CSS được viết trực tiếp trong thẻ <style> bên trong file HTML nhé.

Độ ưu tiên trong CSS  theo vị trí

CSS 01

Lorem ipsum dolor sit amet.

Hai cách viết CSS trên là giống nhau.Như các bạn có thể thấy kết quả là cùng một yếu tố nhưng thuộc tính nào viết sau thì sẽ được áp dụng cho yếu tố tương ứng.

Thẻ p có thuộc tính background màu green được ở viết dưới nên thẻ p sẽ được áp dụng màu nền là màu xanh lá cây như các bạn thấy ở trên.

Thẻ HTML và class

CSS 02

Lorem ipsum dolor sit amet.

Ví dụ thứ hai này mình khai báo màu nền cho thẻ p thông qua tên class và tên yếu tố HTML.

Bạn thấy rằng tuy thẻ p có thuộc tính background: red; được viết ở dưới nhưng màu nền đỏ lại không được áp dụng cho nó.

Lý do là vì class trong CSS sẽ có mức độ ưu tiên cao hơn so với tên thẻ HTML thông thường.

Khai báo class cùng yếu tố mẹ

CSS 03

Lorem ipsum dolor sit amet.

Ví dụ thứ ba này mình khai báo thuộc tính background cho thẻ p chỉ thông qua class.Nhưng có hai cách khai báo mà bạn có thể thấy trong ví dụ.

Một là khai báo trực tiếp thông qua  tên class của thẻ p và hai là khai báo thêm class yếu tố bao bọc bên ngoài thẻ p nữa.

Và kết quả là cách viết bao gồm thêm tên class của yếu tố bao bọc bên ngoài thẻ p sẽ được áp dụng cho thẻ p.

Qua đó ta rút ra kết luận rằng bạn càng khai báo chi tiết đường dẫn đến yếu tố bạn muốn áp dụng CSS bao nhiêu thì mức độ ưu tiên CSS sẽ tăng bấy nhiêu.

ID và Class

CSS 04

Lorem ipsum dolor sit amet.

Ở ví dụ thứ tư này mình khai báo thuộc tính CSS cho thẻ p thông qua cả id và class.Kết quả như bạn thấy thuộc tính được khai báo bằng cách sử dụng id sẽ được áp dụng cho thẻ p.

Cho nên ta dễ dàng nhận thấy thuộc tính khai báo thông qua id sẽ có mức độ ưu tiên cao hơn so với khai báo thông qua class và tên yếu tố thông thường.

Viết trực tiếp CSS vào yếu tố HTML

HTML 05

CSS 05

Lorem ipsum dolor sit amet.

Ví dụ thứ năm này mình vẫn giữ nguyên cách khai báo CSS như ở ví dụ 4.Và mình cũng đã viết trực tiếp CSS vào trong thẻ p như các bạn thấy ở ví dụ.

Kết quả cách viết trực tiếp vào yếu tố HTML đã vượt qua cả cách viết bằng cách khai báo id, thẻ p được áp dụng màu nền xanh dương.

Kết luận rút ra ở ví dụ này là khi viết thuộc tính CSS vào trong thẻ HTML thì nó sẽ có độ ưu tiên cao hơn so với cách khai báo thông qua class hay id.

!important

HTML 06

CSS 06

Lorem ipsum dolor sit amet.

Ở ví dụ thứ sáu này mình vẫn giữ nguyên code HTML như ở ví dụ 5 và khi khai báo CSS mình sử dụng !important gắn thêm vào thuộc tính CSS.

Mặc dù mình chỉ khai báo thông qua tên yếu tố HTML là p và còn viết trên cùng nhưng thuộc tính CSS background: black; vẫn được áp dụng cho thẻ p như bạn thấy.

Điều đó cho thấy đây là mức độ ưu tiên cao nhất trong CSS mà bạn có thể sử dụng.

Tổng kết cuối cùng

Nếu chia độ ưu tiên trong CSS thành điểm số thì ta có danh sách tổng kết như dưới đây.Dựa vào điểm số này chúng ta có thể tính toán trực quan điểm số của từng cách viết CSS, qua đó đoán được thuộc tính nào sẽ có tác dụng với yếu tố HTML đã chọn.

  • Toàn bộ thẻ html ( ví dụ : * ) : 0
  • Thẻ html (ví dụ : thẻ h1) :
  • Pseudo-element (ví dụ : :first-child) :
  • class (ví dụ : .container) : 10
  • id (ví dụ : #title): 100
  • Trong thẻ CSS (ví dụ : style=””) : 1000
  • !important :

Để thực hành chúng ta cùng xem qua ví dụ dưới đây nhé.

Trên đây là mẫu HTML mình sẽ làm ví dụ cho các bạn.

Trên đây là những cách viết đường dẫn đến thẻ li thứ ba trong danh sách, mỗi cách viết mình đã chỉ định một màu khác nhau để bạn biết được cách viết nào đang có tác dụng nếu như thực hành.

Giờ chúng ta bắt đầu đi tính điểm cho từng cách viết trên nhé.

Cách viết : /*01*/

.container .col .list-group .item-3

Với cách viết này ta có 4 class nên tổng số điểm đạt được là : 40 điểm

Cách viết : /*02*/

.container .row .col .list-group .item-3

Cách viết này ta có tới 5 class nên tổng số điểm sẽ là : 50 điểm

Cách viết : /*03*/

.container .row .col #nav .list-group .item-3

Cách viết này có 1 id điểm số là 100 cộng với 5 class nên điểm số là : 150 điểm

Cách viết : /*04*/

.container .row .col div#nav ul.list-group li:nth-child(3)

Cách viết này có 4 class (40 điểm), 1 id (100 điểm), 3 thẻ html là div – ul – và li (3 điểm), 1 Pseudo-element (1 điểm).Cộng lại ta có số điểm là 144 điểm.

Cách viết : /*05*/

.container .row .col div#nav .list-group .item-3

Cách viết này có 5 class (50 điểm), 1 id (100 điểm), 1 thẻ div (1 điểm).Cộng lại ta có 151 điểm.

Nhìn vào số điểm của những cách viết trên bạn có thể biết chắc chắn rằng cách viết số /*05*/ là cách viết mà CSS sẽ được áp dụng cho phần tử li thứ ba mà không cần thực hành xem kết quả.

Sau khi xóa đi cách viết số /*05*/ thì cách viết số /*03*/ sẽ có tác dụng.Và cứ thế độ ưu tiên trong CSS sẽ giảm dần theo điểm số giảm.

Kết luận

Trên đây mình đã giới thiệu đến các bạn toàn bộ những gì cần nắm vững về thứ tự ưu tiên trong CSS.Hi vọng với bài viết này bạn sẽ hiểu rõ vấn đề và tự tin làm chủ CSS trong thời gian không xa.

Bài viết trước

Bài viết sau

Nếu bạn thấy bài viết này hay và có ích thì bạn có thể ủng hộ blog của mình bằng một trong số những cách sau để mình có thêm động lực xuất bản nhiều bài viết mới chất lượng hơn nữa.

  • Chia sẻ bài viết này lên mạng xã hội qua các nút bên dưới đây.
  • Thả tim ở ngay cuối cùng bài viết này.
  • Đăng kí nhận thông báo bài viết mới bằng cách nhấn vào chuông đỏ góc dưới cùng bên trái.
  • Đánh giá chất lượng bài viết bằng sao ở trên cùng bài viết này.

Tìm kiếm bài viết trên blog với Google Search :

Bài viết có thể bạn sẽ thích

guest
0 Comments
Inline Feedbacks
View all comments
0
Hãy cùng thảo luận về bài viếtx
()
x