@ Rule trong CSS
Chương này trình bày một số qui tắc @ quan trọng trong CSS:
Qui tắc @import: sử dụng qui tắc này để import các Style Sheet vào trong Style Sheet hiện tại.
Qui tắc @charset: xác định bộ ký tự mà Style Sheet sử dụng.
Qui tắc @font-face: miêu tả bề mặt font sử dụng trong tài liệu.
Qui 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 qui tắc trên, còn có một số qui tắc khác sẽ được trình bày trong các chương tiếp theo.
Qui tắc @import trong CSS
Sử dụng qui 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. Qui 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.
Qui tắc này có thể được viết theo một trong hai cách sau:
<style tyle="text/css">
<!--
@import "vietjack.css";
hoac
@import url("vietjack.css");
.......va mot so qui tac CSS rule khac .....
-->
</style>
Ý nghĩa của qui 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.
Qui 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 qui 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ự đó.
Qui 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 CSS rule khac ..... --> </style>
Qui tắc @font-face trong CSS
Qui tắc @font-face được sử dụng để miêu tả bề mặt font được sử dụng trong Webpage. Qui 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, qui 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>
Qui 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à …
Qui tắc !important bao gồm các qui tắc mà luôn luôn được áp dụng. Tức là, khi sử dụng qui 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ó qui 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>
<style tyle="text/css">
p { color: #ff0000 !important; }
p { color: #000000; }
</style>
</head>
<body>
<p>Vi du qui tac !important trong CSS</>
</body>
</html>
Kết quả là: Phần định nghĩa mà bao gồm qui tắc !important sẽ luôn luôn được áp dụng.
Đã có app VietJack trên điện thoại, giải bài tập SGK, SBT Soạn văn, Văn mẫu, Thi online, Bài giảng....miễn phí. Tải ngay ứng dụng trên Android và iOS.
Follow fanpage của team https://www.facebook.com/vietjackteam/ hoặc facebook cá nhân Nguyễn Thanh Tuyền https://www.facebook.com/tuyen.vietjack để tiếp tục theo dõi các loạt bài mới nhất về Java,C,C++,Javascript,HTML,Python,Database,Mobile.... mới nhất của chúng tôi.
Bài học CSS phổ biến khác tại vietjack.com:
