文档介绍：网页项目训练Web标准与CSS布局概述
教学要求
(1) 了解什么是Web标准及其构成和发展。
(2) 了解CSS语法结构。
第一章 Web标准与CSS布局概述
教学重难点
(1) Web标准
(2) CSS语法结构
,menu
：a
：img,embed,bgsound
：table,td,tr,th,caption
：form,input,textarea,select
：div
从HTML转向XHTML
(1) Xhtml中的dtd
过渡型：Transitional
严格型：Strict
框架型：Frameset
从HTML转向XHTML
(2) 需要为<html>标签添加一个命名空间
(3)所有的标签和标签的属性都必须小写，属性值可以大写
(4)属性值必须用双引号括起来
(5)所有的标签都必须关闭，空标签也需要关闭
(6)不允许属性简写
(7)如果使用的文档类型是严格型，则在xhtml文档中许多定义外观的属性是不允许使用。
CSS的语法结构
CSS属性与选择符
CSS的语法结构仅仅由3部分组成：选择符、属性和值。
例如：body { margin-top:20px; }
body为选择符，margin-top是属性，20px是值。
CSS的语法结构
ID和Class选择符
ID选择符用#标识，在网页中每个ID只可用1次。
例如：<div id=“Nelson”>呵呵</div>
则CSS中要求如下书写：
#Nelson {width:200px;color:red;}
CSS的语法结构
ID和Class选择符
，在网页中每个Class只可用多次。
例如：<div class=“Nelson”>呵呵</div>
则CSS中要求如下书写：
.Nelson {width:200px;color:red;}
CSS的语法结构
类型选择符
类型选择符是指将已有的网页标签类型来作为名称的选择符。
例如： body { margin-top:20px; }
CSS的语法结构
群组选择符
群组选择符是指将一组对象进行相同样式的定义。
例如： body,div,span { margin-top:20px; }
※注意：这里body和div中间用的是小逗号
CSS的语法结构
包含选择符
包含选择符是指将某一对象中的子对象进行单独的样式定义。
例如： .Nelson li { margin-top:20px; }
※注意：这里Nelson和li中间用的是空格
应用如下：
<div class=“Nelson”>
<li>哇哈哈，OTZ</li>
</div>
CSS的语法结构
组合选择符
例如： .Nelson li,#nie li { margin-top:20px; }
那么在class为Nelson和id为nie样式下的li标签的margin-top属性都为20px了。
CSS的语法结构
标签指定选择符
如果享用id或class，也想同时使用标签选择符。可以按如下格式：
例如： p#nie { margin-top:20px; }
那么id为nie样式下的p标签的margin-top属性都为20px了。
例如： { margin-top:20px; }
那么class为nie样式下的p标签的margin-top属性都为20px了。
CSS的语法结构
伪类及伪对象
伪类及伪对象是一种特殊的类和对象。它由CSS自动支持，属于CSS的一种扩展类型和元素，名称不能被用户自定义，使用时只能按标准格式进行应用。
例如： a:hover { color:green; }
那么鼠标移动到超链接上，链接文字就编程绿色了。
CSS的语法结构
通配选择符
通配符是指用字符代替不确定的字，如在DOS中，用*.*表示所有文件。因此CSS的通配符选择用*作为关键字。
例如： * { font-size:12px; }
那么网页中所有没自定义的文本信息的字体大小默认为12像素。
应用CSS到网页中
外联样式表
<link rel=“stylesheet” rev=“stylesheet” href=“” type=“text/css”>
内嵌样式表
<style type=“text/css”>
body {margin-top:20px;}
</style>
<div style=“border:1px”></div>
CSS布局和table布局的区别