CSS3+DIV网页样式与布局案例课堂(第2版)
上QQ阅读APP看书,第一时间看更新

3.1 CSS基本语法

在网页中加入CSS样式的目的是将网页内容代码与网页格式风格代码分离开来,从而使网页设计者可以对网页的布局进行更多的控制。

3.1.1 CSS构造规则

CSS样式表由若干条样式规则组成,这些样式规则可以应用到不同的元素或文档来定义它们显示的外观。每一条样式规则由三部分构成:选择符(selector)、属性(property)和属性值(value),基本格式如下。

selector{property: value}

(1)selector可以采用多种形式,可以为文档中的HTML标记,例如<body>、<table>、<p>等,也可以是XML文档中的标记。

(2)property则是选择符指定的标记所包含的属性。

(3)value指定了属性的值。如果定义选择符的多个属性,则属性和属性值为一组,组与组之间用分号(;)隔开。基本格式如下。

selector{property1: value1; property2: value2;… }

下面就给出一条样式规则,如下所示。

p{color:red}

该样式规则的选择符为p,为段落标记<p>提供样式,color为指定文字颜色属性,red为属性值。此样式表示标记<p>指定的段落文字为红色。

如果要为段落设置多种样式,则可以使用下列语句。

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;}