Hướng dẫn important trong css - quan trọng trong css
|
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é.  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. 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 CSSNhư 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. 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 } 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!important }
p.second{ color: blue!important }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é. Thông thường, trường hợp này sẽ xảy ra khi ứng dụng của bạn có nhiều file .css dẫn đến tình trạng khó kiểm soát. Lúc này việc bạn cần làm chính là sử dụng!important để quyết định quy luật nào sẽ được ưu tiên hiển thị. Khi nào bạn nên sử dụng quy tắc CSS!Important? |
