1、传统HTML设计网页版面的缺点
使用传统HTML控制标记来设计网页，在先天上就无法与排版样本来做比较，因为HTML并非完全着眼在网页排版的功能上，而这对XHTML而言更是如此，因为XHTML有意将原先HTML中有关网页版面的标记或属性遗弃不用，如<font>，<center>，color，background，bgcolor等等，所以对XHTML文件而言，其排版与显示的功能比HTML文件更弱，所以使用XHTML来设计网页更需要搭配CSS（Cascading Style Sheets，层叠式样式表）排版样本。
2、CSS的特点
HTML排版时的缺点：设置麻烦，修改麻烦，功能严重不足。
CSS样式排版的优点：排版属性功能完整，排版文件可以独立存在，可以共用排版文件。
CSS样式排版的分类：行内排版样式，内嵌式排版样式和链接式排版样式。
3、CSS的排版样式
（1）行内排版样式
格式：<标记名称 style=”属性 1:属性值1;属性 2:属性值2”>…</标记名称>
例：<p style=”font-size:20pt;color:red;text-align:center”>段落文字</p>
排版专用标记：<div>与<span>
<div></div>是块级元素，<span> </span>是行内元素。
（2）内嵌式排版样式
内嵌式排版中所有的样式定义都必须在<style>...</style>之间，而<style>...</style>又必须在<head>...</head>之间。
内嵌式排版样式可以分为三种：1）标记定义型；2）class 定义型；3）id 定义型。
1）标记定义型格式：
<head>
<style type=”text/css”>
标记名称{属性1:属性值1;属性2:属性值2;}
标记名称{属性1:属性值1;属性2:属性值2;}
</style>
</head>
<body>
<标记名称>…</标记名称>
</body>
2）class 定义型格式：
<head>
<style type=”text/css”>
.定义名称{属性1:属性值1;属性2:属性值 2;}
.定义名称1,.定义名称 2{属性1:属性值1;属性2:属性值 2;}
</style>
</head>
<body>
<标记名称 class=”定义名称”>…</标记名称>
</body>
3）id 定义型格式：
<head>
<style>
#定义名称{属性1:属性值1;属性2:属性值2;}
#定义名称 1,#定义名称 2{属性1:属性值1;属性2:属性值 2;}
</style>
</head>
<body>
<标记名称 id=”定义名称”>…</标记名称>
</body>
行内排版样式和内嵌式排版样式的优先级：CSS规定，范围越小，优先级越高。
按照优先级由小到大排列：标记定义型 < class定义型 < id定义型 < 行内排版样式。
（3）外部排版样式
独立的样式排版格式：
标记名称{属性1:属性值 1;属性2:属性值2;}
.定义名称{属性 1:属性值1;属性 2:属性值 2;}
在<head>…</head>之间使用<link>格式：
<head>
<link rel=”stylesheet” type=”text/css” href=URL />
</head>
在<head>…</head>之间使用import格式：
<head>
<style type="text/css">
@import "style.css"
</style>
</head>
4、 CSS 中的长度与颜色
| 长度单位 | 说明 |
|---|---|
| in | 英寸 |
| cm | 厘米 |
| mm | 毫米 |
| ex | 以小写字母高度为单位（大部分不支持） |
| pt | 磅，1pt=72英寸 |
| pc | 派卡，1pc=12pt |
| px | 像素（推荐使用） |
| 颜色名称 | 十六进制表示 | 三原色单位 |
|---|---|---|
| color:red | color:#FF0000 | rgb(255,0,0) |
| color:green | color:#00FF00 | rgb(0,255,0) |
| color:blue | color:#0000FF | rgb(0,0,255) |
| color:black | color:#000000 | rgb(0,0,0) |
| color:white | color:#FFFFFF | rgb(255,255,255) |
| color:brown | color:#A52A2A | rgb(165,42,42) |
| color:chocolate | color:#D2691E | rgb(210,105,30) |
| color:cyan | color:#00FFFF | rgb(0,255,255) |
| color:darkblue | color:#00008B | rgb(0,0,139) |
| color:darkgray | color:#A9A9A9 | rgb(169,169,169) |
| color:darkred | color:#8B0000 | rgb(139,0,0) |
| color:firebrick | color:#B22222 | rgb(178,34,34) |
| color:gold | color:#FFD700 | rgb(255,215,0) |
| color:gray | color:#808080 | rgb(128,128,128) |
| color:lightblue | color:#ADD8E6 | rgb(173,216,230) |
| color:maroon | color:#800000 | rgb(128,0,0) |
| color:olive | color:#808000 | rgb(128,128,0) |
| color:orange | color:#FFA500 | rgb(255,165,0) |
| color:pink | color:#FFC0CB | rgb(255,192,203) |
| color:purple | color:#800080 | rgb(128,0,128) |
| color:silver | color:#C0C0C0 | rgb(192,192,192) |
| color:skyblue | color:#87CEEB | rgb(135,206,235) |
| color:snow | color:#FFFAFA | rgb(255,250,250) |
| color:tomato | color:#FF6347 | rgb(255,99,71) |
| color:wheat | color:#F5DEB3 | rgb(245,222,179) |
| color:yellow | color:#FFFF00 | rgb(255,255,0) |
5、 CSS 中的文字属性
| 属性名称 | 属性值 | 说明 |
|---|---|---|
| font-style | normal | 正常显示 |
| font-style | italic | 斜体 |
| font-variant | normal | 正常显示 |
| font-variant | small-caps | 将英文大小写字母调为同宽 |
| font-weight | normal | 正常显示 |
| font-weight | bold | 粗体 |
| font-size | 像素 | 字体大小 |
| font-size | 百分比 | 字体大小 |
| font-family | 字体名称 | 设置字体名称 |
font属性简化的使用方法：font:是否斜体 是否同宽 是否粗体 大小 字体名称;
例如：font:italic bold 200 隶书;
6、CSS中的文本属性
| 属性名称 | 属性值 | 说明 |
|---|---|---|
| color | 十六进制 | 颜色 |
| color | 英文名称 | 颜色 |
| color | 三原色单位 | 颜色 |
| letter-spacing | normal | 正常显示 |
| letter-spacing | 长度 | 文本间隔 |
| word-spacing | normal | 正常显示 |
| word-spacing | 数字 | 单词间距 |
| white-space | normal | 文本自动处理换行 |
| white-space | pre | 格式化显示文本 |
| white-space | nowrap | 强制在同一行显示 |
| text-align | left | 文字靠左 |
| text-align | right | 文字靠右 |
| text-align | center | 文字靠中 |
| text-decoration | none | 正常显示 |
| text-decoration | underline | 加下划线 |
| text-decoration | overline | 加顶线 |
| text-decoration | line-through | 加删除线 |
| text-indent | 长度 | 首行缩进 |
| text-indent | 百分比 | 首行缩进 |
| line-height | 像素 | 行高 |
| line-height | 数字/百分比 | 行高 |
| text-transform | none | 正常显示，可以包含大小写字符 |
| text-transform | capitalize | 字符串第一个字符大写 |
| text-transform | uppercase | 转换为大写字符 |
| text-transform | lowercase | 转换为小写字符 |
| vertical-align | sub | 设置文字为下标 |
| vertical-align | super | 设置文字为上标 |
| vertical-align | top | 文字向上端靠齐 |
| vertical-align | middle | 设置文字是在中线位置 |
| vertical-align | bottom | 文字往下端靠齐 |
7、CSS 中背景的使用
| 属性名称 | 属性值 | 说明 |
|---|---|---|
| background-attachment | scroll | 设置背景图像会随视窗滚动条的移动而移动 |
| background-attachment | fixed | 设置背景图像不会随视窗滚动条的移动而移动 |
| background-color | 十六进制 | background-color:#ff0000; |
| background-color | 英文名称 | background-color:red; |
| background-color | 三原色 | background-color:rgb(255,0,0); |
| background-color | transparent | background-color:transparent; 透明 |
| background-image | URL | background-image:url(“bg.jpg”); 背景图片 |
| background-image | none | 不设置背景图片 |
| background-position | top left | 设置背景图案出现在上左方 |
| background-position | top center | 设置背景图案出现在上方中间 |
| background-position | top right | 设置背景图案出现在上右方 |
| background-position | center left | 设置背景图案出现在中间左方 |
| background-position | center center | 设置背景图案出现在中间 |
| background-position | center right | 设置背景图案出现中间右方 |
| background-position | bottom left | 设置背景图案出现在下左方 |
| background-position | bottom | 设置背景图案出现在正下方 |
| background-position | bottom right | 设置背景图案出现在下右方 |
| background-repeat | repeat | 将背景图案填满整个背景 |
| background-repeat | repeat-x | 将背景图案在水平方向添满 |
| background-repeat | repeat-y | 将背景图案在垂直方向添满 |
| background-repeat | no-repeat | 图案只出现一次 |
背景图案简化方案： background:颜色 背景图片 repeat attachment position;
8、CSS中列表的使用
| 属性名称 | 属性值 | 说明 |
|---|---|---|
| list-style-type | none | 无符号 |
| list-style-type | disc | 实体的小圆点 |
| list-style-type | circle | 空心的小圆点 |
| list-style-type | square | 实心的小方块 |
| list-style-type | decimal | 1,2,3… |
| list-style-type | lower-roman | i,ii,iii… |
| list-style-type | upper-roman | I,II,III… |
| list-style-type | lower-alpha | a,b,c,d,e… |
| list-style-type | upper-alpha | A,B,C,D,E… |
| list-style-position | inside | 清单项目往右移 |
| list-style-position | outside | 清单项目正常显示 |
| list-style-image | URL | list-style-image:url(lmk.gif); |
| list-style-image | none | 不会显示任何图象 |
清单的简化设置：list-style:circle inside url("bullet.gif");
9、CSS 中边框的使用
| 属性名称 | 属性值 | 说明 |
|---|---|---|
| border-color | 十六进制 | 可依序设置上，右，下，左线颜色 |
| border-color | 英文名称 | border-color:red; 四边均为红色 |
| border-color | 三原色 | border-color:red green; 上下为红色，左右为绿色 border-color:red green blue; 上为红色、左右为绿色、下为蓝色 border-color:red green blue yellow; 上右下左分别为红绿蓝黄 |
| border-style | none | 不显示边线 |
| border-style | dotted | 点线 |
| border-style | dashed | 虚线 |
| border-style | solid | 实线 |
| border-style | double | 双线 |
| border-width | 宽度 | border-width:0.2cm 0.3cm 0.4cm 0.5cm; border-width:1 2 3 4; |
简化方案：border:宽度 形态 颜色;
例如：border:1px solid black;
10、 CSS 中边界的使用
（1）padding系列属性
| 属性名称 | 属性值 | 说明 |
|---|---|---|
| padding-bottom | 长度/百分比 | 元件下端边线的空隙 |
| padding-left | 长度/百分比 | 元件左端边线的空隙 |
| padding-right | 长度/百分比 | 元件右端边线的空隙 |
| padding-top | 长度/百分比 | 元件上端边线的空隙 |
简化写法：
padding:10px;
padding:2px 4px;
padding:2px 6px 10px;
padding:1px 2px 3px 4px;
（2）margin系列属性
| 属性名称 | 属性值 | 说明 |
|---|---|---|
| margin-bottom | auto | 自动调整空隙 |
| margin-bottom | 长度/百分比 | 设置下端空隙 |
| margin-left | auto | 自动调整空隙 |
| margin-left | 长度/百分比 | 设置左端空隙 |
| margin-right | auto | 自动调整空隙 |
| margin-right | 长度/百分比 | 设置右端空隙 |
| margin-top | auto | 自动调整空隙 |
| margin-top | 长度/百分比 | 设置上端空隙 |
简化写法：
margin:2px 4px;
margin:2px 6px 10px;
margin:1px 2px 3px 4px;
常用网页顶格设置：margin:0;
