DIV+CSS入门知识教程,入门概念知识

2024-01-17 15:45 小编
  根据Web网站的不同,网页的错误会以非预期的形式出现,例如打印时的布局折叠,但在媒体类型中,可以设置它以避免它,这意味着您可以创建用于打印的页面,输出到投影仪的页面等。
 
  如何使用CSS媒体类型?
 
  媒体类型可以用两种方式编写。
 
  第一种方式
 
  <linkrel="stylesheet"href="sample.css"type="text/css"media="screen">
 
  第二种方式
 
  @mediascreen{
 
  /*screen的内容*/
 
  }
 
  第一个使用<link>根据媒体类型更改应用的CSS。
 
  第二种是在CSS中为每种媒体类型编写的设置
 
  由于有时大量的CSS代码时,有一些变化时很难更改,所以建议使用第一种方式,但这次我们以第二种方式为例介绍CSS媒体类型。
 
  我们先来简单看一下CSS中常用的几种媒体类型
 
  screen(屏幕)
 
  print(打印)
 
  tv(电视)
 
  projection(投影仪)
 
  all(全部)
 
  当使用两个媒体类型时可以用逗号分隔开,下面我们来看具体的示例
 
  代码如下
 
  HTML代码
 
  <!DOCTYPEhtml>
 
  <html>
 
  <head>
 
  <metacharset="utf-8">
 
  <title>媒体类型</title>
 
  <linkrel="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
 
  
 
  @mediaall{
 
  p{
 
  color:#000000;
 
  }
 
  }
 
  @mediaprint{
 
  body{
 
  color:#5bc0de;
 
  }
 
  }
 
  @mediascreen{
 
  body{
 
  color:#d9534f;
 
  }
 
  }


Tag: 教程
在线咨询 拨打电话

电话

13363039260

微信二维码

微信二维码