當在XHTML中使用CSS，CSS裡定義的元素名稱是區分大小寫。為了避免這種錯誤，建議所有的定義名稱都採用小寫。class和id的值在HTML和XHTML中也是區分大小寫。
1.樣式屬性主要分為以下幾類：字型，背景，文本，位置，布局，邊緣，列表，其它。
2.字型
族類(generic family)：一個族類是一組具有統一外觀的字型族。sans-serif代表一組沒有“腳”的字型，筆畫兩端有襯線；serif族：筆畫兩端有襯線；monospace族：所有字元的寬度一樣。
font-family：字型名稱，多個字型名稱之間使逗號分隔，優先使用前面的字型。建議在列表的最後給出一個族類（generic family），這樣，當沒有一個指定字型可用時，頁面至少可以採用一個相同族類的字型來顯示。如：h1 {font-family: arial, verdana, sans-serif;}
font-size：字型大小。注意奇數字尺寸的字在橫向時可能有變形。
絕對大小值有：xx-small，x-small，small，medium，large，x-large，xx-large。大部分瀏覽器的預設文字大小為16px。small為13px
相對大小值 ：larger，smaller。
絕對單位：mm，cm，in，pt，pc。
相對單位：em 相對於字型的大小，ex 相對於小寫字母x的大小，% 相對於父元素的字型值，px 相對於裝置的像素點。一般認為1em=2ex。
font-style：字型樣式，normal（正常）、italic（斜體）或oblique（傾斜）。
text-decoration：在文本中添加上劃線，中劃線，底線。underline overline line-through。可以同時設定多個值 ，用空格隔開。
超連結的預設的text-decoration的值就是underline。不設定時使用none。
font-weight：濃淡程度。其值可以是normal（正常）、bold（加粗）、bolder、lighter。有些瀏覽器甚至支援採用100到900之間的數字（以百為單位）來衡量字型的濃淡。
font-variant：normal（正常）或small-caps（小體大寫字母）。small-caps字型是一種以小尺寸顯示的大寫字母來代替小寫字母的字型
最後可以使用一個font屬性包括所有的字型設定值 ：例如 P{font:italic bold 12pt }，但不知在解析時怎麼排列順序的。
縮寫字型至少要定義font-family和font-size，字型顏色值不可能縮寫到font中。
4.文本
word-spacing：單詞間距，可繼承
letter-spacing：文本的水平漢字或字母間距，可繼承
vertical-align：垂直對齊，相對於父元素，只適用於行內元素，無繼承性。
baseline，sub，super，top，middle，bottom，text-top，text-bottom，inherit，或相對於元素行高的百分比。 預設為baseline。
float可能會影響vertical-align的表現
當元素內容只有圖片時，如果出現圖片所在行高失效的問題，檢查此時要修改文件類型為嚴格的strict，非過渡的transitional.dtd
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN""http://www.w3.org/TR/xhtml11/DTD/xhtml1-strict.dtd">
表格是比較特殊的元素，瀏覽器會對它的垂直對齊進行特殊處理。
text-align：內部水平對齊，只適用於區塊層級元素，可繼承。CSS屬性text-align與HTML 屬性align的功能相同。
該屬性的值可以是：left（靠左對齊）、right（靠右對齊）或者center（置中)，
justify（左右對齊），報刊雜誌經常採用justify。
兩邊文字對齊 style="text-align:justify; text-justify:inter-ideograph";
text-indent：首行縮排值，段落前面空兩個字的距離不要使用空格，應該使用首行縮排text-indent。
text-indent可以使得容器內首行縮排一定單位。比如中文段落一般每段前空兩個漢字。
em是相對長度單位。相對於當前對象內文本的字型尺寸。如p {text-indent: 2em;}，p {text-indent: 30px;}
有兩種情況會用到負值縮排，首行凸排和隱藏文字。
首行凸排如：p{padding-left:3.5em; text-indent:-3.5em;}
隱藏文字：在網頁內一些特殊字型效果往往用圖片來實現，比如h3使用了特殊字型，如果在其中放入img則違反了“表現與結構分離”原則，因為原本這裡是
加入文字內容的，由於表現才改用了圖片，所以這個圖片是“表現”，解決方案是保h3中使用文字，同時h3{background:(url); text-indent:-9999em;}，
使文字擠出螢幕。
white-space：對文本中空白的處理。
normal：將多個空格替換為一個空格，自動回行。
pre：不壓縮空格
nowrap：不壓縮空格，不換行，直到br。效果還會受到overflow屬性值的影響。 如：加上width:11em; overflow:hidden; 可以實現隱藏超出的文字效果；
pre-wrap：空格，定位字元，換行不會被壓縮，但會自動回行。
pre-line：空格，定位字元被壓縮，保留換行，會自動回行。
line-height：文字行高，文本行的基準間的距離，並不是元素的高度，可繼承。指定數字或px值或百分比。
預設值為normal，一般為1到1.2。例如：140%指行高是字型高度的140%，1指的是字型高度乘以1。
當內容中有圖片時，如果圖片高度大於行高，圖片會撐高行框，但不會影響行高值。
一些單行文字垂直置中：一般只需要設定行高值與高度值相等。
行內框：inline box，行內元素會產生一個行內框，預設行內框等於內容地區，行高會影響行內框的高度。
行框：line box，高度等於本行內所有元素行高最大的值。
word-wrap;
word-break;
text-decoration：為文本增添不同的裝飾效果，無繼承性。none 預設值，也有的元素不是，如a，underline 底線、line-through 貫穿線、overline 上劃線、blink 閃爍。
常用於對連結文字設定裝飾效果。
text-transform：控制文本的大小寫。每個單詞的首字母大寫（capitalize）、全部大寫（uppercase）或者全部小寫（lowercase），none不作轉換，預設為none。
text-shadow: 文本陰影由下列順序的參數構成: x-offset, y-offset, blur, color. 將 x-offset 設定為負數即將陰影移動到左側. 將 y-offset 設定為負數即將陰影移動到上方.
不要忘記你可以使用 RGBA 來控制陰影的顏色.同時還可以為 text-shadow 指定一個陰影列表 (以逗號分隔).
下列例子使用了兩個 text-shadow 定義來控制頁面輸出效果 (1px 上陰影和 1px 的下陰影). text-shadow:01px0
#fff, 0 -1px0#000;
由於多數瀏覽器不支援此屬性，在css2.1刪除了。
direction:
unicode-bidi:
6.布局：
page-break-before：
page-break-after：
7.邊界和填充
8.列表
list-style-type：square 清單項目標記類型
list-style-position：inside，outside。
list-style-image：url()
list-style：square insice url()
table的table-layout屬性
9.其它
cursor：
filter：
10.filter，css 濾鏡
一些有邊界地區的元素才能使用filter。
可實現的效果有，文字翻轉等。
例如：style="filter:alpha(opacity=80) blur(add=5,direction=135) flipv"
filter參數
alpha(opacity=?,finishopacity=?,style=?,startx=?,starty=?,finishx=?,finishy=?) 不透明度，
blendtrans(duration=?) 設定淡入淡出效果
blur(add=?,direction=?,strength=?)模糊效果
chroma(color=?) ，過濾掉某種顏色
DropShadow(color=?,offx=?,offy=?,positive=?) 陰影製作效果
FlipH,FlipV,將元素水平，垂直方向反轉。
Gray,去掉圖片色彩，黑白
Invert，反轉映像顏色
Light 設定光源效果
Xray 顯示圖片的輪廓，x光線效果
glow(color=?,,strength=?) 元素邊緣發光的效果
mask(color=?)在元素表面覆蓋一層遮罩
revealtrans(duration=?,transition=?)建立元素初始顯示的轉換效果
shadow(color=?,direction=?)一種陰影製作效果
wave(add=?,freq=?,lightstrength=?,phase=?,strength=?) 波紋效果
symbian theme
擴充sdk中,ExtendedSkinsAPI.ZIP和PersonalizationandSkinsSettingsAPI.ZIP提供了處理主題的api.
用程式改變當前主題 需要能力WriteDeviceData.
http://wiki.forum.nokia.com/index.php/%E6%89%A9%E5%B1%95%E7%9A%AE%E8%82%A4API
提供了詳細的範例程式碼.
12.float
(1)高度不自適應問題：
當一個容器內元素都被應用了float之後，那麼整個box的高度對就不以被浮動物件的高度為標準了，高度將不會隨著內部元素高度的增加而增加，所以可能造成內容元素的顯示超出了容器。
此時需要設定父區塊的高度，或用overflow來解決！方法是在父元素加上 overflow:auto; zoom:1;，其中overflow:auto;是讓高度自適應， zoom:1;是為了相容IE6，也可以用height:1%;的方式來解決。
當設定了多個元素float:left後，效果是依次向左靠。
float:left;(左浮動)使得指定元素脫離普通的文檔流而產生的特別的布局特性。並且FLOAT必需應用在區塊層級元素之上，也就是說浮動並不應用於內聯標籤。或者換句話來說當應用了FLOAT那麼這個元素將被指定為區塊層級元素。
補充：css hack
針對不同的瀏覽器寫不同的CSS code的過程，就叫CSS hack。這裡的overflow:auto; zoom:1;就是所謂的css hack，這種形式是應用我們常用的代碼來解決不相容問題，也會用到添加一些特殊符號的形式，它本身沒有意義，只是針對不同瀏覽器是否對它識別來實現的。
ie6的bug：雙倍邊距bug；3px bug；
下拉式清單（菜單）是大家最頭疼的一個元素，因其對許多樣式不生效，故而在頁面中顯示很醜陋，而且在IE6下下拉式清單總在最上層，造成許多彈出層不能把其遮擋，一些設計師想出了許多辦法來改變這種情況。IE6下對下拉式清單的背景和寬度樣式生效，其它絕大部分不生效，IE8下增加了對邊框和高度的支援，但這樣似乎離我們要求還很遠。基中IE6下被遮擋可以把浮動層用iframe，因下拉式清單不會跑到iframe上邊。有更高美化需求的可以用div類比來代替下拉式清單，但這種方法實現起來麻煩。
13.控制換行
{word-break:keep-all;white-space:nowrap;} /* 禁止換行 */
{word-break:break-all;}/* 強制換行 */
14. 不要使用全域Reset：
*{ margin:0; padding:0; }
不僅緩慢和低效，而且還會導致一些不必要的元素也重設了外邊距和內邊距。在此建議參考YUI Reset和Eric Meyer的做法。
/** 清除內外邊距 **/
body, h1, h2, h3, h4, h5, h6, hr, p,
blockquote, /* structural elements 結構元素 */
dl, dt, dd, ul, ol, li, /* list elements 列表元素 */
pre, /* text formatting elements 文字格式設定元素 */
form, fieldset, legend, button, input, textarea, /* form elements 表單元素 */
th, td, /* table elements 表格元素 */
img/* img elements 圖片元素 */{
border:medium none;
margin: 0;
padding: 0;
}
/** 設定預設字型 **/
body,button, input, select, textarea {
font: 12px/1.5 '宋體',tahoma, Srial, helvetica, sans-serif; }
h1, h2, h3, h4, h5, h6 { font-size: 100%; }
em{font-style:normal;}
/** 重設列表元素 **/
ul, ol { list-style: none; }
/** 重設超連結元素 **/
a { text-decoration: none; color:#333;}
a:hover { text-decoration: underline; color:#F40; }
/** 重設圖片元素 **/
img{ border:0px;}
/** 重設表格元素 **/
table { border-collapse: collapse; border-spacing: 0; }15.關鍵字不能放在引號中
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
