中图网(原中国图书网):网上书店,尾货特色书店,30万种特价书低至2折!

歡迎光臨中圖網(wǎng) 請 | 注冊

包郵 深入解析CSS

出版社:人民郵電出版社出版時(shí)間:2020-04-01
開本: 16開 頁數(shù): 382
中 圖 價(jià):¥108.4(7.8折) 定價(jià)  ¥139.0 登錄后可看到會(huì)員價(jià)
加入購物車 收藏
開年大促, 全場包郵
?新疆、西藏除外
本類五星書更多>

深入解析CSS 版權(quán)信息

深入解析CSS 本書特色

《深入解析CSS》獲五星好評(píng),讀者碑相傳的CSS寶典; 《深入解析CSS》CSS入門容易,但精通不易,幫助你緊跟CSS發(fā)展的步伐,深度掌握CSS語言,并快速了解CSS的新進(jìn)展和新特性。 《深入解析CSS》講解透徹且有詳細(xì)的分步示例,能夠幫助你提升W·eb開發(fā)技能,并激發(fā)設(shè)計(jì)靈感,讓你成為真正的Web開發(fā)高手。 大牛推薦: “本書可以讓你在CSS領(lǐng)域從小白變大牛!” ——Pierfrancesco D'Orsogna,GamePix軟件工程師 “這是一本緊跟時(shí)代的CSS寶典。” ——Phily Austria,Hollar前端研發(fā)總監(jiān) “本書行文流暢、簡潔。閱讀本書時(shí),每分每秒我都非常享受。” ——Tanya Wilke,Sanlam Web開發(fā)人員、解決方案架構(gòu)師、UI/UX設(shè)計(jì)師 “一份完整而清晰的CSS指南。” ——Giancarlo Massari,Swiss高級(jí)Java工程師

深入解析CSS 內(nèi)容簡介

本書旨在達(dá)成兩個(gè)目標(biāo):幫讀者深度掌握CSS語言,并快速了解CSS 的新進(jìn)展和新特性。本書分為以下四部分。部分回顧基礎(chǔ)知識(shí),并重點(diǎn)關(guān)注幾個(gè)很容易被忽視的細(xì)節(jié),包括層疊和繼承、相對單位、盒模型等;二部分介紹網(wǎng)頁布局的各種關(guān)鍵工具,如浮動(dòng)布局、Flexbox、網(wǎng)格布局、定位、響應(yīng)式設(shè)計(jì)等;三部分介紹的實(shí)踐,主要包括如何用模塊化的方式組織CSS,以及如何構(gòu)建一個(gè)模式庫;四部分介紹與設(shè)計(jì)師共事時(shí)需要考慮哪些重要因素,以及自己如何一點(diǎn)設(shè)計(jì)工作。

深入解析CSS 目錄

部分 基礎(chǔ)回顧

章 層疊、優(yōu)先級(jí)和繼承 2

1.1 層疊 3

1.1.1 樣式表的來源 5

1.1.2 理解優(yōu)先級(jí) 8

1.1.3 源碼順序 12

1.1.4 兩條經(jīng)驗(yàn)法則 14

1.2 繼承 15

1.3 特殊值 17

1.3.1 使用inherit關(guān)鍵字 17

1.3.2 使用initial關(guān)鍵字 18

1.4 簡寫屬性 19

1.4.1 簡寫屬性會(huì)默默覆蓋其他樣式 20

1.4.2 理解簡寫值的順序 20

1.5 總結(jié) 23

2章 相對單位 24

2.1 相對值的好處 24

2.1.1 那些年追求的像素級(jí) 25

2.1.2 像素級(jí)的時(shí)代終結(jié)了 25

2.2 em和rem 26

2.2.1 使用em定義字號(hào) 27

2.2.2 使用rem設(shè)置字號(hào) 31

2.3 停止像素思維 32

2.3.1 設(shè)置一個(gè)合理的默認(rèn)字號(hào) 33

2.3.2 構(gòu)造響應(yīng)式面板 34

2.3.3 縮放單個(gè)組件 35

2.4 視的相對單位 36

2.4.1 使用vw定義字號(hào) 38

2.4.2 使用calc定義字號(hào) 39

2.5 無單位的數(shù)值和行高 39

2.6 自定義屬性(即CSS變量) 41

2.6.1 動(dòng)態(tài)改變自定義屬性 43

2.6.2 使用改變自定義屬性 45

2.6.3 探索自定義屬性 46

2.7 總結(jié) 46

3章 盒模型 47

3.1 元素寬度的問題 47

3.1.1 避免魔術(shù)數(shù)值 50

3.1.2 調(diào)整盒模型 51

3.1.3 全局設(shè)置border-box 52

3.1.4 給列之間加上間隔 53

3.2 元素高度的問題 54

3.2.1 控制溢出行為 55

3.2.2 百分比高度的備選方案 56

3.2.3 使用min-height和max-height 60

3.2.4 垂直居中內(nèi)容 60

3.3 負(fù)外邊距 62

3.4 外邊距折疊 62

3.4.1 文字折疊 63

3.4.2 多個(gè)外邊距折疊 63

3.4.3 容器外部折疊 64

3.5 容器內(nèi)的元素間距 65

3.5.1 如果內(nèi)容改變了 67

3.5.2 更通用的解決方案:貓頭鷹選擇器 68

3.6 總結(jié) 71

二部分 精通布局

4章 理解浮動(dòng) 74

4.1 浮動(dòng)的設(shè)計(jì)初衷 74

4.2 容器折疊和清除浮動(dòng) 80

4.2.1 理解容器折疊 80

4.2.2 理解清除浮動(dòng) 82

4.3 出乎意料的“浮動(dòng)陷阱” 84

4.4 媒體對象和BFC 87

4.4.1 BFC 88

4.4.2 使用BFC實(shí)現(xiàn)媒體對象布局 89

4.5 網(wǎng)格系統(tǒng) 90

4.5.1 理解網(wǎng)格系統(tǒng) 91

4.5.2 構(gòu)建網(wǎng)格系統(tǒng) 91

4.5.3 添加間隔 95

4.6 總結(jié) 99

5章 Flexbox 100

5.1 Flexbox的原則 100

5.1.1 創(chuàng)建一個(gè)基礎(chǔ)的Flexbox菜單 103

5.1.2 添加內(nèi)邊距和間隔 105

5.2 彈性子元素的大小 107

5.2.1 使用flex-basis屬性 109

5.2.2 使用flex-grow屬性 109

5.2.3 使用flex-shrink屬性 110

5.2.4 實(shí)際應(yīng)用 111

5.3 彈性方向 112

5.3.1 改變彈性方向 114

5.3.2 登錄表單的樣式 115

5.4 對齊、間距等細(xì)節(jié) 117

5.4.1 理解彈性容器的屬性 117

5.4.2 理解彈性子元素的屬性 120

5.4.3 使用對齊屬性 121

5.5 值得注意的地方 122

5.5.1 Flexbugs 123

5.5.2 整頁布局 123

5.6 總結(jié) 123

6章 網(wǎng)格布局 124

6.1 網(wǎng)頁布局開啟新紀(jì)元 124

6.2 網(wǎng)格剖析 127

6.2.1 網(wǎng)格線的編號(hào) 132

6.2.2 與Flexbox配合 133

6.3 替代語法 137

6.3.1 命名的網(wǎng)格線 137

6.3.2 命名網(wǎng)格區(qū)域 139

6.4 顯式和隱式網(wǎng)格 140

6.4.1 添加變化 144

6.4.2 讓網(wǎng)格元素填滿網(wǎng)格軌道 146

6.5 特性查詢 149

6.6 對齊 152

6.7 總結(jié) 153

7章 定位和層疊上下文 154

7.1 固定定位 154

7.1.1 用固定定位創(chuàng)建一個(gè)模態(tài)框 155

7.1.2 控制定位元素的大小 158

7.2 定位 158

7.2.1 讓Close按鈕定位 158

7.2.2 定位偽元素 159

7.3 相對定位 161

7.3.1 創(chuàng)建一個(gè)下拉菜單 161

7.3.2 創(chuàng)建一個(gè)CSS三角形 164

7.4 層疊上下文和z-index 166

7.4.1 理解渲染過程和層疊順序 166

7.4.2 用z-index控制層疊順序 168

7.4.3 理解層疊上下文 168

7.5 粘滯定位 171

7.6 總結(jié) 174

8章 響應(yīng)式設(shè)計(jì) 175

8.1 移動(dòng)優(yōu)先 176

8.1.1 創(chuàng)建移動(dòng)版的菜單 182

8.1.2 給視添加meta標(biāo)簽 185

8.2 媒體查詢 186

8.2.1 媒體查詢的類型 187

8.2.2 給網(wǎng)頁添加斷點(diǎn) 189

8.2.3 添加響應(yīng)式的列 192

8.3 流式布局 194

8.3.1 給大視添加樣式 195

8.3.2 處理表格 196

8.4 響應(yīng)式圖片 198

8.4.1 不同視大小使用不同的圖片 198

8.4.2 使用srcset提供對應(yīng)的圖片 199

8.5 總結(jié) 200

三部分 大型應(yīng)用中的CSS

9章 模塊化CSS 202

9.1 基礎(chǔ)樣式:打好基礎(chǔ) 203

9.2 一個(gè)簡單的模塊 204

9.2.1 模塊的變體 205

9.2.2 多元素模塊 208

9.3 把模塊組合成更大的結(jié)構(gòu) 211

9.3.1 拆分不同模塊的職責(zé) 212

9.3.2 模塊命名 215

9.4 工具類  217

9.5 CSS方 217

9.6 總結(jié) 219

0章 模式庫 220

10.1 KSS簡介 221

10.1.1 配置KSS 222

10.1.2 編寫KSS文檔 223

10.1.3 記錄模塊變體 227

10.1.4 創(chuàng)建概覽頁面 229

10.1.5 記錄需要的模塊 229

10.1.6 為模式庫分組 232

10.2 改變編寫CSS的方式 234

10.2.1 CSS優(yōu)先的工作流程 234

10.2.2 像API一樣使用模式庫 235

10.3 總結(jié) 240

四部分 高級(jí)話題

1章 背景、陰影和混合模式 242

11.1 漸變 243

11.1.1 使用多個(gè)顏節(jié)點(diǎn) 245

11.1.2 使用徑向漸變 247

11.2 陰影 248

11.2.1 使用漸變和陰影形成立體感 249

11.2.2 使用扁平化設(shè)計(jì)創(chuàng)建元素 251

11.2.3 讓按鈕看起來更時(shí)尚 252

11.3 混合模式 253

11.3.1 為圖片著 255

11.3.2 理解混合模式的類型 256

11.3.3 為圖片添加紋理 257

11.3.4 使用融合混合模式 258

11.4 總結(jié) 260

2章 對比、顏和間距 261

12.1 對比重要 262

12.1.1 建立模式 263

12.1.2 還原設(shè)計(jì)稿 264

12.2 顏 266

12.2.1 理解顏表示法 272

12.2.2 添加新顏到調(diào)板 275

12.2.3 思考字體顏的對比效果 277

12.3 間距 279

12.3.1 使用em還是px 279

12.3.2 思考一下行高 281

12.3.3 為行內(nèi)元素設(shè)置間距 284

12.4 總結(jié) 286

3章 排版 287

13.1 Web字體 288

13.2 谷歌字體 289

13.3 如何使用@font-face 293

13.3.1 字體格式與回退處理 294

13.3.2 同一種字型的多種變體 295

13.4 調(diào)整字距,提升可讀性 296

13.4.1 正文主體的字間距 297

13.4.2 標(biāo)題、小元素和間距 298

13.5 惱人的FOUT和FOIT 302

13.5.1 使用Font Face Observer 304

13.5.2 回退到系統(tǒng)字體 305

13.5.3 準(zhǔn)備使用font-display 307

13.6 總結(jié) 308

4章 過渡 309

14.1 從這邊到那邊 309

14.2 定時(shí)函數(shù) 311

14.2.1 理解貝塞爾曲線 312

14.2.2 階躍 315

14.3 非動(dòng)畫屬性 316

14.3.1 不可添加動(dòng)畫效果的屬性 318

14.3.2 淡入與淡出 319

14.4 過渡到自動(dòng)高度 321

14.5 總結(jié) 323

5章 變換 324

15.1 旋轉(zhuǎn)、平移、縮放和傾斜 324

15.1.1 更改變換基點(diǎn) 327

15.1.2 使用多重變換 327

15.2 在運(yùn)動(dòng)中變換 328

15.2.1 放大圖標(biāo) 333

15.2.2 創(chuàng)建“飛入”的標(biāo)簽 335

15.2.3 交錯(cuò)顯示過渡 337

15.3 動(dòng)畫性能 338

15.4 三維(3D)變換 340

15.4.1 控制透視距離 341

15.4.2 實(shí)現(xiàn)高級(jí)3D變換 343

15.5 總結(jié) 346

6章 動(dòng)畫 347

16.1 關(guān)鍵幀 348

16.2 為3D變換添加動(dòng)畫 350

16.2.1 創(chuàng)建無動(dòng)畫頁面布局 350

16.2.2 為布局添加動(dòng)畫 355

16.3 動(dòng)畫延遲和填充模式 356

16.4 通過動(dòng)畫傳遞意圖 359

16.4.1 反饋用戶作 359

16.4.2 吸引用戶的注意力 362

16.5 后一點(diǎn)建議 365

16.6 總結(jié) 365

附錄A 選擇器 366

附錄B 預(yù)處理器 370
展開全部

深入解析CSS 作者簡介

基思·J.格蘭特(Keith J. Grant) 高級(jí)Web開發(fā)人員,現(xiàn)任職于美國洲際交易所,負(fù)責(zé)編寫和維護(hù)合作站點(diǎn)的CSS,客戶包括紐約證券交易所網(wǎng)站等。在使用HTML、CSS和開發(fā)和維護(hù)Web站點(diǎn)及應(yīng)用程序方面具有豐富的經(jīng)驗(yàn)。 【譯者簡介】 黃小璐 曾任奇虎360軟件開發(fā)工程師,多年Web從業(yè)者。參與翻譯了《高性能HTML5》《移動(dòng)Web手冊》《大型應(yīng)用佳實(shí)踐指南》《Web開發(fā)指南》等書。 高楠 多年Web開發(fā)經(jīng)驗(yàn),自由譯者,開源硬件愛好者。目前就職于360奇舞團(tuán)。

商品評(píng)論(0條)
暫無評(píng)論……
書友推薦
編輯推薦
返回頂部
中圖網(wǎng)
在線客服
主站蜘蛛池模板: 合肥防火门窗/隔断_合肥防火卷帘门厂家_安徽耐火窗_良万消防设备有限公司 | 螺旋绞龙叶片,螺旋输送机厂家,山东螺旋输送机-淄博长江机械制造有限公司 | 自动气象站_气象站监测设备_全自动气象站设备_雨量监测站-山东风途物联网 | 私人别墅家庭影院系统_家庭影院音响_家庭影院装修设计公司-邦牛影音 | 周易算网-八字测算网 - 周易算网-宝宝起名取名测名字周易八字测算网 | PU树脂_水性聚氨酯树脂_聚氨酯固化剂_聚氨酯树脂厂家_宝景化工 | 政府园区专业委托招商平台_助力企业选址项目快速落地_东方龙商务集团 | 全球化工设备网—化工设备,化工机械,制药设备,环保设备的专业网络市场。 | 仓储货架_南京货架_钢制托盘_仓储笼_隔离网_环球零件盒_诺力液压车_货架-南京一品仓储设备制造公司 | 防腐木批发价格_深圳_惠州_东莞防腐木厂家_森源(深圳)防腐木有限公司 | 湖南档案密集架,智能,物证,移动,价格-湖南档案密集架厂家 | 层流手术室净化装修-检验科ICU改造施工-华锐净化工程-特殊科室建设厂家 | 顺景erp系统_erp软件_erp软件系统_企业erp管理系统-广东顺景软件科技有限公司 | 卷筒电缆-拖链电缆-特种柔性扁平电缆定制厂家「上海缆胜」 | 制样机-密封锤式破碎机-粉碎机-智能马弗炉-南昌科鑫制样 | 立刷【微电签pos机】-嘉联支付立刷运营中心 | 企小优-企业数字化转型服务商_网络推广_网络推广公司 | 水平筛厂家-三轴椭圆水平振动筛-泥沙震动筛设备_山东奥凯诺矿机 包装设计公司,产品包装设计|包装制作,包装盒定制厂家-汇包装【官方网站】 | 交通气象站_能见度检测仪_路面状况监测站- 天合环境科技 | YJLV22铝芯铠装电缆-MYPTJ矿用高压橡套电缆-天津市电缆总厂 | 压滤机-洗沙泥浆处理-压泥机-山东创新华一环境工程有限公司 | 碳化硅,氮化硅,冰晶石,绢云母,氟化铝,白刚玉,棕刚玉,石墨,铝粉,铁粉,金属硅粉,金属铝粉,氧化铝粉,硅微粉,蓝晶石,红柱石,莫来石,粉煤灰,三聚磷酸钠,六偏磷酸钠,硫酸镁-皓泉新材料 | 双杰天平-国产双杰电子天平-美国双杰-常熟双杰仪器 | 【铜排折弯机,钢丝折弯成型机,汽车发泡钢丝折弯机,线材折弯机厂家,线材成型机,铁线折弯机】贝朗折弯机厂家_东莞市贝朗自动化设备有限公司 | 防爆暖风机_防爆电暖器_防爆电暖风机_防爆电热油汀_南阳市中通智能科技集团有限公司 | 上海小程序开发-上海小程序制作公司-上海网站建设-公众号开发运营-软件外包公司-咏熠科技 | 合肥弱电工程_安徽安防工程_智能化工程公司-合肥雷润 | 地图标注-手机导航电子地图如何标注-房地产商场地图标记【DiTuBiaoZhu.net】 | 电梯乘运质量测试仪_电梯安全评估测试仪-武汉懿之刻 | 制氮设备_PSA制氮机_激光切割制氮机_氮气机生产厂家-苏州西斯气体设备有限公司 | 复合肥,化肥厂,复合肥批发,化肥代理,复合肥品牌-红四方 | 国际船舶网 - 船厂、船舶、造船、船舶设备、航运及海洋工程等相关行业综合信息平台 | 国产液相色谱仪-超高效液相色谱仪厂家-上海伍丰科学仪器有限公司 | 微型气泵-真空-蠕动-水泵-厂家-深圳市品亚科技有限公司 | 一体化污水处理设备-一体化净水设备-「山东梦之洁水处理」 | 翰墨AI智能写作助手官网_人工智能问答在线AI写作免费一键生成 | 成都网站建设制作_高端网站设计公司「做网站送优化推广」 | ORP控制器_ORP电极价格-上优泰百科 | 广州企亚 - 数码直喷、白墨印花、源头厂家、透气无手感方案服务商! | 两头忙,井下装载机,伸缩臂装载机,30装载机/铲车,50装载机/铲车厂家_价格-莱州巨浪机械有限公司 | 3dmax渲染-效果图渲染-影视动画渲染-北京快渲科技有限公司 |