日期:2013-10-20 浏览次数:21228 次
At-rules分装不同的CSS规则,使用在特定场合。
import
@规则援用另外的款式。例如,如果你想添加另外款式到如今的款式,可以这样:
@import url(addonstyles.css);
这很像使用link
元素连接CSS到HTML,本质上说有一个内容款式像下面:
<style type="text/css" media="all">@import url(monkey.css);</style>
这是为了照顾老版本浏览器,比如Netscape4不支持@规则所以不能链接款式表,曾经构建好标签的HTML页面会得到款式表提供的功用。
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
。
charset
@规则简单设定外部款式里的编码。它出如今款式的最上面例如@charset "ISO-8859-1";
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指定)。由于这个限制(显得非常复杂)兼容性,最好不要使用系统没有的字体。
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页面命名,但这些@规则在浏览器里很难任务,你也许浪费了许多时间阅读这篇文章,不过这些都是不错的想法。