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。