CSS important! là gì? Sử dụng như thế nào cho đúng

Important được sử dụng để thay đổi thứ tự ưu tiên của code CSS, thuộc tính css được gán important thì nó sẽ có mức ưu tiên cao nhất, cho dù thành phần đó được định nghĩa inline hay trong file css.

Để dể hiểu hơn, chúng ta cùng xét qua ví dụ sau nha.

Ví dụ 1:
Ta có 2 code css như sau cho thẻ h1
<h1 style="color: green">Ut nisi mollit.</h1>


<h1>Ut nisi mollit.</h1>

với thuộc tính css sau

h1 {
    color: red;
}

Chúng ta dễ dàng thấy kết quả là thẻ h1 có text màu green đúng không nào. Vì thuộc tính css được khai báo inline, nên nó sẽ ưu tiên cao nhất.

Ta đến với ví dụ 2:
Cũng thẻ h1 ở ví dụ 1, bây giờ ta chỉnh lại code css 1 tý như sau:

h1 {
    color: red !important;
}

Kết quả bây giờ thẻ h1 sẽ có màu đỏ, thuộc tính !important sẽ ưu tiên cao nhất trong trang web.

Important cũng có tác dụng định nghĩa độ ưu tiên trong cùng file css chứ không cần quan tâm các định nghĩa được viết sau.

h1 {
    color: red !important;
}

h1 {
    color: green;
}

Hi vọng qua đây các bạn có cái nhìn hơn về important trong css, để có thể viết code tốt hơn cũng như kiếm soát được các mức độ ưu tiên cao thấp trong dự án.

Có như vậy mới dễ fix bug (haha) . Theo mình các bạn nên viết tất cả code css vào 1 file css hoặc phân chia theo từng module để dễ quản lý.

3 2 đánh giá
Đánh giá bài viết
Theo dõi
Thông báo của
guest

0 Góp ý
Cũ nhất
Mới nhất Được bỏ phiếu nhiều nhất
Phản hồi nội tuyến
Xem tất cả bình luận

More Post

MySQL Procedure là gì?

Procedure trong MySQL là một tập các khai báo sql được lưu trữ trong cơ sở dữ liệu(database) thực...

Dependency Injection và Service Container trong Laravel

Service Container trong Laravel như là trung tâm của một ứng dụng, có mặt mọi nơi trong dự án,...

Laravel Swagger là gì? Hướng dẫn tạo Swagger trong Laravel

Swagger là một framework giúp bạn định nghĩa, mô tả các API trong dự án một cách trực quan, rõ...

2
0
Rất thích suy nghĩ của bạn, hãy bình luận.x