VietTuts

Tự Học Lập Trình Online

  • Home
  • Java
  • Servlet
  • JSP
  • Struts2
  • Hibernate
  • Spring
  • MyBatis
  • Java WS
  • C
  • C++
  • C#
  • Python
  • PHP
  • Excel
  • VBA
  • Web
    • JavaScript
    • JQUERY
    • JSON
    • AJAX
    • CSS
    • HTML
    • HTML5
    • Node.js
    • Angular 7
  • SQL
    • MySQL
    • SQL Server
  • Misc
    • Eclipse
    • Phần mềm tiện ích
    • Cấu trúc DL&GT
    • Selenium Test

CSS Tuts

CSS là gì? Cú pháp CSS Bộ chọn CSS Liên kết css với html Đơn vị đo trong CSS Mã màu trong CSS Comment trong CSS

CSS Các thuộc tính

CSS Background CSS Border Font trong CSS Định dạng văn bản (Text) trong CSS Image trong CSS Link trong CSS Bảng trong CSS Căn lề trong CSS List trong CSS Thuộc tính padding trong CSS Con trỏ trong CSS Thuộc tính outline trong CSS Kích cỡ trong CSS Scrollbar trong CSS Thuộc tính visibility trong CSS Căn chỉnh vị trí trong CSS Thuộc tính z-index trong CSS Pseudo Class trong CSS Pseudo Element trong CSS Các quy tắc trong CSS Kiểu Media trong CSS Layout trong CSS Validation trong CSS

CSS nâng cao

Giới thiệu CSS3 Bo tròn góc trong CSS Border Image trong CSS
1 / 3
❮ ❯

Kiểu Media trong CSS


previous
next

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 quy tắc @media hoặc @import.

  • Xác định thiết bị bên trong phần Document Language.


Nội dung chính

  • Quy tắc @media trong CSS
  • Document Language trong CSS
  • Một số kiểu thiết bị được công nhận

Quy tắc @media trong CSS

Quy 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 quy 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ị Mô 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ữ.


previous
next

Recent Updates

Border Image trong CSSBo tròn góc trong CSSGiới thiệu CSS3Layout trong CSSCác quy tắc trong CSSPseudo Element trong CSSPseudo Class trong CSSThuộc tính z-index trong CSSCăn chỉnh vị trí trong CSSThuộc tính visibility trong CSSScrollbar trong CSSKích cỡ trong CSSSắp Tết 2026 Rồi! - Còn bao nhiêu ngày nữa là đến tết 2026?

VietTuts on facebook

Học Lập Trình Online Miễn Phí - VietTuts.Vn
Danh Sách Bài Học

Học Java | Hibernate | Spring
Học Excel | Excel VBA
Học Servlet | JSP | Struts2
Học C | C++ | C#
Học Python
Học SQL

Bài Tập Có Lời Giải

Bài tập Java
Bài tập C
Bài tập C++
Bài tập C#
Bài tập Python
Ví dụ Excel VBA

Câu Hỏi Phỏng Vấn

201 câu hỏi phỏng vấn java
25 câu hỏi phỏng vấn servlet
75 câu hỏi phỏng vấn jsp
52 câu hỏi phỏng vấn Hibernate
70 câu hỏi phỏng vấn Spring
57 câu hỏi phỏng vấn SQL

Scroll back to top

Copyright © 2016 VietTuts.Vn all rights reserved. | Liên hệ | Chính sách - riêng tư | sitemap.html | sitemap_index.xml