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