Hướng dẫn priority css - css ưu tiên
Show Đã đăng vào thg 10 21, 2019 8:50 SA 4 phút đọc 4 phút đọc Xin chào mọi người, 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 bạn 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 cho dự án.
1. 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 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:
2. ImportantLà 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.
3. Inline CSSInline CSS thường được dùng cho một phần tử HTML xác định. attribute được dùng để style mỗi HTML tag. Chúng ta có đoạn code sau đây:
4. Media QueryMedia 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. Chúng ta có đoạn code như sau:
5. Selector SpecificitySelector 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. Chúng ta sẽ làm rõ phần này bằng đoạn code nhỏ như sau:
6. Rule OrderVì 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:
7. Browser DefaultBrowser 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. 8. Tổng kết
All rights reserved |