《從0到1:CSS進(jìn)階之旅》作者根據(jù)自己多年的前后端開發(fā)經(jīng)驗(yàn),詳盡介紹了CSS的進(jìn)階知識(shí)和高級(jí)開發(fā)技巧。
本書的正文部分共12章,分別講解了CSS的基礎(chǔ)知識(shí)、CSS規(guī)范、盒子模型、display屬性、文本效果、表單效果、浮動(dòng)布局、定位布局、CSS圖形、性能優(yōu)化、CSS技巧,以及CSS的一些重要概念。除了正文部分,本書還包括兩個(gè)附錄,附錄1介紹了HTML的進(jìn)階知識(shí),附錄2是作者結(jié)合實(shí)際工作和前端面試經(jīng)驗(yàn),精心挑選的前端面試題。
本書還配備了所有案例的源代碼和PPT教學(xué)課件,以方便學(xué)校老師教學(xué)。本書適合作為前端開發(fā)人員的參考書,也可以作為大中專院校相關(guān)專業(yè)的教材及教學(xué)參考書。
1.源自閱讀量600萬的人氣教程;
2.一本書快速進(jìn)階 CSS 高級(jí)技術(shù);
3.幾十個(gè)前端“黑科技”,附贈(zèng)上百道前端面試題,讓你的技術(shù)比別人更高一籌;
4.眾多前端工程師、高校老師、學(xué)生一致推薦。
5.提供習(xí)題答案、源代碼、教學(xué)PPT等資源,可在圖書前言部分獲取下載方法。
“從0到1”系列圖書是根據(jù)線上付費(fèi)視頻培訓(xùn)課程和綠葉學(xué)習(xí)網(wǎng)超人氣教程編寫的培訓(xùn)教材。
由于該在線課程有著獨(dú)特的風(fēng)格、極高的質(zhì)量,因而累積獲得超過100 000 讀者的支持,收到幾百封的感謝郵件,大多來自初學(xué)者、參加工作不久的小伙伴,甚至不少還是高校老師。這個(gè)系列記錄了作者當(dāng)初作為初學(xué)者所遇到的各種問題和他多年開發(fā)的心血總結(jié)。作者很了解初學(xué)者的心態(tài),也非常清楚初學(xué)者應(yīng)該怎樣才可以快速而無阻礙地學(xué)習(xí)。他站在初學(xué)者的角度而不是站在已經(jīng)學(xué)會(huì)的人的角度來編寫這個(gè)教程,讓初學(xué)者學(xué)習(xí)起來恰到好處。
莫振杰 從事前后端開發(fā)4年多,開發(fā)過綠葉學(xué)習(xí)網(wǎng)、廣州智能工程研究會(huì)網(wǎng)站、大量在線應(yīng)用工具以及各種類型網(wǎng)站,業(yè)余時(shí)間閱讀大量國(guó)內(nèi)外技術(shù)書籍,著有多本編程書,F(xiàn)為綠葉學(xué)習(xí)網(wǎng)的站長(zhǎng),該網(wǎng)站用于分享其前后端開發(fā)經(jīng)驗(yàn)。作者編寫分享的原創(chuàng)在線教程在互聯(lián)網(wǎng)廣受網(wǎng)友推崇。 今年又開發(fā)了系列前端線上付費(fèi)課程。
目錄
第 1 章 基礎(chǔ)知識(shí) 1
1.1 CSS 進(jìn)階簡(jiǎn)介 1
1.1.1 你真的精通CSS 嗎 1
1.1.2 進(jìn)階教程簡(jiǎn)介 2
1.2 CSS 單位 3
1.2.1 絕對(duì)單位 3
1.2.2 相對(duì)單位 3
1.3 CSS 特性 11
1.3.1 繼承性 11
1.3.2 層疊性 13
1.4 CSS 優(yōu)先級(jí) 15
1.4.1 引用方式?jīng)_突 15
1.4.2 繼承方式?jīng)_突 16
1.4.3 指定樣式?jīng)_突 16
1.4.4 繼承樣式和指定樣式?jīng)_突 19
1.4.5 !important 20
1.5 CSS 引用方式 22
1.5.1 外部樣式表 23
1.5.2 內(nèi)部樣式表 23
1.5.3 行內(nèi)樣式表 24
1.6 CSS 選擇器 25
1.6.1 后代選擇器 26
1.6.2 子代選擇器 27
1.6.3 兄弟選擇器 28
1.6.4 相鄰選擇器 29
1.7 :first-letter 和:first-line 32
1.7.1 :first-letter 選擇器 32
1.7.2 :first-line 選擇器 32
第 2 章 CSS 規(guī)范 34
2.1 CSS 規(guī)范簡(jiǎn)介 34
2.2 命名規(guī)范 34
2.2.1 CSS 文件命名 35
2.2.2 id 和class 命名 35
2.3 書寫規(guī)范 38
2.4 注釋規(guī)范 40
2.4.1 頂部注釋 40
2.4.2 模塊注釋 40
2.4.3 簡(jiǎn)單注釋 41
2.5 CSS reset 41
2.5.1 什么是CSS reset 41
2.5.2 為什么要用CSS reset 42
2.5.3 如何使用CSS reset 42
第3 章 盒子模型 45
3.1 CSS 盒子模型 45
3.2 深入border 48
3.2.1 性能差異 48
3.2.2 兼容差異 48
3.3 深入padding 48
3.4 外邊距疊加 50
3.4.1 外邊距疊加的3 種情況 51
3.4.2 外邊距疊加的意義 53
3.5 負(fù)margin 技術(shù) 54
3.5.1 負(fù)margin 簡(jiǎn)介 54
3.5.2 負(fù)margin 技巧 57
3.6 overflow 64
第4 章 display 屬性 67
4.1 塊元素和行內(nèi)元素 67
4.1.1 塊元素 67
4.1.2 行內(nèi)元素 68
從0 到2 1 系列圖書 目錄
4.2 display 簡(jiǎn)介 69
4.2.1 block 元素 69
4.2.2 inline 元素 70
4.2.3 inline-block 元素 70
4.3 display:none 72
4.3.1 display:none 簡(jiǎn)介 72
4.3.2 display:none 和visibility:hidden 的
區(qū)別 73
4.4 display:table-cell 75
4.4.1 圖片垂直居中于元素 75
4.4.2 等高布局 77
4.4.3 自動(dòng)平均劃分元素 79
4.5 去除inline-block 元素間距 80
第5 章 文本效果 84
5.1 文本效果簡(jiǎn)介 84
5.2 深入text-indent 84
5.3 text-align 87
5.3.1 text-align 起作用的元素 88
5.3.2 text-align:center; 與margin:0
auto; 89
5.4 深入line-height 89
5.4.1 line-height 的定義 90
5.4.2 深入line-height 91
5.5 深入vertical-align 97
5.5.1 vertical-align 屬性取值 97
5.5.2 vertical-align 屬性應(yīng)用 99
第6 章 表單效果 104
6.1 表單效果簡(jiǎn)介 104
6.2 深入radio 和checkbox 105
6.3 深入textarea 106
6.3.1 固定大小,禁用拖動(dòng) 106
6.3.2 在Chrome(或Firefox)和IE 中
實(shí)現(xiàn)相同的外觀 109
6.4 表單對(duì)齊 110
第7 章 浮動(dòng)布局 113
7.1 正常文檔流和脫離文檔流 113
7.1.1 正常文檔流 113
7.1.2 脫離文檔流 114
7.2 深入浮動(dòng) 116
7.3 浮動(dòng)的影響 118
7.3.1 對(duì)自身的影響 119
7.3.2 對(duì)父元素的影響 119
7.3.3 對(duì)兄弟元素的影響 121
7.3.4 對(duì)子元素的影響 125
7.4 浮動(dòng)的副作用 126
7.5 清除浮動(dòng) 128
7.5.1 clear:both 128
7.5.2 overflow:hidden 130
7.5.3 ::after 偽元素 131
第8 章 定位布局 133
8.1 深入定位 133
8.1.1 子元素相對(duì)父元素定位 133
8.1.2 子元素相對(duì)祖先元素定位 136
8.2 z-index 屬性 138
第9 章 CSS 圖形 141
9.1 CSS 圖形簡(jiǎn)介 141
9.2 三角形 142
9.2.1 CSS 實(shí)現(xiàn)三角形的原理 142
9.2.2 帶邊框的三角形 145
9.3 圓角與圓 148
9.3.1 border-radius 實(shí)現(xiàn)圓角 148
9.3.2 border-radius 實(shí)現(xiàn)半圓和圓 152
9.3.3 border-radius 的派生子屬性 154
9.4 橢圓 155
9.5 圖標(biāo)制作 156
第 10 章 性能優(yōu)化 164
10.1 CSS 優(yōu)化簡(jiǎn)介 164
從0 到1 系列圖書 目錄 3
10.2 屬性簡(jiǎn)寫 165
10.2.1 盒模型簡(jiǎn)寫 165
10.2.2 背景簡(jiǎn)寫 167
10.2.3 字體簡(jiǎn)寫 168
10.2.4 顏色值簡(jiǎn)寫 168
10.3 語法壓縮 169
10.3.1 空白符 169
10.3.2 結(jié)尾分號(hào) 169
10.3.3 url() 的引號(hào) 170
10.3.4 屬性值為0 170
10.3.5 屬性值為“以0 開頭的小數(shù)” 171
10.3.6 合并相同的定義 171
10.3.7 利用繼承進(jìn)行合并 172
10.4 壓縮工具 173
10.5 圖片壓縮 174
10.5.1 JPEG、PNG 和GIF 175
10.5.2 圖片壓縮 175
10.6 高性能選擇器 175
10.6.1 選擇器在瀏覽器中的解析原理 176
10.6.2 不同選擇器的解析速度 176
第 11 章 CSS 技巧 178
11.1 水平居中 178
11.1.1 文本的水平居中 178
11.1.2 元素的水平居中 179
11.2 垂直居中 183
11.2.1 文本的垂直居中 183
11.2.2 元素的垂直居中 185
11.3 CSS Sprite 188
11.4 iconfont 圖標(biāo) 192
11.4.1 iconfont 網(wǎng)站 193
11.4.2 iconfont 技術(shù) 195
第 12 章 重要概念 202
12.1 CSS 中的重要概念 202
12.2 包含塊(containing block) 202
12.2.1 什么是包含塊 202
12.2.2 包含塊的判定以及包含塊的范圍 203
12.3 層疊上下文(stacking context) 206
12.3.1 什么是層疊上下文 207
12.3.2 什么是層疊級(jí)別 207
12.3.3 層疊上下文的特點(diǎn) 208
12.4 BFC 和IFC 210
12.4.1 基本概念 210
12.4.2 什么是BFC 211
12.4.3 BFC 的用途 213
附錄1 HTML 進(jìn)階
第13 章 基礎(chǔ)知識(shí) 222
13.1 HTML、XHTML 和HTML5 222
13.1.1 HTML 和XHTML 222
13.1.2 HTML5 223
13.2 div 和span 225
13.3 id 和class 226
13.3.1 id 屬性 226
13.3.2 class 屬性 226
13.4 瀏覽器標(biāo)題欄小圖標(biāo) 227
第 14 章 語義化 229
14.1 語義化簡(jiǎn)介 229
14.2 標(biāo)題語義化 231
14.3 圖片語義化 232
14.3.1 alt 屬性和title 屬性 233
14.3.2 figure 元素和figcaption 元素 233
14.4 表格語義化 236
14.5 表單語義化 239
14.5.1 label 標(biāo)簽 239
從0 到4 1 系列圖書 目錄
14.5.2 fieldset 標(biāo)簽和legend 標(biāo)簽 241
14.6 其他語義化 242
14.6.1 換行符
242
14.6.2 無序列表ul 243
14.6.3 strong 標(biāo)簽和em 標(biāo)簽 244
14.6.4 del 標(biāo)簽和ins 標(biāo)簽 245
14.6.5 img 標(biāo)簽 246
14.7 語義化驗(yàn)證 246
14.8 HTML5 舍棄的標(biāo)簽 248
附錄2 前端面試題
選擇題 251
問答題 257