Điều quan trọng quy tắc được sử dụng để ghi đè kiểu của một trang web. Thành thật mà nói, có nhiều trường hợp hơn về lý do tại sao bạn không nên sử dụng quy tắc quan trọng so với lý do bạn nên làm. Hãy thảo luận về cách nó được sử dụng và lý do tại sao nó chỉ nên được sử dụng một cách tiết kiệm.
Ghi đè bảng định kiểu tác nhân người dùng
Khi viết CSS, sẽ có một số trường hợp bạn cần ghi đè lên bảng định kiểu được đưa ra. Nếu sử dụng các khuôn khổ CSS như Bootstrap để bắt đầu và chạy một dự án, bạn có thể muốn tùy chỉnh kiểu được tích hợp trong khuôn khổ.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>CSS Important Keyword: Overriding Bootstrap</title>
<link
rel="stylesheet"
href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css"
integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk"
crossorigin="anonymous"
/>
<style>
.container {
display: flex;
}
.nav {
color: black;
background-color: pink;
}
</style>
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand" href="#">Navbar</a>
<button
class="navbar-toggler"
type="button"
data-toggle="collapse"
data-target="#navbarSupportedContent"
aria-controls="navbarSupportedContent"
aria-expanded="false"
aria-label="Toggle navigation"
>
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link" href="#"
>Home <span class="sr-only">(current)</span></a
>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item dropdown">
<a
class="nav-link dropdown-toggle"
href="#"
id="navbarDropdown"
role="button"
data-toggle="dropdown"
aria-haspopup="true"
aria-expanded="false"
>
Dropdown
</a>
<div
class="dropdown-menu"
aria-labelledby="navbarDropdown"
>
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#"
>Something else here</a
>
</div>
</li>
<li class="nav-item">
<a
class="nav-link disabled"
href="#"
tabindex="-1"
aria-disabled="true"
>Disabled</a
>
</li>
</ul>
<form class="form-inline my-2 my-lg-0">
<input
class="form-control mr-sm-2"
type="search"
placeholder="Search"
aria-label="Search"
/>
<button
class="btn btn-outline-success my-2 my-sm-0"
type="submit"
>
Search
</button>
</form>
</div>
</nav>
<div class="container">
<div class="card" style="width: 18rem;">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">
Some quick example text to build on the card title and
make up the bulk of the card's content.
</p>
<a href="#" class="btn btn-primary">Go somewhere</a>
</div>
</div>
</div>
<script
src="https://code.jquery.com/jquery-3.5.1.slim.min.js"
integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj"
crossorigin="anonymous"
></script>
<script
src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js"
integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo"
crossorigin="anonymous"
></script>
<script
src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"
integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI"
crossorigin="anonymous"
></script>
</body>
</html>
Đừng lo lắng quá nhiều về việc hiểu những gì đang diễn ra trong trình chỉnh sửa mã ở trên. Nhấn vào nút chạy và ghi lại những việc bạn làm biết về. Chúng tôi có một số HTML có vẻ như nó có các lớp và / hoặc id, liên kết đến biểu định kiểu CSS cho biết nó có thể đến từ Bootstrap và sau đó là một số kiểu riêng của chúng tôi trong <head> của tài liệu không được hiển thị đúng cách.
Trong .navbar bộ chọn, nơi nó đề cập đến background-color: pink; , nhập vào
'!quan trọng'. Bao gồm một khoảng trống ở giữa màu sắc và quy tắc! Quan trọng. Chạy lại mã. Nó có làm thay đổi màu nền của thanh điều hướng không?
Đây là trường hợp sử dụng đầu tiên của quy tắc! Important. Khi được cung cấp biểu định kiểu tác nhân người dùng từ khung CSS hoặc nơi khác, bạn có thể sử dụng quy tắc để ghi đè các kiểu mà Bootstrap đi kèm.
Ghi đè kiểu nội tuyến
Một trường hợp sử dụng khác là nơi chúng ta cần ghi đè các kiểu nội tuyến của một phần tử.
81% người tham gia cho biết họ cảm thấy tự tin hơn về triển vọng công việc công nghệ của mình sau khi tham gia một cuộc thi đào tạo. Kết hợp với bootcamp ngay hôm nay.
Sinh viên tốt nghiệp bootcamp trung bình đã dành ít hơn sáu tháng để chuyển đổi nghề nghiệp, từ khi bắt đầu bootcamp đến khi tìm được công việc đầu tiên của họ.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS Important Keyword: Overriding Inline Styles</title>
<style>
.line-item:first-child{
color: purple;
}
.line-item:last-child {
color: crimson;
font-size: xx-large;
font-variant: normal;
}
</style>
</head>
<body>
<h1>Doctor Who Characters</h1>
<ul>
<li class="line-item" style="color: rosybrown; font-size: large;">Rose Tyler</li>
<li class="line-item">Jackie Tyler</li>
<li class="line-item">Mickey</li>
<li class="line-item" style="color:royalblue; font-size: larger; font-variant:small-caps;">The Doctor</li>
</ul>
</body>
</html>
Lưu ý rằng chúng tôi có một số kiểu nội tuyến trong phần thân của mã và sau đó là một số kiểu tiềm năng để ghi đè nó trong <style> trong trình chỉnh sửa mã ở trên. Sử dụng quy tắc! Important trong CSS để ghi đè các kiểu nội tuyến.
Hãy nhớ rằng quy tắc! Important không nhất thiết phải là phương pháp hay nhất và nên được sử dụng tương đối tiết kiệm. Nó có khả năng dẫn đến những lỗi khó tìm thấy sau này trên đường.
Nếu bạn cảm thấy cần phải sử dụng quy tắc! Important và bạn không sử dụng khuôn khổ, bạn thường có thể tổ chức lại các bộ chọn của mình để hiển thị tốt hơn những gì bạn muốn xem.