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的升级版本,其侧重点在于对网页的结构设计,其语法严谨,有语义,而页面样式部分(表现部分)由CSS负责。
有“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}
选择符之间可以相互组合。