CSS属性、浏览器兼容与网页布局

第1部分　web标准

第1章　web标准概述　2
1.1　web标准概述　3
1.2　表现与结构的分离　3
1.3　易用性　4
1.4　难点所在　5
1.4.1　div+css不等于web标准　5
1.4.2　正确使用xhtml标签　5
1.4.3　表格本身并没有被抛弃　6
1.4.4　善于利用css　6
1.4.5　不要滥用class　6
1.4.6　应对浏览器　6
1.4.7　“通过验证”并不是最终目的　7
1.5　seo简介　7

第2章　结构与xhtml　9
2.1　理解结构与表现　10
2.1.1　内容　10
2.1.2　结构(structure)　11
.2.1.3　表现(presentation)　11
2.1.4　行为(behavior)　12
2.2　从html到xhtml　12
2.2.1　html简史　12
2.2.2　html的缺点　13
2.2.3　从html到xhtml　14
2.3　理解(x)html标签的语义　18
2.3.1　(x)html与浏览器默认样式　18
2.3.2　常用的xhtml标签和属性　19
2.3.3　(x)html各个元素对搜索引擎的权重比例　27
2.4　网站整体制作基本流程　27
2.4.1　总体流程与分工　27
2.4.2　静态页面制作　28

第2部分　层叠样式表css

第3章　css入门　31
3.1　css简介　32
3.1.1　起源　32
3.1.2　神奇的css　32
3.1.3　css与html　33
3.1.4　css与浏览器　34
3.1.5　css 2.1与css　2　34
3.2　css的使用方法　34
3.2.1　行内式样式(iinline style)　35
3.2.2　嵌入式样式表(embedded style sheets)　35
3.2.3　外部样式表(link style sheets)　35
3.2.4　导入式样式表　37
3.2.5　应用　38
3.2.6　维护和组织样式表　38
3.3　基本样式规则　39
3.3.1　基本语法　39
3.3.2　继承与层叠　40
3.3.3　分组　40
3.3.4　注释　41
3.3.5　缩写　41
3.3.6　注意事项　43
3.4　元素类型　43
3.4.1　替换和不可替换元素　44
3.4.2　显示元素　44
3.5　媒体类型　45
3.5.1　指定媒体相关的样式表　45
3.5.2　媒体组　45

第4章　文档结构与选择器　47
4.1　文档结构　48
4.2　css选择器　49
4.2.1　通配选择器(universal selector)　49
4.2.2　类型选择器(type selectors)　49
4.2.3　id选择器(id selectors)　50
4.2.4　类选择器(class selectors)　50
4.2.5　包含选择器(descendant selectors)　51
4.2.7　相邻兄弟选择器(adjacent sibling selectors)　52
4.2.8　属性选择器(attribute selectors)　53
4.3　伪类与伪元素　56
4.3.1　伪类(pseudo-classes)　56
4.3.2　伪元素(pseudo-elements)　59
4.3.3　注意　61
4.4　指定值、计算值和实际值　62
4.5　继承　63
4.5.1　值的继承　62
4.5.2　“inherit”值　63
4.5.3　继承的局限性　63
4.6　层叠　64
4.6.1　层叠的顺序　64
4.6.2　特殊性的计算　65
4.6.3　继承和特殊性　65
4.6.4　重要性　66
4.6.5　非css的表现类内容　66
4.7　css 3新增选择器前瞻　67
4.7.1　更多的属性选择器　67
4.7.2　普通兄弟选择器　68
4.7.3　结构伪类(structural pseudo-classes)　69
4.7.4　ui元素伪类和伪元素　70
4.7.5　其他伪类　70
4.8　命名规范　71
4.9　选择器综合运用　72

第5章　单位和值　74
5.1　颜色[color]　75
5.1.1　颜色关键字　75
5.1.2　rgb颜色　75
5.1.3　关键字transparent　77
5.1.4　网页安全色(web-safe colors)　77
5.2　整数值[integer]和实数值[number]　78
5.3　长度[length]　78
5.3.1　格式　78
5.3.2　长度单位　78
5.3.3　应用　80
5.4　百分比[percentage]　80
5.5　关键字　81
5.6　字符串[string]　81
5.7　url+urn=uri　81
5.8　其他值　82
5.8.1　记数器[counter]　82
5.8.2　角度[angle]　82
5.8.3　时间[time]　83
5.8.4　频率[frequency]　83
5.9　不支持的值的处理　83

第6章　字体　84
6.1.1　语法　85
6.1.2　常用字体系列　85
6.2　字体尺寸：font-size属性　87
6.2.1　语法　87
6.2.2　绝对尺寸　88
6.2.3　相对尺寸　89
6.2.4　百分比和em　89
6.2.5　尺寸的继承与浏览器的显示　90
6.2.6　分辨率与弹性设计　91
6.3　字体磅值：font-weight属性　91
6.3.1　语法　92
6.3.2　继承　92
6.3.3　浏览器显示原理　93
6.4　字体样式：font-style属性　94
6.5　字体变形：font-variant属性　95
6.6　缩写的字体属性：font属性　95
6.6.1　语法　95
6.6.2　注意　96
6.6.3　系统字体　97
6.7　调整与拉伸　98
6.7.1　字体调整：font-size-adjust属性　98
6.7.2　字体伸展：font-stretch属性　99
6.8　字体匹配原理　99
6.8.1　字体的匹配步骤　99
6.8.2　设定字体集的注意事项　100
6.8.3　字体的选择　100
6.8.4　font-face规则　101

第7章　文本　102
7.1　文本水平对齐：text-align属性　103
7.1.1　语法　103
7.1.2　适用于：块级元素　103
7.1.3　继承　104
7.1.4　应用：整体居中　104
7.2　文本缩进：text-indent属性　105
7.2.1　语法　106
7.2.2　正值缩进　106
7.2.3　负值缩进　107
7.2.4　应用：隐藏单行文字　107
7.3　行高：line-height属性　108
7.3.1　语法　108
7.3.2　内容区域、行内框和行框　109
7.3.4　浏览器的差别与错误　111
7.3.5　应用：单行文字在垂直方向居中　112
7.4　垂直对齐：vertical-align属性　112
7.4.1　语法　112
7.4.2　属性值详解　113
7.4.3　奇怪的ie　116
7.4.4　文档类型与纯图片内容的垂直对齐　116
7.4.5　单元格的垂直对齐　118
7.5　单词间隔(word-spacing)和字母间隔(letter-spacing)　119
7.5.1　单词间隔：word-spacing属性　119
7.5.2　字母间隔：letter-spacing属性　120
7.5.3　水平对齐的影响和继承　120
7.6　文本转换：text-transform属性　121
7.7　文本装饰：text-decoration属性　121
7.8　空白：white-space属性　123
7.8.1　语法　123
7.8.2　属性值详解　123
7.8.3　应用：显示不回行文本　124
7.9　文本阴影：text-shadow属性　125
7.10　文字方向direction和编码方式unicode-bidi　126

第8章　框模型　128
8.1框模型(box model)　129
8.2　包含块(containing block)　131
8.2.1　视口(viewport)　131
8.2.2　包含块　131
8.3　宽度：width属性　133
8.3.1　语法　133
8.3.2　行内元素的宽度　134
8.3.3　长度和百分比　135
8.4　最大宽度(max-width)和最小宽度(min-width)　136
8.5　高度：height属性　137
8.5.1　语法　137
8.5.2　行内元素的高度　138
8.6　最大高度(max-height)和最小高度(min-height)　138
8.7　补白：padding属性　140
8.7.1　缩写属性：padding　140
8.7.2　补白、宽度和高度　141
8.7.3　百分比值补白　141
8.8　边框：border属性　142
8.8.1　边框颜色　142
8.8.2　边框宽度　143
8.8.3　边框样式　144
8.8.4　不同方向的边框属性缩写　146
8.8.5　缩写属性border　146
8.8.6　行内元素的边框　147
8.8.7　应用：文字链接的装饰　147
8.9　边距：margin属性　148
8.9.1　水平方向的边距：margin-left属性和margin-right属性　149
8.9.2　垂直方向的边距：margin-top属性和margin-bottom属性　150
8.9.3　百分比值边距　153
8.9.4　负值边距　154
8.9.5　应用：元素水平居中　155
8.10　常规流向中的视觉格式化　156
8.10.1　块级元素的水平格式化　156
8.10.2　应用：宽度自适应的布局　160
8.10.3　块级元素的垂直格式化　161
8.10.4　应用：高度自适应浏览器窗口　163
8.10.5　行内元素的格式化　164

第9章　浮动、定位与视觉格式化模型　167
9.1　视觉格式化模型控制框的生成　168
9.1.1　块框的生成(block box)　168
9.1.2　行内框(inline box)　169
9.1.3　插入框(run-in box)　170
9.2　显示类型：display属性　170
9.2.1　语法　171
9.2.2　应用：显示或隐藏元素　173
9.3　定位　174
9.3.1　选择定位方式：position属性　174
9.3.2　设定框偏移：top、right、bottom、left属性　174
9.3.3　相对定位　176
9.3.4　绝对定位　178
9.3.5　堆叠顺序：z-index属性　191
9.3.6　ie中的position　194
9.3.7　应用：显示提示内容　195
9.4　浮动与清除　197
9.4.1　设定浮动：float属性　197
9.4.2　浮动元素的视觉格式化内容　198
9.4.3　清除浮动：clear属性　204
9.4.4　应用：3行3列布局设计　207
9.6　溢出和剪切　209
9.6.1　溢出：overflow属性　210
9.6.2　剪切：clip属性　212
9.6.3　clip与overflow属性的关系　214
9.7　可视性：visibility属性　215
9.7.1　属性值详解　215
9.7.2　应用：显示及隐藏元素　216

第10章　颜色与背景　217
10.1　颜色基础　218
10.2　前景色：color属性　219
10.2.1　链接　220
10.2.2　边框　221
10.2.3　表单元素　221
10.3　背景　222
10.3.1　背景颜色：background-color属性　222
10.3.2　背景图片：background-image属性　223
10.3.3　背景图片重复：background-repeat属性　224
10.3.4　背景图片附属：background-attachment属性　225
10.3.5　背景图片定位：background-position属性　226
10.3.6　缩写属性：background　230
10.3.7　[html]元素的背景　231
10.4　应用　232
10.4.1　灵活使用背景　232
10.4.2　模拟边框　233
10.4.3　简单的链接背景替换　237
10.4.4　导航菜单的滑动门效果　239

第11章　表格　244
11.1　表格的标签与属性　245
11.1.1　标签概览　245
11.1.2　(x)html属性　248
11.2　css的表格模型　251
11.2.1　表格模型概述　251
11.2.2　display属性　251
11.2.3　匿名表格对象　253
11.2.4　列　253
11.3　表格的视觉格式化　254
11.3.1　匿名框、标题框与表格框　254
11.3.2　标题[caption]的定位：caption-side属性　254
11.3.3　表格内容的视觉布局　255
11.3.4　表格的层和透明性　256
11.3.5　表格宽度算法：table-layout属性　258
11.3.6　表格高度　263
11.3.7　单元格内容的对齐　264
11.4　单元格边框：border-collapse属性　266
11.4.1　分离的边框模型　267
11.4.2　重合的边框模型　269
11.4.3　边框样式　272

第12章　列表和生成的内容　273
12.1　列表　274
12.1.1　列表样式类型：list-style-type属性　274
12.1.2　列表样式图片：list-style-image属性　276
12.1.3　列表样式定位：list-style-position属性　277
12.1.4　列表样式缩写：list-style属性　278
12.1.5　浏览器对列表的表现与样式的继承　278
12.2　生成的内容　280
12.2.1　:before和:after伪元素　281
12.2.2　生成内容：content属性　281
12.2.3　自动记数和编号　285

第13章　用户界面　291
13.1　鼠标指针：cursor属性　292
13.1.1　关键字　292
13.1.2　图片鼠标指针　293
13.2　系统字体和颜色　294
13.2.1　系统字体　294
13.2.2　系统颜色　295
13.3　动态的外廓：outline属性　296
13.3.1　外廓与边框的区别　296
13.3.2　外廓宽度：outline-width属性　297
13.3.3　外廓样式：outline-style属性　297
13.3.4　外廓颜色：outline-color属性　298
13.3.5　缩写：outline属性　298
13.3.6　外廓与焦点　299

第14章　页面媒体　300kv
14.1页面媒体简介　301
14.2　指定媒体类型　301
14.3　页框：page规则　302
14.3.1　页边距　302
14.3.2　页面选择器　303
14.4　分页　304l
14.4.1　元素前后分页：page-break-before和page-break-after属性　304
14.4.2　元素内部分页：page-break-inside属性　306
14.4.3　元素内的分割：orphans和widows属性　306
14.4.4　分页的规则　308
14.5　css 2中的属性　309
14.5.1　页框尺寸：size属性　309
14.5.2　裁切标记：marks属性　310
14.5.3　使用命名的页：page属性　310
14.6　显示器、打印机和投影　310
14.6.1　设备特点　311
14.6.2　设计要点　311

第15章　听觉样式表　313
15.1　听觉(aural)类型与语音(speech)类型　314
15.1.1　链接听觉样式的特点　314
15.1.2　与听觉属性相关的值　314
15.2　音量属性：volume属性　314
15.3　发音：speak属性　315
15.4　暂停：pause-before、pause-after和pause属性　316
15.5　提示：cue-before、cue-after和cue属性　317
15.6　混音：play-during属性　318
15.7　空间：azimuth和elevation属性　318
15.8　语音特征属性　320
15.9　语音：speak-punctuation和speak-numeral属性　323
15.10　叙述表头：speak-header属性　323

第16章　浏览器与hack　325
16.1　浏览器简介　326
16.1.1　浏览器的发展　326
16.1.2　浏览器的解释引擎　326
16.1.3　浏览器的工作模式　327
16.2　windows ie　329
16.2.1　haslayout属性　329
16.2.2　条件注释　338
16.3　常用的css hack　339
16.3.1　css hack原理　339
16.3.2　css hack不是必须的　340
16.3.3　常用的css hack　340
16.4　发现与解决问题　343
16.4.1　排查问题　343
16.4.2　常见的非bug问题　344
16.4.3　windows ie常见bug　347

第3部分　结构化实例

第17章　旅游网站　356
17.1　结构化　357
17.1.1　分析内容结构　357
17.1.2　基本结构　358
17.1.3　页首部分的结构化　359
17.1.4　中间部分的结构化　361
17.1.5　页脚部分的结构化　368
17.2　图片格式与网络基础知识　369
17.2.1　图片格式　369
17.2.2　图片与优化　370
17.3　css美化　371
17.3.1　整体分析　371
17.3.2　header层　377
17.3.3　logo层　378
17.3.4　mainnav层　378
17.3.5　login层　381
17.3.6　controlmenu层　385
17.3.7　main层　394
17.3.8　travels层　395
17.3.9　hot层　399
17.3.10　ad1层　403
17.3.11　photos层　402
17.3.12　forumlist层　404
17.3.13　forumhot层　405
17.3.14　club层　410
17.3.15　vote层和community层　412
17.3.16　footer层　413
17.4　版式与结构　415
17.5　小结　416