Hướng dẫn when use important css - khi sử dụng css quan trọng

CSS! Quy tắc quan trọngThe!important Rule

---

Cái gì quan trọng?

Quy tắc !important trong CSS được sử dụng để tăng thêm tầm quan trọng đối với thuộc tính/giá trị hơn bình thường.

Trên thực tế, nếu bạn sử dụng quy tắc !important, nó sẽ ghi đè tất cả các quy tắc kiểu dáng trước đó cho thuộc tính cụ thể đó trên phần tử đó!

Chúng ta hãy xem xét một ví dụ:

Thí dụ

#MyId {& nbsp; màu nền: màu xanh;}
  background-color: blue;
}

.MyClass {& nbsp; màu nền: màu xám;}
  background-color: gray;
}

p {& nbsp; màu nền: màu đỏ! quan trọng;}
  background-color: red!important;
}

Hãy tự mình thử »

Ví dụ giải thích

Trong ví dụ trên. Tất cả ba đoạn sẽ có màu nền màu đỏ, mặc dù bộ chọn ID và bộ chọn lớp có độ đặc hiệu cao hơn. Quy tắc !important ghi đè thuộc tính background-color trong cả hai trường hợp.

---

Cách duy nhất để ghi đè quy tắc !important là bao gồm một quy tắc ____00 khác trên một tuyên bố có cùng độ đặc hiệu (hoặc cao hơn) trong mã nguồn - và ở đây vấn đề bắt đầu! Điều này làm cho mã CSS khó hiểu và việc gỡ lỗi sẽ khó khăn, đặc biệt nếu bạn có một bảng kiểu lớn!

Ở đây chúng tôi đã tạo ra một ví dụ đơn giản. Không rõ ràng lắm, khi bạn nhìn vào mã nguồn CSS, màu nào được coi là quan trọng nhất:

Thí dụ

#MyId {& nbsp; màu nền: màu xanh;}
  background-color: blue!important;
}

.MyClass {& nbsp; màu nền: màu xám;}
  background-color: gray!important;
}

p {& nbsp; màu nền: màu đỏ! quan trọng;}
  background-color: red!important;
}

Hãy tự mình thử »

Ví dụ giải thích It is good to know about the !important rule. You might see it in some CSS source code. However, do not use it unless you absolutely have to.

---

---

Trong ví dụ trên. Tất cả ba đoạn sẽ có màu nền màu đỏ, mặc dù bộ chọn ID và bộ chọn lớp có độ đặc hiệu cao hơn. Quy tắc !important ghi đè thuộc tính background-color trong cả hai trường hợp.

Cách duy nhất để ghi đè quy tắc !important là bao gồm một quy tắc ____00 khác trên một tuyên bố có cùng độ đặc hiệu (hoặc cao hơn) trong mã nguồn - và ở đây vấn đề bắt đầu! Điều này làm cho mã CSS khó hiểu và việc gỡ lỗi sẽ khó khăn, đặc biệt nếu bạn có một bảng kiểu lớn!

Ở đây chúng tôi đã tạo ra một ví dụ đơn giản. Không rõ ràng lắm, khi bạn nhìn vào mã nguồn CSS, màu nào được coi là quan trọng nhất:

Thí dụ

#MyId {& nbsp; màu nền: màu xanh;}
  background-color: #8c8c8c;
  color: white;
  padding: 5px;
  border: 1px solid black;
}

Hãy tự mình thử »

Ví dụ giải thích

Thí dụ

#MyId {& nbsp; màu nền: màu xanh;}
  background-color: #8c8c8c;
  color: white;
  padding: 5px;
  border: 1px solid black;
}

.MyClass {& nbsp; màu nền: màu xám;}
  color: red;
  background-color: yellow;
}

Hãy tự mình thử »

Ví dụ giải thích

Thí dụ

#MyId {& nbsp; màu nền: màu xanh;}
  background-color: #8c8c8c!important;
  color: white!important;
  padding: 5px!important;
  border: 1px solid black!important;
}

.MyClass {& nbsp; màu nền: màu xám;}
  color: red;
  background-color: yellow;
}

Hãy tự mình thử »

Như chúng ta đã biết, Important CSS cung cấp cho bạn khả năng overrides hiệu quả, tuy nhiên để tìm hiểu kỹ hơn về Important CSS cũng như làm thế nào để thay đổi thứ tự ưu tiên trong CSS với Important thì đừng vội bỏ qua bài viết dưới đây nhé. Important CSS cung cấp cho bạn khả năng overrides hiệu quả, tuy nhiên để tìm hiểu kỹ hơn về Important CSS cũng như làm thế nào để thay đổi thứ tự ưu tiên trong CSS với Important thì đừng vội bỏ qua bài viết dưới đây nhé. 

Important CSS là gì? Làm thế nào để thay đổi thứ tự ưu tiên trong CSS với important?

Trong khi lập trình web chắc hẳn bạn đã đôi lần gặp phải trường hợp code CSS cho site nào đó nhưng sau khi code xong lại không nhận dù đã đáp ứng đúng đường dẫn, check rõ ràng nhưng không nhận được kết quả như mong muốn. Như vậy rất có thể là có 1 đoạn code CSS đã được code trước đó có sử dụng !Important. Điều này thể hiện độ ưu tiên trong CSS đóng vai trò vô cùng quan trọng.

Important CSS được sử dụng để thay đổi thứ tự ưu tiên của CSS, khi một quy luật nào đó được gán lệnh Important thì đồng nghĩa với việc nó sẽ có mức ưu tiên cao nhất, cho dù thành phần đó có khai báo CSS cục bộ hay CSS nội tuyến. được sử dụng để thay đổi thứ tự ưu tiên của CSS, khi một quy luật nào đó được gán lệnh Important thì đồng nghĩa với việc nó sẽ có mức ưu tiên cao nhất, cho dù thành phần đó có khai báo CSS cục bộ hay CSS nội tuyến.

Độ ưu tiên trong CSS

Giả sử ta có thành phần p được khai báo CSS cục bộ như sau:

Đoạn văn bản bị ảnh hưởng bởi các quy luật của CSS

Và bạn khai báo CSS ngoại tuyến như sau:

p.first{ color: green }

Thì đoạn văn bản trên luôn luôn được hiển thị với màu đỏ bởi vì được khai báo CSS cục bộ.

Sử dụng Important để thay đổi thứ tự ưu tiên trong CSS

Như vậy, với ví dụ được nêu ở phần trên, nếu như bạn muốn văn bản trên hiển thị với màu xanh mà không phải chỉnh sửa CSS cục bộ thì chắc chắn Important chính là công cụ hiệu quả nhất.

Sử dụng Important để thay đổi thứ tự ưu tiên trong CSS

Như vậy, với ví dụ được nêu ở phần trên, nếu như bạn muốn văn bản trên hiển thị với màu xanh mà không phải chỉnh sửa CSS cục bộ thì chắc chắn Important chính là công cụ hiệu quả nhất.

Chỉnh sửa lại đoạn mã trong CSS ngoại tuyến lại như sau:

p.first{ color: green!important }

Kết quả sau khi chỉnh sửa sẽ là đoạn văn bản được hiển thị với màu xanh trong khi CSS cục bộ vẫn được khai báo với style=”color: red”

Khi bạn thêm!important phía sau một quy luật CSS thì bạn có thể dễ dàng thay đổi thứ tự ưu tiên trong CSS. Important không chỉ thay đổi thứ tự ưu tiên giữa CSS cục bộ, CSS nội tuyến, CSS ngoại tuyến mà còn có khả năng thay đổi thứ tự ưu tiên ngay trong file CSS. Để làm rõ hơn tính năng này, hãy cùng xét ví dụ dưới đây:

Giả sử khi ta khai báo CSS như sau:

p.second{ color: blue }

p.second{ color: red }

Lúc này, quy luật được khai báo sau sẽ được ưu tiên hơn quy luật khai báo trước. Trong ví dụ trên thì đoạn văn bản p.second sẽ được hiển thị với màu đỏ. Tuy nhiên bạn có thể định dạng đoạn văn bản trên hiển thị màu xanh bằng việc thêm !Important ngay sau quy luật thứ nhất như sau:

p.second{ color: blue }

p.second{ color: red }

Khi nào bạn nên sử dụng quy tắc CSS!Important?

Lúc này, quy luật được khai báo sau sẽ được ưu tiên hơn quy luật khai báo trước. Trong ví dụ trên thì đoạn văn bản p.second sẽ được hiển thị với màu đỏ. Tuy nhiên bạn có thể định dạng đoạn văn bản trên hiển thị màu xanh bằng việc thêm !Important ngay sau quy luật thứ nhất như sau:

CSS!Important

• Khung Javascript và Thư viện bên ngoài: điều này áp dụng cho các thư viện phổ biến như Bootstrap hoặc Normalize. Vì bạn không thể chỉnh sửa trực tiếp các kiểu CSS của họ nên lựa chọn duy nhất bạn có thể làm đó là overrides CSS của họ bằng các luật !Important của bạn.
•  Phong cách user : Điều này đã từng rất phổ biến cách đây nhiều năm. Kiểu user cung cấp một cách để bạn tạo CSS của riêng mình để đưa vào các trang web do người hay công ty khác sở hữu. Ví dụ: chủ đề tối trên Instagram

Khi nào bạn nên sử dụng quy tắc CSS!Important?

Như vậy, nếu bạn muốn sử dụng Important CSS, hãy thử tìm hiểu ngay về các quyết định kiến trúc mà bạn có thể đưa ra và áp dụng. Ngoài ra, để sở hữu ngay những khóa học thiết kế đồ họa chuyên nghiệp, hãy truy cập website FPT Arena ngay hôm nay nhé.Important CSS, hãy thử tìm hiểu ngay về các quyết định kiến trúc mà bạn có thể đưa ra và áp dụng. Ngoài ra, để sở hữu ngay những khóa học thiết kế đồ họa chuyên nghiệp, hãy truy cập website FPT Arena ngay hôm nay nhé.

Viện Đào Tạo Quốc Tế FPT

FPT Arena Multimedia – https://arena.fpt.edu.vn