Webcredible上列出了不少關於CSS使用文法上的小技巧，還是比較實用的。以前很多東西只知道要這麼寫，可很少去考慮為什麼。看來用CSS能做的事情遠遠比自己所瞭解的要多。
1. CSS字型定義簡寫規則
一般的寫法會是這樣：
font-weight: bold;
font-style: italic;
font-varient: small-caps;
font-size: 1em;
line-height: 1.5em;
font-family: verdana,sans-serif
而實際上你可以用更簡潔的寫法：
font: bold italic small-caps 1em/1.5em verdana,sans-serif
是不是更省事？不過使用這種簡寫需要注意幾點：要使簡寫定義有效必須至少提供 font-size 和 font-family 這兩個屬性；同時font-weight, font-style 以及 font-varient 這幾個屬性如果不做設定的話將預設為normal。
2. 同時使用兩個Class定義
一般我們只會給內容塊指定一個Class，但這並不代表我們只能指定一個。實際上只要你願意，可以同時把任意多個Class賦給某塊內容。比如：
<p class="text side">...</p>
多個Class之間用空格分隔即可。當多個Class之間的屬性發生重疊的時候，將根據各個Class在CSS定義檔案中被定義的位置，後定義的Class屬性自動覆蓋之前定義的Class屬性（而不是根據你在class="text side"這裡排列的順序來進行覆蓋）
3. CSS border的預設值
通常我們定義border屬性都會提供color,width,style這些屬性。比如 border: 3px solid #000 。不過實際上必須要提供的屬性只有style。如果你唯寫 border: solid 的話，其他的屬性自動使用預設值。border的預設寬度是medium(大約3px-4px)，預設的顏色是位於border裡面的內容文字的顏色。如果這些預設值可以滿足你的要求，你完全可以省略這兩項屬性。
4. 專門用於列印的CSS文檔
很多web頁面都會提供一個列印連結，方便使用者使用另一種適合列印介面的CSS。但實際上你完全可以為你的頁面指定兩個CSS文檔link，這樣瀏覽器會自動調用合適的CSS來用於顯示或列印。比如：
<link type="text/css" rel="stylesheet" href="stylesheet.css" media="screen" />
<link type="text/css" rel="stylesheet" href="printstyle.css" media="print" />
通過指定link的media屬性，瀏覽器就能根據需要來調用特定的CSS檔案來處理頁面了。關於列印更多的建議，請參見 Print Different,
5. CSS中的內容垂直對齊
用傳統的table來實現垂直對齊很容易，只要用 vertical-align: middle 就可以讓table的內容垂直置中。但這個屬性在CSS裡面卻行不通。
解決方案是把內容的行高設定成與內容塊一樣高。比如你的div高是32px，那就在你的CSS定義裡面添加屬性 line-height: 32px; 這樣文字看上去就垂直置中於層裡面了。不過這個方法只適用於單行文字，對於多行文字，似乎沒有什麼好方法。
6. 讓背景色能夠垂直拉齊到底部
CSS與傳統的table來說另一個讓人不爽的地方是它的垂直層的對齊。如果你的頁面分為兩列，其中一列比較長而另一列比較短，同時兩列的背景色和頁面總的背景色是不同的話，顯示出來的效果就比較醜陋，不像table那樣只要把td的高度設成100%就能夠把每一列的高度拉到一樣長。
要解決這個問題似乎只能用一個取巧的辦法，根據每列的寬度和背景色設定背景圖片，讓使用者看上去似乎拉平了：
body
{
background: url(blue-image.gif) 0 0 repeat-y
}
7. block / inline 屬性
任何一個HTML元素都是block或者inline的。
block元素的特性包括：
總是另起一行開始顯示
height, line-height, top/bottom margin屬性可以被設定
width預設值是100%,除非你指定了另外的width值
這一類的HTML元素包括<div>, <p>, <h1>, <form>, <ul> 以及 <li>等。
inline元素的特性包括：
直接跟在當前行的後面顯示
height, line-height, top/bottom margin屬性不能改變
width值就等於包含其中的文字/圖片的寬度，並且這個值不能被改變
這一類的HTML元素包括<span>, <a>, <label>, <input>, <img>, <strong> 以及 <em>等。
你可以通過設定元素屬性display: inline 或 display: block來改變元素的以上特性。
8. 設定頁面的最小寬度
CSS文法中很有用的一個屬性是 min-width 。通過這個屬性你可以設定任何元素的最小寬度。也就是說你也可以用這個來限制頁面顯示的最小寬度。
但有個小問題是：IE瀏覽器無法為<body>元素設定min-width，因此要讓這個屬性起作用，我們需要走點彎路。
首先在<body>後面插入一個<div>：
<body>
<div class="container">
然後在CSS定義裡面定義最小寬度為600px：
#container
{
min-width: 600px;
width:expression(document.body.clientWidth < 600? "600px": "auto" );
}
第一個屬性是最小寬度定義的標準寫法；第二個屬性則是只有IE能夠理解的javascript運算式。
你也可以同時設定頁面的最大最小寬度：
#container
{
min-width: 600px;
max-width: 1200px;
width:expression(document.body.clientWidth < 600? "600px" : document.body.clientWidth > 1200? "1200px" : "auto");
}
9. Text-transform 屬性
這個屬性可能也是CSS當中用的人不多但卻很有用處的屬性之一。其常見的可用值包括：text-transform: uppercase, text-transform: lowercase 以及 text-transform: capitalize。第一個將把所有的字母轉化成大寫；第二個將把所有字母轉成小寫；第三個則把每個單詞的首字母轉成大寫。不過對於非英文網站來說，這個功能確實就沒什麼用了。
10. IE中消失的文字和圖片
IE有個很莫名其妙的Bug：有時候文字或者背景圖片死活顯示不出來。如果你全選整個頁面，會發現那些內容實際上還在那裡，或者重新重新整理一下頁面顯示就正常了。
通常來說這個問題都發生在那些跟在浮動元素後面顯示的文字或背景圖片身上。要解決這個問題，可以試試給你的那些消失的元素加上position: relative 屬性。如果還不行，再試試設定一下width屬性。一般來說這樣做之後問題就解決了。
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
