CSS 實戰手冊（第四版） pdf epub mobi txt 電子書 下載 2025

簡體網頁||繁體網頁

☆☆☆☆☆

[美] David McFarland（戴維·麥剋法蘭） 著

齣版社： 中國電力齣版社

ISBN：9787512394025

版次：4

商品編碼：12053508

包裝：平裝

開本：16開

齣版時間：2016-10-01

用紙：膠版紙

頁數：668

字數：804000

正文語種：中文

編輯推薦

適讀人群 ：《CSS 實戰手冊（第四版）》廣大讀者
　　超級暢銷書CSS專業指南的姊妹篇，介紹瞭從入門到精通的各種細節和技巧。

內容簡介

　　《CSS 實戰手冊（第四版）》使用 CSS 能創建專業的網站，不過即使是有經驗的 Web 設計師，也很難學會 CSS 的各種細節。在前幾版的基礎上做瞭全麵升級，提供瞭zui新、zui有用的提示和技巧，而且通過教程說明現今可用的 CSS。會教你如何使用新工具（如彈性盒和 Sass）構建外觀精美的網頁，而且在任何桌麵設備或移動設備中都能快速運行。適閤業餘和有經驗的設計師等閱讀。
　　從基礎知識入手。編寫對 CSS 友好的 HTML 代碼，包括現今的瀏覽器能識彆的 HTML5 標簽。
　　為移動設備設計。創建對移動設備友好的網頁，以便訪客隨時隨地瀏覽。
　　創建充滿活力的網頁。添加能吸引眼球的動畫，創建用戶體驗好的錶單。
　　控製頁麵的布局。使用專業的設計技術，例如浮動和定位。
　　讓布局更靈活。使用彈性盒設計網站，適應不同的設備和屏幕寬度。
　　更有效地工作。使用 Sass，減少編寫的 CSS 代碼量，以小型文件組織樣式。

作者簡介

　　David Sawyer McFarland，是 Web 開發者、教師和作者。他從 1995 年開始開發網站，並設計瞭一份給通信專傢閱讀的在綫雜誌。David 曾任教於加州大學伯剋利分校新聞研究生院、電子藝術中心、波特蘭藝術學院和波特蘭州立大學。現在他是在綫教育網站 Treehouse（http://teamtreehouse.com）的教學團隊主管。

目錄

The Missing Manual 團隊.1
前言 5
第一部分 CSS 基礎知識
第1章 HTML和CSS 17
HTML的過去和現在 17
編寫HTML時兼顧CSS 19
文檔類型的重要性30
CSS的運作方式 31
第2章編寫樣式和樣式錶 33
剖析樣式33
解讀樣式錶 36
內部樣式錶 37
外部樣式錶 38
教程：首次編寫樣式 39
第3章選擇符：標識要裝飾的目標 51
類型選擇符：選取HTML標簽 51
類選擇符：精確控製 53
ID選擇符：選取網頁中具體的元素 56
給標簽組定義樣式58
為標簽裏的標簽定義樣式60
僞類和僞元素64
屬性選擇符 69
子代選擇符 71
同輩選擇符 77
:target 選擇符78
:not()選擇符79
教程：選擇符示例80
第4章繼承樣式，節省時間 95
什麼是繼承？95
繼承如何簡化樣式錶 96
繼承的局限性98
教程：繼承 98
第5章管理多個樣式：層疊 105
樣式層疊的方式 106
特指度：確定哪個樣式勝齣 110
控製層疊 113
教程：層疊實戰 119
第二部分 CSS實用技術第6章裝飾文本 129
使用字體 129
使用Web 字體 134
使用Google 提供的Web 字體服務 149
為文本著色 156
修改字號 160
裝飾詞語和字符 165
為文本添加投影 169
裝飾整個段落 170
裝飾列錶 177
教程：裝飾文本實戰 181
第7章外邊距、內邊距和邊框 193
理解盒模型 193
使用內外邊距控製空白 195
添加邊框 201
添加背景色 205
創建圓角 206
添加投影 208
確定高度和寬度 211
把內容放在浮動元素裏 217
教程：邊距，背景和邊框 222
第8章把圖形添加到網頁中 233
使用CSS裝飾 標簽 233
添加背景圖 234
控製平鋪方式 238
定位背景圖 240
使用簡寫的background 屬性 250
使用多個背景圖 252
使用漸變背景 254
教程：美化圖像 263
教程：創建相冊 268
教程：使用背景圖 271
第9章裝飾網站的導航 279
選擇要裝飾的鏈接 279
裝飾鏈接 283
創建導航欄 289
使用CSS創建預先加載圖像的翻轉效果 298
裝飾特定類型的鏈接 299
教程：裝飾鏈接 301
教程：創建導航欄 307
第10章 CSS變形，過渡和動畫 317
變形 317
過渡 327
動畫 335
教程 346
第11章裝飾錶格和錶單 353
錶格的正確用途 353
裝飾錶格 355
裝飾錶單 361
教程：裝飾一個錶格 365
教程：裝飾一個錶單 370
第三部分 CSS頁麵布局第12章 CSS布局簡介 379
網頁布局的類型 379
如何使用CSS布局 381
布局策略 385
第13章構建基於浮動的布局 391
活用浮動布局 394
解決浮動問題 399
教程：多欄布局 411
第14章定位網頁中的元素 423
定位屬性的工作原理 423
有效的定位策略 436
教程：定位頁麵中的元素 441
第15章響應式Web 設計 449
響應式Web 設計基礎 449
為響應式Web 設計設置網頁 451
媒體查詢 452
彈性柵格 459
可變尺寸圖像 464
響應式Web設計教程 468
第16章使用CSS柵格係統 483
柵格的工作原理 483
為柵格搭建HTML結構 485
使用Skeleton 柵格係統 487
創建並劃分列 490
教程：使用柵格係統 498
第17章 Web 布局新方法：彈性盒 513
彈性盒簡介 513
彈性容器相關的屬性 516
彈性項目相關的屬性 525
教程：使用彈性盒構建布局 539
第四部分 CSS高級話題第18章改善編寫CSS的習慣 551
添加注釋 551
閤理組織樣式 553
消除瀏覽器對樣式的乾擾 560
使用後代選擇符 564
第19章使用Sass增強樣式 571
Sass是什麼 571
安裝Sass 573
Sass基礎知識 576
使用Sass局部文件組織樣式 580
Sass變量 584
嵌套選擇符 588
繼承（或擴展）屬性 593
混入 598
處理媒體查詢 606
使用CSS源碼映射診斷故障 610
第五部分附錄附錄A CSS 屬性參考 615
附錄B CSS資源 653

前言/序言

　　■ 預備知識
　　閱讀本書之前要先具備一些HTML知識。你可能開發過一兩個網站（或者至少寫過一兩個網頁），因此熟悉超文本標記語言（Hypertext Markup Language，簡稱HTML）眾多標簽中的一部分，例如、和.Hey,.I.am.the.title.of.this.web.page...Hey,.I.am.a.paragraph.on.this.web.page.
　　.
　　這段代碼沒有什麼讓人興奮的地方，不過卻包含一個網頁所需的全部基本元素。你可能注意到瞭，上述代碼的開頭是文檔類型聲明，隨後是 標簽（注意，兩側有尖括號）、頭部和主體，主體部分是網頁要顯示的內容，最後是。
　　■ 文檔類型
　　網頁的開頭都是文檔類型，指明網頁是使用哪種HTML編寫的。HTML 4.01 和XHTML 1.0 這兩種類型使用好多年瞭，而且各自都有兩種風格：嚴格和過渡。例如，下述代碼錶示過渡的HTML 4.01 文檔類型（嚴格的HTML 4.01 文檔類型和XHTML 1.0的兩種文檔類型聲明與此類似）：
　　仔細看前一節的示例代碼，你會發現那裏使用的文檔類型聲明更簡潔：
　　這行代碼聲明的是 HTML5 文檔類型。與之前的版本相比，HTML5 更簡單，更易於使用。本書都使用HTML5 文檔類型，所有主流瀏覽器都支持這種文檔類型（連古老的 Internet Explorer 6 都支持），因此沒有任何理由不使用。
　　雖然舊版瀏覽器支持HTML5 文檔類型，但是並不是所有瀏覽器都支持全部的HTML5 標簽和功能。例如，Internet Explorer 8 及之前的版本就不能識彆 HTML5 新添加的標簽。若想在這些 IE 版本中使用CSS為新添加的標簽編寫樣式，要藉助一些JavaScript 代碼。後文的“讓IE8支持 HTML5”旁注會告訴你怎麼做。
　　其實，關於文檔類型最重要的一點是，記住始終要聲明文檔類型。如果不聲明文檔類型，網頁在不同的瀏覽器中會有不同的錶現，因為不知道文檔類型的話，瀏覽器不知道如何解析CSS。
　　不同的文檔類型對 HTML 的編寫方式有不同的要求。例如，在HTML 4.01 中，錶示換行的標簽寫成：
　　而在 XHTML 中，要寫成：
　　在這方麵，HTML5的優勢又體現齣來瞭，兩種寫法都可以。
　　■HTML標簽的工作原理
　　所有網頁的HTML代碼都與前麵的示例一樣，大多數標簽都成對齣現，一對標簽中可以直接寫入內容，也可以包含其他標簽。標簽放在一對尖括號中，告訴Web 瀏覽器如何顯示網頁。標簽是超文本標記語言中的“標記”部分。
　　標簽對的起始標簽告訴瀏覽器標記從哪裏開始，結束標簽告訴瀏覽器標記到哪裏結束。結束標簽在左尖括號（<）之後都有一個斜綫（/）。
　　網頁一般至少包含下述四個部分：
　　.前一節說過，網頁的第一行是文檔類型聲明。
　　. 標簽在網頁開頭齣現一次，在網頁末尾還會齣現一次，不過這一次要加上斜綫，寫成 。這個標簽的作用是告訴Web 瀏覽器，這個文檔的內容是使用HTML編寫的，而不是其他語言。網頁中的所有內容，包括其他標簽，都寫在 標簽對之間。
　　如果把網頁視作樹， 標簽就是樹的根。這棵樹有兩個枝杈，分彆錶示組成網頁的兩個主要部分：頭部和主體。
　　.網頁的頭部包含網頁的標題（例如“Izzie’s Mail-Order Pencils”），以及其他不可見的信息，例如瀏覽器和搜索引擎使用的網頁內容描述。頭部放在標簽對中。
　　此外，頭部區域還有其他信息，指明瀏覽器如何格式化頁麵的HTML，還可以添加交互。讀到後文你會看到， 區域可以包含CSS 代碼（就是本書教你編寫的那種）或者鏈接，指嚮存儲CSS信息的文件。
　　.主體放在 標簽對中，裏麵的所有內容都會顯示在瀏覽器中，例如標題、文本和圖片等。
　　標簽中一般有如下標簽：
　　.
　　標簽（段落的起始標簽），告訴Web 瀏覽器一段文本從哪裏開始；
　　標簽（段落的結束標簽），告訴瀏覽器一段文本到哪裏結束。
　　.標簽，標記重要的文本。如果把文本放在標簽對裏，文本會以粗體顯示。例如，Warning! 告訴Web 瀏覽器著重強調“Warning!”這個詞。
　　. 標簽（也稱錨記標簽），在網頁中創建超鏈接。單擊超鏈接（或簡稱鏈接）後可以訪問網絡中的其他網頁。鏈接指嚮的網址在起始標簽 中指定，例如Click.here!。
　　單擊“Click here!”後，瀏覽器知道要訪問The Missing Manual 網站。 標簽中的href 稱為屬性，那個URL（Uniform Resource Locator，意為“統一資源定位地址”，也稱網址）是這個屬性的值。在這個例子中，href 屬性的值是http://www.missingmanuals.com 。
　　■HTML5：提供更多標簽
　　HTML5 是HTML的當前版本，已經發布好幾年瞭。有時，提到HTML5 並不是指HTML標簽，而是指本地存儲（把網站的數據保存在訪客的電腦中）、地理定位（確定訪客在世界上的位置）或者使用WebGL 在網頁中繪圖。嚴格來說，這些技術並不屬於HTML，而是隨著HTML5一起齣現的瀏覽器新特性。
　　在本書中，HTML5 始終指代HTML5 文檔類型，以及隨HTML5 標準一起發布的新標簽。HTML5 與之前的版本沒有太大差彆，因為製定這個標準時考慮瞭嚮前兼容性。HTML之前版本的內容基本沒變，HTML5 隻是根據當下Web 設計師開發網站的方式添加瞭一些新標簽，例如，HTML5 新增瞭 標簽，錶示一般位於頁頭的內容，比如說徽標和站內導航鏈接；新增的 標簽用於放置站內鏈接；標簽錶示一般會放在頁腳的內容，比如說法律條款和電子郵件地址等。
　　除此之外，HTML5 還新增瞭用於插入視頻和音頻的標簽；復雜的錶單元素標簽，例如滑動條和彈齣式日期選擇器；內置於瀏覽器中的錶單驗證功能（確保訪客正確填寫錶單）。本書會大量使用HTML5，尤其是下一章。
　　■編寫CSS的軟件
　　編寫由HTML和CSS組成的網頁隻需簡單的文本編輯器，例如Notepad（Windows）或TextEdit（Mac ）。不過，在文本編輯器中編寫幾百行HTML和CSS之後，你可能想使用更適閤用來編寫網頁的軟件。本節列齣一些常用的軟件，有些是免費的，有些則是收費的。
　　其實，能協助我們編寫網頁的工具有幾百個，所以本節給齣的列錶並不完整。本節列齣的是最受CSS開發者喜愛的軟件，隻是拋磚引玉。
　　免費軟件
　　用於編輯網頁和樣式錶的免費軟件有很多。如果一直使用Notepad 或TextEdit，不妨試試下麵這些軟件。下麵是最受歡迎的幾個軟件：
　　.Brackets（Windows，Mac，Linux；http://brackets.io/）。Adobe 領頭開發，免費開源，為編寫HTML和CSS提供瞭很多工具。這個編輯器專為Web 設計師和開發者而開發。
　　.Atom（Windows，Mac，Linux；https://atom.io/）。也是免費開源的文本編輯器，由GitHub（最受歡迎的代碼分享和協作網站）的員工開發。與Brackets 一樣，這個文本編輯器的目標用戶群也是Web 開發者。
　　.jEdit（Windows，Mac，Linux；http://jedit.org）。免費的文本編輯器，使用Java 開發，幾乎在任何電腦中都能使用，而且提供瞭收費文本編輯器纔有的很多功能，例如CSS句法高亮。
　　.Notepad++（Windows；http://notepad-plus.sourceforge.net）。很多人特彆喜
　　前言9歡這個速度快的文本編輯。這個編輯器甚至還內置瞭便於編寫HTML和CSS的功能，例如句法高亮——使用不同的顔色標記標簽和特殊的關鍵字，便於識彆網頁中的HTML和CSS元素。
　　收費軟件
　　收費的網站開發軟件有便宜的，也有貴的，包含開發網站所需的各種工具：
　　.EditPlus（Windows；www.editplus.com）是便宜（35美元）的文本編輯器，支持句法高亮、FTP、自動補全和其他便利的功能。
　　.skEdit（Mac；www.skedit.com）是便宜的（30美元）網頁編輯器，完全支持FTP/SFTP、代碼提示和其他有用的功能。
　　.Coda2（Mac；www.panic.com/coda）是Web 開發套件（99美元），各種功能完善，包含文本編輯器、網頁預覽程序，支持FTP/SFTP，還提供瞭用於編寫CSS 的圖形化工具。
　　.Sublime Text（Windows，Mac，Linux；www.sublimetext.com）是一款強大的文本編輯器（70 美元），深受眾多 Web 開發者的喜愛。很多 Web 設計公司都使用這個編輯器。
　　是一款可視化網頁編輯器（每月19.99美元起）。使用Dreamweaver 編寫網頁的同時可以在Web 瀏覽器中查看網頁。這個軟件提供瞭強大的文本編輯器，以及編寫和管理 CSS的工具。這個軟件的完整使用說明參閱《Dreamweaver
　　CC: The Missing Manual 》。
　　本節給齣的都是通用軟件，既可以編輯HTML，也可以編輯CSS。從這些工具中選齣一個就能滿足Web 開發的需求。
　　■ 關於本書
　　萬維網特彆易於使用，全國各地，從老人到一年級的小學生每天都會使用網絡。不過，網絡的運作規則並不那麼易於理解。編寫官方文檔的計算機科學傢和其他電腦人纔並不樂於嚮普通用戶解釋相關的概念，你可以訪問www.w3.org/TR/css3-transforms，看看這些技術專傢所寫的文檔是多麼晦澀難懂。
　　想學習CSS的人往往不知道從哪開始，而且CSS有些微妙難解之處，有些熟練的Web 專傢也搞不懂。本書的目的是填補空缺，為用戶提供CSS使用手冊，一步步說明如何使用CSS創建精美的網頁。
　　本書適閤各種技能水平的讀者閱讀。為瞭更好地理解本書內容，你要具有一些基本的HTML知識，可能還要對CSS有些基本的瞭解。如果你從未編寫過網頁，可以先看“教程：首次編寫樣式”一節。本書內容主要針對已經入門或中級讀者。如果剛開始學習編寫網頁，可以閱讀帶有“加油站”標注的旁注，這些旁注是一些介紹性信息，能幫你更好地理解所講的知識。如果你是高級的Web 開發者，請特彆留意帶有“高級用戶門診”標注的旁注，這些旁注為有經驗的電腦高手提供瞭很多技術方麵的小技巧和快捷方法。
　　本書大綱
　　本書分為五部分，前四部分各有幾章內容，最後一部分是附錄。
　　.第一部分介紹如何編寫樣式錶，簡要說明一些重要的CSS概念，例如繼承、選擇符和層疊。閱讀這一部分的過程中，你會學到使用CSS時編寫HTML的最佳實踐。這一部分有很多教程，目的是加深你對主要概念的理解，也是為瞭讓你一窺CSS的強大。
　　.第二部分實際動手，設計網頁。這一部分教你最重要的CSS屬性，用這些屬性裝飾文本，創建有用的導航，使用圖片提升網頁的外觀；還會教你如何使用CSS製作簡單的動畫，說明如何製作吸引人的錶格和錶單。
　　.第三部分說明最難理解但最值得學習的CSS功能——控製網頁的布局。這一部分會教你如何創建常見的布局（例如兩欄和三欄），如何添加側邊欄，教你浮動和定位，這是控製網頁布局最常使用的CSS技術。除此之外，還會教你如何編寫適應桌麵瀏覽器、平闆電腦瀏覽器和移動設備瀏覽器的網頁，以及一種網頁布局的強大新方式——彈性盒模型（flexbox ）。
　　.第四部分涵蓋一些改進CSS的高級技巧，還會介紹Sass，強大而高效的樣式錶編寫方式。
　　.第五部分提供兩份參考資料。一份是“CSS屬性參考”，簡要列齣一些有用的CSS屬性，以便參考。其中一些屬性你可能沒見過，閱讀這份參考可以快速學習；有些屬性則是你已經知道的，閱讀這份參考可以鞏固知識。另一個附錄介紹一些編寫及使 CSS的工具和資源。
　　■ 基礎知識
　　為瞭能順利閱讀本書，其實也為瞭能正確使用電腦，你要知道一些基礎知識。你要熟悉以下術語和概念：
　　.點擊。說明如何使用電腦的鼠標或觸控闆時，本書會使用三種錶達方式。
　　前言11“點擊”的意思是，把箭頭光標移到屏幕上的某個位置，停在那裏不動，按鼠標（或筆記本電腦的觸控闆）上的左鍵，然後鬆開。“按右鍵”與“點擊”的意思差不多，不過按的是鼠標上的右鍵（如果鼠標沒有右鍵，而且使用的是Mac 電腦，可以同時按左鍵和Control 鍵）。
　　“雙擊”的意思是，快速連續點擊兩次，點擊的過程中也不能移動光標。“拖動”的意思是，按住鼠標左鍵不放，移動光標。如果讓你在PC上按Ctrl 鍵點擊，或者在Mac 上按z鍵點擊，意思是讓你在點擊的同時按住Ctrl 或z鍵。
　　.菜單。“菜單”是指屏幕或窗口頂部顯示的文字，例如“文件”和“編輯”等。點擊這些菜單後會顯示一係列命令，不過這些命令在下拉窗口中顯示。本書假定你知道如何打開程序，知道如何瀏覽網頁，也知道如何下載文件。你應該知道如何使用Windows 係統的開始菜單，或者知道如何使用Mac OS X 係統的Dock 或Apple 菜單；也應該知道如何使用Wind

評分☆☆☆☆☆

品質還是可以，就是Head First的風格，書太厚太重，信息密度極低。

評分☆☆☆☆☆

一次買瞭個夠，很滿意，部分裝訂的很精緻，薅羊毛薅的爽歪歪。

評分☆☆☆☆☆

真不錯，就是快遞好慢好慢，需要供貨商購買，好慢。

評分☆☆☆☆☆

這本書很不錯，基礎知識講的很詳細，適閤新手

評分☆☆☆☆☆

看瞭一段時間，好好學習天天嚮上，年年加薪登上人生巔峰

評分☆☆☆☆☆

包裝很好沒有損壞

評分☆☆☆☆☆

css經典書籍，學習必備！書的質量不錯，基本上技術書籍都是京東買的，信賴京東！

評分☆☆☆☆☆

日常好評，買書上京東，快！！

評分☆☆☆☆☆

書很好，學習html前端設計很有用