爲文檔添加樣式的三種方法
行內樣式
行內樣式是寫在HTML標籤的style屬性裏的，好比：javascript
<p style="font-size: 12px;font-weight: 200;color: #333333">Hello Everyone!</p>
行內樣式會覆蓋嵌入樣式和連接樣式。css
嵌入樣式
嵌入的css樣式是放在HTML文檔的head元素中的，這點想必你們都知道，這裏就不贅述了。前端
連接樣式
<head> <meta charset="UTF-8"> <title>Document</title> <link rel="stylesheet" href="style.css" type="text/css"/> </head>
連接樣式的做用範圍能夠是整個網站。只要使用<link>標籤把樣式表連接到每一個頁面，相應的頁面就可使用其中的樣式，除了link方法外，還可使用@import指令java
@import url(css/style.css);
@import指令必須出如今樣式表中其餘樣式以前，不然該連接的文件不會被加載css3
不要亂用類
不要像使用ID同樣，爲每一個類都指定一個不一樣的類名，而後再爲每一個類編寫規則。若是你有這種隨意使用類的習慣的話，那麼，你還不瞭解繼承和上下文選擇符的做用。繼承和上下文選擇符（後代選擇器）能讓不一樣的標籤共享樣式，從而下降你須要編寫和維護的css量。web
使用繼承方式下降你的css代碼量：segmentfault
全部元素可繼承：visibility和cursor
內聯元素和塊元素可繼承：letter-spacing、word-spacing、white-space、line-height、color、font、 font-family、font-size、font-style、font-variant、font-weight、text- decoration、text-transform、direction
塊狀元素可繼承：text-indent和text-align
列表元素可繼承：list-style、list-style-type、list-style-position、list-style-image 表格元素可繼承：border-collapse 不可繼承的：display、margin、border、padding、background、height、min-height、max- height、width、min-width、max-width、overflow、position、left、right、top、 bottom、z-index、float、clear、table-layout、vertical-align
盒子邊框
每個元素都會在頁面上生成一個盒子，所以，HTML頁面實際上就上由一堆盒子組成的。默認狀況下，每一個盒子的邊框是不可見的，背景也是透明的。api
邊框（border）有以下3個相關屬性：瀏覽器
1. 寬度（border-width）：可使用`thin、medium`和`thick`等文本值，也可使用除百分比和負值以外的任何絕對值 2. 樣式（border-style）：有none、hidden、dotted、dashed、double、groove、ridge、inset和outset等 3. 顏色（border-color）：可使用任意顏色值，包括RGB、HSL、十六進制顏色值和顏色關鍵字
疊加外邊距
垂直方向上的外邊距會疊加，假設有3個段落，先後相接，並且都應用如下規則：工具
<style type="text/css"> p{ color: black; background: #ccc; margin-top: 50px; margin-bottom: 30px; height: 50px; border: 1px solid red; } </style>
第一段的下外邊距與第二段的上外邊距相鄰，你可能認爲它們之間的外邊距是80px，但實際的間距倒是50px。像這樣的上下外邊距相遇時，它們就會 相互重疊，直至一個外邊距碰到另外一個元素的邊框。所以，在這裏，第二段較寬的上外邊距就會碰到第一段的邊框。也就是說，較寬的外邊距決定兩個元素最終離多 遠。這個過程就是外邊距疊加。
盒子有多大
設定width屬性的盒子
盒模型結論一：
爲設定了寬度的盒子添加邊框、內間距和外邊距，會致使盒子擴展得更寬。實際上，盒子的width屬性設定的只是內容區的寬度，而非盒子要佔據的水平寬度
沒有設定width屬性的盒子
從如今開始，「元素」和「盒子」從如今起表明了同一個意思。若是咱們不設置塊級元素的width屬性，那麼這個屬性的默認值是auto，結果會讓元素的寬度擴展到與父元素等寬。
盒模型結論二：
沒有設定width屬性的元素始終會擴展到填滿其父元素的寬度爲止。添加水平邊框、內邊距和外邊距，會致使內容寬度減小，減小的量 等於 水平邊框、內邊框和外邊距的和
看實例的話你們也比較煩，就拿着這個結論本身去驗證下吧。
佈局的基本概念
多欄佈局有三種基本的實現方案：固定寬度、流動、彈性。
- 固定寬度佈局的大小不會隨着用戶調整瀏覽器窗口大小而變化，通常是900到1350px像素寬。其中960像素最多見，由於這個寬度適合全部現代顯示器，並且能被16，12，10，8，6，5，4和3整除，容易計算等寬分欄。 - 流動佈局的大小會隨用戶調整瀏覽器窗口大小而變化。這種佈局能更好地適應大屏幕，但同時也意味着放棄會頁面某些方面的控制，好比隨着頁面寬度變化，文本行的長度和頁面元素之間的位置關係均可能變化。 - 彈性佈局是在瀏覽器窗口變寬時，不只佈局變寬，並且全部內容元素的大小也會變化，不過這種佈局太過複雜，很差實現。
行內(inline)元素的一些屬性
並非全部的屬性對行內元素都可以生效
行內元素不會應用width屬性，其長度是由內容撐開的 行內元素不會應用height屬性，其高度也是由內容撐開的，可是高度能夠經過line-height調節 行內元素的padding屬性只用padding-left和padding-right生效，padding-top和padding-bottom會改變元素範圍，但不會對其它元素形成影響 行內元素的margin屬性只有margin-left和margin-right有效，margin-top和margin-bottom無效 行內元素的overflow屬性無效 行內元素的vertical-align屬性無效（height屬性無效）
使用CSS sprites
CSS sprites是指把網頁中不少小圖片（不少圖標文件）作成按規律排列的一張大圖上，在顯示的時候經過background-image、background-position顯示圖片特定部分達到和分散的一張張小圖片同樣的效果。
使用CSS sprites，會將全部的小圖片整合到一張圖片中，網頁加載只須要對一張圖片進行請求，CSS再經過座標的形式定位每個小圖片顯示出來。這樣作的好處是，大大減小http請求數，提升網頁加載速度。
css sprites工具推薦：http://cn.spritegen.website-performance.org/
隱藏文本
隱藏網頁元素的方法有不少，好比設置display:none，或是使用全透明（opacity）。在設置文本的時候，有時並不但願文本丟失，而一般是把文字轉移到屏幕外面，瀏覽器是能夠檢測到的。
有以下兩種隱藏文本的方式：
1. 使用text-indent隱藏：圖片替換文本、搜索引擎優化 2. 使用position進行定位隱藏：利於屏幕講述工具的閱讀
使用text-indent
在h1上設置logo爲背景並設置居中來作SEO：
h1{ text-indent: -9999px;/*縮進*/ margin: 0 auto;width: 100px;height: 100px;/*居中*/ background: url("img/sf.jpg") no-repeat; }
使用定位
p{ position: absolute; top: -9999px; left: -9999px; }
rgba和opacity
rgba()和opacity都能實現透明效果，但最大的不一樣是opacity做用於元素，以及元素內的全部內容的透明度，
而rgba()只做用於元素的顏色或其背景色。（設置rgba透明的元素的子元素不會繼承透明效果！）
ou和ul的列表縮進
IE使用margin-left來縮進列表，而Safari和Firefox使用padding-left。
ol, ul { padding-left:40px; }
而IE的默認樣式是：
ol, ul { margin-left:30px; }
去除li的左邊距，好比：
ol, ul { padding-left:0px; }
或者也能夠只針對IE進行修復：
ol, ul { _padding-left:0; }
css選擇符思惟導圖
css工具推薦
不寫具體介紹啦 截個圖給大家吧 說再多都比不上一張圖呢
-
EnjoyCSS 能建立活躍，超棒的實例，EnjoyCSS 生成器大大簡化了自定義類聲明。EnjoyCSS 是衆多
CSS工具中很是有用的，也是開發者和設計師工具箱必備的利器之一。它能加快工做流，簡單易用，不須要編碼就能整合豐富的圖形樣式到簡單的UI。
