日期:2013-09-17  浏览次数:21000 次

Cascading Style Sheets(简称CSS),翻译为“层叠款式单”或“级联款式单”,又简称“款式表”。

CSS的引入是用来扩展HTML的,而不是用来替代HTML的。也就是说CSS离不开HTML,它只是一项辅助工具,是对HTML功用的一种补充。

CSS的优势

在CSS标准里,不只重新定义了HTML原有的款式,如文字的大小、颜色等;愈加入了堆叠文字、区块变化及任意位置放置等多项新属性。通过CSS可以使用更丰富、更灵活的款式,更简单地设计出更美观的网页。同时,也让网页的设计与维护更无效率。

减少图像文件的使用:很多网页为求设计效果,而大量使用图像,致使网页的下载速度变慢。CSS提供了很多文字款式的设定,且再加上IE内建的滤镜特效,因此可轻松取代原来图像才能表现的视觉效果。这样的设计方式让修正网页内容变得更方便,也大大提高了下载速度;

集中管理款式信息:CSS的基本概念在于可将网页要展现的内容与其表现的款式设定分开,也就是将网页的外观设定信息从网页的内容中独立出来,并集中管理。这样,当要改变网页外观时,只需更改款式设定的部分,HTML文件本身并不需求任何的更改;

共享款式设定:网页的款式设定和内容分离的好处,除了可集中管理外,如果进一步将CSS款式的信息存储成独立的文件,还可让多个网页文件共同使用它。这样,可省却在每一个网页文件中都要反复设定款式的麻烦;

将款式分类使用:绝对于多份HTML文件可套用同一个CSS款式文件,也可以在一份HTML网页文件上套用多个CSS款式文件。

CSS的规则

CSS的款式规则由两部分组成:选择器和声明。

选择器就是款式的名称,包括自定义的类,HTML标签和CSS选择器款式。比如“.mycss”为自定义的类,“td”为标准HTML标签,而“a:link”则是CSS选择器款式;

声明则是用于定义款式元素的。声明由分两部分:属性(如font-size)和值(如12px)。对于一个选择器而言,可以有多个声明。比如一个声明是表示颜色,一个声明是表示大小等。

以下为CSS款式的代码片段:


td {
    font-size: 12px;
    color: #666666;
}
.cnbruce {
    background-color: #000033;
}


其中“td”和“.cnbruce”都属于选择器,“font-size”、“color”以及“background-color”都属于声明中的属性,而“12px”、“#666666”及“#000033”即为属性对应的值。每个选择器的声明都采用{…}包含。

CSS的方式

从CSS代码的标签方式来看,分如下3种CSS款式:

1,自定义CSS款式,又称类款式。可使用于任何标签,名称必须带有句点“.”,比如“.cnbruce”;

2,HTML标签款式。虽说自定义CSS款式可使用任何标签,但对于HTML固有的标签,每次都要选用自定义的款式就显得比较麻烦。所以HTML标签款式的出现就是为了扩展HTML标签的;

3,CSS选择器款式。此为高级选项,可用来定义标签的组合,比如“a”表示对超级链接款式的选择,“td”表示对单元格款式的选择,而如果对单元格中超级链接款式的选择则使用“td a”。

a {
    color: #3366CC;
}
td a{
    color: #FF0000;
}

如上代码的定义,对于普通插入的超级链接的颜色,和在单元格中使用的超级链接的颜色,将进行不同的显示。

CSS的使用范围

CSS无处不在,它可以分为以下两种。

外部CSS款式表:以扩展名为.css的文件而存在,文件中内容即是所有款式的选择和声明。该文件可做为共享文件,让多个文档共同援用并使用,达到站点文件款式的分歧性。同时,如果修正该款式表文件,所有援用的文档都将改变其款式,达到网站迅速改版的目的。

内部CSS款式表:只存在于当前文档中,并只针对当前页进行款式使用的方法。普通存在于文档head部分的style标签内。

外部CSS款式表和内部CSS款式表可同时作用于一个页面,但当两种款式表出现对同一选择对象进行款式修饰时,浏览器将按照如下规则来使用款式效果:

若两者所声明的属性不相冲突,则显示为该两种款式的全部属性;
若两者所声明的属性直接相冲突,则采用内部款式表的款式。
所谓“求同存异,内部优先”。