fbpx
Search
Generic filters
Exact matches only
Filter by Custom Post Type

Try these: wordpressfront endvloghackerrankmalaysia

Front End – Vài Phút Tìm Hiểu CSS Priority Rankings

Cũng như tựa đề đã đề cập ở trên, trong bài viết này mình sẽ tập trung nói về vấn đề CSS Priority Rankings. Mình nghĩ đây là một kiến thức căn bản mà một Coder Front-end nên biết. Biết nó các anh em sẽ dễ dàng control CSS của mình khi sử dụng các CSS Framework trong quá trình đi xây dựng giao diện.

Vậy CSS Priority Rankings Là Gì?

CSS Priority Rankings là thứ tự ưu tiên các CSS được browser quy định, thông qua đó các anh em 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à một list danh sách liệt kê thứ tự ưu tiên của thuộc tính CSS mà mình sưu tầm được. Nếu có thiếu sót mọi thì người người nhớ bình luận để tui update thêm nhé. Ahihi 😹😹😹

Priority NoNameDescription
1ImportantDùng !important để overwrite bất cứ thuộc tính nào trong CSS và có thứ tự ưu tiên cao nhất
2Inline CSSKhai báo các thuộc tính CSS ngay trên phần tử HTML thông qua thẻ style
3Media QueryDùng media query để overwrite CSS, thường dùng trong việc xây dựng website Responsive
4Selector SpecificityDùng các CLASS hoặc ID để khai báo CSS cho từng phần tử HTML
5Rule OrderThứ tự các thuộc tính khai báo CSS
6Browser DefaultLà CSS mặc định được quy đinh bởi trình duyệt

Ý Nghĩ Của Từng Thuộc Tính Trên:

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.

Ví dụ mình có đoạn code như sau:

<style>
  .maudo { color: red; }
  .mauxanh { color: blue!important; }
</style>

<h1 class="maudo mauxanh"> important la gi </h1>

Theo quy định trên thì kết quả của đoạn text trên sẽ là màu xanh vì ở đây chúng ta có thuộc tính !important được khai báo trong class .mauxanh

2.Inline CSS:

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.

Giả dụ mình có đoạn code sau:

<style> 
  .maudo { color: red; }
  .mauden { color: black!important; }  
</style>
 
<h1 class="maudo" style="color:blue;"> inline css la gi </h1>
<h2 class="maudo mauden" style="color:blue;">important la gi </h2>

Ở đây đoạn text trong tag h1 sẽ có kết quả là màu xanh 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 h2 sẽ có màu đen 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.

Giả sử mình có đoạn code như sau:

<style>
  .maudo { color: red; }
  @media screen (mix-width: 320px) {
  .mauxanh { color: blue; }
  }
</style>

<h1 class="maudo mauxanh">Media Query la gi</h1>

Ở đây kết quả của đoạn text trong tag h1 sẽ màu xanh ở 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 đỏ

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. Vì thực chất mình cũng ko có dùng 😹😹

Các anh em muốn tìm hiểu sâu hơn về một số cách Select đặc biệt như dùng Pseudo Class hoặc Atrribute để style CSS có thể kham khảo ở đây cssspecificity

Chúng ta sẽ làm rõ phần này bằng đoạn code nhỏ như sau:

<style>
  .mauxanh { color: blue; }
  #maudo { color: red; }
  h2 { color: yellow; }
</style>

<h1 class="mauxanh" id="maudo">ket qua la mau do</h1>
<h2 class="mauxanh">ket qua la mau xanh</h2>
<h2 id="maudo">ket qua la mau do</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à màu đỏ, thẻ h2 tiếp theo sẽ là màu xanh và thẻ h2 cuối cùng sẽ là màu đỏ

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 overwrite 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:

<style>
  .mauxanh { color: blue!important; }
  .maudo { color: red!important; }
</style>

<h1 class="mauxanh maudo">ket qua la mau do</h1>

Ở đây kết quả sẽ là màu đỏ vì CSS của CLASS .maudo đứng sau CSS của CLASS .mauxanh

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. Các anh em có thể đọc thêm bài viết này để hiểu thêm về nó nhé Reset CSS Với Normalize.css

Kết Luận:

Việc nắm rõ thứ tự ưu tiên hoạt động của CSS sẽ giúp các anh em dễ dàng phân cấu trúc CSS trong project của mình và dễ dàng xử lí các impact giữa các thuộc tính trong quá trình sử dụng các CSS Framework trong việc xây dựng giao diện cho website.

Mọi thắc mắc vui lòng để lại bình luận bên dưới nhé, ahihi 🙏🙏🙏

 

Tham khảo: thebookdesigner

Xin chào các đồng chí tôi là Phạm Phi Hùng, tác giả của blog Hung Pham Dev Web Tôi là một Front-end Developer, kiêm writer, quay phim dạo, sửa máy dạo và làm một số ngành nghề khác nữa

Leave a reply:

Your email address will not be published.

Site Footer