別具光芒：CSS屬性、瀏覽器兼容與網(wǎng)頁布局

第1部分　Web標(biāo)準(zhǔn)
第1章　Web標(biāo)準(zhǔn)概述　2
1.1　Web標(biāo)準(zhǔn)概述　3
1.2　表現(xiàn)與結(jié)構(gòu)的分離　3
1.3　易用性　4
1.4　難點(diǎn)所在　5
1.4.1　DIV+CSS不等于Web標(biāo)準(zhǔn)　5
1.4.2　正確使用XHTML標(biāo)簽　5
1.4.3　表格本身并沒有被拋棄　6
1.4.4　善于利用CSS　6
1.4.5　不要濫用class　6
1.4.6　應(yīng)對瀏覽器　6
1.4.7　“通過驗(yàn)證”并不是最終目的　7
1.5　SEO簡介　7
第2章　結(jié)構(gòu)與XHTML　9
2.1　理解結(jié)構(gòu)與表現(xiàn)　10
2.1.1　內(nèi)容　10
2.1.2　結(jié)構(gòu)(Structure)　11
2.1.3　表現(xiàn)(Presentation)　11
2.1.4　行為(Behavior)　12
2.2　從HTML到XHTML　12
2.2.1　HTML簡史　12
2.2.2　HTML的缺點(diǎn)　13
2.2.3　從HTML到XHTML　14
2.3　理解(X)HTML標(biāo)簽的語義　18
2.3.1　(X)HTML與瀏覽器默認(rèn)樣式　18
2.3.2　常用的XHTML標(biāo)簽和屬性　19
2.3.3　(X)HTML各個(gè)元素對搜索引擎的權(quán)重比例　27
2.4　網(wǎng)站整體制作基本流程　27
2.4.1　總體流程與分工　27
2.4.2　靜態(tài)頁面制作　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　行內(nèi)式樣式(Iinline Style)　35
3.2.2　嵌入式樣式表(Embedded Style Sheets)　35
3.2.3　外部樣式表(Link Style Sheets)　35
3.2.4　導(dǎo)入式樣式表　37
3.2.5　應(yīng)用　38
3.2.6　維護(hù)和組織樣式表　38
3.3　基本樣式規(guī)則　39
3.3.1　基本語法　39
3.3.2　繼承與層疊　40
3.3.3　分組　40
3.3.4　注釋　41
3.3.5　縮寫　41
3.3.6　注意事項(xiàng)　43
3.4　元素類型　43
3.4.1　替換和不可替換元素　44
3.4.2　顯示元素　44
3.5　媒體類型　45
3.5.1　指定媒體相關(guān)的樣式表　45
3.5.2　媒體組　45
第4章　文檔結(jié)構(gòu)與選擇器　47
4.1　文檔結(jié)構(gòu)　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　指定值、計(jì)算值和實(shí)際值　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　特殊性的計(jì)算　65
4.6.3　繼承和特殊性　65
4.6.4　重要性　66
4.6.5　非CSS的表現(xiàn)類內(nèi)容　66
4.7　CSS 3新增選擇器前瞻　67
4.7.1　更多的屬性選擇器　67
4.7.2　普通兄弟選擇器　68
4.7.3　結(jié)構(gòu)偽類(Structural Pseudo-Classes)　69
4.7.4　UI元素偽類和偽元素　70
4.7.5　其他偽類　70
4.8　命名規(guī)范　71
4.9　選擇器綜合運(yùn)用　72
第5章　單位和值　74
5.1　顏色　75
5.1.1　顏色關(guān)鍵字　75
5.1.2　RGB顏色　75
5.1.3　關(guān)鍵字transparent　77
5.1.4　網(wǎng)頁安全色(Web-safe Colors)　77
5.2　整數(shù)值和實(shí)數(shù)值　78
5.3　長度　78
5.3.1　格式　78
5.3.2　長度單位　78
5.3.3　應(yīng)用　80
5.4　百分比　80
5.5　關(guān)鍵字　81
5.6　字符串　81
5.7　URL+URN=URI　81
5.8　其他值　82
5.8.1　記數(shù)器　82
5.8.2　角度　82
5.8.3　時(shí)間　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　分辨率與彈性設(shè)計(jì)　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　系統(tǒng)字體　97
6.7　調(diào)整與拉伸　98
6.7.1　字體調(diào)整：font-size-adjust屬性　98
6.7.2　字體伸展：font-stretch屬性　99
6.8　字體匹配原理　99
6.8.1　字體的匹配步驟　99
6.8.2　設(shè)定字體集的注意事項(xiàng)　100
6.8.3　字體的選擇　100
6.8.4　font-face規(guī)則　101
第7章　文本　102
7.1　文本水平對齊：text-align屬性　103
7.1.1　語法　103
7.1.2　適用于：塊級元素　103
7.1.3　繼承　104
7.1.4　應(yīng)用：整體居中　104
7.2　文本縮進(jìn)：text-indent屬性　105
7.2.1　語法　106
7.2.2　正值縮進(jìn)　106
7.2.3　負(fù)值縮進(jìn)　107
7.2.4　應(yīng)用：隱藏單行文字　107
7.3　行高：line-height屬性　108
7.3.1　語法　108
7.3.2　內(nèi)容區(qū)域、行內(nèi)框和行框　109
7.3.4　瀏覽器的差別與錯(cuò)誤　111
7.3.5　應(yīng)用：單行文字在垂直方向居中　112
7.4　垂直對齊：vertical-align屬性　112
7.4.1　語法　112
7.4.2　屬性值詳解　113
7.4.3　奇怪的IE　116
7.4.4　文檔類型與純圖片內(nèi)容的垂直對齊　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　文本轉(zhuǎn)換：text-transform屬性　121
7.7　文本裝飾：text-decoration屬性　121
7.8　空白：white-space屬性　123
7.8.1　語法　123
7.8.2　屬性值詳解　123
7.8.3　應(yīng)用：顯示不回行文本　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　行內(nèi)元素的寬度　134
8.3.3　長度和百分比　135
8.4　最大寬度(max-width)和最小寬度(min-width)　136
8.5　高度：height屬性　137
8.5.1　語法　137
8.5.2　行內(nèi)元素的高度　138
8.6　最大高度(max-height)和最小高度(min-height)　138
8.7　補(bǔ)白：padding屬性　140
8.7.1　縮寫屬性：padding　140
8.7.2　補(bǔ)白、寬度和高度　141
8.7.3　百分比值補(bǔ)白　141
8.8　邊框：border屬性　142
8.8.1　邊框顏色　142
8.8.2　邊框?qū)挾取?43
8.8.3　邊框樣式　144
8.8.4　不同方向的邊框?qū)傩钥s寫　146
8.8.5　縮寫屬性border　146
8.8.6　行內(nèi)元素的邊框　147
8.8.7　應(yīng)用：文字鏈接的裝飾　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　負(fù)值邊距　154
8.9.5　應(yīng)用：元素水平居中　155
8.10　常規(guī)流向中的視覺格式化　156
8.10.1　塊級元素的水平格式化　156
8.10.2　應(yīng)用：寬度自適應(yīng)的布局　160
8.10.3　塊級元素的垂直格式化　161
8.10.4　應(yīng)用：高度自適應(yīng)瀏覽器窗口　163
8.10.5　行內(nèi)元素的格式化　164
第9章　浮動(dòng)、定位與視覺格式化模型　167
9.1　視覺格式化模型控制框的生成　168
9.1.1　塊框的生成(block box)　168
9.1.2　行內(nèi)框(inline box)　169
9.1.3　插入框(run-in box)　170
9.2　顯示類型：display屬性　170
9.2.1　語法　171
9.2.2　應(yīng)用：顯示或隱藏元素　173
9.3　定位　174
9.3.1　選擇定位方式：position屬性　174
9.3.2　設(shè)定框偏移：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　應(yīng)用：顯示提示內(nèi)容　195
9.4　浮動(dòng)與清除　197
9.4.1　設(shè)定浮動(dòng)：float屬性　197
9.4.2　浮動(dòng)元素的視覺格式化內(nèi)容　198
9.4.3　清除浮動(dòng)：clear屬性　204
9.4.4　應(yīng)用：3行3列布局設(shè)計(jì)　207
9.6　溢出和剪切　209
9.6.1　溢出：overflow屬性　210
9.6.2　剪切：clip屬性　212
9.6.3　clip與overflow屬性的關(guān)系　214
9.7　可視性：visibility屬性　215
9.7.1　屬性值詳解　215
9.7.2　應(yīng)用：顯示及隱藏元素　216
第10章　顏色與背景　217
10.1　顏色基礎(chǔ)　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　背景圖片重復(fù)：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　應(yīng)用　232
10.4.1　靈活使用背景　232
10.4.2　模擬邊框　233
10.4.3　簡單的鏈接背景替換　237
10.4.4　導(dǎo)航菜單的滑動(dòng)門效果　239
第11章　表格　244
11.1　表格的標(biāo)簽與屬性　245
11.1.1　標(biāo)簽概覽　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　匿名框、標(biāo)題框與表格框　254
11.3.2　標(biāo)題的定位：caption-side屬性　254
11.3.3　表格內(nèi)容的視覺布局　255
11.3.4　表格的層和透明性　256
11.3.5　表格寬度算法：table-layout屬性　258
11.3.6　表格高度　263
11.3.7　單元格內(nèi)容的對齊　264
11.4　單元格邊框：border-collapse屬性　266
11.4.1　分離的邊框模型　267
11.4.2　重合的邊框模型　269
11.4.3　邊框樣式　272
第12章　列表和生成的內(nèi)容　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　瀏覽器對列表的表現(xiàn)與樣式的繼承　278
12.2　生成的內(nèi)容　280
12.2.1　:before和:after偽元素　281
12.2.2　生成內(nèi)容：content屬性　281
12.2.3　自動(dòng)記數(shù)和編號　285
第13章　用戶界面　291
13.1　鼠標(biāo)指針：cursor屬性　292
13.1.1　關(guān)鍵字　292
13.1.2　圖片鼠標(biāo)指針　293
13.2　系統(tǒng)字體和顏色　294
13.2.1　系統(tǒng)字體　294
13.2.2　系統(tǒng)顏色　295
13.3　動(dòng)態(tài)的外廓：outline屬性　296
13.3.1　外廓與邊框的區(qū)別　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　外廓與焦點(diǎn)　299
第14章　頁面媒體　300KV
14.1頁面媒體簡介　301
14.2　指定媒體類型　301
14.3　頁框：page規(guī)則　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　元素內(nèi)部分頁：page-break-inside屬性　306
14.4.3　元素內(nèi)的分割：orphans和widows屬性　306
14.4.4　分頁的規(guī)則　308
14.5　CSS 2中的屬性　309
14.5.1　頁框尺寸：size屬性　309
14.5.2　裁切標(biāo)記：marks屬性　310
14.5.3　使用命名的頁：page屬性　310
14.6　顯示器、打印機(jī)和投影　310
14.6.1　設(shè)備特點(diǎn)　311
14.6.2　設(shè)計(jì)要點(diǎn)　311
第15章　聽覺樣式表　313
15.1　聽覺(aural)類型與語音(speech)類型　314
15.1.1　鏈接聽覺樣式的特點(diǎn)　314
15.1.2　與聽覺屬性相關(guān)的值　314
15.2　音量屬性：volume屬性　314
15.3　發(fā)音：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　瀏覽器的發(fā)展　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　發(fā)現(xiàn)與解決問題　343
16.4.1　排查問題　343
16.4.2　常見的非Bug問題　344
16.4.3　Windows IE常見Bug　347
第3部分　結(jié)構(gòu)化實(shí)例
第17章　旅游網(wǎng)站　356
17.1　結(jié)構(gòu)化　357
17.1.1　分析內(nèi)容結(jié)構(gòu)　357
17.1.2　基本結(jié)構(gòu)　358
17.1.3　頁首部分的結(jié)構(gòu)化　359
17.1.4　中間部分的結(jié)構(gòu)化　361
17.1.5　頁腳部分的結(jié)構(gòu)化　368
17.2　圖片格式與網(wǎng)絡(luò)基礎(chǔ)知識　369
17.2.1　圖片格式　369
17.2.2　圖片與優(yōu)化　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　版式與結(jié)構(gòu)　415
17.5　小結(jié)　416