037_CSS媒介类型

1. 媒介类型(Media Types)允许你定义以何种媒介来提交文档。文档可以被显示在显示器、纸媒介或者听觉浏览器等等。

2. 媒介类型名称对大小写不敏感。

3. 媒介类型

3.1. 某些CSS属性仅仅被设计为针对某些媒介。比方说: "voice-family"属性被设计为针对听觉用户终端。其他的属性可被用于不同的媒介。例如: "font-size" 属性可被用于显示器以及印刷媒介, 但是也许会带有不同的值。显示器上面的显示的文档通常会需要比纸媒介文档更大的字号, 同时, 在显示器上, sans-serif字体更易阅读, 而在纸媒介上, serif字体更易阅读。

4. @media规则

4.1. @media规则使你有能力在相同的样式表中, 使用不同的样式规则来针对不同的媒介。

4.2. 下面这个例子中的样式告知浏览器在显示器上显示14像素的Verdana字体。但是假如页面需要被打印, 将使用10个像素的Times字体。注意: font-weight被设置为粗体, 不论显示器还是纸媒介:

<!DOCTYPE html>
<html>
	<head>
		<title>CSS媒介类型</title>
		<meta charset="utf-8" />

		<style type="text/css">
			@media screen
			{
				p {
					font-family: verdana, sans-serif; 
					font-size: 14px;
				}
			}

			@media print
			{
				p {
					font-family: times, serif; 
					font-size: 10px;
				}
			}

			@media screen, print
			{
				p {
					font-weight: bold;
				}
			}
		</style>
	</head>
	<body>
		<p>
			1. 媒介类型(Media Types)允许你定义以何种媒介来提交文档。文档可以被显示在显示器、纸媒介或者听觉浏览器等等。
			2. 媒介类型名称对大小写不敏感。
		</p>
	</body>
</html>

5. 不同的媒介类型

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值