理论教育 DreamweaverCS6中文版教程:CSS样式表的组成

DreamweaverCS6中文版教程:CSS样式表的组成

时间:2023-10-29 理论教育 版权反馈
【摘要】:样式表由样式规则组成,告诉浏览器怎样去呈现一个文档。CSS样式表每个规则的组成包括一个选择符和该选择符所接受的样式。样式规则组成如下:选择符{属性1:值1;属性2:值2}单一选择符的复合样式声明应该用分号隔开。为了减少样式表的重复声明,组合的选择符声明是允许的。例如,文档中所有的标题可以通过组合给出相同的声明:下面分别绍样式表的各个组成部分:1.选择符任何html元素都可以是一个CSS1的选择符。

DreamweaverCS6中文版教程:CSS样式表的组成

样式表由样式规则组成,告诉浏览器怎样去呈现一个文档。有很多将样式规则加入到HTML文档中的方法。但最简单的启动方法是使用HTML的STYLE组件,这个元素放置于文档的HEAD部分,包含网页的样式规则。CSS样式表每个规则的组成包括一个选择符(通常是一个HTML的元素,例如body、p或em)和该选择符所接受的样式。有很多的属性可用于定义一个元素,每个属性带一个值,共同描述选择符应该如何呈现。样式规则组成如下:

选择符{属性1:值1;属性2:值2}

单一选择符的复合样式声明应该用分号隔开。以下是一段定义了H1和H2元素的颜色和字体大小属性:

上述的样式表告诉浏览器用加大、红色字体去显示一级标题;用大、蓝色字体去显示二级标题。

为了减少样式表的重复声明,组合的选择符声明是允许的。例如,文档中所有的标题可以通过组合给出相同的声明:

下面分别绍样式表的各个组成部分:

1.选择符

任何html元素都可以是一个CSS1的选择符。选择符仅仅是指向特别样式的元素。根据声明的不同可把选择符分为4类:

◆标签:单个html元素作为选择符。例如:

其中选择符是P。

◆类:为样式规则命名的选择符。一个html元素的选择符能有不同的class(类),因而允许同一元素有不同样式。例如网页制作者希望文本在不同段落使用不同的颜色显示:

以上的例子建立了red和green两个类,供不同的段落使用。各标签的class属性用于在html中指明元素使用的样式类,例如:

则段内文本使用p.red类样式。每个选择符在某一时刻只允许使用一个类。类的声明也可以无须相关元素,例如:

在这个例子,名为cn01的类可以被用于任何元素。

◆复合内容:复合内容选择符只不过是一个用空格隔开的两个或更多的单一选择符组成的字符串。这些选择符可以指定一般属性,并且由于层叠顺序的规则,它们的优先权比单一的选择符大。例如:

这个例子中关联选择符是pem。这个值表示段落中的强调文本会是红色背景;而标题的强调文本则不受影响。

◆ID:ID选择符个别地定义每个元素的成分。这种选择符应该尽量少用,因为它具有一定的局限。一个ID选择符的指定要有指示符"#"在名字前面。例如,ID选择符可以指定如下:

使用ID选择符的方式如下:

2.属性

一个属性被指定到选择符是为了使用它的样式。属性包括颜色、边界和字体等。(www.daowen.com)

3.值

值是一个属性接受的指定。例如,属性颜色能接受值red。

4.注释

样式表里面的注释使用与C语言编程中一样的约定方法去指定。CSS1注释的例子如以下格式:

5.伪类和伪元素

伪类和伪元素是特殊的类和元素,能自动地被支持CSS的浏览器所识别。伪类区别开不同种类的元素,例如visitedlinks(已访问的连接)和activelinks(可激活连接)描述了两个定位锚(anchors)的类型。伪元素指元素的一部分,例如段落的第一个字母。伪类或伪元素规则的形式如选择符:

伪类{属性:值}

伪元素{属性:值}

伪类和伪元素不应用html的class属性来指定。一般的类可以与伪类和伪元素一起使用,如下:

选择符.类:伪类{属性:值}

选择符.类:伪元素{属性:值}

常用的伪类和伪元素有:

◆定位锚伪类

伪类可以指定A元素以不同的方式显示连接(links)、已访问连接(visitedlinks)和可激活连接(activelinks)。定位锚元素可给出伪类link、visited或active。一个已访问连接可以定义为不同颜色的显示,甚至不同字体大小和风格。例如:

◆首行伪元素

通常报纸上的文章在文本的首行都会以粗印体而且全部大写地展示。CSS1包括了这个功能,将其作为一个伪元素。首行伪元素可以用于任何块级元素(例如P、H1等)。以下是一个首行伪元素的例子:

◆首个字母伪元素

首个字母伪元素用于产生加大(dropcaps)和其他效果。含有已指定值选择符的文本的首个字母会按照指定的值展示。一个首个字母伪元素可以用于任何块级元素。例如:

则段落中首字母会比普通字体加大3倍。

免责声明:以上内容源自网络,版权归原作者所有,如有侵犯您的原创版权请告知,我们将尽快删除相关内容。

我要反馈