Important Css: Cách thăng hạng, bật chế độ ưu tiên, ghi đè thuộc tính css

important-css-unitop

Important Css là một quy tắc giúp cho một style css nào đó được ưu tiên hơn các phần còn lại nếu khi có cùng selector.

Cú pháp

selector{
    property: value!important;
}

Bạn lưu ý !important thêm đằng sau nhằm mục đích thông báo cho trình biên dịch biết đây là style cần phải được ưu tiên. Để bạn nắm rõ hơn bây giờ chúng ta đến với ví dụ.

Ví dụ: Ưu tiên đoạn văn có màu đỏ

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Important Css</title>
</head>
<body>

<style>
    p {
        color: red;
        font-size: 16px;
    }
    p {
        color: green;
    }
</style>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nulla, ut?</p>

</body>
</html>

Trong ví dụ trên bạn thấy thẻ p được css 2 lần cho thuộc tính color. Theo thứ tự ưu tiên khi có cùng selector và cùng tác động vào cùng thuộc tính thì code css viết bên dưới sẽ được ưu tiên lên bên trên.

Theo đó màu sắc của thẻ p lúc đầu có color: red tuy nhiên sau đó được cập nhập bởi color: green.

Bây giờ nếu chúng ta muốn thẻ p được ưu tiên dùng màu đỏ thì chúng ta chỉ cần làm như sau.

    p {
        color: red!important;
        font-size: 16px;
    }

Ta có code hoàn chỉnh

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Important Css</title>
</head>
<body>

<style>
    p {
        color: red!important;
        font-size: 16px;
    }
    p {
        color: green;
    }
</style>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nulla, ut?</p>

</body>
</html>

Tổng kết

Qua bài này tôi đã chia sẻ đến bạn về việc sử dụng important trong css. Tuy nhiên trên thực tế bạn cần cân nhắc khi sử dụng important, chỉ dùng khi thực sự cần thiết.

Ngay bây giờ bạn cần thực hành lại bài này để nắm chắc thêm một nội dung quan trọng trong css.

Xin chào, sớm hẹn gặp lại!

Làm thế nào để học lập trình web đi làm hiệu quả thu nhập từ 8-30tr/tháng?

Tôi thường xuyên gửi những thông tin như thế này cho bạn qua email. Hơn 5000+ người đang nhận thông tin! (Không SPAM)

Mọi người thường xem

Tạo Link Icon Button với Html Css

Làm thế nào để tạo ra một link hiển thị kiểu button có icon bên cạnh để làm rõ hơn nội dung mà link muốn

Bạn muốn kiếm tiền từ kỹ năng lập trình web?

Lộ trình 10 bước có nhóm kín kèm cặp và trên 2.500 người học và đã đi làm với thu nhập 8-30tr/tháng