Các loại phương tiện CSS 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 xác định cho mọi loại phương tiện.
Sau đây là các Loại phương tiện trong CSS3 và Truy vấn phương tiện 4 -
| Sr.No | Giá trị &Mô tả |
|---|---|
| 1 | tất cả Biểu định kiểu áp dụng cho tất cả các thiết bị loại phương tiện |
| 2 | in Biểu định kiểu áp dụng cho máy in |
| 3 | màn hình Biểu đị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 | bài phát biểu Biểu định kiểu áp dụng cho trình đọc màn hình "đọc to" trang |
LƯU Ý −Một số loại phương tiện truyền thông (chẳng hạn như aural, braille, nổi, cầm tay, chiếu, ttv và tv) không được dùng trong Media Queries 4 và không nên được sử dụng. Loại âm thanh đã được thay thế bằng loại phương tiện giọng nói.
Hãy xem một ví dụ về tạo kiểu cho các loại giấy in và màn hình -
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;
} Đầu ra
Khi tài liệu được hiển thị trong kiểu dàn xếp màn hình -
Khi tài liệu được hiển thị trong một loại trung gian in -
Hãy xem một ví dụ khác về các loại giấy in và màn hình tạo kiểu -
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; } Đầu ra
Khi tài liệu được hiển thị trong kiểu dàn xếp màn hình -
Khi tài liệu được hiển thị trong một loại trung gian in -
