本頁技巧目錄:
1、CSS字體屬性簡寫規(guī)則
2、FireFox移除超鏈接的虛線
3、讓固定寬度的頁面居中
4、隱藏水平滾動條
5、針對瀏覽器的選擇器
6、同時使用兩個類
1、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)繉懙揭恍猩先?/STRONG>:
font: bold italic small-caps 1em/1.5em verdana,sans-serif;
注意:這種簡寫方法只有在同時指定font-size和font-family屬性時才起作用。而且,如果你沒有設(shè)定font-weight, font-style, 以及 font-varient ,他們會使用缺省值,這點要記上。
2、FireFox移除超鏈接的虛線
FireFox下,當(dāng)你點擊一個超鏈接時會在外圍出現(xiàn)一個虛線輪廓。這很容易解決, 只需要在標(biāo)簽樣式中加入 outline:none。
a{
outline: none;
}
3、讓固定寬度的頁面居中
為了讓頁面在瀏覽器居中顯示, 需要相對定位外層,然后把margin設(shè)置為auto。
#wrapper {
margin: auto;
position: relative;
}
4、隱藏水平滾動條
為了避免出現(xiàn)水平滾動條,在body里加入 overflow-x:hidden 。
body { overflow-x: hidden; }
當(dāng)你決定使用一個比瀏覽器窗口大的圖片或者flash時,這個技巧將非常有用。
5、針對瀏覽器的選擇器
這些選擇器在你需要針對某款瀏覽器進(jìn)行css設(shè)計時將非常有用。
IE6及其更低版本
* html {}
IE7及其更低版本
*:first-child+html {} * html {}
僅針對IE7
*:first-child+html {}
IE7和當(dāng)代瀏覽器
html>body{}
僅當(dāng)代瀏覽器(IE7不適用)
html>/**/body{}
Opera9及其更低版本
html:first-child {}
Safari
html[xmlns*=""] body:last-child {}
要使用這些選擇器,請將它們放在樣式之前。 例如:
#content-box {
width: 300px;
height: 150px;
}
* html
#content-box {
width: 250px;
} /* overrides the above style and changes the width to 250px in IE 6 and below */
6、同時使用兩個類
一般只能給一個元素設(shè)定一個類(Class),但這并不意味著不能用兩個。事實上,你可以這樣:
<p class="text side">...</p>
同時給P元素兩個類,中間用空格格開,這樣所有text和side兩個類的屬性都會加到P元素上來。如果它們兩個類中的屬性有沖突的話,后設(shè)置的起作用,即在CSS文件中放在后面的類的屬性起作用。
補(bǔ)充:對于一個ID,不能這樣寫<p id="text side">...</p>也不能這樣寫