旗下导航:搜·么
当前位置:网站首页 > HTML > 正文

CSS的媒体范例怎样运用【html5教程】

作者:搜搜PHP网发布时间:2019-11-26分类:HTML浏览:55


导读:本日的这篇文章将引见关于CSS媒体范例的用法,媒体范例许可你指定的文件将以怎样的情势在差别媒体显现,下面我们就来看看细致的内容。依据Web网站的差别,网页的错误解以非预...
本日的这篇文章将引见关于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网别的相干文章!

标签:媒体类型