十五 At-Rules @规则ImportingMedia typesCharachter sets 字符设定Font faces 字体外观Pages

80酷酷网    80kuku.com

  

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

Importing

import规则引用另外的样式。例如,如果你想添加另外样式到现在的样式,可以这样:

import url(addonstyles.css);

这很像使用link元素连接到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,screenprint

Charachter sets 字符设定

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

Font faces 字体外观

font-face规则用来详细描述字体,可以在里嵌入外部字体。

它需要font-family描述符引用字体,它的值可以是字体的名称或是新命名一个。嵌入一个字体,使用src描述符。其他添加到font-face规则里的描述符将影响正在使用的内含字体,例如如果你添加font-weight: bold粗体到规则,font-familysrc只能运用到带有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页面命名,但这些规则在浏览器里很难工作,你也许浪费了许多时间阅读这篇文章,不过这些都是不错的想法。



分享到
  • 微信分享
  • 新浪微博
  • QQ好友
  • QQ空间
点击: