第1章-利用CSS设计页面排版.pptVIP

;工程一：利用CSS设计页面排版;;1.土的固体颗粒CSS的概念;2.CSS根本语法;声明又包括属性〔prperty〕和属性值〔value〕。在每个声明之后要用分号表示一个声明的结束。其中，在样式的最后一条声明中可以省略分号。但建议使用分号结束声明。根本语法如下。

Selector{Propery:value;}

例如：

body{padding:0px;};上面的样式定义了body元素的两个属性，即设置页面字体大小和颜色，如图1-7所示。

;一个或多个样式就构成了一个样式表，如一个样式表文件所包含的所有样式就可以称为一个样式表，即上部样式表，一个style标签包含的所有样式也可以称一个样式表，即内部样式表。

一个网页文档中可以定义或者绑定多个样式表，上部样式表和内部样式表可以同时存在于一个网页文档中，它们之间通过一定的优先级作用于匹配对象。

;其中，body是选择器，表示元素本身，即body标签；padding是属性，表示补白〔也称内边距〕，0px表示属性值。这条件样式所呈现的效果是去除页面与浏览器边框之间的距离，实现页面与浏览器边框无缝显示。一个样式不是仅可以包含一个声明，而是可以包含无限个声明。声明之间使用分号隔开，例如：

body{

font:14px;

color:#000;

};body{

color:#000;

background:#fff;

margin:0;

padding:0;

font-family:Georgia,Palatino,serif;

}

;每一条css样式定义由两局部组成，形式如下：

[code]选择器{样式}[/code]

在{}之前的局部就是“选择器”。“选择器”指明了{}中的“样式”的作用对象，也就是“样式”作用于网页中的哪些元素。

CSS包括的选择器分别有标签选择器、ID选择器、类型选择器、伪类选择器、后类选择器、子选择器、通用选择器、相邻选择器及属性选择器。;标签选择器

一个完整的HTML页面是有很多不同的标签组成，而标签选择器，那么是决定哪些标签。采用相应的CSS样式，在style.css文件中对p标签样式的声明如下：

p{

font-size:12px;

background:#900;

color:090;

}

;复制代码那么页面中所有p标签的背景都是#900(红色)，文字大小均是12px，颜色为#090(绿色)，这在后期维护中，如果想改变整个网站中p标签背景的颜色，只需要修改background属性就可以。

CSSID选择器

ID选择器使用“#”前缀标识符进行标识，后面紧跟着指定元素的ID名称。语法如下：

*#intro{font-weight:bold;}

与类选择器一样，ID选择器中可以忽略通配选择器。前面的例子也可以写作：

#intro{font-weight:bold;}

这个选择器的效果将是一样的。;第二个区别是ID选择器不引用class属性的值，毫无疑问，它要引用id属性中的值。

以下是一个实际ID选择器的例子：

pid=introThisisaparagraphofintroduction./p

类选择器

类选择器允许以一种独立于文档元素的方式来指定样式。使用以下语法向这些归类的元素应用样式，即类名前有一个点号〔.〕，然后结合通配选择器：

*.important{color:red;}

如果用户只想选择所有类名相同的元素，可以在类选择器中忽略通配选择器，这没有任何不好的影响：

.important{color:red;};该选择器可以单独使用，也可以与其他元素结合使用。要应用样式而不考虑具体设计的元素，最常用的方法就是使用类选择器。

在使用类选择器之前，需要修改具体的文档标记，以便类选择器正常工作。

为了将类选择器的样式与元素关联，必须将class指定为一个适当的值。请看下面的HTML代码：

h1class=important

Thisheadingisveryimportant.

/h1

pclass=important

Thisparagraphisveryimportant.

/p

;在上面的代码中，两个元素的class都指定为important：第一个标题〔h1元素〕，第二个段落〔p元素〕。

伪类选择器

伪类选择器包括伪类选择器和伪类对象选择器，以冒号〔:〕作为前缀，冒号后紧跟伪类或伪对象名称，冒号前后没有空格，否那么将解析为包含选择器。伪类的语法如下：

selector:pseudo-class{property:value}

CSS类也可与伪类搭配使用。

selector.class