CSS概述
CSS概述
CSS 指層疊樣式表 (Cascading Style Sheets)坐昙，樣式定義如何顯示 HTML 元素，樣式通常存儲在樣式表中车遂，把樣式添加到 HTML 中失仁，是為了解決內(nèi)容與表現(xiàn)分離的問題捡鱼。外部樣式表可以極大提高工作效率颗胡，其通常存儲在 CSS 文件中毫深，多個樣式定義可層疊為一。
樣式解決了一個普遍的問題
HTML 標簽原本被設(shè)計為用于定義文檔內(nèi)容毒姨。通過使用 <h1>哑蔫、<p>、<table> 這樣的標簽弧呐，HTML 的初衷是表達“這是標題”闸迷、“這是段落”、“這是表格”之類的信息俘枫。同時文檔布局由瀏覽器來完成腥沽，而不使用任何的格式化標簽。
由于兩種主要的瀏覽器（Netscape 和 Internet Explorer）不斷地將新的 HTML 標簽和屬性（比如字體標簽和顏色屬性）添加到 HTML 規(guī)范中鸠蚪，創(chuàng)建文檔內(nèi)容清晰地獨立于文檔表現(xiàn)層的站點變得越來越困難今阳。
為了解決這個問題，萬維網(wǎng)聯(lián)盟（W3C）茅信，這個非營利的標準化聯(lián)盟盾舌，肩負起了 HTML 標準化的使命，并在 HTML 之外創(chuàng)造出樣式（Style）蘸鲸。
所有的主流瀏覽器均支持層疊樣式表妖谴。
更多CSS的資源，可在 W3School 中獲茸靡 ：http://www.w3school.com.cn/css
神奇的CSS
不同CSS的能夠使完全一樣的HTML膝舅，變成完全不同的模樣。比如在mezzoblue.com這個博客中妙痹，2003年5月7日的一篇博文里铸史，作者提供了一個平臺——《CSS Zen Garden》，完全一樣的HTML怯伊，自己或讀者們編寫并提供各式各樣的CSS文件琳轿，從而形成了200余個完全不同各式各樣的網(wǎng)頁。
所以我們在說 HTML 的時候，通常不會脫離 CSS吧秕，CSS可以使得一個網(wǎng)頁變得豐富多彩起來琉闪。
由于限于篇幅問題，且本書是以提供指導為主砸彬，所以本書不會詳細去講解基本的 HTML 與 CSS颠毙，所有語法知識都附有學習資源斯入，請初學者們務(wù)必抽一些時間出來自學完成，否則后面的課程會無法跟上蛀蜜，將導致看完了本書也終會一無所獲刻两。
CSS禪意花園
《CSS禪意花園》這本書的作者是世界著名的網(wǎng)站設(shè)計師，書中的范例來自網(wǎng)站設(shè)計領(lǐng)域最著名的網(wǎng)站——CSS Zen Garden（CSS禪意花園：http://www.csszengarden.com/）滴某。全書分為兩個主要部分磅摹。第1章為第一部分，討論網(wǎng)站“CSS禪意花園”及其最基本的主題霎奢，包含正確的標記結(jié)構(gòu)和靈活性規(guī)劃等户誓。第二部分包括6章，占據(jù)了書中的大部分篇幅幕侠。
每章剖析“CSS禪意花園”收錄的6件設(shè)計作品帝美，這些作品圍繞一個主要的設(shè)計概念展開，如文字的使用等橙依。通過探索36件設(shè)計作品面臨的挑戰(zhàn)和解決的問題证舟，讀者將洞悉主要的 Web 設(shè)計原則以及它們運用的CSS布局技巧，理解 CSS 設(shè)計的精髓窗骑，恰當?shù)靥幚韴D形和字體來創(chuàng)建界面優(yōu)美、性能優(yōu)良且具有強大生命力的網(wǎng)站漆枚。
一個優(yōu)秀的前端工程師创译，不在于技術(shù)有多高超，也不在于作品有多美墙基，而在于設(shè)計理念是否獨到软族、有創(chuàng)意。很明顯残制，禪意花園立砸，有利于培養(yǎng)我們形成優(yōu)秀的設(shè)計思想。
優(yōu)雅的前端開發(fā)框架——Bootstrap
既然 CSS 這么美好初茶，肯定有一些已經(jīng)定義好的優(yōu)美的樣式吧颗祝？
沒錯，那就是前端開發(fā)框架恼布。網(wǎng)上有很多精美的框架螺戳，這里推薦一個開源免費主流的框架——Bootstrap。
Bootstrap折汞，來自 Twitter倔幼，是目前很受歡迎的前端框架。Bootstrap 是基于 HTML爽待、CSS损同、JAVASCRIPT 的翩腐，它簡潔靈活，使得 Web 開發(fā)更加快捷膏燃。它由 Twitter 的設(shè)計師 Mark Otto 和 Jacob Thornton 合作開發(fā)栗菜，是一個 CSS/HTML 框架。Bootstrap 提供了優(yōu)雅的 HTML 和 CSS 規(guī)范蹄梢，它即是由動態(tài) CSS 語言 Less 寫成疙筹。Bootstrap 一經(jīng)推出后頗受歡迎，一直是 GitHub 上的熱門開源項目（https://github.com/twbs/bootstrap）禁炒，截止至筆者寫此節(jié)時而咆，Star 數(shù)98000，F(xiàn)ork 數(shù)43500幕袱。
具體使用方法暴备，可以查看文檔，在Bootstrap中文網(wǎng)上有很好的中文社區(qū)提供初學者學習：http://www.bootcss.com/
完美的圖標字體——Font Awesome
Font Awesome们豌，官網(wǎng)上是這樣介紹的：完美的圖標字體涯捻，只為 Bootstrap 設(shè)計。使用 Font Awesome望迎，可以很方便的為網(wǎng)頁添加各式各樣的圖標障癌。它同時也是 GitHub 上的熱門項目：https://github.com/FortAwesome/Font-Awesome，截止至筆者寫此節(jié)時辩尊，Star 數(shù)43000涛浙，F(xiàn)ork 數(shù)7400。
一個字體文件摄欲，249個圖標轿亮，一個字體文件包含了所有圖標。Font Awesome 可以完整表達 web 頁面上每個動作的含義胸墙。同時我注，用 CSS 控制樣式，可以通過 CSS 能非常容易的改變這些圖標的顏色迟隅、大小但骨、陰影以及任何 CSS 能控制的屬性。
在使用 Bootstrap 的前提下玻淑，只需要下載font-awesome.min.css文件嗽冒，然后在網(wǎng)頁<head>部分加入下面的代碼即可。
<link rel="stylesheet" href="../css/bootstrap.min.css">
<link rel="stylesheet" href="../css/font-awesome.min.css">
具體用法可以查看 FontAwesome 中文網(wǎng)提供的中文文檔：http://www.bootcss.com/p/font-awesome/
下載地址：https://github.com/FortAwesome/Font-Awesome/archive/v3.2.1.zip
原文：《禪意花園》（From 《Before Coding》）
