第1章(zhāng)  CSS基礎知(zhī)識... 1

【本章(zhāng)導讀(dú)】... 1

【本章(zhāng)重點】... 1

1.1  CSS概述... 1

1.1.1  CSS發展曆程... 1

1.1.2  CSS與HTML. 2

1.1.3  CSS語法... 3

1.1.4  編輯CSS. 3

1.2  CSS使用(yòng)... 4

1.2.1  行(xíng)內(nèi)樣式... 4

1.2.2  內(nèi)嵌樣式... 5

1.2.3  鏈接樣式... 5

1.2.4  導入樣式... 6

1.2.5  樣式優先級... 7

1.3  CSS選擇器(qì)... 8

1.3.1  标簽選擇器(qì)... 8

1.3.2  類别選擇器(qì)... 9

1.3.3  ID選擇器(qì)... 10

1.3.4  指定選擇器(qì)... 11

1.3.5  包含選擇器(qì)... 12

1.3.6  子(zǐ)選擇器(qì)... 15

1.3.7  相(xiàng)鄰選擇器(qì)... 16

1.3.8  兄弟(dì)選擇器(qì)... 17

1.3.9  分(fēn)組選擇器(qì)... 19

1.3.10  通(tōng)用(yòng)選擇器(qì)... 19

1.3.11  僞選擇器(qì)... 20

1.3.12  屬性選擇器(qì)... 21

1.4  CSS注釋和(hé)CSS特性... 22

1.4.1  CSS的(de)注釋... 22

1.4.2  CSS的(de)層疊性... 23

1.4.3  CSS的(de)繼承... 23

本章(zhāng)小(xiǎo)結... 23

本章(zhāng)習(xí)題... 23

第2章(zhāng)  字體(tǐ)與段落... 25

【本章(zhāng)導讀(dú)】... 25

【本章(zhāng)重點】... 25

2.1  文(wén)字設置... 25

2.1.1  字體(tǐ)... 25

2.1.2  字号... 27

2.1.3  斜體(tǐ)字體(tǐ)... 28

2.1.4  字體(tǐ)的(de)粗細... 29

2.1.5  大(dà)小(xiǎo)寫轉換... 31

2.1.6  字體(tǐ)顔色... 32

2.2  文(wén)本樣式... 33

2.2.1  文(wén)本水(shuǐ)平對(duì)齊... 33

2.2.2  文(wén)本的(de)垂直對(duì)齊... 36

2.3  段落設置... 38

2.3.1  字詞間(jiān)距... 38

2.3.2  文(wén)本裝飾線... 39

2.3.3  首行(xíng)縮進... 40

2.3.4  行(xíng)高(gāo)... 42

2.3.5  空(kōng)白(bái)處理(lǐ)... 43

本章(zhāng)小(xiǎo)結... 45

本章(zhāng)習(xí)題... 46

第3章(zhāng)  美(měi)化(huà)圖片... 47&​≠∞

【本章(zhāng)導讀(dú)】... 47

【本章(zhāng)重點】... 47

3.1  圖片樣式... 47

3.1.1  圖片邊框... 47

3.1.2  圖片大(dà)小(xiǎo)... 51

3.2  圖片對(duì)齊... 52

3.2.1  圖片的(de)水(shuǐ)平對(duì)齊... 52

3.2.2  圖片的(de)垂直對(duì)齊... 53

3.2.3  圖文(wén)混排... 56

本章(zhāng)小(xiǎo)結... 58

本章(zhāng)習(xí)題... 58

第4章(zhāng)  網頁背景... 59

【本章(zhāng)導讀(dú)】... 59

【本章(zhāng)重點】... 59

4.1  設置背景... 59

4.1.1  背景顔色... 59

4.1.2  背景圖像... 62

4.1.3  背景圖像的(de)平鋪方式... 64

4.2  定位背景... 67

4.2.1  固定背景圖像... 68

4.2.2  定位背景圖像... 69

4.3  裁剪與複合屬性... 72

4.3.1  定位背景圖像的(de)起始位置... 73

4.3.2  裁剪背景圖像... 75

4.3.3  規定背景圖像的(de)尺寸... 77

4.3.4  背景圖像的(de)複合屬性... 79

本章(zhāng)小(xiǎo)結... 80

本章(zhāng)習(xí)題... ≤ ↕80

第5章(zhāng)  鏈接樣式... 82

【本章(zhāng)導讀(dú)】..σ☆>'. 82

【本章(zhāng)重點】... 82

5.1  超鏈接基本樣式... 82

5.1.1  設置鏈接顔色... 83

5.1.2  設置鏈接字體(tǐ)及文(wén)字大(dà)小(xiǎo)‍≤ →... 84

5.1.3  設置鏈接邊框... 85

5.1.4  給鏈接設置背景圖像... 86

5.1.5  同一(yī)個(gè)頁面設置不(bù)同的(de)鏈接... 86

5.2  定義下(xià)劃線樣式... 88

5.2.1  設置下(xià)劃線樣式... 88

5.2.2  模拟下(xià)劃線樣式... 89

5.2.3  用(yòng)背景圖像模拟下(xià)劃線... 90

5.3  定義按鈕樣式... 91

5.3.1  定義塊狀鏈接... 91

5.3.2  模拟按鈕樣式的(de)鏈接... 93

本章(zhāng)小(xiǎo)結... 95

本章(zhāng)習(xí)題... 95

第6章(zhāng)  美(měi)化(huà)列表... 97

【本章(zhāng)導讀(dú)】... 97

【本章(zhāng)重點】... 97

6.1  設置列表項目符号... 97

6.1.1  無序列表... 97

6.1.2  有(yǒu)序列表... 99

6.2  列表樣式屬性... 102

6.2.1  設置項目符号的(de)位置... 102

6.2.2  使用(yòng)圖像設置列表樣式... 104

6.2.3  綜合設置列表樣式... 105

6.3  導航菜單及下(xià)拉菜單... 107

6.3.1  導航菜單... 107

6.3.2  下(xià)拉菜單... 110

本章(zhāng)小(xiǎo)結...₩←↕• 114

本章(zhāng)習(xí)題... 114

第7章(zhāng)  美(měi)化(huà)表格... 116

【本章(zhāng)導讀(dú)】... 116

【本章(zhāng)重點】... 116

7.1  設置表格邊框... 116

7.1.1  設置表格邊框... 116

7.1.2  邊框樣式... 118

7.1.3  折疊邊框... 121

7.1.4  設置邊框間(jiān)距... 122

7.2  表格樣式基礎... 123

7.2.1  表格的(de)寬度與高(gāo)度... 124

7.2.2  表格的(de)前景色與背景色... 125

7.2.3  表格文(wén)字的(de)對(duì)齊方式... 127

7.3  其他(tā)表格樣式... 128

7.3.1  設置表格标題的(de)位置... 128

7.3.2  隐藏空(kōng)單元格... 130

7.3.3  固定表格布局... 131

本章(zhāng)小(xiǎo)結... 133

本章(zhāng)習(xí)題... 134

第8章(zhāng)  CSS美(měi)化(huà)表單... 135

【本章(zhāng)導讀(dú)】... 135

【本章(zhāng)重點】... 135

8.1  美(měi)化(huà)輸入框... 135

8.1.1  清除輸入框樣式... 135

8.1.2  利用(yòng)padding減輕視(shì)覺負擔... 135

8.1.3  給輸入框添加陰影(yǐng)border-shadow和(hé)圓角border-radius樣式... 137

8.1.4  半透明(míng)的(de)輸入框... 139

8.1.5  輸入框placeholder提示文(wén)字... 140

8.1.6  案例... 141

8.2  美(měi)化(huà)單選框和(hé)多(duō)選框..α§λ. 143

8.3  美(měi)化(huà)下(xià)拉菜單... 146

8.5  美(měi)化(huà)按鈕... 148

8.5  實戰案例... 149

8.5.1  注冊表單頁面案例... 149

8.5.2  提交表單頁面案例... 153

本章(zhāng)小(xiǎo)結... 155

本章(zhāng)習(xí)題... 155

第9章(zhāng)  網頁布局... 157

【本章(zhāng)導讀(dú)】..™™'. 157

【本章(zhāng)重點】... 157

9.1  CSS盒模型... 157

9.1.1  定義外(wài)邊距... 158

9.1.2  定義內(nèi)邊距... 162

9.1.3  定義邊框... 167

9.1.4  定義內(nèi)容尺寸... 169

9.2  CSS布局基礎... 171

9.2.1  定義顯示類型... 171

9.2.2  定義顯示模式... 173

9.2.3  網頁布局樣式... 174

9.2.4  設置浮動顯示... 175

9.2.5  清除浮動... 178

9.2.6  浮動嵌套... 180

9.2.7  網頁布局方法... 185

9.3  實戰案例... 190

本章(zhāng)小(xiǎo)結... 198

本章(zhāng)習(xí)題... 198

第10章(zhāng)  CSS定位... 201

【本章(zhāng)導讀(dú)】... 201

【本章(zhāng)重點】... 201

10.1  CSS定位基礎... 201

10.2  靜(jìng)态定位... 202

10.3  相(xiàng)對(duì)定位... 204

10.4  絕對(duì)定位... 206

10.5  固定定位... 209

10.6  定位包含框... 212

10.7  盒子(zǐ)的(de)浮動... 215≥≠∑£

10.8  其他(tā)CSS布局定位方式... 217

10.8.1  溢出（overflow）定位... 217

10.8.2  隐藏（visibility）定位... 220

10.9  設置定位偏移... 222

10.10  設置層疊順序... 224

10.11  實戰案例... 227

本章(zhāng)小(xiǎo)結... 236

本章(zhāng)習(xí)題... 236

第11章(zhāng)  網頁實戰... 237

【本章(zhāng)導讀(dú)】... 237

【本章(zhāng)重點】... 237

11.1  青海(hǎi)美(měi)食網頁設計(jì)... 237

11.2  我愛(ài)青海(hǎi)... 255

本章(zhāng)小(xiǎo)結... 285

本章(zhāng)習(xí)題... 285

參考文(wén)獻... 286