CSS Media Types là các loại thiết bị mà tài liệu được hiển thị và các kiểu đặc thù có thể được định nghĩa cho từng loại phương tiện.
Các Media Types trong CSS3 và Media Queries 4:
| STT | Giá trị & Mô tả |
|---|---|
| 1 | all Bảng định kiểu áp dụng cho tất cả loại thiết bị phương tiện |
| 2 | print Bảng định kiểu áp dụng cho máy in |
| 3 | screen Bảng định kiểu áp dụng cho màn hình máy tính, máy tính bảng, điện thoại thông minh, v.v. |
| 4 | speech Bảng định kiểu áp dụng cho trình đọc màn hình "đọc" trang to lớn |
LƯU Ý - Một số media types (aural, braille, embossed, handheld, projection, ttv, tv) bị loại bỏ trong Media Queries 4 và không nên dùng. Loại aural được thay thế bằng speech.
Ví dụ tạo kiểu cho screen và print media types:
Tài liệu HTML
Ví dụ
<!DOCTYPE html> <html> <head> <link rel="stylesheet" type="text/css" media="screen" href="screen.css"> <link rel="stylesheet" type="text/css" media="print" href="print.css"> </head> <body> <div></div> </body> </html>
Tài liệu CSS (screen.css)
div { height: 50px; width: 100px; border-radius: 20%; border: 2px solid blueviolet; box-shadow: 22px 12px 3px 3px lightblue; position: absolute; left: 30%; top: 20px; } CSS document (print.css): div { height: 50px; width: 100px; border-radius: 20%; border: 2px solid #dc3545; box-shadow: 22px 12px 3px 3px #dc3545; position: absolute; left: 30%; top: 20px; }
Kết quả
Khi tài liệu hiển thị trong screen mediatype:
Khi tài liệu hiển thị trong print mediatype:
Ví dụ khác tạo kiểu cho screen và print media types:
Tài liệu HTML
Ví dụ
<!DOCTYPE html> <html> <head> <style type="text/css"> @import url(screen.css) screen; @import url(print.css) print; </style> </head> <body> <p> Vivamus commodo, dolor eu porttitor sagittis, orci nisl consectetur ipsum, vel volutpat nibh lectus at erat. Cras scelerisque faucibus tellus aliquam commodo.Donec sem urna, facilisis at ipsum id, viverra sollicitudin est. Nam rhoncus sollicitudin lorem, a accumsan purus varius eget. </p> <p class="two">In ultrices lectus nisi. Nulla varius ex ut tortor congue viverra. Sed sodales vehicula leo, vitae interdum elit vehicula nec. Donec turpis nunc, iaculis et nisi sit amet, feugiat lacinia metus. </p> <p>Suspendisse eget ligula et risus lobortis ornare id at elit. Suspendisse potenti. Vivamus pellentesque eleifend pellentesque. Vestibulum neque ante, iaculis a sagittis et, fermentum at metus.</p> </body> </html>
Tài liệu CSS (screen.css)
p { color: navy; font-style: italic; } .two { color: #c303c3; font-size: 20px; } body { background-color: honeydew;} CSS document (print.css): p { color: red; font-style: italic;} .two { color: #989898; font-size: 40px; }
Kết quả
Khi tài liệu hiển thị trong screen mediatype:
Khi tài liệu hiển thị trong print mediatype:
