3.1 CSS基本语法 在网页中加入CSS样式的目的是将网页内容代码与网页格式风格代码分离开来,从而使网页设计者可以对网页的布局进行更多的控制。 3.1.1 CSS构造规则 CSS样式表由若干条样式规则组成,这些样式规则可以应用到不同的元素或文档来定义它们显示的外观。每一条样式规则由三部分构成:选择符(selector)、属性(property)和属性值(value),基本格式如下。 selector{property: value} (1)selector可以采用多种形式,可以为文档中的HTML标记,例如、、

等,也可以是XML文档中的标记。 (2)property则是选择符指定的标记所包含的属性。 (3)value指定了属性的值。如果定义选择符的多个属性,则属性和属性值为一组,组与组之间用分号(;)隔开。基本格式如下。 selector{property1: value1; property2: value2;… } 下面就给出一条样式规则,如下所示。 p{color:red} 该样式规则的选择符为p,为段落标记

提供样式,color为指定文字颜色属性,red为属性值。此样式表示标记

指定的段落文字为红色。 如果要为段落设置多种样式,则可以使用下列语句。 p{font-family:"隶书"; color:red; font-size:40px; font-weight:bold} 3.1.2 CSS的注释 CSS注释可以帮助用户对自己写的CSS文件进行说明,如说明某段CSS代码所作用的地方、功能、样式等,以便后期维护一看即懂,同时在团队开发网页的时候,合理适当地注释有利于团队看懂CSS样式是对应HTML哪里的,以便顺利快速地开发DIV CSS网页。 CSS的注释样式如下。 ./* body定义 */ .body{ text-align:center; margin:0 auto;} /* 头部css定义 */ .#header{ width:960px; height:120px;} 3.2 CSS的常用选择器 选择器(selector)也被称为选择符,所有HTML中的标记都是通过不同的CSS3选择器进行控制的。选择器不只是HTML文档中的元素标记,它还可以是类、ID或是元素的某种状态。根据CSS选择符的用途可以把选择器分为标签选择器、类选择器、ID选择器、全局选择器和伪类选择器等。 3.2.1 案例1——标签选择器 HTML文档由多个不同标记组成,而CSS3选择器就是声明哪些标记采用样式。例如p选择器,就是用于声明页面中所有

标记的样式风格。同样也可以通过h1选择器来声明页面中所有

标记的CSS风格。 标签选择器最基本的形式如下所示: tagName{property:value} 其中tagName表示标记名称,例如p、h1等HTML标记;property表示CSS3属性;value表示CSS3属性值。 【例3.1】(案例文件:ch03\3.1.html) 标签选择器

枯藤老树昏鸦,小桥流水人家,古道西风瘦马。夕阳西下,断肠人在天涯。

在IE 11.0浏览器中浏览效果如图3-1所示,可以看到段落以蓝色字体显示,大小为20px。 如果在后期维护中需要调整段落颜色,只需要修改color属性值即可。 CSS3语言对于所有属性和值都有严格要求,如果声明的属性在CSS3规范中没有,或者某个属性值不符合属性要求,都不能使CSS语句生效。 3.2.2 案例2——类选择器 在一个页面中,使用标签选择器,会控制该页面中所有此标记显示样式。如果需要为此类标记中其中一个标记重新设定,此时仅使用标签选择器是不能达到效果的,还需要使用类(class)选择器。 类选择器用来为一系列标记定义相同的呈现方式,常用语法格式如下: .classValue {property:value} classValue是选择器的名称,具体名称由CSS制定者自己命名。 【例3.2】(案例文件:ch03\3.2.html) 类选择器

学习类选择器

此处使用类选择器aa控制段落样式

此处使用类选择器bb控制段落样式

在IE 11.0浏览器中浏览效果如图3-2所示,可以看到第一个段落以蓝色字体显示,大小为20px,第二段落以红色字体显示,大小为22px,标题同样以红色字体显示,大小为22px。