[CSS] Thứ tự ưu tiên trong CSS - The order of priority in CSS
CSS Priority Rankings là thứ tự ưu tiên các CSS được browser quy định, thông qua đó các bạn có thể biết đâu sẽ là thuộc tính được hiển thị trong trường hợp có sự xung đột CSS trên cùng một phần tử HTML
Dưới dây là danh sách liệt kê thứ tự ưu tiên của thuộc tính CSS (Sắp xếp từ trên xuống dưới, trên cùng mức độ ưu tiên cao nhất, dưới cùng mức độ ưu tiên thấp nhất) :
https://i.imgur.com/HLARhCg.png
1. !important
- Là thuộc tính có thứ tự ưu tiên cao nhất trong CSS. Nó sẽ luôn luôn overwrite tất cả các thuộc tính CSS còn lại. Có thể nói đây là ông trùm của những ông trùm
Mã:
<style>
.red {
color: red;
}
.blue {
color: blue !important;
}
</style>
<p class="red blue">Thuộc tính !important</p>
- Theo quy định trên thì kết quả của đoạn text trên sẽ là màu blue vì ở đây chúng ta có thuộc tính !important được khai báo trong class .blue
2. inline CSS : css nội tuyến
- inline CSS thường được dùng cho một phần tử HTML xác định. <style> attribute được dùng để style mỗi HTML tag
Mã:
<style>
.red {
color: red;
}
.black {
color: black !important;
}
</style>
<h3 class="red" style="color: blue;">Inline CSS</h3>
<h4 class="red black" style="color: blue;">Inline CSS và Important</h4>
- Ở đây đoạn text trong tag h3 sẽ có kết quả là màu blue vì độ ưu tiên của inline CSS cao hơn với việc style CSS bằng class, nhưng đoạn text trong tag h4 sẽ có màu black vì độ ưu tiên của thuộc tính !important cao hơn.
3. Media Query
- Media Query là một trong những tính năng mới được thêm vào trong CSS3, bằng việc sử dụng những cú pháp query để chúng ta có thể đáp ứng được nhiều kích cỡ màn hình khác nhau cho riêng mỗi thiết bị: desktop, mobile, tablet
Mã:
<style>
.red {
color: red;
}
@media screen and (min-width: 320px) {
.blue {
color: blue;
}
}
</style>
<h1 class="red blue">Media Query</h1>
- Ở đây kết quả của đoạn text trong tag h1 sẽ màu blue ở kích cỡ màn hình lớn hơn 320px vì ở đây mình dùng Media Query để overwrite CSS và nếu màn hình nhỏ hơn 320px nó sẽ màu red
4. Selector Specificity
Selector Specificity là việc dùng các thẻ ID hoặc Class để khai báo CSS, trong phần này nó có thêm một số thứ phức tạp khác như việc sử dụng Pseudo Class để khai báo CSS nhưng mình không có quá đi sâu vào cái này
Mã:
<style>
#red {
color: red;
}
.blue {
color: blue;
}
h2 {
color: green;
}
</style>
<h1 class="blue" id="red">Selector Specificity</h1>
<h2 class="blue">Selector Specificity</h2>
<h2>Selector Specificity</h2>
- Theo thứ tự xếp độ ưu tiên thì Select phần tử HTML bằng ID > CLASS > Default tag HTML. Do đó thẻ h1 đầu tiên sẽ là red, thẻ h2 tiếp theo sẽ là blue và thẻ h2 cuối cùng sẽ là màu green
5. Rule Order
- Vì code của chúng ta luôn được trình duyệt đọc theo thứ tự từ trên xuống nên các CSS đặt sau cùng sẽ luôn luôn ghi đè các CSS ở trên cùng
- Chúng ta sẽ làm rõ vấn đề này bằng việc khai báo hai CSS cùng dùng thuộc tính !important ở ví dụ sau:
Mã:
<style>
.red {
color: red !important;
}
.blue {
color: blue !important;
}
</style>
<h1 class="blue red">Rule Order</h1>
- Ở đây kết quả sẽ là màu blue vì CSS của classs .blue đứng sau CSS của class .red
6. Browser Default
- Browser Default là những CSS mặc định mà các trình duyệt quy định vì mỗi tag HTML sẽ được browser hiển thị theo từng cách khác nhau và nó cũng là những CSS có cấp độ ưu tiên thấp nhất
