常用的css樣式

1). 電(diàn)話(huà)數字字體(tǐ) font:bold 24px/36px Georgia,"微軟雅黑",Arial,Helvetica,sans-serif; font-family:impact;

2).

3).

4).

5).

6).

1. Text-transform用于将所有字母變成小(xiǎo)寫字母、大(dà)寫字母或首字母大(dà)寫：

p {text-transform: uppercase}        //所有字母轉換爲大(dà)寫

p {text-transform: lowercase}        //所有字母轉換爲小(xiǎo)寫

p {text-transform: capitalize}          //首字母大(dà)寫

2. Font Variant用于将字體(tǐ)變成小(xiǎo)型的大(dà)寫字母（即與小(xiǎo)寫字母等高的大(dà)寫字母）。

p {font-variant: small-caps}

3. 将一(yī)個容器設爲透明，可以使用下(xià)面的代碼：

.element { filter:alpha(opacity=50); -moz-opacity:0.5;  -khtml-opacity: 0.5; opacity: 0.5; }

在這四行CSS語句中(zhōng)，第一(yī)行是IE專用的，第二行用于Firefox，第三行用于webkit核心的浏覽器，第四行用于Opera。

4. 如何使用CSS生(shēng)成一(yī)個三角形？

先編寫一(yī)個空元素

将它四個邊框中(zhōng)的三個邊框設爲透明，剩下(xià)一(yī)個設爲可見，就可以生(shēng)成三角形效果：

.triangle{border-color: transparent transparent green transparent;border-style: solid;border-width: 0px 10px 10px 10px; height: 0px;width: 0px; }

5. css強制換行與禁止換行

1)       word-break: break-all; 隻對英文起作用，以字母作爲換行依據。

2)       word-wrap: break-word; 隻對英文起作用，以單詞作爲換行依據。

3)       white-space: pre-wrap; 隻對中(zhōng)文起作用，強制換行。

word-break:break-all 和 word-wrap:break-word 都是能使其容器如DIV的内容自動換行，它們的區别在于：

word-break:break-all

假設div寬度爲450px，它的内容就會到450px自動換行，如果該行末端有個很長的英文單詞，它會把單詞截斷，一(yī)部分(fēn)保持在行尾，另一(yī)部分(fēn)換到下(xià)一(yī)行。

word-wrap:break-word

例子與上面一(yī)樣，但區别就是它會把整個單詞看成一(yī)個整體(tǐ)，如果該行末端寬度不夠顯示整個單詞，它會自動把整個單詞放(fàng)到下(xià)一(yī)行，而不會把單詞截斷掉。

禁止換行: white-space:nowrap; overflow:hidden; text-overflow:ellipsis;

white-space:nowrap; 是禁止換行。

overflow:hidden; 是讓多出的内容隐藏起來，否則多出的内容會撐破容器。

text-overflow:ellipsis; 讓多出的内容以省略号...來表達。但是這個屬性主要用于IE等浏覽器，Opera浏覽器用-o-text-overflow:ellipsis; 而Firefox浏覽器沒有這個功能，多出的内容隻能隐藏起來。獲得焦點的表單元素 input:focus { border: 2px solid green; }

6. CSS陰影

外(wài)陰影：.shadow{-moz-box-shadow: 5px 5px 5px #ccc; -webkit-box-shadow: 5px 5px 5px #ccc; box-shadow: 5px 5px 5px #ccc;}

内陰影：.shadow{-moz-box-shadow:inset 0 0 10px #000000; -webkit-box-shadow:inset 0 0 10px #000000; box-shadow:inset 0 0 10px #000000;}

7. 使用text-indent來隐藏文本

h1{text-indent:-9999px;margin:0 auto;width:400px;height:100px;background:transparent url("1.png") no-repeat scroll;}

8. css段落縮進

text-indent:2em（text-indent隻對p或div标簽有效，對br标簽不生(shēng)效，原因是br标簽是換行标簽不是分(fēn)段标簽。）

9. 段落首字下(xià)沉

p:first-letter{display:block; margin:5px 0 0 5px; float:left; color:#FF3366; font-size:60px;font-family:Georgia;}

10. 圓角

.round{-moz-border-radius: 10px; -webkit-border-radius: 10px; -khtml-border-radius: 10px; /* for old Konqueror browsers */ border-radius: 10px; /* future proofing */}

11. @font-face

@font-face也是CSS3的屬性之一(yī)，他能在所有浏覽器下(xià)運行。最大(dà)的作用就是讓用戶沒有字體(tǐ)的浏覽下(xià)也能支持網頁字體(tǐ)，具體(tǐ)使用：

@font-face {font-family: 'Graublau Web'; src: url('GraublauWeb.eot'); src: local('☺'), url('GraublauWeb.woff') format('woff'), url('GraublauWeb.ttf') format('truetype');}

h2{font-family:'Graublau Web';}

12. 垂直居中(zhōng)

水平居中(zhōng)處理起來相當的簡單的，但是垂直居中(zhōng)處理起來還是相當的煩，特别是要兼容IE的浏覽器情況下(xià)：

div{height: 100px; line-height: 100px; white-space: nowrap;}

img{vertical-align: middle;}

13. X>Y

div#container > ul {border: 1px solid black;}

X Y和X > Y的差别就是後面這個指揮選擇它的直接子元素。看下(xià)面的例子：

#container > ul隻會選中(zhōng)id爲’container’的div下(xià)的直接ul元素。它不會定位到li下(xià)的ul元素。

14. X[title]

a[title] {color: green;}

這個叫屬性選擇器，上面的這個例子中(zhōng)，隻會選擇有title屬性的元素。那些沒有此屬性的錨點标簽将不會被這個代碼修飾。那再想想如果你想更加具體(tǐ)的去(qù)篩選？

15. X:not(selector)

div:not(#container){color: blue;}

取反僞類是相當有用的，假設我(wǒ)們要把除id爲container之外(wài)的所有div标簽都選中(zhōng)。那上面那麽代碼就可以做到。

或者說我(wǒ)想選中(zhōng)所有出段落标簽之外(wài)的所有标簽。

*:not(p){color: green;}

16. X:first-child

ul li:first-child{border-top: none;}

這個結構性的僞類可以選擇到第一(yī)個子标簽，你會經常使用它來取出第一(yī)個和最後一(yī)個的邊框。

17. X:last-child

ul > li:last-child {color: green;}

跟first-child相反，last-child取的是父标簽的最後一(yī)個标簽。

18. X:last-child

transform:skew(165deg, 0deg);
-webkit-transform: skew(165deg, 0deg);    /* for Chrome || Safari */
-moz-transform: skew(165deg, 0deg);       /* for Firefox */
-ms-transform: skew(165deg, 0deg);        /* for IE */
-o-transform: skew(165deg, 0deg);         /* for Opera */

19. li:last-of-type 取最後一(yī)個li元素

例如：.proList li:last-of-type {display: none !important;}

20. css rgba

例如：background:rgba(0,0,0,0.6)

：Hue(色調)。 0(或360)表示紅色，120表示綠色，240表示藍(lán)色，當然可取其他數值來确定其它顔色；
：Saturation(飽和度)。 取值爲0%到100%之間的值；
：Lightness(亮度)。 取值爲0%到100%之間的值；
：alpha(透明度)。 取值在0到1之間；

21. 表格樣式

産品參數	技術參數
卷筒直徑：	280mm