XHTML的编写习惯
-
使用id代替name
-
属性名必须小写
-
属性值必须使用双引号
-
必须使用结束标签
如果页面中出现开始标签,就必须出现结束标签。例如:
<div></div>
<p></p>
若使用单体标签,则必须使用正斜线作为结束。例如:
<img src=" " />
<br />
CSS基本语法结构
Selector {Property:Value;····}
即:选择符{属性:值;}
每条声明(declaration)由一个属性和一个值组成。
选择符
又称选择器,用于告诉浏览器,这段样式将应用到哪个对象。
分类:
id及class选择符
(1)在CSS样式中,id选择符使用#符号进行标记。将在页面中只出现一次的元素用id进行命名具有唯一性指派的含义。例:
在XHTML中:
在CSS中:<div id="content"></div>
#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中:
在CSS中:<h1>这是我们的一段文本<span>这是span内的文本</span></h1> <h1>单独的h1</h1> <span>单独的span</span> <h2>被h2标签套用的文本</span>这是h2下的span</span></h2>
效果:只有“这是span内的文本”这句话的字体被加粗。即说明包含选择符保证了只对有此结构的标签有效,对单独的前标签与后标签,或者其他标签下属的后标签均不会应用到此样式。h1 span{ font-weight:bold; }
优点在于,避免过多的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通配符使用*作为关键字。例如:
*号表示所有对象,包含所有id及class的XHTML标签。使用如上选择符进行样式定义时,页面中的所有对象都会应用color:blue;来设置字体颜色。*{ color:blue; }