CSS 中的不同媒体类型

cssweb developmentfront end technology更新于 2025/1/10 8:44:17

CSS 媒体类型是指文档在其上呈现的设备类型，并且可以为每种媒体类型定义特定的样式。

以下是 CSS3 和媒体查询 4 中的媒体类型 −

Sr.No	Value &说明
1	all 样式表适用于所有媒体类型设备
2	print 样式表适用于打印机
3	screen 样式表适用于电脑屏幕、平板电脑、智能手机等。
4	speech 样式表适用于"阅读"的屏幕阅读器大声朗读页面

注意 −媒体查询 4 中已弃用多种媒体类型(例如听觉、盲文、浮雕、手持、投影、电视和电视)，不应再使用。听觉类型已被语音媒体类型取代。

让我们看一个屏幕和打印媒体类型样式的示例 −

HTML 文档

示例

<!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>

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;
}

输出

当文档在屏幕媒体类型中可见时 −

当文档在打印媒体类型中可见时 −

让我们看另一个屏幕和打印媒体类型样式的示例 −

HTML 文档

示例

<!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>

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; }