CSS - Quy tắc @
Chương này sẽ bao gồm các quy tắc @ quan trọng sau:
Các @import: quy tắc nhập một biểu định kiểu khác vào biểu định kiểu hiện tại.
Các @charset quy tắc cho biết bộ ký tự mà bảng định kiểu sử dụng.
Các @font-face quy tắc được sử dụng để mô tả đầy đủ mặt phông chữ để sử dụng trong tài liệu.
Các !important quy tắc chỉ ra rằng quy tắc do người dùng xác định sẽ được ưu tiên hơn các biểu định kiểu của tác giả.
NOTE - Có các quy tắc @ khác mà chúng tôi sẽ đề cập trong các chương tiếp theo.
Quy tắc @import
Quy tắc @import cho phép bạn nhập kiểu từ một biểu định kiểu khác. Nó sẽ xuất hiện ngay ở đầu biểu định kiểu trước bất kỳ quy tắc nào và giá trị của nó là một URL.
Nó có thể được viết theo một trong hai cách sau:
<style type = "text/css">
<!--
@import "mystyle.css";
or
@import url("mystyle.css");
.......other CSS rules .....
-->
</style>Ý nghĩa của quy tắc @import là nó cho phép bạn phát triển các biểu định kiểu của mình bằng cách tiếp cận mô-đun. Bạn có thể tạo các bảng kiểu khác nhau và sau đó đưa chúng vào bất cứ nơi nào bạn cần.
Quy tắc @charset
Nếu bạn đang viết tài liệu của mình bằng cách sử dụng một bộ ký tự không phải ASCII hoặc ISO-8859-1, bạn có thể muốn đặt quy tắc @charset ở đầu biểu định kiểu của mình để cho biết bộ ký tự được viết trong biểu định kiểu.
Quy tắc @charset phải được viết ngay ở đầu biểu định kiểu mà không có khoảng trắng trước nó. Giá trị được giữ trong dấu ngoặc kép và phải là một trong các bộ ký tự tiêu chuẩn. Ví dụ -
<style type = "text/css">
<!--
@charset "iso-8859-1"
.......other CSS rules .....
-->
</style>Quy tắc @ font-face
Quy tắc @ font-face được sử dụng để mô tả đầy đủ mặt phông chữ để sử dụng trong tài liệu. @ font-face cũng có thể được sử dụng để xác định vị trí của phông chữ để tải xuống, mặc dù điều này có thể gặp phải các giới hạn dành riêng cho việc triển khai.
Nhìn chung, @ font-face cực kỳ phức tạp và việc sử dụng nó không được khuyến khích cho bất kỳ người nào ngoại trừ những người thành thạo về số liệu phông chữ.
Đây là một ví dụ -
<style type = "text/css">
<!--
@font-face {
font-family: "Scarborough Light";
src: url("http://www.font.site/s/scarbo-lt");
}
@font-face {
font-family: Santiago;
src: local ("Santiago"),
url("http://www.font.site/s/santiago.tt")
format("truetype");
unicode-range: U+??,U+100-220;
font-size: all;
font-family: sans-serif;
}
-->
</style>Quy tắc quan trọng
Cascading Style Sheets xếp tầng. Có nghĩa là các kiểu được áp dụng theo thứ tự khi chúng được trình duyệt đọc. Kiểu đầu tiên được áp dụng và sau đó là kiểu thứ hai, v.v.
Quy tắc! Important cung cấp một cách để tạo chuỗi CSS của bạn. Nó cũng bao gồm các quy tắc luôn được áp dụng. Quy tắc có thuộc tính! Important sẽ luôn được áp dụng, bất kể quy tắc đó xuất hiện ở đâu trong tài liệu CSS.
Ví dụ: trong bảng định kiểu sau, văn bản đoạn văn sẽ có màu đen, mặc dù thuộc tính kiểu đầu tiên được áp dụng là màu đỏ:
<style type = "text/css">
<!--
p { color: #ff0000; }
p { color: #000000; }
-->
</style>Vì vậy, nếu bạn muốn đảm bảo rằng một thuộc tính luôn được áp dụng, bạn sẽ thêm thuộc tính! Important vào thẻ. Vì vậy, để làm cho đoạn văn bản luôn có màu đỏ, bạn nên viết như sau:
<html>
<head>
<style type = "text/css">
p { color: #ff0000 !important; }
p { color: #000000; }
</style>
</head>
<body>
<p>Tutorialspoint.com</p>
</body>
</html>Ở đây bạn đã tạo p {color: # ff0000! Important; } bắt buộc, bây giờ quy tắc này sẽ luôn được áp dụng ngay cả khi bạn đã xác định một quy tắc khác p {color: # 000000; }
Nó sẽ tạo ra kết quả sau: