- 相關推薦
css經典教程(優(yōu))
css經典教程1
一、white-space
可以實現HTML中PRE標簽的效果，以及單元格的noWrap效果。
語法：
white-space : normal | pre | nowrap
取值：
normal： 默認值。默認處理方式。文本自動處理換行。假如抵達容器邊界內容會轉到下一行
pre： 換行和其他空白字符都將受到保護。這個值需要IE6+或者 !DOCTYPE 聲明為 standards-compliant mode 支持。如果 !DOCTYPE 聲明沒有指定為 standards-compliant mode ，此屬性可以使用，但是不會發(fā)生作用。結果等同于 normal 。參閱 pre 對象
nowrap： 強制在同一行內顯示所有文本，直到文本結束或者遭遇 br 對象。參閱 noWrap 屬性
說明：
設置或檢索對象內空格字符的處理方式。
空 格字符，像換行，空格，TAB，在HTML文檔中默認的是被忽略的。當此屬性設置為 normal 或者 nowrap 時，你可以使用不換行空格的命名實體 來添加空格，用 br 元素來添加換行。此屬性對你使用文檔對象模型(DOM)操作的內容的影響與其對IE顯示內容的影響一樣。
此屬性作用于塊對象。
相關樣式：
text-overflow
將它與white-space結合使用就不用再寫程序來判斷字符串長度了，點此查看示例。
語法：
text-overflow : clip | ellipsis
取值：
clip：默認值。不顯示省略標記(…)，而是簡單的裁切
ellipsis：當對象內文本溢出時顯示省略標記(…)
說明：
設置或檢索是否使用一個省略標記(…)標示對象內文本的溢出。
這個屬性僅僅作用于水平內聯方向的，普通的西方文本的溢出。內聯溢出發(fā)生在行內的文本超出可用寬度卻沒有換行機會的時候。
要強制溢出發(fā)生并且應用 ellipsis 值，作者必須設置對象的 white-space 屬性值為 nowrap 。
假如沒有換行機會(例如，對象容器的寬度是狹窄的，而內有很長的沒有合理斷行的文本)，沒有應用 nowrap 也有可能溢出。
為了使 ellipsis 值被應用，此屬性必須被設置到具有不可視區(qū)域的對象。最好的選擇是設置 overflow 屬性為 hidden 。設置 overflow 屬性為 scroll 或者 auto 時，此屬性也會應用。但是會有滾動條出現。
通過選擇省略標記，隱藏的文本可以被選擇。當選擇發(fā)生時，省略標記會隱藏而被文本替換。
此屬性為在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 )也將發(fā)生
說明：
設置或檢索當當前行超過指定容器的邊界時是否斷開轉行。
此屬性僅作用于有布局的對象，如塊對象。內聯要素要使用該屬性，必須先設定對象的 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經典教程2
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:
試驗字間距
css經典教程3
在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);
默認情況下背景圖片會 以元素左上角為起點，沿水平和垂直方向重復出現，最終填滿整個背景區(qū)域。
背景重復
格式：background-repeat: repeat | repeat-x | repeat-y | no-repeat;
示例：background-repeat:repeat-x;
說明：
repeat 默認值，水平和垂直方向都重復，直至填滿元素的背景區(qū)域為止。
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，就能實現了圖片在背景區(qū)域內居中的效果。第一個值表示水平位置，第二個值表示垂直位置。要是只設定一個值，則將其用來設定水平位置，而垂直位置會被設為 center。
第三種情況，使用絕對或相對單位的數值。要是使用像素單位來設定位置，那么圖片的左上角會被放在距離元素左上角指定位置的地方。另外，還可以使用負值，這樣可以把圖片的左上角定位到元素外部，從而在元素中只能看到部分圖片。當然也可以給圖片設定足夠大的正值，把圖片的右下角推到元素外部實現同樣的效果。
背景尺寸
background-size 是 CSS3 規(guī)定的屬性，用來控制背景圖片的尺寸。
可設定的值和含義如下：
50%：縮放圖片，使其填充背景區(qū)的一半。
100px 50px：把圖片調整到 100 像素寬，50 像素高。
cover：拉大圖片，使其完全填滿背景區(qū)；保持寬高比。
contain：縮放圖片，使其恰好適合背景區(qū)；保持寬高比。
注意：把很小的圖片拉大會導致圖片質量失真。
背景粘附
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 屬性。
漸變分兩種：
線性漸變。從元素的一端延伸到另一端。
放射性漸變。從元素內一點向四周發(fā)散。
廠商前綴
為鼓勵瀏覽器廠商盡早采用 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經典教程4
滑動門(Sliding Doors)
還是決定把滑動門單獨提作一種單獨的技術.
它是CSS引入的一項用來創(chuàng)造漂亮且實用的界面的新技術, 它使用簡單, 我們只需要使用兩張單獨的背景圖片, 就可以實現。
滑動門一般用做網站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經典教程5
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; }
比如我個人就喜歡寫在一行，因為每排寫一行會讓整個文檔感覺太長了，找起來不方便。如果你喜歡寫一行，但是發(fā)給team的另一個，他卻喜歡每排一行，那怎么辦？其實很簡單，把css拿去w3c驗證，它會有一份結果，會自動轉換成每排一行。
5. 先標記后css
這個我沒有太看懂。大概理解是對html的標記弄好后再寫css會比較不容易出錯。比如我寫一個頁面，先寫一個最基本的標記結構
!<--end footer--="">
然后就是盡量善用子選擇器，而不是一要給哪個元素進行樣式化，就給它添加個選擇器。
css經典教程6
按照CSS規(guī)范，浮動元素（floats）會被移出文檔流，不會影響到塊狀盒子的布局而只會影響內聯盒子（通常是文本）的排列。因此當其高度超出包含容器時，一般父容器不會自動伸長以閉合浮動元素。但是有時我們卻需要這種自動閉合行為，具體如何處理呢？
有一種做法就是在父容器內再插入一個額外的標簽，并令其清除浮動（clear）以撐大父容器。這種方法瀏覽器兼容性好，沒有什么問題，缺點就是需要額外的（而且通常是無語義的）標簽，所以我個人不大喜歡。
后來又有了一種新的方式，使用:after偽類動態(tài)的嵌入一個用于清除浮動的元素，這種方法和上一種原理一樣，不同的只是把這個額外的內容用CSS生成，但考慮到IE不支持:after不得不做了不少的hack。這種方法兼容性一般，但經過各種hack也可以應付不同瀏覽器了，同時又可以保證html比較干凈，所以用得還是比較多的。
再后來又有人發(fā)現將父容器的overflow設為除visible之外的值就可以在標準兼容瀏覽器中閉合浮動元素，IE自然又是不支持的，所以這種方法和上一種方法一樣都對IE做了不同處理（具體就是觸發(fā)layout），不同的就是overflow沒有:after偽類那么麻煩了，缺點也有，overflow可能會產生一些小沖突。
在使用overflow之前還有過一種使用float的方法，就是讓父容器也浮動，這利用到了浮動元素的一個特性――浮動元素會閉合浮動元素。這種方式在IE/Win和標準兼容瀏覽器中都有較好的效果，但缺點也很明顯――父容器未必想浮動就浮動的.了，畢竟浮動是一種比較特殊的行為，有時布局不允許其浮動也很正常。使用float雖然在IE和標準兼容瀏覽器中都能閉合浮動元素，但原理卻是不同的，IE/Win中float觸發(fā)了layout因而閉合了浮動，而在標準兼容瀏覽器中，float其實和上一種方法中的overflow原理一樣，產生了一個“塊級格式化范圍”――這是CSS規(guī)范中提到的一種現象，它往往具有某種獨立性，特性之一就是會自動閉合內部的浮動元素。
按照規(guī)范，以下類型的元素會產生一個塊級格式化范圍：
●浮動元素，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，具有l(wèi)ayout的元素會自動閉合浮動元素，再來看看觸發(fā)layout的CSS屬性，會發(fā)現和上面的塊級格式化范圍有很多類似之處：
●浮動元素
●絕對定位元素
●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不會消失，同時也不會影響其他瀏覽器，所以目前來說，這也算一個不錯的觸發(fā)layout的方法：
.gainlayout{display:inline-block;}
.gainlayout{display:block;}
所以要跨瀏覽器閉合浮動元素，可以選擇的方式還是很多的，如何搭配使用這些CSS屬性就要具體情況具體分析了，靈活應用條件注釋也很有必要，要是實在不行我們回過頭來還有clear可以用嘛。
css經典教程7
上下左右邊框交界處呈現平滑的斜線。利用這個特點，通過設置不同的上下左右邊框寬度或顏色，可以得到小三角、梯形等。
調整寬度大小可以調節(jié)三角形形狀。
實現三角形
示例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經典教程8
一般而言，CSS類名的語義化聲明方式應當考慮你的頁面中某個相對元素的”用意”，獨立于它的”定位”或確切的特性(結構化方式)。像left-bar, red-text, small-title…這些都屬于結構化定義的例子。
讓我們看看下面這個例子:
…而現在我們想把頁面中的元素調換一下位置，如果你使用的是結構化方式(1)，那么你就要把所有CSS類名重新進行定義，因為它們的位置變了。在布局(3)中，我們看到元素都倒轉了:right-bar 現在成了 “l(fā)eft-bar”，而left-content 成了 “right-content”。如果你使用語義化方式則避免了此類問題。
換句話說，使用語義化方式的話，你在修改網站布局的時候可以僅僅修改相關CSS類的屬性即可，而不用修改它們的類名了，如果網站的代碼很龐大，這將節(jié)省大量的時間。
教程網會經常更新前端開發(fā)/網頁設計等相關技術及教程文章，歡迎及時瀏覽教程網的最新教程及資源。關于語義化的一些建議:
在開始之前，我想推薦兩種簡單的編寫較好的'CSS代碼的指導方針: 為CSS類名定義的時候，盡量使用小寫字母，如果有兩個以上的單詞，在每個單詞之間使用”-”符或單詞首字母大寫(第一個單詞除外)。如:”main-content”或”mainContent”。 優(yōu)化CSS代碼，僅創(chuàng)建關鍵主要的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”是網站頁面的頭部區(qū)域，一般來講，它包含網站的logo和一些其他元素。這部分你還可以命名為:”top“, “l(fā)ogo“, “page-header” (或 pageHeader). Navbar
“#navbar“等同于橫向的導航欄，是最典型的網頁元素。這部分你還可以命名為:“nav”,“navigation”,“nav-wrapper”. Menu
“#Menu”區(qū)域包含一般的鏈接和菜單，這部分你還可以命名為:“sub-nav“, “l(fā)inks“. Main
“#Main”是網站的主要區(qū)域，如果是博客的話它將包含你的日志。這部分你還可以命名為:“content“, “main-content” (or “mainContent”)。 Sidebar
“#Sidebar”部分可以包含網站的次要內容，比如最近更新內容列表、關于網站的介紹或廣告元素等…這部分你還可以命名為:“sub-nav“, “side-panel“, “secondary-content“. Footer
“#Footer”包含網站的一些附加信息，這部分你還可以命名為:“copyright“.
css經典教程9
(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
狀態(tài)： status
版權： copyright
按鈕： btn
合作伙伴： partner
投票： vote
css經典教程10
有些習慣顯得尤為重要，今天與您分享六個CSS習慣。因為習慣其實是會變的，所以只能寫“最近”的。這些習慣都跟技術無關，如果不遵守，也不會出錯。但是我覺得良好的習慣會體現一個人的素質。 我們在中向大家介紹過很多CSS經驗與技巧，這些東西都發(fā)布在/css/的文章中，相信對大家是有一些幫助與啟發(fā)的。有些習慣顯得尤為重要，今天與您分享六個CSS習慣。因為習慣其實是會變的，所以只能寫“最近”的。這些習慣都跟技術無關，如果不遵守，也不會出錯。但是我覺得良好的習慣會體現一個人的素質。
一、用class_name方式寫類名。
以前喜歡用class-name寫，不過好像兩樣也沒什么差別。但我比較反對用className寫類名，因為始終對瀏覽器大小寫敏感的問題抱有懷疑態(tài)度。但是id我會寫成駝峰式，理由見下一條。
二、樣式都用class而不用id。
有三個理由，一，id不可以重復，所以用class的話，可以肆無忌憚的用無數次。二，id的優(yōu)先級太高，若是寫了一個#page_contenta{color:#f60}，那你完蛋了，里面要改鏈接顏色，都必須加上#page_content才能越過這個優(yōu)先級。三，id專門留給JS用，這樣才符合表現與行為分離的原則。所以id我用駝峰式，也是為了體現這一點。
三、margin和padding，盡量省略最后一個值。
比如margin:20px10px5px10px;，左右值是一樣的，就應該省略掉最后一個值，寫成margin:20px10px5px;這樣到時候要改左右間距，改一個就好，免得改漏了。其實這個問題雖然很細小，但是可以看得出對margin四個值省略規(guī)則的熟練程度。
四、按標準寫CSS，再針對特定瀏覽器作hack。
比如，通常我們會遇到如下的寫法：
.side_col{
float:left;
display:inline;
margin-left:20px;
}
而我的寫法會是：
.side_col{
float:left;
margin-left:20px;
}
*.side_col{
_display:inline;/*hackedforIE6*/
}
看明白了么？不應該把hack混在一起，也不應該用一種僥幸的心態(tài)，覺得float:left與display:inline寫在一起沒事。嗯，它們倆確實沒事兒，但是其他的hack就不一定了。而且這里寫display:inline純粹就是為了解決IE6的bug，所以前面加上下劃線，以明確的表達你的目的。
另外不要以為凡是hack都是為IE準備的。其實有些hack是針對其他瀏覽器的，比如FF。這就要求你對CSS標準的熟練掌握，能夠自信的.判斷哪些渲染是遵守標準，哪些違反標準的。
此外，我喜歡在hack前面加上星號，其實這純粹是個人習慣了�？赡苓^段時間我就不這么用了，呵呵。
五、記得加空格。
.class_name{property:value;}。我個人覺得合理的空格是優(yōu)秀代碼的一個指標。按英文的習慣，標點后面都應該帶空格（如果你寫Thisisapen.That’sapencil.句點后面不加空格，word里面會有錯誤提示）。所以既然CSS是外國人發(fā)明的，應該按他們的格式來寫。類似的，在JS里vara=b c;里面的空格也應該都要加。
六、適當的層疊（Cascading)或縮進以定義CSS的“作用域”。
啥叫“CSS的作用域”？其實并不是所有的樣式都在所有的地方使用。有的樣式只用在某一塊里面，比如“導航欄”里的“搜索框”，可能應該寫成：
.nav.search{}
而有時候用層疊會增加代碼優(yōu)先級，所以也可以用縮進來“象征性的”體現作用域。像這樣：
.login_box{}
.forgot_pwd{}
縮進，是為了表示它們對應的標簽具有父子關系。但這樣只能起一個提醒的作用。
CSS技巧在于不斷的總結與對編碼的理解，任何時候都是在不斷的完善的，有何經驗歡迎您來52CSS.com與我分享，也可以在W3Cbbs.com發(fā)貼，寫出您對CSS的心得體會。
css經典教程11
上節(jié)課我們講了一下CSS通過什么方式去控制頁面，如果不記得，我來幫大家回憶一下，總共有四種方式行內方式、內嵌方式、鏈接方式、導入方式，大家通過這四種方式就可以實現CSS對HTML頁面樣式的控制，如果要讓這些樣式對HTML頁面中的元素實現一對一，一對多或者多對一的控制，這就需要用到CSS選擇器，HTML頁面中的元素就是通過CSS選擇器進行控制的。
CSS選擇器共有三種：標簽選擇器、ID選擇器、類選擇器。
為了后面的對選擇器的解釋更容易理解，在這里先打個比喻，如果把你所處的環(huán)境視為HTML頁面的話，環(huán)境里的每一個人則相當于HTML頁面內標簽元素，每個人都有一個ID(身份證)，那么html中的每一個標簽也都有自己的ID，大家都知道ID是唯一的，不可能重復。
【標簽選擇器】
一個完整的HTML頁面是有很多不同的標簽組成，而標簽選擇器，則是決定哪些標簽采用相應的CSS樣式，(在大環(huán)境中你可能出于不同的位置，但是不管怎么樣，你總是穿著同一套衣服，這件衣服就是由標簽選擇器事先給你限定好的，不管走到哪里都是這身衣服)比如，在style.css文件中對p標簽樣式的聲明如下：
p{
font-size:12px;
background:#900;
color:090;
}
則頁面中所有p標簽的背景都是#900(紅色)，文字大小均是12px，顏色為#090(綠色)，這在后期維護中，如果想改變整個網站中p標簽背景的顏色，只需要修改background屬性就可以了，就這么容易！
【ID選擇器】
ID選擇器在某一個HTML頁面中只能使用一次(當然也可以用好幾次，不過就不符合W3C標準了，那頁面也就不是標準頁面嘍~，咱們的目的不就是為了做標準的頁面么，所以建議大家不要在同一個html頁面中多個標簽擁有共同的ID)，就像在你所處的環(huán)境中，你只有一個ID(身份證)，不可能重復！相信大家也能看出來，ID選擇器更具有針對性，如：
先給某個HTML頁面中的某個p標簽起個ID，代碼如下：
此處為p標簽內的文字
在CSS中定義ID為one的p標簽的屬性，就需要用到#，代碼如下：
#one{
font-size:12px;
background:#900;
color:090;
}
這樣頁面中的某個p就會是CSS中定義的樣式。
【類選擇器】
這種選擇器更容易理解了，就是使頁面中的某些標簽(可以是不同的`標簽)具有相同的樣式，就像國慶中某個方陣中，肯定都是不同的人，卻均穿紅色衣服，手中高舉花環(huán)，樣式都是一樣的，如果想讓這一類人都有共同的樣式，該怎么做呢~呵呵，和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標簽區(qū)域
這里是a標簽區(qū)域
這里是p標簽區(qū)域
這里是a標簽區(qū)域
大家運行一下上面的例子，div1里面的兩個標簽是不是樣式一樣，這就是通用選擇器的強大之處，不管里面有多少個標簽都會將樣式加到所有標簽內，如果div1里面得所有的標簽都有一部分相同的CSS代碼，那么可以把這部分代碼提取出來，用通用選擇器來定義，這樣可以大大縮減代碼，但是如果div1里面只要有一個和其他元素沒有相同的代碼，就不能用通用選擇器來定義，這也就是CSS通用選擇器不靈活的一點�，F在大家明白為什么通用選擇器是選擇器里面功能最強大的但又是用的最少的選擇器了吧~~呵呵
對于通用選擇器還有一個不得不提的用法，就是為了保證作出的頁面能夠兼容多種瀏覽器，所以要對HTML內的所有的標簽進行重置，會將下面的代碼加到CSS文件的最頂端
*{margin:0; padding:0;}
為什么要這么用呢，因為每種瀏覽器都自帶有CSS文件，如果一個頁面在瀏覽器加載頁面后，發(fā)現沒有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;}
用到那些就寫那些，這點也可以看做衡量頁面重構師制作頁面水平的高低，以及是否專業(yè)的一個方面到這里大家更應該明白這句話“通用選擇器是功能最強大但是用的最少的選擇器”了吧~^_^
OK！選擇器的內容我向大家應該都明白了，后面就繼續(xù)講解一下“選擇器的集體聲
明”和“選擇器的嵌套”
【選擇器的集體聲明】
在我們使用選擇器的時候，有些標簽樣式是一樣的，或者某些標簽都有共同的樣式屬性，我們可以將這些標簽集體聲明，不同的標簽用“,”分開，比如：
h1,h2,h3,h4,h5,h6{color:#900;}
#one,#three,.yellow{font-size:14px;}
#one{background:#ccc;}
#three{background:#ccc;}
.yellow{background:#ccc;}
和小學的提取公因式差不多，把共同的部分提取出來，這么做的好處，相同的部分共同定義，不同的部分單獨定義，保證風格統(tǒng)一，樣式修改靈活，這也是優(yōu)化CSS代碼的一塊，要記住喲~
【選擇器的嵌套】
選擇器也是可以嵌套的，如：
#div1 p a{color:#900;}/*意思是在ID為div1
內的p標簽內的鏈接a標簽的文字顏色為紅色*/
這樣的好處就是不需要在單獨的為ID為div1的標簽內的p標簽內的a標簽單獨定義class選擇器或者ID選擇器，CSS代碼不就少了嘛~同樣也是CSS代碼優(yōu)化的一塊。
到這里，基本的選擇器說完了，但是還需要給大家介紹一個“通用選擇器”
*{此處為CSS代碼}
好，這節(jié)課主要講解了三種CSS代碼選擇器、選擇器的聲明、選擇器的嵌套三塊知識，要掌握好，如果有不懂，可以留言。
css經典教程12
CSS為定位和浮動提供了一些屬性，利用這些屬性，可以建立列式布局，將布局的一部分與另一部分重疊，還可以完成多年來通常需要使用多個表格才能完成的任務。
定位的基本思想很簡單，它允許你定義元素框相對于其正常位置應該出現的位置，或者相對于父元素、另一個元素甚至瀏覽器窗口本身的位置。顯然，這個功能非常強大，也很讓人吃驚。要知道，用戶代理對CSS2中定位的支持遠勝于對其它方面的支持，對此不應感到奇怪。
另一方面，CSS1中首次提出了浮動，它以Netscape在Web發(fā)展初期增加的一個功能為基礎。浮動不完全是定位，不過，它當然也不是正常流布局。我們會在后面的章節(jié)中明確浮動的含義。
一切皆為框
div、h1或p元素常常被稱為塊級元素。這意味著這些元素顯示為一塊內容，即“塊框”。與之相反，span和strong等元素稱為“行內元素”，這是因為它們的內容顯示在行中，即“行內框”。
您可以使用display屬性改變生成的框的類型。這意味著，通過將display屬性設置為block，可以讓行內元素（比如元素）表現得像塊級元素一樣。還可以通過把display設置為none，讓生成的元素根本沒有框。這樣的話，該框及其所有內容就不再顯示，不占用文檔中的空間。
但是在一種情況下，即使沒有進行顯式定義，也會創(chuàng)建塊級元素。這種情況發(fā)生在把一些文本添加到一個塊級元素（比如div）的開頭。即使沒有把這些文本定義為段落，它也會被當作段落對待：
sometext
Somemoretext.
在這種情況下，這個框稱為無名塊框，因為它不與專門定義的元素相關聯。
塊級元素的文本行也會發(fā)生類似的情況。假設有一個包含三行文本的段落。每行文本形成一個無名框。無法直接對無名塊或行框應用樣式，因為沒有可以應用樣式的地方（注意，行框和行內框是兩個概念）。但是，這有助于理解在屏幕上看到的所有東西都形成某種框。
CSS定位機制
CSS有三種基本的定位機制：普通流、浮動和絕對定位。
除非專門指定，否則所有框都在普通流中定位。也就是說，普通流中的元素的位置由元素在X(HTML)中的位置決定。
塊級框從上到下一個接一個地排列，框之間的垂直距離是由框的垂直外邊距計算出來。
行內框在一行中水平布置�？梢允褂盟絻冗吘�、邊框和外邊距調整它們的間距。但是，垂直內邊距、邊框和外邊距不影響行內框的高度。由一行形成的水平框稱為行框（LineBox），行框的高度總是足以容納它包含的所有行內框。不過，設置行高可以增加這個框的高度。
在下面，我們會為您詳細講解相對定位、絕對定位和浮動。
CSSposition屬性
通過使用position屬性，我們可以選擇4中不同類型的定位，這會影響元素框生成的方式。
position屬性值的含義：
static
元素框正常生成。塊級元素生成一個矩形框，作為文檔流的一部分，行內元素則會創(chuàng)建一個或多個行框，置于其父元素中。
relative
元素框偏移某個距離。元素仍保持其未定位前的形狀，它原本所占的空間仍保留。
absolute
元素框從文檔流完全刪除，并相對于其包含塊定位。包含塊可能是文檔中的另一個元素或者是初始包含塊。元素原先在正常文檔流中所占的空間會關閉，就好像元素原來不存在一樣。元素定位后生成一個塊級框，而不論原來它在正常流中生成何種類型的`框。
fixed
元素框的表現類似于將position設置為absolute，不過其包含塊是視窗本身。
提示：相對定位實際上被看作普通流定位模型的一部分，因為元素的位置相對于它在普通流中的位置。
CSS定位屬性
CSS定位屬性允許你對元素進行定位。
屬性描述
position把元素放置到一個靜態(tài)的、相對的、絕對的、或固定的位置中。
top定義了一個定位元素的上外邊距邊界與其包含塊上邊界之間的偏移。
right定義了定位元素右外邊距邊界與其包含塊右邊界之間的偏移。
bottom定義了定位元素下外邊距邊界與其包含塊下邊界之間的偏移。
left定義了定位元素左外邊距邊界與其包含塊左邊界之間的偏移。
overflow設置當元素的內容溢出其區(qū)域時發(fā)生的事情。
clip設置元素的形狀。元素被剪入這個形狀之中，然后顯示出來。
vertical-align設置元素的垂直對齊方式。
z-index設置元素的堆疊順序。
css經典教程13
一般說來如果某個子元素使用了浮動(float)，那父元素總是不能確切地知道子元素是在什么位置結束的，所以父元素的下邊框總是從子元素的中間甚至是頂部穿過，看起來很不舒服。
最近兩個月斷斷續(xù)續(xù)做了好幾個網站的美工，做的過程中對DIV Css的標準開發(fā)有了進一步的了解。有兩點收獲最大，一是徹底弄懂了CSS的`盒子模式(Box Model)，再一個就是搞定了困擾我很久的“閉合浮動元素”的問題：
一般說來如果某個子元素使用了浮動(float)，那父元素總是不能確切地知道子元素是在什么位置結束的，所以父元素的下邊框總是從子元素的中間甚至是頂部穿過，看起來很不舒服。
最早時我都是在子元素結束后單獨加個
或
將其屬性設置為“clear:all;”，但這樣一來就需要生成不少沒用的空標簽，甚至有些網站需要修改ASP代碼以自動添加這些空標簽，只能算是下策。
后來發(fā)現當父標簽也設置為浮動(float)時就可以在正確的位置閉合了，所以就把父容易也浮動起來，這樣一來很多ASP代碼就不需要改了，遇到需要添加含Clear屬性的空標簽時如果不能從模板中添加，而需要從ASP代碼中添加時，就不需要改ASP代碼了，只需要把父容器設為浮動，如果還需要改ASP，那就再把父容器的父容器設為浮動，一層層地浮動上去，總能解決問題的。這雖然能省不少事，但很容易造成整個頁面中全是浮動元素，-_-!!!也只能算是中策而已。
再后來，在網上搜索別的東西時偶然發(fā)現有人說只要在父容器的CSS屬性中加上以下兩個屬性就可以搞定了：
overflow: auto;
_height: 1%;
試了一下，果然好用，這么一來，這在目前應該算是解決這一問題的上策了：不需要對頁面做任務修改，也基本上不需要對父容器－－甚至是父容器的父容器做什么改動，只給父容器添加兩個無所謂的屬性就搞定了。