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