這裡我總結了一下平常自己在專案中常用到的20個CSS常用的樣式，都是些個人的經驗，這裡分享給大家，希望對大家有所幫助
#1.強製文字單行顯示：white-space:nowrap;
2.設定溢位文字顯示為省略標記：text-overflow:ellipsis;
(註：text-overflow:clip | ellipsis | ellipsis-word ;（css3新增加的）
其中clip表示直接裁切溢出的文字；
值ellipsis表示文字溢出時，顯示省略標記(...)，省略標記取代最後一個字元；
值ellipsis-word表示文字溢出時，也是顯示省略標記(...),不同的是，省略標記代替的是最後一個字)
3.例如一段程式碼：
當點擊a標籤裡面的圖片的時候，有虛線框，IE中圖片還有邊框，如何解決？
解決方法：
a{outline:none;}//主要是針對火狐等瀏覽器，但IE不行
img{border:0;}
a:active{noOutline :expression(this.onFocus=this.blur());}//解決IE6，IE7中的虛線框。
對a標籤來說，一般簡單的解決方法是：
在a標籤裡加入js控制，當a標籤被聚焦時，強制取消焦點，這時候a標籤自然不會有虛線框。
測試
但是當連接太多的時候，一個一個的加這段程式碼不實用
4.html中兩張圖橫向回車導致間隙,怎麼才能去除成為無間隙？
例如：p 寬300px ; img 寬100px; border:0px;
程式碼如下:
< img />
浮動
。
5.css ie6、ie7中overflow:hidden無效解決方案
當父元素的直接子元素或是下層子元素的樣式擁有
position:relative
屬性時，父元素的overflow:hidden 屬性就會失效。 解決方法：我們在IE 6、7 內發現子元素會超出父元素設定的高度，即使父元素設定了overflow:hidden。
#6.
表格
7.CSS text-transform
text-transform 屬性控製文字的大小寫。
可能的值
值 描述
none 預設。定義帶有小寫字母和大寫字母的標準的文字。
capitalize 文字中的每個單字以大寫字母開頭。
uppercase 定義僅有大寫字母。
lowercase 定義無大寫字母，只有小寫字母。
inherit 規定應該從父元素繼承 text-transform 屬性的值。
letter-spacing 屬性增加或減少字元間的空白（字元間距）。
例如： letter-spacing: 2px;
9.textarea去掉右側捲軸，去掉右下角拖曳
代碼：
10.css中透明度相容程式碼：filter: alpha(opacity=80);opacity:0.8;
11.根據input的type來控制css樣式
a. 用css中的type選擇器
input[type="text"] { background-color:#FFC; }
b.用css的expression判斷表達式
input{ background-color:expression(this.type=="text"?'#FFC':''); }
c.用javascript腳本實作(覺得沒必要，省略...)
12：text-stroke
[ text-stroke-width ]：設定或檢索物件中的文字的描邊厚度[ text-stroke-color ]：設定或擷取物件中的文字的描邊顏色
13：text-stroke
text-stroke(文字描邊)和text -fill-color(文字填滿色)注意點：
目前這兩個屬性只有webkit核心的Safari和Chrome支持，例如： -webkit-text-stroke: 3.3px #2A75BF;
text-fill-color：顏色值，和color屬性差不多都是文字的樣式；
同時使用text-fill-color和color屬性，text-fill-color會覆蓋color屬性的顏色值;
text-fill-color可以使用透明值，即：text-fill-color：transparent
#14：text-shadow
text-shadow:0px 0px 0px #333333 ;
屬性值依序：水平方向位移（支援負值）、垂直方向位移（支援負值）、模糊半徑、陰影顏色
text-shadow對同一個text，可設定多個陰影，與box -shadow類似，使用逗號","分割，前一個設定效果在後一個設定效果之上。
15.設定字體
程式碼如下:
<style> @font-face</p>
<p>{font-family: myFirstFont;</p>
<p>src: url('Sansation_Light.ttf'),</p>
<p> url('Sansation_Light.eot'); /* IE9+ */}</p>
<p>p{font-family:myFirstFont;}</p>
<p></style>16. css強制換行
程式碼如下:
{</p>
<p>
word-break:break-all; /支持IE，chrome，FF不支持/
word-wrap:break-word;/支持IE，chrome，FF/
}17. CSS :first-child 選擇器,:last-child選擇器,:nth-child(IE7,8無效，不識別)
:nth-child(2)選取第幾個標籤， 「2可以是你想要的數字」
:nth-child(2n)選取偶數標籤，2n也可以是even
:nth-child(2n-1)選取奇數標籤，2n-1可以是odd
:nth-child(3n+1)自訂選取標籤，3n+1表示「隔二取一」
18. css3實作背景顏色漸層
程式碼如下:
background:-webkit-linear-gradient(top,#FFF,#cb1919);
background:-o-linear-gradient(top,#FFF,#cb1919) ;
background:-ms-linear-gradient(top,#FFF,#cb1919);
background:-moz-linear-gradient(top,#FFF,#cb1919);
background:linear- gradient(top,#FFF,#cb1919);
第一個參數：設定漸層的起始位置
第二個參數：設定起始位置的顏色
# 第三個參數：設定終止位置的顏色
IE 瀏覽器
IE瀏覽器實現漸進只能使用IE自己的濾鏡去實現
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#00ffff,endColorstr=＃9fffff,grandientType=1);
第一個參數：漸變起始位置的顏色
第二一個參數：漸進式終止位置的顏色
第三個參數：漸進式的類型
辨識rgba寫法
其中RGB顏色的原理是透過定義不同的紅綠藍色值來組成一個顏色。 color:rgb(254,2,8);
其中HSL是透過色相、飽和度、亮度模式來申明顏色的。 color:hsl(359,99%,40%);
background-color:hsla(0,0%,100%,0.8); background-color:rgba(255,255,255,0.8);
不使用opacity的原因是：opacity使里面的元素也透明了，而上面的不会。
20.初始化em，u的斜体
em,u{
font-style: normal;}【相关推荐】
1. CSS3免费视频教程
以上是整合20個CSS/CSS3常用屬性的詳細內容。更多資訊請關注PHP中文網其他相關文章！
