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