Qui tắc @ 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 "style.css";
   hoac
   @import url("style.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ụ:

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">
   <!--
   @import "style.css";
   hoac
   @import url("style.css");
   .......va mot so qui tac CSS rule khac .....
   -->
</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">
   <!--
   @charset "iso-8859-1"
   .......mot so CSS rule khac .....
   -->
</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:

<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>

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.