DIV+CSS网页已经成为了新一代网站制作的流行做法。
1、何谓Web标准
Web标准其实已经不算新词语了，在Web业界已经成为了一种网页制作的非强制性规范。不过，对于初学者而言，Web标准并不是一项具体的技术，而是影响深远的技术标准集。
理解Web标准的基本组成和内涵
Web标准是很多网站表现层技术标准的集合，由著名的W3C组织制定。所谓表现层技术，即网页前台技术，包括HTML,XHTML,CSS,XML,JavaScript等，有了统一的标准，才能保证技术的稳定发展，使得网页表现层技术能在任何设备上正常浏览。
Web标准大体可以分为3大块技术集-结构、表现和行为
- 结构：即用于网站数据的分类及集合，包含在结构部分的技术有HTML,XHTML和XML。传统的网页基本都用HTML制作。XML是一种可扩展的语言，主要用于数据信息的描述，拥有非常好的扩展性，由于XML还不适合传统网页的制作，所以XML目前多用于各种程序之间的数据转换工具，而XHTML是在HTML的基础上，以XML规范进行升级的，作为今后向XML过渡的网页制作语言。
- 表现：即信息在浏览器上显示上的控制，主要有CSS和XSL等，CSS用于描述HTML及XHTML页面的整体布局设计，并负责各子元素的显示控制，XSL用于XML文档的显示表现描述，当前使用较少。
- 行为：用于用户对网页文档进行交互操作的技术，其相关技术为DOM和ECMAScript脚本语言。DOM，即文档对象模型，使制作者更方便地访问页面的数据、表现层对象等。ECMAScript是由CMA组织制定的标准脚本语言，主要为JavaScript技术。
符合Web标准的页面尽量将Web内容的结构、表现和行为相分离，也可看作表现与内容分离，这样有如下好处：
（1）代码可读性高，代码维护复杂度低。依据Web标准编写的网页由于内容部分和表现部分分离，其结构非常清晰，便于修改和维护。
（2）网页数据移植更简单，跨平台更方便，由于未来的设备都将遵循Web标准，网页的移植将十分顺畅，只需要做少量更改，在不同系统平台符合Web标准的页面将得到全面兼容，即任何设备均可浏览。
（3）加快浏览速度，提示浏览体验。由于代码重用性高，所以符合Web标准的页面文件比传统网页尺寸要小很多，浏览器解析速度也快，用于浏览体验必将提升。
（4）可扩展性强，正因为符合Web标准编写的网页内容部分和表现部分相分离，所以改版、升级网页将非常简单。
2、XHTML和CSS
XHTML与CSS实现样式与结构分离。
由于HTML结构混乱，条理不清晰，样式和结构没有分离，所以符合Web标准的网页结构推荐使用XHTML。XHTML是HTML的升级版本，其侧重点在于对网页的结构设计，其语法严谨，有语义，而页面样式部分（表现部分）由ＣＳＳ负责。
有“XHTML+CSS”制作网页通常符合Web标准的内容与表现分离，“XHTML+CSS”常被外界称为"DIV+CSS" ，实际上是不严谨的，CSS中文名称为“重叠样式表”，习惯上叫样式表。
XHTML和HTML差别并不大，不过标签编写更严格，更富有语义，在代码方面，HTML文化的声明代码为，所有的HTML元素包含其中，而XHTML相应的声明代码如下：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
3、CSS基本模式
由于CSS在布局、样式控制方面有着巨大优势，所以CSS成了美化页面的最佳利器。
CSS的声明方法 声明CSS通常有3种方法,可以混合使用：
（1）行间样式表，行间样式表指CSS编写在XHTML标签的Style属性中，具体编写格式如下：
<p style="width:200px;height:300px;">信息内容</p>
这种方式比较灵活，只在少数特定场合适合使用，行间样式表使用XHTML标签的style属性描述CSS代码，使用分号隔开不同属性值的代码片段，不过这样的CSS声明方式使样式和结构混杂在一起，类似HTML的编写方式，即页面内容与表现没有分离，因此非特定情况下，不推荐行间样式表 （2）内部样式表，即把CSS代码集中编写在头部信息的标签内，很好地做到了样式与内容的分离，所以内部样式表是使用最广泛的CSS声明方法，其编写格式如下：
<style type=text/css>
p{width:200px;
height:300px;
}
</style>
（3）外部样式表，即把CSS代码编写在一个css文档（扩展名为css的文本文件中），通过网页进行调用。这种方式在大型网站比较多见，因为多个网页可以调用同一个css文档，极大的提高了代码的可重用性。网站多个网页的全局CSS代码一般采用外部样式表，既减少了重复代码的编写，也提高了页面载入速度，其编写方法如下：
p{width:200px;
height:300px;
}
把以上代码保存到index.css的css文档中（扩展名为css的文本文件），并把index.css放置到需要调用的网页文件的同级目录，并在该网页文件的间加入单标签, 其属性设置如下：
<link rel="stylesheet" rev="stylesheeet" href="index.css" type="text/css"/>
CSS的媒介控制
css有一个特性是对媒介的控制，可设置不同的媒介表现方式，这些媒介有显示屏幕、纸面（印刷），盲文设备，语音合成器等。 安装特殊要求编写一份css文档，例如，设置纸面媒介，编写CSS代码到print.css，放置在网页文件的同级目录中，在网页文件间加入单标签，其属性设置如下：
<link rel="stylesheet" type="text/css" media="print" href="print.css">
这份在print.css样式文档只在网页打印到纸张的时候才生效，而在默认情况下使用显示屏幕媒介的css样式，如果一定要显示屏幕媒介的类型，安装显示屏幕的要求编写一份css文档，保存到index.css，放置在网页文件的同级目录下，在网页文件的间加入单标签，其属性设置如下：
<link rel="stylesheet" type="text/css" media="screen" href="index.css">
CSS通过接口作用于XHTML元素
既然CSS是用于控制XHTML元素的样式，CSS必然通过一个接口才能和XHTML元素建立联系，最常用的接口是XHTML标签的属性class和id，CSS可控制接口所对应对象的样式。class与span标签配合使用。
<style type="text/css">
#hello{background-color:#ccccc;
width:400px;
height:80px;
}
.reader{font-weight:bold;
color:#ff0000;
}
</style>
<div id="hello"><span class="reader">读者</span>，你好！</div>
CSS语法核心包含3大要素——选择符、属性和值
（1）选择符，选择符指css这段代码所控制的对象，如id和css；还可以是XHTML标签，如p,body等。
（2）属性，属性则是css所控制对象的各项样式属性，类型非常多，例如：文本颜色，对齐，宽度，高度等。
（3）值，值即为属性所对应的量化或描述设置，不同的属性有不同的值，例如font-size为12px,14px,16px等。
css 代码的实质就是由选择符、属性和值得代码段组成的。
CSS的各种选择符详解
CSS选择符有5种，分别是标签选择符，id选择符，class选择符，伪类及伪对象选择符，通配选择符。
（1）标签选择符，即使用XHTML中已有的标签作为选择符，例如
p{width:250px;}
h1{color:#ff0000;}
（2）id选择符，即前面的例子里的。id名称可以自定义，但不能以数字开头，css代码中id名称前面须加上'#'符号。例：
#hello{color:#ff0000;}
（3）class选择符，class选择符也在前面的例子中使用过，可以自定义名称，不能以数字开头，例：
.reader{color:#ff0000;}
（4）伪类及伪对象选择符，伪类及伪对象选择符是一组CSS预定义好的类和对象，不需要进行id和class属性的声明。以超级链接为例：
a:visited{color:#ff0000;}
以上代码代表超链接被访问过后，其样式被设置成红色文本，伪类及伪对象选择符编写方式如下：
选择符：伪类
选择符：伪对象
（5）通配选择符，在DOS操作系统中有一个通配符，如.代表任何文件、*.mp3代表所有的mp3格式文件，CSS中也有用用星号""，代表所有对象，其代码如下：
*{margin:0px}
选择符之间可以相互组合。
477
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
