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