CSS高级教程 @规则

原创 2007年10月08日 10:16:00
at(@)规则把CSS规则都注入了一个压缩胶囊中,并且应用到指定的某些事物中。喔。
导入
导入import at规则将吞入另外的样式表。比如,如果你需要把另外的样式表的样式添加到现有的,你可以这样做:
@import url(addonstyles.css);
这经常用来取代连接CSS到HTML中的<link>标签,本质上就是一个内部样式表的形式,看起来像这样:
<style type="text/css" media="all">@import url(monkey.css);</style>
这样做的好处是,一些老浏览器如Netscape 4.x不接受at规则,进而不连接样式表,从而,如果你有良好结构的标记,只剩下朴素功能的HTML(尽管没有样式)。
媒体类型
媒体media at规则将把内容应用到指定的媒体,比如打印。比如
@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(电视)。
字符集
字符集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规则看起来像这样:
@font-face {
font-family: somerandomfontname; src: url(somefont.eot);
font-weight: bold;
}
p {
font-family: somerandomfontname;
font-weight: bold;
}
这将使somefont.eot这个字体应用到段落里(如果p选择符没有设置成font-weight: bold的话就不会)。
注意
现在内嵌字体的支持度还算凑合。基于Mozilla的浏览器不支持,并且也没有最近的计划显示它会支持。仅Internet Explorer似有一定程度上的支持,但也没有直接得方法。为了在IE中嵌入字体,你需要使用微软的WEFT软件,它会把一个TrueType字体转换成一个压缩的OpenType字体(这也值嗯嗯在指定的URI上使用)。因为有限的(也相当复杂)的兼容性,最好不要使用没有适合的可替换系统字体的内嵌字体。
页面
页面page at规则用于页式(分页)媒体,是一个把样式应用到打印媒体的先进方法。它定义页面块的盒状模型(见边界和补白)扩展因此你可以定义一个独立页面的尺寸和表现。
应用page at规则有许多约定,比如没有补白和边界,我们也没有谈论电脑屏幕──点(pixel)和em作为单位是不可以的。
可以使用很多指定属性,比如尺寸size,可以设置为portrait(竖排格式)、landscape(横排格式)、auto(自动)或者一个高度。marks属性也可以用来定义裁剪标志。
@page {
size: 15cm 20cm;
margin: 3cm;
marks: cross;
}
页式媒体的伪类
有三个伪类被用来指定与page at规则相结合,用如此形式:@page :pseudo-class { stuff }。
:first应用到页式媒体的第一页。
:left和:right分别用于左边和右边的页面。这可以用来指定左边或者右边页面一个更大的边界。
还有其他更多的小方面指定页面at规则,比如页面分隔符和命名页面,但鉴于这个at规则很难在任何浏览器上工作,你可能在浪费时间在阅读这些东西上面。

CSS高级教程 @规则

at(@)规则把CSS规则都注入了一个压缩胶囊中,并且应用到指定的某些事物中。喔。导入导入import at规则将吞入另外的样式表。比如,如果你需要把另外的样式表的样式添加到现有的,你可以这样做:@i...
  • alex197963
  • alex197963
  • 2007年04月28日 20:27
  • 580

CSS3高级选择器用法

CSS3高级选择器用法介绍
  • qq_35718410
  • qq_35718410
  • 2016年08月24日 17:16
  • 2434

Altium Designer PCB高级规则设置

参考来源:AD9规则设置详解
  • u010160335
  • u010160335
  • 2017年12月19日 18:09
  • 75

css高级布局知识点汇总

1:大小不固定的的div中图片垂直水平居中 display: table ;   display:table-cell    //ie8 .container{ width: 600px; heig...
  • baidu_33033415
  • baidu_33033415
  • 2017年03月17日 10:19
  • 94

SQL的高级教程(一)

1、select top, limit, rownum 子句            select top子句 select top子句用于规定要返回的记录的数目。 select ...
  • qq_30641447
  • qq_30641447
  • 2016年08月06日 15:26
  • 2153

CSS高级教程 页面布局

用CSS 来布局很容易。如果你已经习惯用表格布局的话,起先会感觉比较困难。其实不难,只不过动机不同,并且在实践中更有意义。你可以把这一页面的各个部分当作独立的版块来看待,无论你选择哪一块。你可以绝对或...
  • alex197963
  • alex197963
  • 2007年04月28日 20:33
  • 722

CSS高级教程 伪元素

伪元素(pseudo elements)跟伪类一样吮吸选择符,使用selector:pseudoelement { property: value; }的形式。有四个吮吸器。首字和首行首字first-...
  • alex197963
  • alex197963
  • 2007年04月28日 20:25
  • 611

MYSQL语句大全(SQL 高级教程)【上】

SQL 高级教程 Top            TOP 子句用于规定要返回的记录的数目。                    对于拥有数千条记录的大型表来说,TOP 子句是非常有...
  • JF_2012
  • JF_2012
  • 2015年12月31日 17:57
  • 4195

CSS高级教程 页面布局

用CSS 来布局很容易。如果你已经习惯用表格布局的话,起先会感觉比较困难。其实不难,只不过动机不同,并且在实践中更有意义。你可以把这一页面的各个部分当作独立的版块来看待,无论你选择哪一块。你可以绝对或...
  • qinxuzh
  • qinxuzh
  • 2007年10月08日 10:18
  • 446

CSS高级布局样式技巧

CSS高级布局样式技巧一、empty空元素的样式 1、:empty { } 伪类选择符empty 2、:not(:empty) { } 伪类选择符not 空元素样式显示二、xx_-of-type伪类选...
  • mqy1023
  • mqy1023
  • 2016年12月22日 00:12
  • 815
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:CSS高级教程 @规则
举报原因:
原因补充:

(最多只允许输入30个字)