本書共分為五篇22章, 內(nèi)容包括: CSS樣式入門、CSS3樣式的基本語法、CSS3的高級特性、使用CSS3控制網(wǎng)頁字體與段落樣式、使用CSS控制網(wǎng)頁圖片樣式、使用CSS控制網(wǎng)頁背景與邊框樣式、使用CSS3美化網(wǎng)頁瀏覽效果、使用CSS控制表格和表單樣式、控制列表和菜單樣式、使用濾鏡美化網(wǎng)頁元素, 等等。
清華大學(xué)出版社“案例課堂”大系
叢書以案例的形式講解軟件的內(nèi)容，讀者可以在實踐中熟練掌握軟件的使用方法。
每一個案例都精挑細(xì)選，同時配有全程語音講解的視頻文件，方便讀者學(xué)習(xí)。
案例的選材廣泛，涉及到軟件應(yīng)用的各個領(lǐng)域、各個行業(yè)，學(xué)習(xí)無死角。
“CG設(shè)計”系列全彩精印，同等價位下內(nèi)容更多，同等內(nèi)容下更實惠。
“網(wǎng)站開發(fā)”系列附贈超值，全面學(xué)習(xí)無障礙：
CSS屬性速查表
HTML標(biāo)簽速查表
網(wǎng)頁布局案例賞析
精彩網(wǎng)站配色方案賞析
精選JavaScript實例
JavaScript函數(shù)速查手冊
CSS+DIV布局案例賞析
案例源文件與教學(xué)課件
“網(wǎng)站開發(fā)案例課堂”系列圖書是專門為網(wǎng)站開發(fā)和數(shù)據(jù)庫初學(xué)者量身定做的一套學(xué)習(xí)用書，由劉玉紅策劃、千谷高新教育的高級講師編著，整套書涵蓋網(wǎng)站開發(fā)、數(shù)據(jù)庫設(shè)計等方面。整套書具有以下特點。
前沿科技
無論是網(wǎng)站建設(shè)、數(shù)據(jù)庫設(shè)計還是HTML5、CSS3，我們都精選較為前沿或者用戶群最大的領(lǐng)域推進，幫助大家認(rèn)識和了解最新動態(tài)。
權(quán)威的作者團隊
組織國家重點實驗室和資深應(yīng)用專家聯(lián)手編著該套圖書，融合豐富的教學(xué)經(jīng)驗與優(yōu)秀的管理理念。
學(xué)習(xí)型案例設(shè)計
以技術(shù)的實際應(yīng)用過程為主線，全程采用圖解和同步多媒體結(jié)合的教學(xué)方式，生動、直觀、全面地剖析使用過程中的各種應(yīng)用技能，降低難度以提升學(xué)習(xí)效率。
為什么要寫這樣一本書
伴隨著Web 2.0的盛行，傳統(tǒng)的表格布局模式正逐漸被網(wǎng)頁標(biāo)準(zhǔn)化CSS3+DIV的設(shè)計方式取代，對最新CSS3的學(xué)習(xí)也成為網(wǎng)頁設(shè)計師的必修功課。對此，本書針對想學(xué)習(xí)網(wǎng)頁樣式與布局的初學(xué)者，快速讓初學(xué)者入門后提高實戰(zhàn)水平，很快地上手設(shè)計網(wǎng)頁，提高職業(yè)化能力。
本書特色
* 零基礎(chǔ)、入門級的講解。
無論您是否從事計算機相關(guān)行業(yè)，無論您是否接觸過CSS3，都能從本書中找到最佳起點。
* 超多、實用、專業(yè)的范例和項目。
本書在編排上緊密結(jié)合深入學(xué)習(xí)CSS3技術(shù)的先后過程，從CSS3的基本概念開始，帶領(lǐng)大家逐步深入地學(xué)習(xí)各種應(yīng)用技巧，側(cè)重實戰(zhàn)技能，使用簡單易懂的實際案例進行分析和操作指導(dǎo)，讓讀者讀起來簡明輕松，操作起來有章可循。
* 隨時檢測自己的學(xué)習(xí)成果。
每章首頁均提供了學(xué)習(xí)目標(biāo)，以指導(dǎo)讀者重點學(xué)習(xí)及學(xué)后檢查。
每章最后的“跟我練練手”板塊均根據(jù)本章內(nèi)容精選而成，讀者可以隨時檢測自己的學(xué)習(xí)成果和實戰(zhàn)能力，做到融會貫通。
* 細(xì)致入微、貼心提示。
本書在講解過程中，在各章中使用了“注意”“提示”“技巧”等小欄目，使讀者在學(xué)習(xí)過程中更清楚地了解相關(guān)操作、理解相關(guān)概念，并輕松掌握各種操作技巧。
* 專業(yè)創(chuàng)作團隊和技術(shù)支持。
本書由千谷高新教育中心編著和提供技術(shù)支持。
您在學(xué)習(xí)過程中遇到任何問題，可加入QQ群：389543972進行提問，專家人員會在線答疑。
超值光盤
* 全程同步教學(xué)錄像。
涵蓋本書所有知識點，詳細(xì)講解每個實例及項目的過程及技術(shù)關(guān)鍵點。比看書更輕松地掌握書中所有的CSS3網(wǎng)頁設(shè)計知識，而且擴展的講解部分使您得到比書中更多的收獲。
* 超多容量王牌資源大放送。
贈送大量王牌資源，包括本書實例源代碼、教學(xué)幻燈片、本書精品教學(xué)視頻、88個實用類網(wǎng)頁模版、精選的JavaScript實例、HTML5標(biāo)簽速查手冊、CSS3屬性速查表、JavaScript函數(shù)速查手冊、CSS+DIV布局賞析案例、精彩網(wǎng)站配色方案賞析、網(wǎng)頁樣式與布局案例賞析、Web前端工程師常見面試題等。
讀者對象
* 沒有任何CSS3基礎(chǔ)的初學(xué)者。
* 有一定的CSS3基礎(chǔ)，想精通CSS3的人員。
* 有一定的CSS3基礎(chǔ)，沒有項目經(jīng)驗的人員。
* 正在進行畢業(yè)設(shè)計的學(xué)生。
* 大專院校及培訓(xùn)學(xué)校的老師和學(xué)生。
創(chuàng)作團隊
本書由劉玉紅和蒲娟編著，參加編寫的人員還有劉玉萍、周佳、付紅、李園、郭廣新、侯永崗、王攀登、劉海松、孫若淞、王月嬌、包慧利、陳偉光、胡同夫、王偉、展娜娜、梁云梁和周浩浩。
在編寫過程中，我們竭盡所能地將最好的講解呈現(xiàn)給讀者，但也難免有疏漏之處，敬請不吝指正。
編 者
第1篇 基 礎(chǔ) 入 門
第1章 CSS樣式入門 3
1.1 認(rèn)識CSS 4
1.1.1 CSS的功能 4
1.1.2 瀏覽器與CSS 4
1.1.3 CSS的發(fā)展歷史 5
1.2 CSS常用單位 5
1.2.1 顏色單位 5
1.2.2 長度單位 9
1.3 編輯和瀏覽CSS 10
1.3.1 手工編寫CSS 10
1.3.2 使用Dreamweaver編寫CSS 11
1.4 在HTML中調(diào)用CSS的方法 13
1.4.1 行內(nèi)樣式 13
1.4.2 內(nèi)嵌樣式 14
1.4.3 鏈接樣式 15
1.4.4 導(dǎo)入樣式 16
1.5 調(diào)用方法的優(yōu)先級 17
1.5.1 行內(nèi)樣式和內(nèi)嵌樣式的比較 18
1.5.2 內(nèi)嵌樣式和鏈接樣式的比較 18
1.5.3 鏈接樣式和導(dǎo)入樣式的比較 19
1.6 綜合案例——制作產(chǎn)品銷售統(tǒng)計表 20
1.7 大神解惑 22
1.8 跟我練練手 22
第2章 CSS3樣式的基本語法 23
2.1 CSS基礎(chǔ)語法 24
2.1.1 CSS構(gòu)造規(guī)則 24
2.1.2 CSS的注釋 24
2.2 CSS的常用選擇器 25
2.2.1 標(biāo)簽選擇器 25
2.2.2 類選擇器 26
2.2.3 ID選擇器 27
2.2.4 選擇器的聲明 27
2.3 綜合案例——制作炫彩網(wǎng)站Logo 28
2.4 大神解惑 31
2.5 跟我練練手 31
第3章 CSS3的高級特性 33
3.1 復(fù)合選擇器 34
3.1.1 全局選擇器 34
3.1.2 交集選擇器 35
3.1.3 并集選擇器 35
3.1.4 繼承選擇器 36
3.2 CSS3新增的選擇器 37
3.2.1 屬性選擇器 37
3.2.2 結(jié)構(gòu)偽類選擇器 39
3.2.3 UI元素狀態(tài)偽類選擇器 40
3.2.4 偽類選擇器 42
3.3 CSS的繼承特性 43
3.3.1 繼承關(guān)系 43
3.3.2 CSS繼承的運用 44
3.4 CSS的層疊特性 45
3.4.1 同一選擇器被多次定義的
處理 45
3.4.2 同一標(biāo)簽運用不同類型選擇器
的處理 46
3.5 綜合案例——制作新聞菜單 47
3.6 大神解惑 49
3.7 跟我練練手 50
第II篇 核 心 技 術(shù)
第4章 使用CSS3控制網(wǎng)頁字體
與段落樣式 53
4.1 通過CSS控制字體樣式 54
4.1.1 控制字體類型 54
4.1.2 定義字體大小 55
4.1.3 定義字體風(fēng)格 56
4.1.4 控制文字的粗細(xì) 57
4.1.5 將小寫字母轉(zhuǎn)換為大寫字母 58
4.1.6 設(shè)置字體的復(fù)合屬性 59
4.1.7 定義文字的顏色 59
4.2 CSS3中新增的文本高級樣式 61
4.2.1 添加文本的陰影效果 61
4.2.2 設(shè)置文本溢出效果 62
4.2.3 控制文本的換行 63
4.2.4 設(shè)置字體尺寸 64
4.3 通過CSS控制文本間距與對齊方式 65
4.3.1 設(shè)置單詞之間的間隔 65
4.3.2 設(shè)置字符之間的間隔 66
4.3.3 為文本添加下劃線、上劃線、
刪除線 67
4.3.4 設(shè)置垂直對齊方式 68
4.3.5 轉(zhuǎn)換文本的大小寫 69
4.3.6 設(shè)置文本的水平對齊方式 70
4.3.7 設(shè)置文本的縮進效果 72
4.3.8 設(shè)置文本的行高 73
4.3.9 文本的空白處理 74
4.3.10 文本的反排 75
4.4 綜合案例1——設(shè)置網(wǎng)頁標(biāo)題 76
4.5 綜合案例2——制作新聞頁面 78
4.6 大神解惑 79
4.7 跟我練練手 80
第5章 使用CSS控制網(wǎng)頁圖片樣式 81
5.1 圖片縮放 82
5.1.1 通過描述標(biāo)記width和height
縮放圖片 82
5.1.2 使用CSS3中的max-width和
max-height縮放圖片 82
5.1.3 使用CSS3中的width和height
縮放圖片 83
5.2 設(shè)置圖片的對齊方式 84
5.2.1 設(shè)置圖片橫向?qū)R 84
5.2.2 設(shè)置圖片縱向?qū)R 85
5.3 圖文混排 87
5.3.1 設(shè)置文字環(huán)繞效果 87
5.3.2 設(shè)置圖片與文字的間距 88
5.4 綜合案例1——制作學(xué)校宣傳單 90
5.5 綜合案例2——制作簡單圖文混排
網(wǎng)頁 92
5.6 大神解惑 94
5.7 跟我練練手 94
第6章 使用CSS控制網(wǎng)頁背景
與邊框樣式 95
6.1 使用CSS控制網(wǎng)頁背景 96
6.1.1 設(shè)置背景顏色 96
6.1.2 設(shè)置背景圖片 97
6.1.3 背景圖片重復(fù) 98
6.1.4 背景圖片顯示 100
6.1.5 背景圖片位置 101
6.2 CSS3中新增控制網(wǎng)頁背景屬性 102
6.2.1 背景圖片大小 102
6.2.2 背景顯示區(qū)域 104
6.2.3 背景圖片裁剪區(qū)域 105
6.2.4 背景復(fù)合屬性 107
6.3 使用CSS控制邊框樣式 108
6.3.1 設(shè)置邊框樣式 108
6.3.2 設(shè)置邊框顏色 109
6.3.3 設(shè)置邊框線寬 110
6.3.4 設(shè)置邊框復(fù)合屬性 112
6.4 CSS3中新增邊框圓角效果 113
6.4.1 設(shè)置圓角邊框 113
6.4.2 指定兩個圓角半徑 114
6.4.3 繪制4個不同圓角邊框 115
6.4.4 繪制不同種類的邊框 117
6.5 CSS3中的漸變效果 119
6.5.1 線性漸變效果 119
6.5.2 徑向漸變效果 121
6.6 綜合案例1——制作簡單公司主頁 122
6.7 綜合案例2——制作簡單生活資訊
主頁 126
6.8 大神解惑 127
6.9 跟我練練手 128
第7章 使用CSS3美化網(wǎng)頁瀏覽
效果 129
7.1 使用CSS3美化超鏈接 130
7.1.1 改變超級鏈接基本樣式 130
7.1.2 設(shè)置帶有提示信息的超級
鏈接 131
7.1.3 設(shè)置超級鏈接的背景圖 132
7.1.4 設(shè)置超級鏈接的按鈕效果 133
7.2 使用CSS3美化鼠標(biāo)特效 134
7.2.1 使用CSS3控制鼠標(biāo)箭頭 134
7.2.2 設(shè)置鼠標(biāo)變幻式超鏈接 135
7.2.3 設(shè)置網(wǎng)頁頁面滾動條 136
7.3 綜合案例1——圖片版本超級鏈接 138
7.4 綜合案例2——鼠標(biāo)特效 140
7.5 綜合案例3——制作一個簡單的
導(dǎo)航欄 142
7.6 大神解惑 144
7.7 跟我練練手 144
第8章 使用CSS控制表格
和表單樣式 145
8.1 美化表格樣式 146
8.1.1 設(shè)置表格邊框樣式 146
8.1.2 設(shè)置表格邊框?qū)挾?148
8.1.3 設(shè)置表格邊框顏色 149
8.2 美化表單樣式 150
8.2.1 美化表單中的元素 150
8.2.2 美化提交按鈕 152
8.2.3 美化下拉菜單 153
8.3 綜合案例1——制作用戶登錄頁面 155
8.4 綜合案例2——制作用戶注冊頁面 156
8.5 大神解惑 159
8.6 跟我練練手 159
第9章 控制列表和菜單樣式 161
9.1 美化項目列表的樣式 162
9.1.1 美化無序列表 162
9.1.2 美化有序列表 163
9.1.3 美化自定義列表 165
9.1.4 制作圖片列表 166
9.1.5 縮進圖片列表 167
9.1.6 列表復(fù)合屬性 168
9.2 使用CSS制作網(wǎng)頁菜單 169
9.2.1 制作無須表格的菜單 169
9.2.2 制作水平和垂直菜單 171
9.3 綜合案例1——模擬soso導(dǎo)航欄 173
9.4 綜合案例2——將段落轉(zhuǎn)變成列表 177
9.5 大神解惑 178
9.6 跟我練練手 178
第10章 使用濾鏡美化網(wǎng)頁元素 179
10.1 濾鏡概述 180
10.2 設(shè)置基本濾鏡效果 181
10.2.1 高斯模糊濾鏡 181
10.2.2 明暗度濾鏡 182
10.2.3 對比度濾鏡 183
10.2.4 陰影濾鏡 184
10.2.5 灰度濾鏡 185
10.2.6 反相濾鏡 186
10.2.7 透明度濾鏡 187
10.2.8 飽和度濾鏡 188
10.2.9 深褐色濾鏡 189
10.3 使用復(fù)合濾鏡效果 190
10.4 大神解惑 191
10.5 跟我練練手 192
第3章 CSS3的高級特性
在前面的章節(jié)已經(jīng)了解到CSS的3個基本選擇器，但如果僅僅依靠這3種選擇器完成頁面制作會比較煩瑣。本章學(xué)習(xí)CSS的高級屬性，在提高頁面制作效率上會有很大幫助。CSS3的高級屬性包括復(fù)合選擇器、CSS3新增選擇器、CSS3的層疊特性及繼承特性等。
本章要點(已掌握的在方框中打鉤)
掌握復(fù)合選擇器的使用方法
掌握CSS3新增選擇器的使用方法
熟悉CSS3的繼承關(guān)系
熟悉CSS3的層疊特性
掌握制作新聞菜單的方法
3.1 復(fù)合選擇器
通過對基本選擇器的組合，可以得到更多種類的選擇器，從而實現(xiàn)更強、更方便的選擇功能。這種通過基本選擇器組合得到的選擇器就是復(fù)合選擇器。
3.1.1 全局選擇器
如果想要一個頁面中所有html標(biāo)記使用同一種樣式，可以使用全局選擇器。全局選擇器，顧名思義，就是對所有HTML元素都起作用的選擇器。其語法格式如下：
*{property:value}
其中“*”表示對所有元素都起作用；property表示CSS3屬性名稱；value表示屬性值。其使用示例如下：
*{margin:0; padding:0;}
【例3.1】設(shè)置全局選擇器(案例文件：ch03\3.1.html)。
使用全局選擇器修飾
林花謝了春紅，太匆匆。無奈朝來寒雨晚來風(fēng)。
胭脂淚，相留醉，幾時重。自是人生長恨水長東。
在IE 11.0中瀏覽效果如圖3-1所示，可以看到兩個段落和標(biāo)題都是以紅色字體顯示，大小為30px。
圖3-1 使用全局選擇器
3.1.2 交集選擇器
交集選擇器由兩個選擇器直接連接構(gòu)成，其結(jié)果是選中二者各自元素范圍的交集。其中第1 個必須是標(biāo)記選擇器，第2個必須是類選擇器或ID選擇器。這兩個選擇器之間不能有空格，必須連續(xù)書寫，這種方式構(gòu)成的選擇器，將選中同時滿足前后二者定義的元素，也就是前者所定義的標(biāo)記類型，并且指定了后者的類別或者id的元素，因此被稱為交集選擇器。
【例3.2】設(shè)置交集選擇器(案例文件：ch03\3.2.html)。
……
書單推薦
