XHTML与CSS一些基本语法与编写习惯

XHTML的编写习惯

1. 使用id代替name

2. 属性名必须小写

3. 属性值必须使用双引号

4. 必须使用结束标签

如果页面中出现开始标签，就必须出现结束标签。例如：

<div></div>

<p></p>

若使用单体标签，则必须使用正斜线作为结束。例如：

<img src=" " />

<br />

CSS基本语法结构

Selector {Property：Value；····}

即：选择符{属性：值；}

每条声明（declaration）由一个属性和一个值组成。

选择符

又称选择器，用于告诉浏览器，这段样式将应用到哪个对象。

分类：

• id及class选择符

（1）在CSS样式中，id选择符使用#符号进行标记。将在页面中只出现一次的元素用id进行命名具有唯一性指派的含义。例：

在XHTML中：

<div id="content"></div>

在CSS中：

#content{font-size:14px;line-height:130%;}

（2）class在CSS中使用点符号加上class名称的形式进行定义。

使用class的好处是，对于不同的XHTML标签，CSS可以直接根据class名臣来进行样式指派。例如：

在XHTML中：

<div class="p1"></div><h1 class="p1"></h1><h3 class="p1"></h3>

在CSS中：

.p1{margin:10px;background-color:blue;}

• 类型选择符

指以网页中已有的标签名做名称的选择符，保证了样式编码能够针对页面中所有与选择符同名的标签。例如：

在CSS中：

body{}div{}span{}

• 群组选择符

指同时对多个对象进行指派。使用逗号对不同的选择符进行分隔，使所有被列出来的对象都进行相同的指派。

好处在于，要在网页中多处运用的样式只需要在CSS中写一次即可。

• 包含选择符

指选择符为一个组合，可以二级包含也可以多级包含。

其中的前一个对象包含了后一个对象，对象之间使用空格作为分隔。样式指派最后被应用于包含在之前所有对象下的最后一个对象中。例如：

在XHTML中：

<h1>这是我们的一段文本<span>这是span内的文本</span></h1><h1>单独的h1</h1><span>单独的span</span><h2>被h2标签套用的文本</span>这是h2下的span</span></h2>

在CSS中：

h1 span{font-weight:bold;}

效果：只有“这是span内的文本”这句话的字体被加粗。即说明包含选择符保证了只对有此结构的标签有效，对单独的前标签与后标签，或者其他标签下属的后标签均不会应用到此样式。

优点在于，避免过多的id及class设置，可以直接对所需要的元素进行设置。

缺点在于，多级包含时代码不够清晰，可读性不高。

• 标签指定式选择符

指同时使用id（或class）与标签选择符作为一个选择符。

注意：使用id/class时#与点符号不可缺少。

在对标签选择的精确度上介于标签选择符与id/class选择符之间。例如：

在CSS中:

h1#content{}

表示针对id为content的h1标签进行指派。

分析：其表达效果与

#content{}

是一样的，不过加h1的话，搜索时的范围得到了缩小，语义化的效果更好。

在CSS中：

h1.p1{}

表示针对所有class为p1的h1标签进行定义

• 组合选择符

对上述所有的选择符，均可以进行组合使用。

注意分析不同选择符本身的选择对象与组合在一起后的选择对象。例如：

h1 .p1{}

表示h1标签下所有class为p1的标签。

#content h1{}

表示id为content的标签下的所有h1标签。

h1 .p1,#content h1{}

对以上二者进行群组选择。

• 伪类和伪对象

接触到的大部分伪类及为对象都是有关排版与样式方面的。

CSS对样式及其中对象的逻辑关系、对象组织提供了很多便利的接口。

• 通配选择符

通配是指使用字符来替代不确定的内容。

CSS通配符使用*作为关键字。例如：

*{color：blue；}

*号表示所有对象，包含所有id及class的XHTML标签。使用如上选择符进行样式定义时，页面中的所有对象都会应用color：blue；来设置字体颜色。