别具光芒：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　颜色　75

5.1.1　颜色关键字　75

5.1.2　RGB颜色　75

5.1.3　关键字transparent　77

5.1.4　网页安全色(Web-safe Colors)　77

5.2　整数值和实数值　78

5.3　长度　78

5.3.1　格式　78

5.3.2　长度单位　78

5.3.3　应用　80

5.4　百分比　80

5.5　关键字　81

5.6　字符串　81

5.7　URL+URN=URI　81

5.8　其他值　82

5.8.1　记数器　82

5.8.2　角度　82

5.8.3　时间　83

5.8.4　频率　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　元素的背景　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-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