Tìm hiểu về CSS basic: Các quy tắc chỉ dẫn

Bạn có thể ít dùng những quy tắc chỉ thị, chỉ dẫn này nhưng nếu bạn hiểu thì cũng có thể vận dụng vào code css của mình hoặc chí ít thì bạn cũng hiểu được code nói gì để bạn không khỏi thắc mắc khi đọc thấy ai dùng tới nó. Những quy tắc này thường được đặt tại dòng đầu tiên trên trang code css của bạn.

@charset:

Bạn dùng để khai báo mã encoding sử dụng cho các css bên ngoài ví dụ @charset "ISO-8859-15".

@import

Bạn dùng để liên kết với một file css khác, dùng quy tắc này bạn có thể gom tất cả các file css ngoài liên kết vào một file.

@import url("css/main.css");
@import "local.css";

@media

Bạn dùng để khai báo rằng đoạn code bạn muốn dùng cho trường hợp in ấn (print) hay hiển thị trên trình duyệt (screen).

@media print {
  body {
    padding: 1in;
   border: 0.5pt solid #666;
}
}

@page

Quy tắc này dùng để canh lề mặc định cho trang của bạn cái này thì thường dùng cho trường hợp in ấn các giá trị cũng tuân theo cách viết shorthand, bạn có thể đặt.

@page {
  margin: 2.5cm; /* mặc định tất cả trang */
}
@page :left {
  margin-left: 5cm; /* chỉ bên trái trang */
}
@page :right {
  margin-right: 5cm; /* chỉ bên phải trang */
}
@page :first {
  margin-top: 8cm; /* dành cho phần top của trang đầu tiên */
}

@font-face

Được định nghĩa trong css2 nhưng sau đó được bỏ trong css2.1, còn hiện tại thì nó được giới thiệu  lại trong css3, có nhiều thuộc tính sử dụng nhưng hữu dụng nhất là để liên kết đến một font ở bên ngoài có thể là liên kết tuyệt đối hay tương đối,  điều này giúp bạn không phụ thuộc vào font trên máy người dùng cuối.

@font-face {
  font-family: "Example Font";
  src: url("http://www.example.com/fonts/example");
}
h1 {
  font-family: "Example Font",sans-serif;
}