CSS常用技巧介紹
1. CSS字體定義簡(jiǎn)寫(xiě)規(guī)則
一般的寫(xiě)法會(huì)是這樣：
|
以下為引用的內(nèi)容： font-weight: bold; |
而實(shí)際上你可以用更簡(jiǎn)潔的寫(xiě)法：
font: bold italic small-caps 1em/1.5em verdana,sans-serif
是不是更省事？不過(guò)使用這種簡(jiǎn)寫(xiě)需要注意幾點(diǎn)：要使簡(jiǎn)寫(xiě)定義有效必須至少提供 font-size 和 font-family 這兩個(gè)屬性；同時(shí)font-weight, font-style 以及 font-varient 這幾個(gè)屬性如果不做設(shè)定的話將默認(rèn)為normal。
還有background，border等等.
1. 關(guān)于background的寫(xiě)法
DIV.comment{background:#f0f0f0 url(url address) repeat-x left top}
1）您可以看到background的第一個(gè)定義是一個(gè)顏色值這表示在背景圖片失效的時(shí)候顏色將起作用。
2）url括號(hào)中的引號(hào)是沒(méi)有必要的，我們可以不寫(xiě)引號(hào)
2. 關(guān)于Border的寫(xiě)法，如果您想定義div的四個(gè)邊的顏色不同，而粗度和樣式都一樣，您可以這樣寫(xiě)：
DIV.special{border:1px solid; border-color:color1 color2 color3 color4}
四種顏色一次是上，右，下，左的顏色
顏色相同就合并成：
DIV.special{border:1px solid color4}
2. 同時(shí)使用兩個(gè)Class定義
一般我們只會(huì)給內(nèi)容塊指定一個(gè)Class，但這并不代表我們只能指定一個(gè)。實(shí)際上只要你愿意，可以同時(shí)把任意多個(gè)Class賦給某塊內(nèi)容。比如：
<p class="text side">...</p>
多個(gè)Class之間用空格分隔即可。當(dāng)多個(gè)Class之間的屬性發(fā)生重疊的時(shí)候，將根據(jù)各個(gè)Class在CSS定義文件中被定義的位置，后定義的Class屬性自動(dòng)覆蓋之前定義的Class屬性（而不是根據(jù)你在class="text side"這里排列的順序來(lái)進(jìn)行覆蓋）
3. CSS border的缺省值
通常我們定義border屬性都會(huì)提供color,width,style這些屬性。比如 border: 3px solid #000 。不過(guò)實(shí)際上必須要提供的屬性只有style。如果你只寫(xiě) border: solid 的話，其他的屬性自動(dòng)使用缺省值。border的缺省寬度是medium(大約3px-4px)，缺省的顏色是位于border里面的內(nèi)容文字的顏色。如果這些缺省值可以滿足你的要求，你完全可以省略這兩項(xiàng)屬性。
4. 專門用于打印的CSS文檔
很多web頁(yè)面都會(huì)提供一個(gè)打印鏈接，方便用戶使用另一種適合打印界面的CSS。但實(shí)際上你完全可以為你的頁(yè)面指定兩個(gè)CSS文檔link，這樣瀏覽器會(huì)自動(dòng)調(diào)用合適的CSS來(lái)用于顯示或打印。比如：
|
以下為引用的內(nèi)容： <link type="text/css" rel="stylesheet" href="stylesheet.css" media="screen" /> |
通過(guò)指定link的media屬性，瀏覽器就能根據(jù)需要來(lái)調(diào)用特定的CSS文件來(lái)處理頁(yè)面了。關(guān)于打印更多的建議，請(qǐng)參見(jiàn) Print Different,
5. CSS中的內(nèi)容垂直對(duì)齊
用傳統(tǒng)的table來(lái)實(shí)現(xiàn)垂直對(duì)齊很容易，只要用 vertical-align: middle 就可以讓table的內(nèi)容垂直居中。但這個(gè)屬性在CSS里面卻行不通。
解決方法是把內(nèi)容的行高設(shè)置成與內(nèi)容塊一樣高。比如你的div高是32px，那就在你的CSS定義里面添加屬性 line-height: 32px; 這樣文字看上去就垂直居中于層里面了。不過(guò)這個(gè)方法只適用于單行文字，對(duì)于多行文字，似乎沒(méi)有什么好方法。
6. 讓背景色能夠垂直拉齊到底部
CSS與傳統(tǒng)的table來(lái)說(shuō)另一個(gè)讓人不爽的地方是它的垂直層的對(duì)齊。如果你的頁(yè)面分為兩列，其中一列比較長(zhǎng)而另一列比較短，同時(shí)兩列的背景色和頁(yè)面總的背景色是不同的話，顯示出來(lái)的效果就比較丑陋，不像table那樣只要把td的高度設(shè)成100%就能夠把每一列的高度拉到一樣長(zhǎng)。
要解決這個(gè)問(wèn)題似乎只能用一個(gè)取巧的辦法，根據(jù)每列的寬度和背景色設(shè)置背景圖片，讓用戶看上去似乎拉平了：
|
以下為引用的內(nèi)容： body |
7. block / inline 屬性
任何一個(gè)HTML元素都是block或者inline的。
block元素的特性包括：
總是另起一行開(kāi)始顯示
height, line-height, top/bottom margin屬性可以被設(shè)置
width缺省值是100%,除非你指定了另外的width值
這一類的HTML元素包括<div>, <p>, <h1>, <form>, <ul> 以及 <li>等。
inline元素的特性包括：
直接跟在當(dāng)前行的后面顯示
height, line-height, top/bottom margin屬性不能改變
width值就等于包含其中的文字/圖片的寬度，并且這個(gè)值不能被改變
這一類的HTML元素包括<span>, <a>, <label>, <input>, <img>, <strong> 以及 <em>等。
你可以通過(guò)設(shè)置元素屬性display: inline 或 display: block來(lái)改變?cè)氐囊陨咸匦浴?/p>
8. 設(shè)置頁(yè)面的最小寬度
CSS語(yǔ)法中很有用的一個(gè)屬性是 min-width 。通過(guò)這個(gè)屬性你可以設(shè)置任何元素的最小寬度。也就是說(shuō)你也可以用這個(gè)來(lái)限制頁(yè)面顯示的最小寬度。
但有個(gè)小問(wèn)題是：IE瀏覽器無(wú)法為<body>元素設(shè)置min-width，因此要讓這個(gè)屬性起作用，我們需要走點(diǎn)彎路。
首先在<body>后面插入一個(gè)<div>：
|
以下為引用的內(nèi)容： <body> |
然后在CSS定義里面定義最小寬度為600px：
|
以下為引用的內(nèi)容： #container |
第一個(gè)屬性是最小寬度定義的標(biāo)準(zhǔn)寫(xiě)法；第二個(gè)屬性則是只有IE能夠理解的javascript表達(dá)式。
你也可以同時(shí)設(shè)定頁(yè)面的最大最小寬度：
|
以下為引用的內(nèi)容： #container |
9. Text-transform 屬性
這個(gè)屬性可能也是CSS當(dāng)中用的人不多但卻很有用處的屬性之一。其常見(jiàn)的可用值包括：text-transform: uppercase, text-transform: lowercase 以及 text-transform: capitalize。第一個(gè)將把所有的字母轉(zhuǎn)化成大寫(xiě)；第二個(gè)將把所有字母轉(zhuǎn)成小寫(xiě)；第三個(gè)則把每個(gè)單詞的首字母轉(zhuǎn)成大寫(xiě)。不過(guò)對(duì)于非英文網(wǎng)站來(lái)說(shuō)，這個(gè)功能確實(shí)就沒(méi)什么用了。
10. IE中消失的文字和圖片
IE有個(gè)很莫名其妙的Bug：有時(shí)候文字或者背景圖片死活顯示不出來(lái)。如果你全選整個(gè)頁(yè)面，會(huì)發(fā)現(xiàn)那些內(nèi)容實(shí)際上還在那里，或者重新刷新一下頁(yè)面顯示就正常了。
通常來(lái)說(shuō)這個(gè)問(wèn)題都發(fā)生在那些跟在浮動(dòng)元素后面顯示的文字或背景圖片身上。要解決這個(gè)問(wèn)題，可以試試給你的那些消失的元素加上position: relative 屬性。如果還不行，再試試設(shè)置一下width屬性。一般來(lái)說(shuō)這樣做之后問(wèn)題就解決了。
11. 顏色的縮寫(xiě)
我們可以將#ff0033縮寫(xiě)成#f03
17. 關(guān)閉輸入法狀態(tài)
使用戶只能輸入英文狀態(tài)下的字符，類似輸入密碼
input {ime-mode: disabled ; }
如對(duì)本文有疑問(wèn)，請(qǐng)?zhí)峤坏浇涣髡搲瑥V大熱心網(wǎng)友會(huì)為你解答?。?點(diǎn)擊進(jìn)入論壇
