Bài này chúng ta sẽ tìm hiểu về các quy tắc trong CSS:
Quy tắc @import: sử dụng quy tắc này để import các Style Sheet vào trong Style Sheet hiện tại.
Quy tắc @charset: xác định bộ ký tự mà Style Sheet sử dụng.
Quy tắc @font-face: miêu tả bề mặt font sử dụng trong tài liệu.
Quy tắc !important chỉ rằng đây là một Rule được định nghĩa bởi người dùng, và nên nhận quyền ưu tiên cao nhất và ghi đè các giá trị của cùng thuộc tính mà được xác định bởi người khác.
Ghi chú: Ngoài các quy tắc trên, còn có một số quy tắc khác sẽ được trình bày trong các chương tiếp theo.
Nội dung chính
Quy tắc @import trong CSS
Sử dụng quy tắc @import giúp bạn import các Style từ các Style Sheet khác vào trong Style Sheet hiện tại. Quy tắc này nên xuất hiện ngay phần đầu tiên của Style Sheet và giá trị của nó sẽ là một URL trỏ đến Style Sheet cần import.
Quy tắc này có thể được viết theo một trong hai cách sau:
<style tyle="text/css">
<!--
@import "main.css";
hoac
@import url("main.css");
.......va mot so qui tac CSS khac .....
-->
</style>
Ý nghĩa của quy tắc @import là cho phép bạn phát triển các Style Sheet dựa trên một Module nào đó. Bạn có thể tạo ra nhiều Style Sheet và sau đó include chúng bất cứ nơi đâu bạn cần.
Quy tắc @charset trong CSS
Nếu bạn muốn tạo Webpage mà sử dụng một bộ ký tự nào đó ngoài tập ASCII hoặc ISO-8859-1, bạn có thể thiết lập quy tắc @charset tại phần bắt đầu của Style Sheet để chỉ rằng Webpage của bạn sử dụng sử dụng bộ ký tự đó.
Quy tắc @charset phải được viết tại phần đầu của một Style Sheet (phải là ở phần đầu tiên, cho dù trước nó là một dấu cách thì cũng không được). Giá trị được lưu giữ trong trích dẫn và nên là một trong các bộ ký tự chuẩn. Ví dụ:
<style tyle="text/css"> <!-- @charset "iso-8859-1" .......mot so quy tắc CSS khac ..... --> </style>
Quy tắc @font-face trong CSS
Quy tắc @font-face được sử dụng để miêu tả bề mặt font được sử dụng trong Webpage. Quy tắc @font-face cũng có thể được sử dụng để định nghĩa vị trí của một font để download, mặc dù với một giới hạn cụ thể.
Nói chung, quy tắc @font-face là khá phức tạp, và mình đề nghị bạn không nên sử dụng nó, trừ khi bạn thật sự là một chuyên gia về CSS.
Ví dụ:
<style tyle="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 !important trong CSS
Bạn hãy nhìn lại từ CSS là viết tắt của Cascading Style Sheets, tức là các Style được áp dụng theo cùng một thứ tự như khi chúng được đọc bởi trình duyệt. Style đầu tiên được áp dụng và sau đó là thứ hai, và …
Quy tắc !important bao gồm các quy tắc mà luôn luôn được áp dụng. Tức là, khi sử dụng quy tắc !important này, bạn nói cho trình duyệt rằng giá trị của thuộc tính mà có quy tắc này là luôn luôn được áp dụng, bất kể giá trị của thuộc tính này do người khác thiết lập hay do mặc định là gì.
Ví dụ, trong Style Sheet sau, một lập trình viên nào đó xác định màu văn bản cho một đoạn văn là màu đen:
<style tyle="text/css">
<!--
p { color: #000000; }
-->
</style>
Tuy nhiên, bạn thấy rằng màu này là chưa thích hợp và bạn muốn thay đổi thành màu đỏ, bạn có thể viết như sau:
<html>
<head>
<meta charset="UTF-8">
<style tyle="text/css">
p { color: #ff0000 !important; }
p { color: #000000; }
</style>
</head>
<body>
<p>Ví dụ quy tắc !important trong CSS</>
</body>
</html>
Kết quả: Phần định nghĩa mà bao gồm quy tắc !important sẽ luôn luôn được áp dụng.
