給CSS初學(xué)者匯總的幾個(gè)技巧

2020-03-24 18:40:23

字體：大中小

供稿：網(wǎng)友

時(shí)間：2011-02-03 Tag：CSS 元素圖片替換水平居中本文主要面對(duì)CSS新手朋友，有一些東西或許不是搞的很明白。而這十則CSS技巧能促進(jìn)你的學(xué)習(xí)與編碼技巧，希望對(duì)大家有幫助一、CSS字體屬性簡寫規(guī)則一般用CSS設(shè)定字體屬性方法：
font-weight:bold;
font-style:italic;
font-varIEnt:small-caps;
font-size:1em;
line-height:1.5em;
font-family:verdana,sans-serif;
可以把它們?nèi)繉懙揭恍猩先ィ?
font: bold italic small-caps 1em/1.5em verdana,sans-serif;
這樣看起來是不是簡單多了，只有一點(diǎn)要提醒的：這種簡寫方法只有在同時(shí)指定font-size和font-family屬性時(shí)才起作用。而且，如果你沒有設(shè)定font-weight, font-style, 以及font-varient，他們會(huì)使用缺省值，這點(diǎn)要記上。二、CSS border的缺省值通常可以設(shè)定邊界的顏色，寬度和風(fēng)格，如：
border: 3px solid #000;
這位把邊界顯示成3像素寬，黑色，實(shí)線。但實(shí)際上這里只需要指定風(fēng)格即可。
如果只指定了風(fēng)格，其他屬性就會(huì)使用缺省值。一般地，Border的寬度缺省是medium，一般等于3到4個(gè)像素；缺省的顏色是其中文字的顏色。如果這個(gè)值正好合適的話，就不用設(shè)那么多了。三、給元素同時(shí)使用兩個(gè)類一般一個(gè)元素設(shè)定一個(gè)類（Class），但這并不意味著不能用兩個(gè)。事實(shí)上，你可以這樣：
〈p > 同時(shí)給P元素兩個(gè)類，中間用空格格開，這樣所有text和side兩個(gè)類的屬性都會(huì)加到P元素上來。如果它們兩個(gè)類中的屬性有沖突的話，后設(shè)置的起作用，即在CSS文件中放在后面的類的屬性起作用。
補(bǔ)充：對(duì)于一個(gè)ID，不能這樣寫〈p id=”text side” …〈/p 也不能這樣寫四、CSS用于文檔打印許多網(wǎng)站上都有一個(gè)針對(duì)打印的版本，但實(shí)際上這并不需要，因?yàn)榭梢杂肅SS來設(shè)定打印風(fēng)格。
也就是說，可以為頁面指定兩個(gè)CSS文件，一個(gè)用于屏幕顯示，一個(gè)用于打印：
〈link type=”text/css” rel=”stylesheet” href=”stylesheet.css” media=”screen” /
〈link type=”text/css” rel=”stylesheet” href=”printstyle.css” media=”print” /
第1行就是顯示，第2行是打印，注意其中的media屬性。
但應(yīng)該在打印CSS中寫什么東西呢？你可以按設(shè)計(jì)普通CSS的方法來設(shè)定它。設(shè)計(jì)的同時(shí)就可以把這個(gè)CSS設(shè)成顯示CSS來檢查它的效果。也許你會(huì)使用display: none 這個(gè)命令來關(guān)掉一些裝飾圖片，再關(guān)掉一些導(dǎo)航按鈕等。五、CSS圖像替換竅門
一般都意見用標(biāo)準(zhǔn)的來呈現(xiàn)文本，而不能應(yīng)用圖像，這樣不但快，也更具可讀性。但假如你想用一些特殊字體時(shí)，就只能用圖像了。
比如你想整個(gè)賣東西的ICON，你就用了那個(gè)圖像：
h1 src=”widget-image.gif” alt=”Buy widgets” / /h1
這當(dāng)然能夠，但對(duì)引擎來說，和正常文本相比，它們對(duì)alt里面的替換文本幾乎沒有興趣這是由于許多設(shè)計(jì)者在這里放許多Keyword軟件s來騙引擎。所以竅門應(yīng)該是這樣的：
h1 Buy widgets /h1
但這樣就沒有特殊字體了。要想達(dá)到同樣效果，能夠這樣設(shè)計(jì)CSS：
h1 { background: (widget-image.gif) no-repeat; height: image height text-indent: -2000px }
留意把image height換成真的圖像的高度。這里，圖像會(huì)當(dāng)作背景呈現(xiàn)出來，而真正的文本由于設(shè)定了-2000像素那個(gè)縮進(jìn)，它們會(huì)呈目前屏幕左邊2000點(diǎn)的地方，就看不見了。但這對(duì)于關(guān)閉圖像的人來說，估計(jì)全部看不到了，這點(diǎn)要留意。六、CSS box模型的另一種竅門
那個(gè)Box模型的調(diào)整主要是針對(duì)微軟瀏覽器6之前的微軟瀏覽器網(wǎng)頁瀏覽器的，它們把邊界寬度和空白都算在元素寬度上。比如：
#box { width: 100px; border: 5px; padding: 20px }
這樣調(diào)用它：
div id=”box” … /div
這時(shí)盒子的全寬應(yīng)該是150點(diǎn)，這在除微軟瀏覽器6之前的微軟瀏覽器網(wǎng)頁瀏覽器之外的所有網(wǎng)頁瀏覽器上都是正確的。但在微軟瀏覽器5這樣的網(wǎng)頁瀏覽器上，它的全寬仍是100點(diǎn)。能夠用以前人發(fā)明的Box調(diào)整竅門來處理這種差異。
但用CSS也能夠達(dá)到同樣的目的，讓它們呈現(xiàn)效果一致。
#box { width: 150px }
#box div { border: 5px; padding: 20px }
這樣調(diào)用：
div id=”box” div … /div /div
這樣，不管什么網(wǎng)頁瀏覽器，寬度都是150點(diǎn)了。七、CSS配置塊元素水平居中對(duì)齊
假如想做個(gè)固定寬度的webpage并且想讓webpage水平居中的話，通常是這樣：
#content { width: 700px; margin: 0 auto }
你會(huì)應(yīng)用 div id=”content” 來圍上所有元素。這很簡單，但不夠好，微軟瀏覽器6之前版本會(huì)呈現(xiàn)不出這種效果。改CSS如下：
body { text-align: center } #content { text-align: left; width: 700px; margin: 0 auto }
這會(huì)把webpage內(nèi)容都居中，所以在Content中又加入了:text-align: left 。八、用CSS來處理垂直對(duì)齊
垂直對(duì)齊用表格能夠很方便地呈現(xiàn)，設(shè)定表格單元 vertical-align: middle 就能夠了。但對(duì)CSS來說這沒用。假如你想設(shè)定一個(gè)導(dǎo)航條是2em高，而想讓導(dǎo)航文本垂直居中的話，設(shè)定那個(gè)屬性是沒用的。
CSS竅門是什么呢？對(duì)了，把這一些文本的行高設(shè)為 2em：line-height: 2em ，這就能夠了。九、CSS在容器內(nèi)的檔次
CSS的一個(gè)好處是能夠把一個(gè)元素任意檔次，在一個(gè)容器內(nèi)也能夠。比如對(duì)那個(gè)容器：
#container { position: relative }
這樣容器內(nèi)所有的元素都會(huì)相對(duì)檔次，能夠這樣用：
div id=”container” div id=”navigation” … /div /div
假如想檔次到距左30點(diǎn)，距上5點(diǎn)，能夠這樣：
#navigation { position: absolute; left: 30px; top: 5px }
當(dāng)然，你還能夠這樣：
margin: 5px 0 0 30px
留意4個(gè)數(shù)字的順序是：上、右、下、左。當(dāng)然，有時(shí)候檔次的竅門而否則邊距的竅門更好些。
更多的CSS布局與技能，請(qǐng)參考52CSS.com的大量教學(xué)課程。十、直通到屏幕底部的背景色
在垂直方向是停止控制是CSS所不能的。假如你想讓導(dǎo)航欄和內(nèi)容欄一樣直通到PAGE底部，用表格是很方便的，但假如只用這樣的CSS：
#navigation { background: blue; width: 150px }
較短的導(dǎo)航條是不會(huì)直通到底部的，半路內(nèi)容結(jié)束時(shí)它就結(jié)束了。該怎么辦呢？
不幸的是，只能采用隱瞞的手段了，給這較短的一欄加上個(gè)背景圖，寬度和欄寬一樣，并讓它的顏色和設(shè)定的背景色一樣。
body { background: (blue-image.gif) 0 0 repeat-y }
此時(shí)不能用em做單位，由于那樣的話，一旦讀者改變了字體大小，那個(gè)花招就會(huì)露餡，只能應(yīng)用pxhtml教程

鄭重聲明：本文版權(quán)歸原作者所有，轉(zhuǎn)載文章僅為傳播更多信息之目的，如作者信息標(biāo)記有誤，請(qǐng)第一時(shí)間聯(lián)系我們修改或刪除，多謝。

上一篇：CSS書寫順序建議及CSS HACK(FF&IE兼容)

下一篇：CSS3實(shí)現(xiàn)對(duì)話氣泡效果