Front End - Vài Phút Tìm Hiểu CSS Priority Rankings
CSS3
52
CSS
49
frontend
29
basic skills
4
White

Hùng Phạm viết ngày 01/04/2019

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.

Các anh em có thể xem đọc bài viết gốc của mình ở đây:

https://hungphamdevweb.com/front-end-vai-phut-tim-hieu-css-priority-rankings.html

alt text

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

alt text

Ý 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 :joy_cat: :joy_cat:

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ác 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 :pray: :pray: :pray:

Bình luận


White
{{ comment.user.name }}
Bỏ hay Hay
{{comment.like_count}}
Male avatar
{{ comment_error }}
Hủy
   

Hiển thị thử

Chỉnh sửa

White

Hùng Phạm

19 bài viết.
17 người follow
Kipalog
{{userFollowed ? 'Following' : 'Follow'}}
Cùng một tác giả
White
8 2
CSS Sprites thật ra đã là một cái tên khá cũ rồi và mình viết bài viết này hy vọng nó sẽ hữu ích cho các anh em nào chưa bao giờ biết đến cái tên c...
Hùng Phạm viết hơn 1 năm trước
8 2
White
5 0
Trước khi bắt đầu viết tiếp phần 2, các anh em có thể xem lại Phần 1 của mình theo đường dẫn bên dưới: (Link) Hoặc là có thể xem bài viết full cả...
Hùng Phạm viết hơn 1 năm trước
5 0
White
5 4
Cũng như hôm bữa ( cách đây có 6 tháng trước chứ nhiêu :smile_cat: ) mình có kể là mình đang ở Mã để làm việc. Bài viết cũ còn đây mời cả nhà vô xe...
Hùng Phạm viết 1 năm trước
5 4
Bài viết liên quan
White
38 8
Lâu không post gì muốn viết một bài dài dài về js cơ mà đau đầu quá viết mãi không xong, thôi post bài ngắn vậy :smiley: Lấy screen size ở đây tôi...
Hà Phạm viết gần 5 năm trước
38 8
White
20 10
Lời nói đầu Tuần trước mình đã bắt tay vào làm thử app theo ý tưởng clone chương trình "Ai là triệu phú" trên TV, với các chức năng cơ bản, chỉ sử...
Andy Crush viết gần 5 năm trước
20 10
{{like_count}}

kipalog

{{ comment_count }}

bình luận

{{liked ? "Đã kipalog" : "Kipalog"}}


White
{{userFollowed ? 'Following' : 'Follow'}}
19 bài viết.
17 người follow

 Đầu mục bài viết

Vẫn còn nữa! x

Kipalog vẫn còn rất nhiều bài viết hay và chủ đề thú vị chờ bạn khám phá!