CSS基础教程:CSS的At-Rules@规则

2016-02-19 13:40 6 1 收藏

给自己一点时间接受自己,爱自己,趁着下午茶的时间来学习图老师推荐的CSS基础教程:CSS的At-Rules@规则,过去的都会过去,迎接崭新的开始,释放更美好的自己。

【 tulaoshi.com - Web开发 】

At-rules分装不同的CSS规则,应用在特定场合。

Importing

  import@规则引用另外的样式。例如,如果你想添加另外样式到现在的样式,可以这样:
  @import url(addonstyles.css);
  这很像使用link元素连接CSS到HTML,本质上说有一个内容样式像下面:
  style type="text/css" media="all"@import url(monkey.css);/style
  这是为了照顾老版本浏览器,比如Netscape4不支持@规则所以不能链接样式表,已经构建好标签的HTML页面会失去样式表提供的功能。

Media types

  media@规则应用内容使用特定媒体,比如打印,例如:

@media print {
    body {
        font-size: 10pt;
        font-family: times new roman, times, serif;
    }
    #navigation {
        display: none;
    }
}
  媒体形式:
  all,所有媒体。 
  aural,言语合成器。 
  handheld,移动设备 
  print,打印 
  projection,投影 
  screen,电脑屏幕
  你还可以使用braille,embossed,tty或者tv。
  注意:说了这么多,IE只支持all,screen和print。

Charachter sets 字符设定

  charset@规则简单设定外部样式里的编码。它出现在样式的最上面例如@charset "ISO-8859-1"; 

Font faces 字体外观

  font-face@规则用来详细描述字体,可以在CSS里嵌入外部字体。
  它需要font-family描述符引用字体,它的值可以是字体的名称或是新命名一个。嵌入一个字体,使用src描述符。其他添加到font-face@规则里的描述符将影响正在使用的内含字体,例如如果你添加font-weight: bold粗体到@规则,font-family的src只能运用到带有font-family属性的选择器里,而且选择器里font-weight属性同样设置成bold。
  看下面例子:

@font-face {
    font-family: somerandomfontname;
    src: url(somefont.eot);
    font-weight: bold;
}
p {
    font-family: somerandomfontname;
    font-weight: bold;
}
  如上面的例子,段落里的字体将是somefont的字体(如果p选择器没有font-weight: bold,那字体就不是somefont)
  嵌入字体还凑合着用,因为Mozilla浏览器不支持也没有计划添加这个功能。只有IE有分寸的支持,但这也不是说可以直接使用,IE浏览器嵌入字体,你还需要微软WEFT软件,它提供Truetype字体转换成压缩的OpenType字体(只有这个你才能使用URI指定)。由于这个限制(显得非常复杂)兼容性,最好不要使用系统没有的字体。

Pages

  page@规则服务页面媒体,是个高级方式应用于打印媒体样式。它定义了页面块,在盒模型上扩展,所以你可以定义单一页面的大小和表现。
  应用page@规则有许多规定,比如没有padding和border,而且也不上我们说的电脑屏幕,所以pixels和ems单位不被允许使用。
  有许多特定属性可以使用,比如size,可以设定portrait纵向,landscape横向,auto自动或长度。marks属性可以用来定义裁剪标志

@page {
    size: 15cm 20cm;
    margin: 3cm;
    marks: cross;
}
页面媒体里的伪标签

  有三种伪标签用来链接特定page@规则,如下形式:@page :pseudo-class {stuff}。
  :first应用到页面媒体里的第一页
  :left和:right应用到左边和左边页面。这可能用在指定有非常大margin的左边页面和有非常大margin的右边页面。
  还有一些页面@规则,比如page-breaks页面中断和named pages页面命名,但这些@规则在浏览器里很难工作,你也许浪费了许多时间阅读这篇文章,不过这些都是不错的想法。

来源:https://www.tulaoshi.com/n/20160219/1604951.html

延伸阅读
标签: Web开发
  本教程假设您没有任何样式表语言的基础,甚至,您可以完全不知道是什么东东,但是,我们同样假设您已经掌握了基本的语法。比如,您肯定知道是表明页面的头部,是表示页面的一个段落。     、正式开始学习之前的几句啰嗦话: l        不是什么高深的东东,它的编写...
标签: Web开发
margin和padding用来隔开元素,margin是隔开元素与外边,padding是隔开元素里边。 例子h2: h2 {     font-size: 1.5em;     background-color: #ccc;     margin: 1em;     padding: 3em; } 元素四边可以设置的属性:mar...
标签: Web开发
HTML代码如下: link type="text/css" rel="stylesheet" href="css/style.css" media="screen" / media=指定这个CSS用于何种设备。具体参数如下: screen (缺省值),提交到计算机屏幕; print, 输出到打印机; projection,提交到投影机; aural,扬声器; braille,提交到凸字触觉感知设...
标签: Web开发
背景图片Background Images有许多属性可以操作。 幸运的是,可以使用background处理所有: body {     background: white url(/jc/UploadFiles/200803/20080309225852658.gif) no-repeat top right; } 上面合并了下面属性: background-color出现在前面。  back...
标签: Web开发
C S S 的 声 明 方 式 这章节将开始为您介绍CSS的应用。当然一开始要介绍的是如何去建立个样式表 (Style Sheets),包括了声明的方式和应用在网页上的方法,最後还会为您概述一下CSS的一些特性。概略来说,CSS的声明有三种方式: 一、基本声明:最典型的CSS声明方式。 element {property: value} 用中文来...

经验教程

177

收藏

78
微博分享 QQ分享 QQ空间 手机页面 收藏网站 回到头部