Media Type trong CSS




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).
print 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ữ.

Loạt bài hướng dẫn Học CSS cơ bản và nâng cao của chúng tôi dựa trên nguồn tài liệu của: TutorialspointW3Schools

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.