提供Discuz ,ECShop ,PHPCMS ,帝国CMS ,CSS教程 ,PHP教程 ,DedeCMS ,WordPress ,HTML教程等cms问题查询.
当前位置: HTML教程 > CSS的媒体范例怎样运用【html5教程】,媒体类型

本日的这篇文章将引见关于CSS媒体范例的用法,媒体范例许可你指定的文件将以怎样的情势在差别媒体显现,下面我们就来看看细致的内容。

依据Web网站的差别,网页的错误解以非预期的情势涌现,比方打印时的规划折叠,但在媒体范例中,能够设置它以防止它,这意味着您能够建立用于打印的页面,输出到投影仪的页面等。

怎样运用CSS媒体范例?

媒体范例能够用两种体式格局编写。

第一种体式格局

<link rel="stylesheet" href="sample.css" type="text/css" media="screen">

第二种体式格局

@media screen{
  /*screen的内容*/
}

第一个运用<link>依据媒体范例变动运用的CSS。

第二种是在CSS中为每种媒体范例编写的设置

因为偶然大批的CSS代码时,有一些变化时很难变动,所以发起运用第一种体式格局,但这次我们以第二种体式格局为例引见CSS媒体范例。

我们先来简朴看一下CSS中经常使用的几种媒体范例

screen(屏幕)

print(打印)

tv(电视)

projection(投影仪)

all(悉数)

当运用两个媒体范例时能够用逗号分离隔,下面我们来看细致的示例

代码以下

HTML代码

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>媒体范例</title>
    <link rel="stylesheet" type="text/css" href="sample.css">
  </head>
  <body>
    <h1>Sample</h1>
    <p>依据媒体的差别,背景色彩会转变</p>
    <p>screen : 寻常显现 : #d9534f(赤色)</p>
    <p>print : 打印时显现: #5bc0de(蓝色)</p>
  </body>
</html>

CSS代码

sample.css

@media all{
  p{
    color:#000000;
  }
}
@media print{
  body{
    color: #5bc0de;
  }
}
@media screen{
  body{
    color: #d9534f;
  }
}

实行上述代码在浏览器页面上显现以下结果

Sample为赤色

当举行打印预览时,浏览器上显现以下所示结果

Sample变成蓝色

以上就是CSS的媒体范例怎样运用的细致内容,更多请关注ki4网别的相干文章!

「梦想一旦被付诸行动,就会变得神圣,如果觉得我的文章对您有用,请帮助本站成长」

分享到:
赞(0) 打赏

支付宝扫一扫打赏

微信扫一扫打赏

标签:

上一篇:

下一篇:

相关推荐

0 条评论关于"CSS的媒体范例怎样运用【html5教程】,媒体类型"

最新评论

    暂无留言哦~~

博客简介

看古风美女插画Cos小姐姐,素材合集图集打包下载:炫龙网,好看二次元插画应有尽有,唯美小姐姐等你来。

友情链接

他们同样是一群网虫,却不是每天泡在网上游走在淘宝和网游之间、刷着本来就快要透支的信用卡。他们或许没有踏出国门一步,但同学却不局限在一国一校,而是遍及全球!申请交换友链

服务热线:
 

 QQ在线交流

 旺旺在线