Một trong những đặc điểm quan trọng của Style Sheet là chúng xác định cách một Webpage hiển thị trên các thiết bị khác nhau: màn hình, trên paper, …
Hiện tại, chúng ta có hai cách xác định thiết bị cho Style Sheet:
- Xác định thiết bị từ các qui tắc @media hoặc @import.
- Xác định thiết bị bên trong phần Document Language.
Qui tắc @media trong CSS
Qui tắc @media xác định kiểu thiết bị (phân biệt nhau bởi dấu phảy) trong một tập qui tắc.
Ví dụ:
<style tyle="text/css"> <!-- @media print { body { font-size: 10pt } } @media screen { body { font-size: 12pt } } @media screen, print { body { line-height: 1.2 } } --> </style>
Document Language trong CSS
Trong HTML 4.0, thuộc tính media trên phần tử LINK xác định thiết bị của một External Style.
Ví dụ:
<style tyle="text/css"> <!-- <!doctype html public "-//w3c//dtd html 4.0//en"> <html> <head> <title>Phan tu LINK xac dinh duong dan den External Style</title> <link rel="stylesheet" type="text/css" media="print, handheld" href="foo.css"> </head> <body> <p>Phan than cua tai lieu ... </p> </body> </html> --> </style>
Một số kiểu thiết bị được công nhận
Tên của kiểu thiết bị trong CSS phản ánh rằng các giá trị của thuộc tính mà bạn đã xác định sẽ làm việc tốt trên các thiết bị đó. Bảng dưới liệt kê các giá trị để xác định cho các kiểu thiết bị đa dạng:
| Giá trị | Miêu tả |
|---|---|
| all | Phù hợp cho tất cả thiết bị |
| aural | Cho các thiết bị speech synthesizer. |
| braille | Cho các thiết bị feedback device. |
| embossed | Cho các thiết bị braille printer. |
| handheld | Cho các thiết bị handheld device (đặc biệt là dạng màn hình nhỏ, monochrome, limited bandwidth). |
| Cho các thiết bị được quan sát trên chế độ print preview mode. Bạn tham khảo chương tiếp theo về thiết bị phân trang. | |
| projection | Cho các thiết bị để biểu diễn project. Bạn tham khảo chương tiếp theo về thiết bị phân trang. |
| screen | Cho thiết bị màn hình |
| tty | Cho các thiết bị Teletype, terminal, … |
| tv | Cho các thiết bị Tivi |
Ghi chú: Tên của kiểu thiết bị là không phân biệt kiểu chữ.
