CSS中at(@)指示符用法详解

开发 前端
你对CSS中at(@)指示符的用法是否了解,这里向大家简单描述一下,主要介绍一下at指示符在导入,媒体类型,字符集和页面等内容中的应用,相信本文介绍你会学到很多。

这里和大家分享一下CSS中使用at(@)指示符的用法,比如说导入import ,使用at规则将吞入另外的样式表。如果你需要把另外的样式表的样式添加到现有的,这经常用来取代连接CSS到HTML中的<link>标签,本质上就是一个内部样式表的形式。

CSS中使用at(@)指示符

导入

导入import at规则将吞入另外的样式表。比如,如果你需要把另外的样式表的样式添加到现有的,你可以这样做:

示例代码

  1. @importurl(addonstyles.css);  
  2.  

这经常用来取代连接CSS到HTML中的<link>标签,本质上就是一个内部样式表的形式,看起来像这样:

示例代码

  1. <styletypestyletype="text/css"media="all">
  2. @importurl(monkey.css);</style> 
  3.  

这样做的好处是,一些老浏览器如Netscape4.x不接受at规则,进而不连接样式表,从而,如果你有良好结构的标记,只剩下朴素功能的HTML(尽管没有样式)。

媒体类型

媒体mediaat规则将把内容应用到指定的媒体,比如打印。比如

示例代码

  1. @mediaprint{  
  2. body{font-size:10pt;  
  3. font-family:timesnewroman,times,serif;}  
  4. #navigation{display:none;}  
  5. }  
  6.  

媒体类型可以是:

all──每一个太阳下、上、周围、里面的所有媒体类型。
aural──语音合成器。
handheld──手持设备。
print──打印机。
projection──投影仪。
screen──电脑屏幕。

还可以使用braille(布莱叶点字)、embossed(压印)、tty(终端)和tv(电视)。#p#

字符集

字符集charset at规则设置一个外部样式的字符编码,它应该出现在样式的顶端,大致如此:@charset"ISO-8859-1";

字体外观

字体外观font-face at规则用来详细描述一个能嵌入CSS的外部字体。

它必须一个font-family的字体可以参考的描述符,值可以是系统已经存在的字体名称(这种情况发生时会覆盖掉该字体),也可以是全新的名字。为了嵌入一个字体,需用使用src描述符。字体外观at规则的其他描述符是使用该字体的一些条件,比如,在at规则里面增加一条font-weight:bold样式,如果font-weight属性也设置了bold,font-family的src将应用该规则到带有font-family属性的选择符。

使用字体外形

at规则看起来像这样:

示例代码

  1. @font-face{font-family:somerandomfontname;  
  2. src:url(somefont.eot);  
  3. font-weight:bold;}  
  4. p{font-family:somerandomfontname;  
  5. font-weight:bold;} 

这将使somefont.eot这个字体应用到段落里(如果p选择符没有设置成font-weight:bold的话就不会)。

注意

现在内嵌字体的支持度还算凑合。基于Mozilla的浏览器不支持,并且也没有最近的计划显示它会支持。仅InternetExplorer似有一定程度上的支持,但也没有直接得方法。为了在IE中嵌入字体,你需要使用微软的WEFT软件,它会把一个TrueType字体转换成一个压缩的OpenType字体(这也值嗯嗯在指定的URI上使用)。因为有限的(也相当复杂)的兼容性,最好不要使用没有适合的可替换系统字体的内嵌字体。

页面

页面pageat规则用于页式(分页)媒体,是一个把样式应用到打印媒体的先进方法。它定义页面块的盒状模型(见边界和补白)扩展因此你可以定义一个独立页面的尺寸和表现。

应用pageat规则有许多约定,比如没有补白和边界,我们也没有谈论电脑屏幕──点(pixel)和em作为单位是不可以的。

可以使用很多指定属性,比如尺寸size,可以设置为portrait(竖排格式)、landscape(横排格式)、auto(自动)或者一个高度。marks属性也可以用来定义裁剪标志。

示例代码

  1. @page{size:15cm20cm;margin:3cm;marks:cross;}  
  2.  

页式媒体的伪类

有三个伪类被用来指定与pageat规则相结合,用如此形式:@page:pseudo-class{stuff}。

:first应用到页式媒体的第一页。

:left和:right分别用于左边和右边的页面。这可以用来指定左边或者右边页面一个更大的边界。

还有其他更多的小方面指定页面at规则,比如页面分隔符和命名页面,但鉴于这个at规则很难在任何浏览器上工作,你可能在浪费时间在阅读这些东西上面。

本文来自CSS在线:http://www.csscss.org/cssarticle/2009531124.shtml

【编辑推荐】

  1. 学习笔记 如何使用CSS实现表格斜线效果
  2. CSS样式实现快速定位bug的六大技巧
  3. CSS中link和@import的区别
  4. CSS2.0中page-break-after属性用法
  5. 技术分享 使用不同CSS样式兼容多种浏览器
责任编辑:佚名 来源: csscss.org
相关推荐

2010-09-06 16:37:58

2010-09-07 16:46:59

CSSexpression

2010-08-24 08:47:20

paddingCSS

2010-08-23 09:11:18

padding-bot

2010-08-20 16:29:01

padding-lef

2010-09-03 12:46:28

CSSexpression

2010-08-23 08:45:08

CSSpadding内边距

2010-08-23 15:33:47

CSSpadding

2010-09-01 13:37:58

CSSclip属性

2010-08-26 11:01:00

ulliCSS

2010-09-08 16:22:32

PositionCSS

2010-09-02 12:58:21

display:inlCSS

2010-09-02 15:32:51

CSSfloat

2010-09-03 11:12:48

CSSbox

2010-08-30 11:34:32

csspadding

2010-09-08 15:24:49

CSS选择符CSS

2010-08-31 10:30:59

CSSpositionz-index

2010-08-31 08:51:58

marginCSS

2010-08-30 15:06:04

CSSfont-size

2010-08-31 10:05:16

CSS Sprites
点赞
收藏

51CTO技术栈公众号