css教程1
滑動門(Sliding Doors)
還是決定把滑動門單獨提作一種單獨的技術.
它是CSS引入的一項用來創造漂亮且實用的介面的新技術, 它使用簡單, 我們只需要使用兩張單獨的背景圖片, 就可以實現。
滑動門一般用做網站Tab導航, 根據Tab中內容的長短自動縮放Tab的效果.
CSS程式碼大致如下:
#header li {
float:left;
background:url("left_both.gif")no-repeat left top;
margin:0;
padding:0 0 0 9px;
border-bottom:1px solid #765;
}
#header a {
float:left;
display:block;
background:url("right_both.gif")no-repeat right top;
padding:5px 15px 4px 6px;
text-decoration:none;
font-weight:bold;
color:#765;
}
css教程2
CSS為定位和浮動提供了一些屬性，利用這些屬性，可以建立列式佈局，將佈局的一部分與另一部分重疊，還可以完成多年來通常需要使用多個表格才能完成的任務。
定位的基本思想很簡單，它允許你定義元素框相對於其正常位置應該出現的位置，或者相對於父元素、另一個元素甚至瀏覽器視窗本身的位置。顯然，這個功能非常強大，也很讓人吃驚。要知道，使用者代理對CSS2中定位的支援遠勝於對其它方面的支援，對此不應感到奇怪。
另一方面，CSS1中首次提出了浮動，它以Netscape在Web發展初期增加的一個功能為基礎。浮動不完全是定位，不過，它當然也不是正常流佈局。我們會在後面的章節中明確浮動的含義。
一切皆為框
div、h1或p元素常常被稱為塊級元素。這意味著這些元素顯示為一塊內容，即“塊框”。與之相反，span和strong等元素稱為“行內元素”，這是因為它們的內容顯示在行中，即“行內框”。
您可以使用display屬性改變生成的框的型別。這意味著，通過將display屬性設定為block，可以讓行內元素（比如元素）表現得像塊級元素一樣。還可以通過把display設定為none，讓生成的元素根本沒有框。這樣的話，該框及其所有內容就不再顯示，不佔用文件中的空間。
但是在一種情況下，即使沒有進行顯式定義，也會建立塊級元素。這種情況發生在把一些文字新增到一個塊級元素（比如div）的開頭。即使沒有把這些文字定義為段落，它也會被當作段落對待：
sometext
Somemoretext.
在這種情況下，這個框稱為無名塊框，因為它不與專門定義的元素相關聯。
塊級元素的文字行也會發生類似的情況。假設有一個包含三行文字的段落。每行文字形成一個無名框。無法直接對無名塊或行框應用樣式，因為沒有可以應用樣式的地方（注意，行框和行內框是兩個概念）。但是，這有助於理解在螢幕上看到的所有東西都形成某種框。
CSS定位機制
CSS有三種基本的定位機制：普通流、浮動和絕對定位。
除非專門指定，否則所有框都在普通流中定位。也就是說，普通流中的元素的位置由元素在X(HTML)中的位置決定。
塊級框從上到下一個接一個地排列，框之間的垂直距離是由框的垂直外邊距計算出來。
行內框在一行中水平佈置。可以使用水平內邊距、邊框和外邊距調整它們的間距。但是，垂直內邊距、邊框和外邊距不影響行內框的高度。由一行形成的水平框稱為行框（LineBox），行框的高度總是足以容納它包含的所有行內框。不過，設定行高可以增加這個框的高度。
在下面，我們會為您詳細講解相對定位、絕對定位和浮動。
CSSposition屬性
通過使用position屬性，我們可以選擇4中不同型別的定位，這會影響元素框生成的方式。
position屬性值的含義：
static
元素框正常生成。塊級元素生成一個矩形框，作為文件流的一部分，行內元素則會建立一個或多個行框，置於其父元素中。
relative
元素框偏移某個距離。元素仍保持其未定位前的形狀，它原本所佔的空間仍保留。
absolute
元素框從文件流完全刪除，並相對於其包含塊定位。包含塊可能是文件中的另一個元素或者是初始包含塊。元素原先在正常文件流中所佔的空間會關閉，就好像元素原來不存在一樣。元素定位後生成一個塊級框，而不論原來它在正常流中生成何種型別的框。
fixed
元素框的表現類似於將position設定為absolute，不過其包含塊是視窗本身。
提示：相對定位實際上被看作普通流定位模型的一部分，因為元素的位置相對於它在普通流中的位置。
CSS定位屬性
CSS定位屬性允許你對元素進行定位。
屬性描述
position把元素放置到一個靜態的、相對的、絕對的、或固定的位置中。
top定義了一個定位元素的上外邊距邊界與其包含塊上邊界之間的偏移。
right定義了定位元素右外邊距邊界與其包含塊右邊界之間的偏移。
bottom定義了定位元素下外邊距邊界與其包含塊下邊界之間的偏移。
left定義了定位元素左外邊距邊界與其包含塊左邊界之間的偏移。
overflow設定當元素的內容溢位其區域時發生的事情。
clip設定元素的形狀。元素被剪入這個形狀之中，然後顯示出來。
vertical-align設定元素的垂直對齊方式。
z-index設定元素的堆疊順序。
css教程3
一般說來如果某個子元素使用了浮動(float)，那父元素總是不能確切地知道子元素是在什麼位置結束的，所以父元素的下邊框總是從子元素的中間甚至是頂部穿過，看起來很不舒服。
最近兩個月斷斷續續做了好幾個網站的美工，做的過程中對DIV Css的標準開發有了進一步的瞭解。有兩點收穫最大，一是徹底弄懂了CSS的盒子模式(Box Model)，再一個就是搞定了困擾我很久的“閉合浮動元素”的問題：
一般說來如果某個子元素使用了浮動(float)，那父元素總是不能確切地知道子元素是在什麼位置結束的，所以父元素的下邊框總是從子元素的中間甚至是頂部穿過，看起來很不舒服。
最早時我都是在子元素結束後單獨加個
或
將其屬性設定為“clear:all;”，但這樣一來就需要生成不少沒用的空標籤，甚至有些網站需要修改ASP程式碼以自動新增這些空標籤，只能算是下策。
後來發現當父標籤也設定為浮動(float)時就可以在正確的位置閉合了，所以就把父容易也浮動起來，這樣一來很多ASP程式碼就不需要改了，遇到需要新增含Clear屬性的空標籤時如果不能從模板中新增，而需要從ASP程式碼中新增時，就不需要改ASP程式碼了，只需要把父容器設為浮動，如果還需要改ASP，那就再把父容器的父容器設為浮動，一層層地浮動上去，總能解決問題的。這雖然能省不少事，但很容易造成整個頁面中全是浮動元素，-_-!!!也只能算是中策而已。
再後來，在網上搜索別的東西時偶然發現有人說只要在父容器的CSS屬性中加上以下兩個屬性就可以搞定了：
overflow: auto;
_height: 1%;
試了一下，果然好用，這麼一來，這在目前應該算是解決這一問題的上策了：不需要對頁面做任務修改，也基本上不需要對父容器－－甚至是父容器的父容器做什麼改動，只給父容器新增兩個無所謂的屬性就搞定了。
css教程4
在CSS裡面，每個元素盒子都可以想象成由兩個圖層組成。
前景層：內容（如文字或圖片）和邊框。
背景層：用實色填充（使用 background-color 屬性），也可以包含任意多個背景圖片（使用 background-image 屬性），背景圖片疊加在背景顏色之上。
在 CSS3 被瀏覽器實現之前，只能在背景顏色上新增一張圖片。而現在，我們可以為背景圖層新增多張圖片（以及 CSS3 漸變）。
CSS背景屬性：
background-color
background-image
background-repeat
background-position
background-size
background-attachment
background（簡寫屬性）
background-clip、background-origin、background-break（目前尚未得到廣泛支援）
背景顏色
格式：background-color: 顏色值;
示例：background-color: #caebff;
背景圖片
格式：background-image:url(圖片路徑/圖片檔名);
示例：background-image:url(images/blue_circle.png);
預設情況下背景圖片會 以元素左上角為起點，沿水平和垂直方向重複出現，最終填滿整個背景區域。
背景重複
格式：background-repeat: repeat | repeat-x | repeat-y | no-repeat;
示例：background-repeat:repeat-x;
說明：
repeat 預設值，水平和垂直方向都重複，直至填滿元素的背景區域為止。
repeat-x 水平方向重複。
repeat-y 垂直方向重複。
no-repeat 任何方向上都不重複（只讓背景圖片顯示一次）。
背景位置
用於控制背景位置的 background-position 屬性，是所有背景屬性中最複雜的。
該屬性有5個關鍵字值，分別是 top、left、bottom、right 和 center，這些關鍵字中的任意兩個組合起來都可以作為該屬性的值。
background-position 屬性同時設定元素和圖片的'原點。原點決定了元素和圖片中某一點的水平和垂直座標。預設情況下，background-position的原點位於左上角。
第一種情況，使用關鍵字來設定位置。background-position屬性的預設值 top、left 控制著水平和垂直方向重複的起點。如修改 起點位置：p#center {background-position:center center;}（簡化寫法：background-position:center，設定一個關鍵值，則另一個也會取相同的值。），背景圖片就會以段落的中心點為起點。
第二種情況，使用百分比來設定位置。
示例：background-position:50% 50%;，再把 background-repeat 設定為 no-repeat，就能實現了圖片在背景區域內居中的效果。第一個值表示水平位置，第二個值表示垂直位置。要是隻設定一個值，則將其用來設定水平位置，而垂直位置會被設為 center。
第三種情況，使用絕對或相對單位的數值。要是使用畫素單位來設定位置，那麼圖片的左上角會被放在距離元素左上角指定位置的地方。另外，還可以使用負值，這樣可以把圖片的左上角定位到元素外部，從而在元素中只能看到部分圖片。當然也可以給圖片設定足夠大的正值，把圖片的右下角推到元素外部實現同樣的效果。
背景尺寸
background-size 是 CSS3 規定的屬性，用來控制背景圖片的尺寸。
可設定的值和含義如下：
50%：縮放圖片，使其填充背景區的一半。
100px 50px：把圖片調整到 100 畫素寬，50 畫素高。
cover：拉大圖片，使其完全填滿背景區；保持寬高比。
contain：縮放圖片，使其恰好適合背景區；保持寬高比。
注意：把很小的圖片拉大會導致圖片質量失真。
背景粘附
background-attachment屬性控制滾動元素內的背景圖片是否隨元素滾動而滾動。
屬性值有：
scroll。背景圖片隨元素移動。
fixed。背景圖片不會隨元素滾動而移動。
提示：background-attachment:fixed 最常用於給 body 元素中心位置新增淡色水印，讓水印不隨頁面滾動而移動。
簡寫背景屬性
示例：body {background:url(images/watermark.png) center #fff no-repeat contain fixed;}
說明：宣告中少寫了哪個屬性的值（比如沒寫 no-repeat），就會使用相應屬性的預設值（ repeat）。
多背景圖片
CSS3 可以給元素背景新增多個背景圖片。
示例：
CSS Code複製內容到剪貼簿 p{ background: url(images/turq_spiral.png)30px-10pxno-repeat, url(images/pink_spiral.png)145px0pxno-repeat, url(images/gray_spiral.png)140px-30pxno-repeat,#ffbd75; }
背景漸變
漸變，就是在一定長度內兩種或多種顏色之間自然的過渡。
提示：漸變是 CSS 幫我們生成的背景圖片。新增漸變可以使用 background-image 屬性，也可以使用簡寫 background 屬性。
漸變分兩種：
線性漸變。從元素的一端延伸到另一端。
放射性漸變。從元素內一點向四周發散。
廠商字首
為鼓勵瀏覽器廠商儘早採用 W3C 的 CSS3 推薦標準，於是就產生了 VSP（Vendor Specific Prefixes，廠商字首）的概念。
示例：
transform 屬性的標準語法是這樣的：
transform: skewX(-45deg);
由於這個屬性還沒有完全定案，為保證在大多數瀏覽器以及它們的實驗性實現中能夠使用這個屬性，應該針對想要支援的瀏覽器為該屬性新增 VSP。每個瀏覽器只使用各自能理解的屬性宣告：
CSS Code複製內容到剪貼簿 -moz-transform:skewX(-45deg);/*Firefox*/ -webkit-transform:skewX(-45deg);/*Chrome及Safari*/ -ms-transform:skewX(-45deg);/*微軟InternetExplorer*/ -o-transform:skewX(-45deg);/*Opera*/ transform:skewX(-45deg);/*最後是W3C標準屬性*/
以下 CSS3 屬性必須加 VPS：
CSS Code複製內容到剪貼簿 border-imagetranslate linear-gradienttransition radial-gradientbackground* transformbackground-image* transform-origin >*針對背景圖片或漸變
css教程5
上下左右邊框交界處呈現平滑的斜線。利用這個特點，通過設定不同的上下左右邊框寬度或顏色，可以得到小三角、梯形等。
調整寬度大小可以調節三角形形狀。
實現三角形
示例1：
CSS Code複製內容到剪貼簿 #test1{ height:20px; width:20px; border-color:#FF9600#3366ff#12ad2a#f0ed7a; border-style:solid; border-width:20px; }
示例2：
在上面的基礎上，把高度寬度都設為0時，會呈現邊界斜線。
CSS Code複製內容到剪貼簿 #test2{ height:0; width:0; overflow:hidden;/*這裡設定overflow,font-size,line-height*/ font-size:0;/*是因為,雖然寬高度為0,但在IE6下會具有預設的*/ line-height:0;/*字型大小和行高,導致盒子呈現被撐開的長矩形*/ border-color:#FF9600#3366ff#12ad2a#f0eb7a; border-style:solid; border-width:20px; }
示例3：
示例2中可以看到有4個三角形了，如果把4種顏色，只保留一種顏色，餘下3種顏色設定為透明或者與背景色相同，那就形成一個三角形。 CSS Code複製內容到剪貼簿 #test3{ height:0; width:0; overflow:hidden; font-size:0; line-height:0; border-color:#FF9600transparenttransparenttransparent; border-style:solid; border-width:20px; }
示例4：
示例3中，在IE6下，需要設定餘下三邊的border-style為dashed，即可達到透明的效果。
CSS Code複製內容到剪貼簿 #test4{ height:0; width:0; overflow:hidden; font-size:0; line-height:0; border-color:#FF9600transparenttransparenttransparent; border-style:soliddasheddasheddashed; border-width:20px; }
示例5：
上述畫的小三角的斜邊都是依靠原來盒子的邊，還有另一種形式的小三角，斜邊在盒子的對角線上。
CSS Code複製內容到剪貼簿 #test5{ height:0; width:0; overflow:hidden; font-size:0; line-height:0; border-color:#FF9600#3366fftransparenttransparent; border-style:solidsoliddasheddashed; border-width:40px40px00; }
保留其中一種顏色，就可以得到斜邊在對角線上的三角形了。
實現圓角效果
可以實現近似圓角，其實是一個非常小的梯形展示出來的。
XML/HTML Code複製內容到剪貼簿.test{width:200px;height:50px;} .test.top{width:194px;border-color:transparenttransparent#FF9600transparent;*border-color:pinkpink#FF9600pink;border-style:dasheddashedsoliddashed;border-width:3px;filter:chroma(color=pink);} .test.center{width:200px;height:40px;background-color:#FF9600;} .test.bottom{width:194px;height:5px;border-color:#FF9600transparenttransparenttransparent;*border-color:#FF9600pinkpinkpink;border-style:soliddasheddasheddashed;border-width:3px;filter:chroma(color=pink);}
css教程6
nettuts帶來的5個css書寫技巧，簡單翻譯一下它的中心思想。
1. CSS Reset/重置
你也許需要先了解什麼是css重置。然後怎麼樣寫css重置呢。
你可以copy Eric Meyer Reset, YUI Reset或其它css reset, 但你接下來應該根據你的專案改成你自己的reset.
不要使用* { margin: 0; padding: 0; } 。我個人很愛用，原作者提到使用這句並不適用一些元素比如單選按鈕。不過俺部落格裡面也沒有單選按鈕，如果有，又重新給單選按鈕重設就好了嘛。
2. 按字母順序來排列css
不按字母順序排的
div#header h1 {
z-index: 101;
color: #000;
position: relative;
line-height: 24px;
margin-right: 48px;
border-bottom: 1px solid #dedede;
font-size: 18px;
}
按字母順序排的
div#header h1 {
border-bottom: 1px solid #dedede;
color: #000;
font-size: 18px;
line-height: 24px;
margin-right: 48px;
position: relative;
z-index: 101;
}
理由是這樣可以更好的找到某個屬性。個人覺得還好，差別也不是太大。不過也許會適合你。
3. 更好的組織css結構
使用css註釋來分給css分組，這樣結構明瞭，也有利於協同設計。
/*****Reset*****/
xxxxxxx{xxxxx}
xxxxx{xxxxx}
/*****layouts*****/
xxxxxxx{xxxxx}
xxxxx{xxxxx}
4. 保持一致性
不要無意義的去討論到底一個選擇器的所有屬性寫在一行，還是每個屬性寫一行比較好。你自己覺得ok就好。
iv#header { float: left; width: 100%; }
div#header div.column {
border-right: 1px solid #ccc;
float: rightright;
margin-right: 50px;
padding: 10px;
width: 300px;
}
div#header h1 { float: left; position: relative; width: 250px; }
比如我個人就喜歡寫在一行，因為每排寫一行會讓整個文件感覺太長了，找起來不方便。如果你喜歡寫一行，但是發給team的另一個，他卻喜歡每排一行，那怎麼辦？其實很簡單，把css拿去w3c驗證，它會有一份結果，會自動轉換成每排一行。
5. 先標記後css
這個我沒有太看懂。大概理解是對html的標記弄好後再寫css會比較不容易出錯。比如我寫一個頁面，先寫一個最基本的標記結構
!<--end footer--="">
然後就是儘量善用子選擇器，而不是一要給哪個元素進行樣式化，就給它添加個選擇器。
css教程7
上節課我們講了一下CSS通過什麼方式去控制頁面，如果不記得，我來幫大家回憶一下，總共有四種方式行內方式、內嵌方式、連結方式、匯入方式，大家通過這四種方式就可以實現CSS對HTML頁面樣式的控制，如果要讓這些樣式對HTML頁面中的元素實現一對一，一對多或者多對一的控制，這就需要用到CSS選擇器，HTML頁面中的元素就是通過CSS選擇器進行控制的。
CSS選擇器共有三種：標籤選擇器、ID選擇器、類選擇器。
為了後面的對選擇器的解釋更容易理解，在這裡先打個比喻，如果把你所處的環境視為HTML頁面的話，環境裡的每一個人則相當於HTML頁面內標籤元素，每個人都有一個ID(身份證)，那麼html中的每一個標籤也都有自己的ID，大家都知道ID是唯一的，不可能重複。
【標籤選擇器】
一個完整的HTML頁面是有很多不同的標籤組成，而標籤選擇器，則是決定哪些標籤採用相應的CSS樣式，(在大環境中你可能出於不同的位置，但是不管怎麼樣，你總是穿著同一套衣服，這件衣服就是由標籤選擇器事先給你限定好的，不管走到哪裡都是這身衣服)比如，在style.css檔案中對p標籤樣式的宣告如下：
p{
font-size:12px;
background:#900;
color:090;
}
則頁面中所有p標籤的背景都是#900(紅色)，文字大小均是12px，顏色為#090(綠色)，這在後期維護中，如果想改變整個網站中p標籤背景的顏色，只需要修改background屬性就可以了，就這麼容易！
【ID選擇器】
ID選擇器在某一個HTML頁面中只能使用一次(當然也可以用好幾次，不過就不符合W3C標準了，那頁面也就不是標準頁面嘍~，咱們的目的不就是為了做標準的頁面麼，所以建議大家不要在同一個html頁面中多個標籤擁有共同的ID)，就像在你所處的環境中，你只有一個ID(身份證)，不可能重複！相信大家也能看出來，ID選擇器更具有針對性，如：
先給某個HTML頁面中的某個p標籤起個ID，程式碼如下：
此處為p標籤內的文字
在CSS中定義ID為one的p標籤的屬性，就需要用到#，程式碼如下：
#one{
font-size:12px;
background:#900;
color:090;
}
這樣頁面中的某個p就會是CSS中定義的樣式。
【類選擇器】
這種選擇器更容易理解了，就是使頁面中的某些標籤(可以是不同的標籤)具有相同的樣式，就像國慶中某個方陣中，肯定都是不同的人，卻均穿紅色衣服，手中高舉花環，樣式都是一樣的，如果想讓這一類人都有共同的樣式，該怎麼做呢~呵呵，和ID選擇器的用法類似，只不過把id換做class，如下：
此處為p標籤內的文字
如果我還想讓div標籤也有相同的樣式，怎麼辦呢？加上同樣的class就可以了，如下
此處為p標籤內的文字
這樣頁面中凡是加上class="one"的標籤，樣式都是一樣的嘍~CSS定義的時候和ID選擇器差不多，只不過把#換成.，如下
.one{
font-size:12px;
background:#900;
color:090;
}
補充:一個標籤可以有多個類選擇器的值，不同的值用空格分開，如：
此處為p標籤內的文字
這樣我們可以將多個樣式用到同一個標籤中，當然也可以，ID和class一塊用
此處為p標籤內的文字
【通用選擇器】
到這裡，前三種基本的選擇器說完了，但是還需要給大家介紹一個CSS選擇器中功能最強大但是用的最少的一種選擇器“通用選擇器”
*{此處為CSS程式碼}
強大之處是因為他對父級中的所有HTML標籤進行樣式定義，可對具有共同樣式的標籤樣式進行定義(有點國小數學中的提取公因式)，這樣可以大大精簡程式碼；既然有這麼強大的功能為什麼是用的最少呢，同樣還是因為他的強大，他是對父級元素內的所有標籤進行定義，所以只要你定義了，那麼父級裡面的所有的標籤，甭管有沒有必要，也都相當於加上了通用選擇器裡面的程式碼了，能這麼說大家不能夠完全理解，沒關係，我給大家舉個例子，請看下面
這裡是p標籤區域
這裡是a標籤區域
這裡是p標籤區域
這裡是a標籤區域
大家執行一下上面的例子，div1裡面的兩個標籤是不是樣式一樣，這就是通用選擇器的強大之處，不管裡面有多少個標籤都會將樣式加到所有標籤內，如果div1裡面得所有的標籤都有一部分相同的CSS程式碼，那麼可以把這部分程式碼提取出來，用通用選擇器來定義，這樣可以大大縮減程式碼，但是如果div1裡面只要有一個和其他元素沒有相同的程式碼，就不能用通用選擇器來定義，這也就是CSS通用選擇器不靈活的一點。現在大家明白為什麼通用選擇器是選擇器裡面功能最強大的但又是用的最少的選擇器了吧~~呵呵
對於通用選擇器還有一個不得不提的用法，就是為了保證作出的頁面能夠相容多種瀏覽器，所以要對HTML內的所有的標籤進行重置，會將下面的程式碼加到CSS檔案的最頂端
*{margin:0; padding:0;}
為什麼要這麼用呢，因為每種瀏覽器都自帶有CSS檔案，如果一個頁面在瀏覽器載入頁面後，發現沒有CSS檔案，那麼瀏覽器就會自動呼叫它本身自帶的CSS檔案，但是不同的瀏覽器自帶的CSS檔案又都不一樣，對不同標籤定義的樣式不一樣，如果我們想讓做出的頁面能夠在不同的瀏覽器顯示出來的效果都是一樣的，那麼我們就需要對對HTML標籤重置，就是上面的程式碼了，但是這樣也有不好的地方，因為HTML4.01中有89個標籤，所以相當於在頁面載入CSS的時候，先對這89個標籤都加上了{margin:0; padding:0;}，在這裡我不建議大家這麼做，因為89個標籤中需要重置的標籤是很少數，沒有必要將所有的標籤都重置，需要哪些標籤重置就讓哪些標籤重置就可以了，如下
body,div,p,a,ul,li{margin:0; padding:0;}
如果還需要dl、dt、dd標籤重置，那就在上面加上就可以了，如下
body,div,p,a,ul,li,dl,dt,dd{margin:0; padding:0;}
用到那些就寫那些，這點也可以看做衡量頁面重構師製作頁面水平的高低，以及是否專業的一個方面到這裡大家更應該明白這句話“通用選擇器是功能最強大但是用的最少的選擇器”了吧~^_^
OK！選擇器的內容我向大家應該都明白了，後面就繼續講解一下“選擇器的集體聲
明”和“選擇器的巢狀”
【選擇器的集體宣告】
在我們使用選擇器的時候，有些標籤樣式是一樣的，或者某些標籤都有共同的樣式屬性，我們可以將這些標籤集體宣告，不同的標籤用“,”分開，比如：
h1,h2,h3,h4,h5,h6{color:#900;}
#one,#three,.yellow{font-size:14px;}
#one{background:#ccc;}
#three{background:#ccc;}
.yellow{background:#ccc;}
和國小的提取公因式差不多，把共同的部分提取出來，這麼做的好處，相同的部分共同定義，不同的部分單獨定義，保證風格統一，樣式修改靈活，這也是優化CSS程式碼的一塊，要記住喲~
【選擇器的巢狀】
選擇器也是可以巢狀的，如：
#div1 p a{color:#900;}/*意思是在ID為div1
內的p標籤內的連結a標籤的文字顏色為紅色*/
這樣的好處就是不需要在單獨的為ID為div1的標籤內的p標籤內的a標籤單獨定義class選擇器或者ID選擇器，CSS程式碼不就少了嘛~同樣也是CSS程式碼優化的一塊。
到這裡，基本的選擇器說完了，但是還需要給大家介紹一個“通用選擇器”
*{此處為CSS程式碼}
好，這節課主要講解了三種CSS程式碼選擇器、選擇器的宣告、選擇器的巢狀三塊知識，要掌握好，如果有不懂，可以留言。
css教程8
(1)頁面結構類
容器: container
頁頭：header
內容：content/container
頁面主體：main
頁尾：footer
導航：nav
側欄：sidebar
欄目：column
頁面外圍控制整體佈局寬度：wrapper
(2)導航類
導航：nav
主導航：mainnav
子導航：subnav
頂導航：topnav
邊導航：sidebar
左導航：leftsidebar
右導航：rightsidebar
位置導航： crumb
選單：menu
子選單：submenu
麵包屑：breadcrumb(即頁面所處位置導航提示)
(3)網頁內容類
標題: title
摘要: summary
箭頭： arrow
商標： label
網站標誌： logo
轉角/圓角： corner
橫幅廣告： banner
欄目： column
子選單： subMenu
搜尋： search
搜尋框： searchBox
登入： login
工具條： toolbar
下拉： drop
標籤頁： tab
當前的： current
列表： list
滾動： scroll
服務： service
提示資訊： msg
新聞： news
小技巧： tips
下載： download
欄目標題： title
熱點： hot
加入： joinus
註冊： regsiter
指南： guide
友情連結： friendlink
狀態： status
版權： copyright
按鈕： btn
合作伙伴： partner
投票： vote
css教程9
按照CSS規範，浮動元素（floats）會被移出文件流，不會影響到塊狀盒子的佈局而只會影響內聯盒子（通常是文字）的排列。因此當其高度超出包含容器時，一般父容器不會自動伸長以閉合浮動元素。但是有時我們卻需要這種自動閉合行為，具體如何處理呢？
有一種做法就是在父容器內再插入一個額外的標籤，並令其清除浮動（clear）以撐大父容器。這種方法瀏覽器相容性好，沒有什麼問題，缺點就是需要額外的（而且通常是無語義的）標籤，所以我個人不大喜歡。
後來又有了一種新的方式，使用:after偽類動態的嵌入一個用於清除浮動的元素，這種方法和上一種原理一樣，不同的只是把這個額外的內容用CSS生成，但考慮到IE不支援:after不得不做了不少的hack。這種方法相容性一般，但經過各種hack也可以應付不同瀏覽器了，同時又可以保證html比較乾淨，所以用得還是比較多的。
再後來又有人發現將父容器的overflow設為除visible之外的值就可以在標準相容瀏覽器中閉合浮動元素，IE自然又是不支援的，所以這種方法和上一種方法一樣都對IE做了不同處理（具體就是觸發layout），不同的就是overflow沒有:after偽類那麼麻煩了，缺點也有，overflow可能會產生一些小衝突。
在使用overflow之前還有過一種使用float的方法，就是讓父容器也浮動，這利用到了浮動元素的一個特性――浮動元素會閉合浮動元素。這種方式在IE/Win和標準相容瀏覽器中都有較好的效果，但缺點也很明顯――父容器未必想浮動就浮動的了，畢竟浮動是一種比較特殊的行為，有時佈局不允許其浮動也很正常。使用float雖然在IE和標準相容瀏覽器中都能閉合浮動元素，但原理卻是不同的，IE/Win中float觸發了layout因而閉合了浮動，而在標準相容瀏覽器中，float其實和上一種方法中的overflow原理一樣，產生了一個“塊級格式化範圍”――這是CSS規範中提到的一種現象，它往往具有某種獨立性，特性之一就是會自動閉合內部的浮動元素。
按照規範，以下型別的元素會產生一個塊級格式化範圍：
●浮動元素，left或者right皆可。
●絕對定位的元素。
●inline-block元素，不過這個gecko目前不支援。
●table-cell型別元素，其實table,table-head-group,table-row什麼的也都可以，還有inline-table（gecko不支援）也同樣，因為他們都會間接產生一個匿名的table-cell。
●overflow取值非visible的元素。
所以，原來在標準相容瀏覽器中我們也可以有這麼多的方法閉合一個浮動元素，而且只需要CSS，無需其他。順帶說一下以上除了overflow，其餘都有一個附加效果就是自動收縮父容器寬度。
而對於IE/Win，它有一套自己的體系，就是layout，具有layout的元素會自動閉合浮動元素，再來看看觸發layout的CSS屬性，會發現和上面的塊級格式化範圍有很多類似之處：
●浮動元素
●絕對定位元素
●display:inline-block
●zoom
●width/height
●overflow/overflow-x/overflow-y[IE7新增]
●max/min-width/height[IE7新增]
以上來看IE中閉合浮動元素的方法也不少，自然也都有其侷限性，要麼有附帶效果，要麼使用的是非標準屬性（無法通過驗證）。
還要提一點的是display:inline-block，這個屬性對IE而言本身沒什麼用，實際效果只是給一個元素暗地添加了layout，但是標準相容瀏覽器是認得這個屬性的，所以要不影響這些瀏覽器，需要將display設回預設。這裡IE有一個bug，如果先定義了display:inline-block，然後再將display設回block（這兩個display要先後放在兩個CSS宣告中才有效果），那麼layout不會消失，同時也不會影響其他瀏覽器，所以目前來說，這也算一個不錯的觸發layout的方法：
.gainlayout{display:inline-block;}
.gainlayout{display:block;}
所以要跨瀏覽器閉合浮動元素，可以選擇的方式還是很多的，如何搭配使用這些CSS屬性就要具體情況具體分析了，靈活應用條件註釋也很有必要，要是實在不行我們回過頭來還有clear可以用嘛。
css教程10
一般而言，CSS類名的語義化宣告方式應當考慮你的頁面中某個相對元素的”用意”，獨立於它的”定位”或確切的特性(結構化方式)。像left-bar, red-text, small-title…這些都屬於結構化定義的例子。
讓我們看看下面這個例子:
…而現在我們想把頁面中的元素調換一下位置，如果你使用的是結構化方式(1)，那麼你就要把所有CSS類名重新進行定義，因為它們的位置變了。在佈局(3)中，我們看到元素都倒轉了:right-bar 現在成了 “left-bar”，而left-content 成了 “right-content”。如果你使用語義化方式則避免了此類問題。
換句話說，使用語義化方式的話，你在修改網站佈局的時候可以僅僅修改相關CSS類的屬性即可，而不用修改它們的類名了，如果網站的程式碼很龐大，這將節省大量的時間。
教程網會經常更新前端開發/網頁設計等相關技術及教程文章，歡迎及時瀏覽教程網的最新教程及資源。關於語義化的一些建議:
在開始之前，我想推薦兩種簡單的編寫較好的CSS程式碼的指導方針: 為CSS類名定義的時候，儘量使用小寫字母，如果有兩個以上的單詞，在每個單詞之間使用”-”符或單詞首字母大寫(第一個單詞除外)。如:”main-content”或”mainContent”。 優化CSS程式碼，僅建立關鍵主要的CSS類並重新為子元素使用符合HTML標準的標籤(h1, h2, p, ul, li, blockquote,…)，例如,不要使用這種哦你那個方式:
而要這樣寫:
…
…
三欄佈局中使用語義化方式的例子
讓我們來通過這個簡單的例子講解一下如何為經典的三欄佈局使用語義化方式命名:
使用語義化方式為CSS命名可以像這樣:
#container{…}
/*—- Top section —-*/
#header{…}
#navbar{…}
/*—- Main —-*/
#menu{…}
#main{…}
#sidebar{…}
/*—- Footer —-*/
#footer{…} Container
“#container“就是將你頁面中的所有元素包在一起的部分，這部分你還可以命名為:“wrapper“, “wrap“, “page“. Header
“#header”是網站頁面的頭部區域，一般來講，它包含網站的logo和一些其他元素。這部分你還可以命名為:”top“, “logo“, “page-header” (或 pageHeader). Navbar
“#navbar“等同於橫向的導航欄，是最典型的網頁元素。這部分你還可以命名為:“nav”,“navigation”,“nav-wrapper”. Menu
“#Menu”區域包含一般的連結和選單，這部分你還可以命名為:“sub-nav“, “links“. Main
“#Main”是網站的主要區域，如果是部落格的話它將包含你的日誌。這部分你還可以命名為:“content“, “main-content” (or “mainContent”)。 Sidebar
“#Sidebar”部分可以包含網站的次要內容，比如最近更新內容列表、關於網站的介紹或廣告元素等…這部分你還可以命名為:“sub-nav“, “side-panel“, “secondary-content“. Footer
“#Footer”包含網站的一些附加資訊，這部分你還可以命名為:“copyright“.
css教程11
一、white-space
可以實現HTML中PRE標籤的效果，以及單元格的noWrap效果。
語法：
white-space : normal | pre | nowrap
取值：
normal： 預設值。預設處理方式。文字自動處理換行。假如抵達容器邊界內容會轉到下一行
pre： 換行和其他空白字元都將受到保護。這個值需要IE6+或者 !DOCTYPE 宣告為 standards-compliant mode 支援。如果 !DOCTYPE 宣告沒有指定為 standards-compliant mode ，此屬性可以使用，但是不會發生作用。結果等同於 normal 。參閱 pre 物件
nowrap： 強制在同一行內顯示所有文字，直到文字結束或者遭遇 br 物件。參閱 noWrap 屬性
說明：
設定或檢索物件內空格字元的處理方式。
空 格字元，像換行，空格，TAB，在HTML文件中預設的是被忽略的。當此屬性設定為 normal 或者 nowrap 時，你可以使用不換行空格的命名實體 來新增空格，用 br 元素來新增換行。此屬性對你使用文件物件模型(DOM)操作的內容的影響與其對IE顯示內容的影響一樣。
此屬性作用於塊物件。
相關樣式：
text-overflow
將它與white-space結合使用就不用再寫程式來判斷字串長度了，點此檢視示例。
語法：
text-overflow : clip | ellipsis
取值：
clip：預設值。不顯示省略標記(…)，而是簡單的裁切
ellipsis：當物件內文字溢位時顯示省略標記(…)
說明：
設定或檢索是否使用一個省略標記(…)標示物件內文字的溢位。
這個屬性僅僅作用於水平內聯方向的，普通的西方文字的溢位。內聯溢位發生在行內的文字超出可用寬度卻沒有換行機會的時候。
要強制溢位發生並且應用 ellipsis 值，作者必須設定物件的 white-space 屬性值為 nowrap 。
假如沒有換行機會(例如，物件容器的寬度是狹窄的，而內有很長的沒有合理斷行的文字)，沒有應用 nowrap 也有可能溢位。
為了使 ellipsis 值被應用，此屬性必須被設定到具有不可視區域的物件。最好的選擇是設定 overflow 屬性為 hidden 。設定 overflow 屬性為 scroll 或者 auto 時，此屬性也會應用。但是會有滾動條出現。
通過選擇省略標記，隱藏的文字可以被選擇。當選擇發生時，省略標記會隱藏而被文字替換。
此屬性為在DHTML中製作省略標記提供了高效的方法。
二、word-break
最常用的控制換行屬性，常與下面的word-wrap結合使用。
語法：
word-break : normal | break-all | keep-all
取值：
normal： 預設值。允許在詞間換行
break-all：該行為與亞洲語言的 normal 相同。也允許非亞洲語言文字行的任意字內斷開。該值適合包含一些非亞洲文字的亞洲文字
keep-all：與所有非亞洲語言的 normal 相同。對於中文，韓文，日文，不允許字斷開。適合包含少量亞洲文字的非亞洲文字
說明：
設定或檢索物件內文字的字內換行行為。尤其在出現多種語言時。
對於中文，應該使用 break-all 。
三、word-wrap
如果你設計的網頁不是自適應寬度的話，需要將它設定為break-word，否則可能出現版快錯開的情況。
語法：
word-wrap : normal | break-word
取值：
normal：預設值。允許內容頂開指定的容器邊界
break-word：內容將在邊界內換行。如果需要，詞內換行( word-break )也將發生
說明：
設定或檢索噹噹前行超過指定容器的邊界時是否斷開轉行。
此屬性僅作用於有佈局的物件，如塊物件。內聯要素要使用該屬性，必須先設定物件的 height 或 width 屬性，或者設定 position 屬性為 absolute ，或者設定 display 屬性為 block 。
四、overflow，overflow-x，overflow-y
這個不是嚴格意思上的控制換行樣式，但在某些時候將它設定為hidden可以補充word-wrap的不足，比方你想在限制寬度裡僅顯示一行文字，而這行文 字的長度卻超過這個寬度，結合white-space+text-overflow可以達到更好的效果。
語法：
overflow : visible | auto | hidden | scroll
取值：
visible： 預設值。不剪下內容也不新增滾動條。假如顯式宣告此預設值，物件將以包含物件的 window 或 frame 的尺寸裁切。並且 clip 屬性設定將失效
auto：在必需時物件內容才會被裁切或顯示滾動條
hidden：不顯示超過物件尺寸的內容
scroll：總是顯示滾動條
說明：
檢索或設定當物件的內容超過其指定高度及寬度時如何管理內容。
所有物件的預設值是 visible ，除了 textarea 物件和 body 物件的預設值是 auto 。設定 textarea 物件此屬性值為 hidden 將隱藏其滾動條。
對於 table 來說，假如 table-layout 屬性設定為 fixed ，則 td 物件支援帶有預設值為 hidden 的 overflow 屬性。如果設為 scroll 或者 auto ，那麼超出 td 尺寸的內容將被剪下。如果設為 visible ，將導致額外的文字溢位到右邊或左邊（視 direction 屬性設定而定）的單元格。
自IE5開始，此屬性在MAC平臺上可用。
自IE6開始，當你使用 !DOCTYPE 宣告指定了 standards-compliant 模式，此屬性可以應用於 html 物件。
css教程12
有些習慣顯得尤為重要，今天與您分享六個CSS習慣。因為習慣其實是會變的，所以只能寫“最近”的。這些習慣都跟技術無關，如果不遵守，也不會出錯。但是我覺得良好的習慣會體現一個人的素質。 我們在中向大家介紹過很多CSS經驗與技巧，這些東西都發布在/css/的文章中，相信對大家是有一些幫助與啟發的。有些習慣顯得尤為重要，今天與您分享六個CSS習慣。因為習慣其實是會變的，所以只能寫“最近”的。這些習慣都跟技術無關，如果不遵守，也不會出錯。但是我覺得良好的習慣會體現一個人的素質。
一、用class_name方式寫類名。
以前喜歡用class-name寫，不過好像兩樣也沒什麼差別。但我比較反對用className寫類名，因為始終對瀏覽器大小寫敏感的問題抱有懷疑態度。但是id我會寫成駝峰式，理由見下一條。
二、樣式都用class而不用id。
有三個理由，一，id不可以重複，所以用class的話，可以肆無忌憚的用無數次。二，id的優先順序太高，若是寫了一個#page_contenta{color:#f60}，那你完蛋了，裡面要改連結顏色，都必須加上#page_content才能越過這個優先順序。三，id專門留給JS用，這樣才符合表現與行為分離的原則。所以id我用駝峰式，也是為了體現這一點。
三、margin和padding，儘量省略最後一個值。
比如margin:20px10px5px10px;，左右值是一樣的，就應該省略掉最後一個值，寫成margin:20px10px5px;這樣到時候要改左右間距，改一個就好，免得改漏了。其實這個問題雖然很細小，但是可以看得出對margin四個值省略規則的熟練程度。
四、按標準寫CSS，再針對特定瀏覽器作hack。
比如，通常我們會遇到如下的寫法：
.side_col{
float:left;
display:inline;
margin-left:20px;
}
而我的寫法會是：
.side_col{
float:left;
margin-left:20px;
}
*.side_col{
_display:inline;/*hackedforIE6*/
}
看明白了麼？不應該把hack混在一起，也不應該用一種僥倖的心態，覺得float:left與display:inline寫在一起沒事。嗯，它們倆確實沒事兒，但是其他的hack就不一定了。而且這裡寫display:inline純粹就是為了解決IE6的bug，所以前面加上下劃線，以明確的表達你的目的。
另外不要以為凡是hack都是為IE準備的。其實有些hack是針對其他瀏覽器的，比如FF。這就要求你對CSS標準的熟練掌握，能夠自信的判斷哪些渲染是遵守標準，哪些違反標準的。
此外，我喜歡在hack前面加上星號，其實這純粹是個人習慣了。可能過段時間我就不這麼用了，呵呵。
五、記得加空格。
.class_name{property:value;}。我個人覺得合理的空格是優秀程式碼的一個指標。按英文的習慣，標點後面都應該帶空格（如果你寫Thisisapen.That’sapencil.句點後面不加空格，word裡面會有錯誤提示）。所以既然CSS是外國人發明的，應該按他們的格式來寫。類似的，在JS裡vara=b c;裡面的空格也應該都要加。
六、適當的層疊（Cascading)或縮排以定義CSS的“作用域”。
啥叫“CSS的作用域”？其實並不是所有的樣式都在所有的地方使用。有的樣式只用在某一塊裡面，比如“導航欄”裡的“搜尋框”，可能應該寫成：
.nav.search{}
而有時候用層疊會增加程式碼優先順序，所以也可以用縮排來“象徵性的”體現作用域。像這樣：
.login_box{}
.forgot_pwd{}
縮排，是為了表示它們對應的標籤具有父子關係。但這樣只能起一個提醒的作用。
CSS技巧在於不斷的總結與對編碼的理解，任何時候都是在不斷的完善的，有何經驗歡迎您來52CSS.com與我分享，也可以在W3Cbbs.com發貼，寫出您對CSS的心得體會。
css教程13
CSS教程文字屬性: 字型間距
用法:
word-spacing: 1cm;
word-spacing: 10pt;
word-spacing: 10px;
word-spacing: none;
定義:
使用這個屬性我們可以定義或者設定單詞之間的距離
word-spacing屬性可以設定以下的值。
a)cm:以釐米為單位設定屬性值，例如：1cm等...
b)px:以畫素為單位設定屬性值，例如：1px或者10px等...
c)pt:以點為單位設定屬性值，例如：1pt或者2pt等...
d)norm:以初始值/預設值為單詞間距。
示例1:
試驗字間距
結果:
自己測試
示例2:
試驗字間距
結果:
自己測試
示例3:
試驗字間距
結果:
自己測試
示例4:
試驗字間距
