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

第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　表格本身并沒(méi)有被拋棄　6
1.4.4　善于利用CSS　6
1.4.5　不要濫用class　6
1.4.6　應(yīng)對(duì)瀏覽器　6
1.4.7　“通過(guò)驗(yàn)證”并不是最終目的　7
1.5　SEO簡(jiǎn)介　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簡(jiǎn)史　12
2.2.2　HTML的缺點(diǎn)　13
2.2.3　從HTML到XHTML　14
2.3　理解(X)HTML標(biāo)簽的語(yǔ)義　18
2.3.1　(X)HTML與瀏覽器默認(rèn)樣式　18
2.3.2　常用的XHTML標(biāo)簽和屬性　19
2.3.3　(X)HTML各個(gè)元素對(duì)搜索引擎的權(quán)重比例　27
2.4　網(wǎng)站整體制作基本流程　27
2.4.1　總體流程與分工　27
2.4.2　靜態(tài)頁(yè)面制作　28
第2部分　層疊樣式表CSS
第3章　CSS入門　31
3.1　CSS簡(jiǎn)介　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　基本語(yǔ)法　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)頁(yè)安全色(Web-safe Colors)　77
5.2　整數(shù)值和實(shí)數(shù)值　78
5.3　長(zhǎng)度　78
5.3.1　格式　78
5.3.2　長(zhǎng)度單位　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　語(yǔ)法　85
6.1.2　常用字體系列　85
6.2　字體尺寸：font-size屬性　87
6.2.1　語(yǔ)法　87
6.2.2　絕對(duì)尺寸　88
6.2.3　相對(duì)尺寸　89
6.2.4　百分比和em　89
6.2.5　尺寸的繼承與瀏覽器的顯示　90
6.2.6　分辨率與彈性設(shè)計(jì)　91
6.3　字體磅值：font-weight屬性　91
6.3.1　語(yǔ)法　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　語(yǔ)法　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　文本水平對(duì)齊：text-align屬性　103
7.1.1　語(yǔ)法　103
7.1.2　適用于：塊級(jí)元素　103
7.1.3　繼承　104
7.1.4　應(yīng)用：整體居中　104
7.2　文本縮進(jìn)：text-indent屬性　105
7.2.1　語(yǔ)法　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　語(yǔ)法　108
7.3.2　內(nèi)容區(qū)域、行內(nèi)框和行框　109
7.3.4　瀏覽器的差別與錯(cuò)誤　111
7.3.5　應(yīng)用：?jiǎn)涡形淖衷诖怪狈较蚓又小?12
7.4　垂直對(duì)齊：vertical-align屬性　112
7.4.1　語(yǔ)法　112
7.4.2　屬性值詳解　113
7.4.3　奇怪的IE　116
7.4.4　文檔類型與純圖片內(nèi)容的垂直對(duì)齊　116
7.4.5　單元格的垂直對(duì)齊　118
7.5　單詞間隔(word-spacing)和字母間隔(letter-spacing)　119
7.5.1　單詞間隔：word-spacing屬性　119
7.5.2　字母間隔：letter-spacing屬性　120
7.5.3　水平對(duì)齊的影響和繼承　120
7.6　文本轉(zhuǎn)換：text-transform屬性　121
7.7　文本裝飾：text-decoration屬性　121
7.8　空白：white-space屬性　123
7.8.1　語(yǔ)法　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　語(yǔ)法　133
8.3.2　行內(nèi)元素的寬度　134
8.3.3　長(zhǎng)度和百分比　135
8.4　最大寬度(max-width)和最小寬度(min-width)　136
8.5　高度：height屬性　137
8.5.1　語(yǔ)法　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ī)流向中的視覺(jué)格式化　156
8.10.1　塊級(jí)元素的水平格式化　156
8.10.2　應(yīng)用：寬度自適應(yīng)的布局　160
8.10.3　塊級(jí)元素的垂直格式化　161
8.10.4　應(yīng)用：高度自適應(yīng)瀏覽器窗口　163
8.10.5　行內(nèi)元素的格式化　164
第9章　浮動(dòng)、定位與視覺(jué)格式化模型　167
9.1　視覺(jué)格式化模型控制框的生成　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　語(yǔ)法　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　相對(duì)定位　176
9.3.4　絕對(duì)定位　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)元素的視覺(jué)格式化內(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　簡(jiǎn)單的鏈接背景替換　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　匿名表格對(duì)象　253
11.2.4　列　253
11.3　表格的視覺(jué)格式化　254
11.3.1　匿名框、標(biāo)題框與表格框　254
11.3.2　標(biāo)題的定位：caption-side屬性　254
11.3.3　表格內(nèi)容的視覺(jué)布局　255
11.3.4　表格的層和透明性　256
11.3.5　表格寬度算法：table-layout屬性　258
11.3.6　表格高度　263
11.3.7　單元格內(nèi)容的對(duì)齊　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　瀏覽器對(duì)列表的表現(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ù)和編號(hào)　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章　頁(yè)面媒體　300KV
14.1頁(yè)面媒體簡(jiǎn)介　301
14.2　指定媒體類型　301
14.3　頁(yè)框：page規(guī)則　302
14.3.1　頁(yè)邊距　302
14.3.2　頁(yè)面選擇器　303
14.4　分頁(yè)　304L
14.4.1　元素前后分頁(yè)：page-break-before和page-break-after屬性　304
14.4.2　元素內(nèi)部分頁(yè)：page-break-inside屬性　306
14.4.3　元素內(nèi)的分割：orphans和widows屬性　306
14.4.4　分頁(yè)的規(guī)則　308
14.5　CSS 2中的屬性　309
14.5.1　頁(yè)框尺寸：size屬性　309
14.5.2　裁切標(biāo)記：marks屬性　310
14.5.3　使用命名的頁(yè)：page屬性　310
14.6　顯示器、打印機(jī)和投影　310
14.6.1　設(shè)備特點(diǎn)　311
14.6.2　設(shè)計(jì)要點(diǎn)　311
第15章　聽(tīng)覺(jué)樣式表　313
15.1　聽(tīng)覺(jué)(aural)類型與語(yǔ)音(speech)類型　314
15.1.1　鏈接聽(tīng)覺(jué)樣式的特點(diǎn)　314
15.1.2　與聽(tīng)覺(jué)屬性相關(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　語(yǔ)音特征屬性　320
15.9　語(yǔ)音：speak-punctuation和speak-numeral屬性　323
15.10　敘述表頭：speak-header屬性　323
第16章　瀏覽器與Hack　325
16.1　瀏覽器簡(jiǎn)介　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)與解決問(wèn)題　343
16.4.1　排查問(wèn)題　343
16.4.2　常見(jiàn)的非Bug問(wèn)題　344
16.4.3　Windows IE常見(jiàn)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　頁(yè)首部分的結(jié)構(gòu)化　359
17.1.4　中間部分的結(jié)構(gòu)化　361
17.1.5　頁(yè)腳部分的結(jié)構(gòu)化　368
17.2　圖片格式與網(wǎng)絡(luò)基礎(chǔ)知識(shí)　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