常用的CSS技巧可以讓我們?cè)谧?a href="http://lslks.net/wangzhanjianshe/wangyesheji/" target="_blank">網(wǎng)頁(yè)設(shè)計(jì)的時(shí)候避免一些問(wèn)題,并且讓CSS代碼更多的被兼容,這點(diǎn)對(duì)于我自己來(lái)說(shuō)也是有用的。所以和大家分享一下。
· 最好在CSS里面加一些必要的注釋,不但方便自己修改,更加方便了別人修改,記得CSS里面的注釋符號(hào)是*注釋* />。
· 掌握必要的CSS縮寫(xiě)方法,這樣對(duì)網(wǎng)站很有利,特別是網(wǎng)站大了之后,可以節(jié)省很多流量。
· li標(biāo)簽前面的圖標(biāo)推薦使用background-image,而不是list-style-image。
· ul標(biāo)簽在Mozilla中默認(rèn)是有padding值的,而在IE中只有margin有值。
· 如果一組要嵌套的標(biāo)簽之間需要些間距的話,那就留給位于里面的標(biāo)簽的margin屬性,不要去定義位于外面的標(biāo)簽的padding。
· 定義顏色盡量縮寫(xiě):如#5533DD=#53D。
· IE分不清繼承關(guān)系和父子關(guān)系的差別,全部都是繼承關(guān)系。
· 同一個(gè)的class選擇符可以在一個(gè)文檔中重復(fù)出現(xiàn),而id選擇符卻只能出現(xiàn)一次。對(duì)一個(gè)標(biāo)簽同時(shí)使用class和id進(jìn)行CSS定義,如果定義有重復(fù),id選擇符做的定義有效,是因?yàn)閕d的權(quán)重要比class大。
· 與內(nèi)容無(wú)關(guān)的圖片請(qǐng)使用background,時(shí)刻記住表現(xiàn)與內(nèi)容分離。
· 如果你給一個(gè)標(biāo)簽設(shè)置了一個(gè)深色調(diào)的背景圖片和亮色調(diào)的文字效果。建議給你的標(biāo)簽再設(shè)置一個(gè)深色調(diào)的背景顏色。因?yàn)榧词箞D片丟失了,也可以保持文字的可讀性。
· 定義鏈接的四種狀態(tài)要注意先后順序: Link -> Visited -> Hover -> Active。
· 絕對(duì)定位時(shí)使用margin值定位可以達(dá)到相對(duì)于本身所在位置的定,這與top,left等屬性相對(duì)與窗口邊緣的定位不同。絕對(duì)定位的優(yōu)勢(shì)在于可以讓其它元素忽略它的存在。
· 很好的單象素外框線表格要這樣定義
table{ border-collapse:collapse; }
td{ border:#000 solid 1px; }
· margin取負(fù)值可以在標(biāo)簽使用絕對(duì)定位的時(shí)候起到相對(duì)定位的作用,在頁(yè)面居中顯示時(shí),使用絕對(duì)定位的層不適合使用left:XXpx這個(gè)屬性。把這個(gè)層放到一個(gè)要相對(duì)定位的標(biāo)簽旁,然后使用margin的負(fù)值是個(gè)好方法。
· 如何用CSS調(diào)用外部字體
語(yǔ)法:@font-face{font-family:name;src:url(url);sRules}
取值:name:字體名稱。任何可能的font-family 屬性的值
url(url):使用絕對(duì)或相對(duì) url 地址指定OpenType字體文件
sRules:樣式表定義
·讓文本框本身垂直居中該怎么實(shí)現(xiàn)?請(qǐng)參考讓input文本框垂直居中的方法。
· 如何讓一個(gè)表單中的文本框中的文字垂直居中?
如果用行高與高度的組在FF中是沒(méi)有效果的,辦法就是定義上下補(bǔ)白就可以實(shí)現(xiàn)想想的效果了。
· table在某些地方運(yùn)用還是很方便的,在遇到內(nèi)容為數(shù)據(jù)表格時(shí),可以用table,不要忽略了它的存在。
· <script>沒(méi)有l(wèi)anguage這個(gè)屬性,應(yīng)該寫(xiě)成這樣:<script type=”text/javascript”>
· 定義A標(biāo)簽的注意事項(xiàng)
當(dāng)我們定義a{color:red;}時(shí),它代表了A的四種狀態(tài)的樣式,如果此時(shí)要定義一個(gè)鼠標(biāo)放上的狀態(tài)只要定義a:hover就可以了,其它三種狀態(tài)就是A中所定義的樣式。只定義了一個(gè)a:link時(shí),一定要記得把其它三種狀態(tài)定義出來(lái)。
· 在IE中可能由于注釋帶來(lái)的文字重復(fù)問(wèn)題時(shí)可以把注釋改為:
<!–[if !IE]>Put your commentary in here…
實(shí)際上常用的CSS技巧還有很多,這里只是一些最基本的介紹。