hi,你好!欢迎访问本站!登录
本站由简数采集腾讯云宝塔系统阿里云强势驱动
当前位置:首页 - HTML - 正文 请牢记本站网址www.sosophp.cn

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

2019-11-26HTML搜搜PHP网37°c
A+ A-
本日的这篇文章将引见关于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网别的相干文章!

  选择打赏方式
微信赞助

打赏

QQ钱包

打赏

支付宝赞助

打赏

  选择分享方式
  移步手机端
CSS的媒体范例怎样运用【html5教程】

1、打开你手机的二维码扫描APP
2、扫描左则的二维码
3、点击扫描获得的网址
4、可以在手机端阅读此文章
标签: