Sử dụng css là một phần quan trọng để xây dựng giao diện website. Một vấn đề phổ biến mà nhiều người phát triển web có thể gặp phải là code CSS không áp dụng. Mục đích bài viết này unitop.vn giúp bạn hiểu và áp dụng thứ tự ưu tiên css trong website của mình, tránh xung đột trong quá trình css dự án.
Thứ tự ưu tiên CSS khi Nhúng CSS vào HTML
Cùng css cho một phần tử html nhưng cách nhúng css vào website quyết định thứ tự ưu tiên css. Chúng ta cùng đi vào chi tiết:
- Inline Styles: Định dạng css được xác định trực tiếp trong phần tử HTML bằng thuộc tính
style. Những kiểu này có ưu tiên cao nhất và sẽ ghi đè lên bất kỳ kiểu khác. - Internal CSS: Định dạng css được định nghĩa trong thẻ
<style>trong phần<head>của tài liệu HTML. Những kiểu này được áp dụng sau inline css nhưng trước external css. - External Css): Định dạng css được định nghĩa trong các file có đuôi mở rộng .css bên ngoài riêng biệt và liên kết với tài liệu HTML bằng thẻ
<link>. Css trong file có độ ưu tiên đứng đằng sau 2 loại trên.
Css inline > Css internal > Css externalThứ tự ưu tiên quan trọng vì có thể xảy ra xung đột kiểu khi các nguồn khác nhau xác định kiểu cho cùng một phần tử. Hiểu rõ về thứ tự này giúp bạn kiểm soát kiểu nào được ưu tiên.
Dưới đây là một ví dụ để minh họa thứ tự ưu tiên:
Giả sử chúng ta có tài liệu HTML sau:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="external.css">
<style>
p {
color: blue;
}
</style>
</head>
<body>
<p style="color: red;">Đây là đoạn văn bản.</p>
</body>
</html>
Và tệp external.css chứa:
p {
color: green;
}
Trong trường hợp này, thứ tự ưu tiên sẽ là:
- Css inline:
color: red; - CSS internal:
color: blue; - Css external:
color: green;
Kết quả là đoạn văn bản “Đây là đoạn văn bản.” sẽ xuất hiện màu đỏ, theo kiểu css inline.
Thứ tự ưu tiên theo selector
Khi làm việc với CSS, việc hiểu thứ tự ưu tiên của các loại selector giúp bạn xác định chính xác kiểu nào sẽ được áp dụng đối với các phần tử trên trang web của bạn. Dưới đây là một hướng dẫn về thứ tự ưu tiên của các loại selector trong CSS:
- Inline Css: Định dạng css được áp dụng trực tiếp trên phần tử HTML thông qua thuộc tính
style. Css được khai báo theo inline css cao nhất và sẽ ghi đè lên bất kỳ kiểu nào khác. - ID Selectors: Định dạng css áp dụng thông qua ID của phần tử. Selector với ID có độ ưu tiên cao hơn so với selector dựa trên class hoặc các element.
- Class Selectors: Định dạng css áp dụng thông qua class của phần tử. Selector với class có độ ưu tiên thấp hơn so với selector dựa trên ID nhưng cao hơn selector dựa trên phần tử.
- Element Selectors: Kiểu áp dụng dựa trên tên của phần tử HTML. Selector phần tử có độ ưu tiên thấp nhất.
- Universal Selectors(*): Kiểu áp dụng cho tất cả các phần tử trên trang web. Universal selector có độ ưu tiên thấp nhất.
Lưu ý, khi selector kết hợp các kiểu selector bên trên lại với nhau bạn cần kết hợp thêm quy tắc:
- Selector có độ chi tiết càng lớn sẽ được ưu tiên hơn so với css chung chung.
- Selector có cùng độ chi tiết, selector được khai báo và được chạy cuối cùng có độ ưu tiên cao nhất.
Important css: Cách ghi đè css
Bạn hãy tưởng tượng bạn đang muốn css cho một phần tử html, nhưng trước đó phần tử này đã được áp dụng nhiều định dạng css khác.
Trong trường hợp này nếu bạn chọn phần tử đó với selector có độ ưu tiên thấp hơn dẫn đến một số style css sẽ không được áp dụng.
Để giải quyết bài toán này ngoài cách tạo ra selector có độ ưu tiên cao hơn selector css đã được tạo trước đó bạn có thể sử dụng !important để bật chế độ ghi đè css cho phần tử.
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="styles.css">
<style>
p {
color: blue;
}
</style>
</head>
<body>
<p class="special">Đây là đoạn văn bản.</p>
</body>
</html>
File css
.special {
color: red !important;
}
Trong ví dụ này, chúng ta có một đoạn văn bản <p> được đặt trong một tài liệu HTML. Chúng ta cũng có một tệp CSS bên ngoài.
Thứ tự ưu tiên theo selector:
- Inline Css: Không áp dụng trong ví dụ này.
- ID Selectors: Không áp dụng trong ví dụ này.
- Class Selectors: Selector
.specialcó màu chữ đỏ (color: red;) và được xác định trong tệp CSS bên ngoài. - Element Selectors: Selector
pcó màu chữ xanh (color: blue;) và được xác định trong phần kiểu CSS nội bộ.
Thứ tự ưu tiên sẽ là:
- Selector
.specialcó màu chữ đỏ (color: red;) do có !important. - Selector
pcó màu chữ xanh (color: blue;).
Kết quả: Với thứ tự ưu tiên này, màu chữ của đoạn văn bản <p> sẽ là màu đỏ (color: red;). Mặc dù có màu xanh định nghĩa cho selector phần tử, quy tắc sử dụng !important sẽ thăng hạng độ ưu tiên và ghi đè màu xanh.
Lưu ý: Mặc dù sử dụng !important trong CSS là cách nhanh chóng để áp dụng kiểu cho một phần tử, tuy nhiên, bạn nên hạn chế việc sử dụng nó. Trong quá trình phát triển dự án, có thể xảy ra khó khăn khi bạn cần phải thay đổi lại css của phần tử đó một lần nữa.
Giải pháp tốt hơn bạn nên kiểm tra phần tử của phần tử cần style css và check selector của nó, sau đó hãy tạo ra một selector có thứ tự ưu tiên tốt hơn, khi đó vấn để được giải quyết.
Kết luận
Trong bài này bạn đã được chia sẻ các thứ tự ưu tiên trong css từ các import file, selector và cách để ghi đè với important css.
Hiểu và nắm chắc được những quy tắc này sẽ giúp bạn tạo ra những đoạn code css trong quá trình xây dựng giao diện website chất lượng hơn và không gây xung đột.
Đặc biệt khi bạn tiếp nhận một dự án đã được xây dựng từ trước khi nắm bắt được thứ tự ưu tiên bạn sẽ dễ dàng tùy chỉnh css để giao diện được hiển thị theo ý mình.
Những quy tắc quan trọng trong css này được tôi dành thời gian chia sẻ chuyên sâu và cách áp dụng trong các dự án thực tế trong chương trình Html Css 21 Ngày.
Nếu bạn muốn nâng cấp kỹ năng của mình để đi làm đừng quên theo dõi thêm những video chia sẻ giá trị tại kênh youtube Unitop.vn Học web đi làm.
Xin chào và hẹn gặp lại!
Phan Văn Cương – Hà Nội
