常用css樣式表

常用的css樣式

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

2).

3).

4).

5).

6).

1. Text-transform用于將所有字母變成小寫字母、大寫字母或首字母大寫：

p {text-transform: uppercase}        //所有字母轉換為大寫

p {text-transform: lowercase}        //所有字母轉換為小寫

p {text-transform: capitalize}          //首字母大寫

2. Font Variant用于將字體變成小型的大寫字母（即與小寫字母等高的大寫字母）。

p {font-variant: small-caps}

3. 將一個容器設為透明，可以使用下面的代碼：

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

在這四行CSS語句中，第一行是IE專用的，第二行用于Firefox，第三行用于webkit核心的瀏覽器，第四行用于Opera。

4. 如何使用CSS生成一個三角形？

先編寫一個空元素

將它四個邊框中的三個邊框設為透明，剩下一個設為可見，就可以生成三角形效果：

.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; 只對中文起作用，強制換行。

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

word-break:break-all

假設div寬度為450px，它的內容就會到450px自動換行，如果該行末端有個很長的英文單詞，它會把單詞截斷，一部分保持在行尾，另一部分換到下一行。

word-wrap:break-word

例子與上面一樣，但區別就是它會把整個單詞看成一個整體，如果該行末端寬度不夠顯示整個單詞，它會自動把整個單詞放到下一行，而不會把單詞截斷掉。

禁止換行: 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陰影

外陰影：.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標簽不生效，原因是br標簽是換行標簽不是分段標簽。）

9. 段落首字下沉

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的屬性之一，他能在所有瀏覽器下運行。最大的作用就是讓用戶沒有字體的瀏覽下也能支持網頁字體，具體使用：

@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. 垂直居中

水平居中處理起來相當的簡單的，但是垂直居中處理起來還是相當的煩，特別是要兼容IE的瀏覽器情況下：

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的差別就是后面這個指揮選擇它的直接子元素�？聪旅娴睦�子：

#container > ul只會選中id為’container’的div下的直接ul元素。它不會定位到li下的ul元素。

14. X[title]

a[title] {color: green;}

這個叫屬性選擇器，上面的這個例子中，只會選擇有title屬性的元素。那些沒有此屬性的錨點標簽將不會被這個代碼修飾。那再想想如果你想更加具體的去篩選？

15. X:not(selector)

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

取反偽類是相當有用的，假設我們要把除id為container之外的所有div標簽都選中。那上面那么代碼就可以做到。

或者說我想選中所有出段落標簽之外的所有標簽。

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

16. X:first-child

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

這個結構性的偽類可以選擇到第一個子標簽，你會經常使用它來取出第一個和最后一個的邊框。

17. X:last-child

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

跟first-child相反，last-child取的是父標簽的最后一個標簽。

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 取最后一個li元素

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

20. css rgba

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

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

21. 表格樣式

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