CSS3: Ưu tiên (!important)

Các khóa học qua video:
Python SQL Server PHP C# Lập trình C Java HTML5-CSS3-JavaScript
Học trên YouTube <76K/tháng. Đăng ký Hội viên
Viết nhanh hơn - Học tốt hơn
Giải phóng thời gian, khai phóng năng lực

Trước khi thực thi CSS cho một trang web, trình duyệt sẽ đọc toàn bộ CSS mà trang web có thể được áp dụng, bao gồm: CSS mặc định của trình duyệt và của các thẻ HTML, file CSS bên ngoài liên kết vào trang web, CSS nhúng trong thẻ <style> và các CSS nội tuyến. Sau đó, trình duyệt sẽ tổng hợp toàn bộ CSS này vào một CSS ảo, và nếu có các thuộc tính CSS giống nhau thì thuộc tính CSS nào nằm sau sẽ được ưu tiên sử dụng (cái này cũng giống như chương trình “Ai Là Triệu Phú” trên truyền hình vậy, chỉ câu trả lời sau cùng mới được chấp nhận (smile)). Theo nguyên tắc đó trình duyệt của bạn sẽ ưu tiên cho các CSS nội tuyến > CSS bên trong > CSS bên ngoài > CSS mặc định của trình duyệt.

Ví dụ, trong một trang web có liên kết tới file style.css có nội dung như sau:

p {
  color:#333;
  text-align:left;
  width:500px
}

,trong thẻ <style> giữa thẻ <head> cũng có một đoạn CSS liên quan:

p {
  background-color:#FF00FF;
  text-align:right;
  width:100%;
  height:150px
}

, trong phần nội dung trang web đó cũng có sử dụng CSS nội tuyến:

<p style="height:200px; text-align:center; border:1px solid #FF0000; color:#000">

Khi thực thi CSS thì trình duyệt sẽ đọc hết tất cả các nguồn chứa style rồi sẽ tổng hợp lại vào một CSS ảo và nếu có sự trùng lắp các thuộc tính CSS thì nó sẽ lấy thuộc tính CSS có mức ưu tiên cao hơn. Như ví dụ trên chúng ta sẽ thấy CSS cuối cùng mà phần tử p nhận được là:

p {
  background-color:#FF00FF;
  width:100%;
  height:200px;
  text-align:center;
  border:1px solid #FF0000;
  color:#000
}

Vậy, có cách nào để thay đổi độ ưu tiên cho một thuộc tính nào đó? Thật ra thì trong CSS đã có sẵn một thuộc tính giúp chúng ta thực hiện điều này, đó chính là thuộc tính !important. Chỉ cần bạn đặt thuộc tính này sau một thuộc tính nào đó theo cú pháp selector { property:value !important } thì trình duyệt sẽ hiểu đây là một thuộc tính được ưu tiên. Bây giờ, chúng ta cùng xét lại ví dụ trên nhưng có đặt thêm một số thuộc tính !important vào xem kết quả như thế nào nhé.

p {
  width:500px;
  text-align:left !important;
  color:#333 !important
}
p {
  background-color:#FF00FF;
  width:100%;
  height:150px !important;
  text-align:right;
}
<p style=”text-align:center; height:200px; border:1px solid #FF0000; color:#000” }

Phần CSS sẽ tác động lên thuộc tính p là:

p {
  background-color:#FF0000;
  width:100%;
  height:150px !important;
  text-align:left !important;
  border:1px solid #FF0000;
  color:#333 !important
}

Lưu ý: Cùng một thuộc tính cho một selector thì nếu cả hai thuộc tính đều đặt !important thì cái sau được lấy.

» Tiếp: Cách dùng background
« Trước: Các thuộc tính áp dụng được hiệu ứng hoạt họa (animation) hoặc transition
Các khóa học qua video:
Python SQL Server PHP C# Lập trình C Java HTML5-CSS3-JavaScript
Học trên YouTube <76K/tháng. Đăng ký Hội viên
Viết nhanh hơn - Học tốt hơn
Giải phóng thời gian, khai phóng năng lực
Copied !!!