DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> CSS入門知識 >> CSS詳解 >> 20個CSS/CSS3常用樣式匯總
20個CSS/CSS3常用樣式匯總
編輯:CSS詳解     
這裡我總結了一下平時自己在項目中經常用到的20個CSS常用的樣式,都是些個人的經驗,這裡分享給大家,希望對大家有所幫助

1.強制文本單行顯示:white-space:nowrap;

2.設置溢出文本顯示為省略標記:text-overflow:ellipsis;
(注:text-overflow:clip | ellipsis | ellipsis-Word;(CSS3新增加的)
其中clip表示直接裁切溢出的文本;
值ellipsis表示文本溢出時,顯示省略標記(...),省略標記代替最後一個字符;
值ellipsis-Word表示文本溢出時,也是顯示省略標記(...),不同的是,省略標記代替的是最後一個詞)

3.例如一段代碼:<a href="Javascript:void(0)"><img src="images/suba.gif"></a>
當點擊a標簽裡面的圖片的時候,有虛線框,IE中圖片還有邊框,如何解決?
解決辦法:
a{outline:none;}//主要是針對火狐等浏覽器,但IE不行
img{border:0;}
a:active{noOutline:expression(this.onFocus=this.blur());}//解決IE6,IE7中的虛線框。

對於a標簽來說,一般簡單的解決辦法是:
在a標簽裡加入JS控制,當a標簽被聚焦時,強制取消焦點,這時候a標簽自然不會有虛線框。

<a href="#" onfocus="this.blur();">測試</a>
但是當連接太多的時候,一個一個的加這段代碼不實用

4.Html中兩張圖橫向回車導致間隙,怎麼才能去除成為無間隙?

例如:div 寬300px ; img 寬100px; border:0px;


復制代碼代碼如下:
<div>
<img /><img /><img />
</div>
//上面情況剛好顯示三張圖</p>< p><div>
<img />
<img />
<img />
</div>


這種情況就無法在橫向顯示三張圖,因為回車導致兩圖間有間隙。
解決辦法就是讓圖片浮動。

5.CSS ie6、IE7中overflow:hidden無效解決辦法

產生原因:
當父元素的直接子元素或者下級子元素的樣式擁有position:relative 屬性時,父元素的overflow:hidden 屬性就會失效。

解決辦法:
我們在IE 6、7 內發現子元素會超出父元素設定的高度,即使父元素設置了overflow:hidden。
解決這個bug很簡單,在父元素中使用 *position:relative; 即可解決該bug

6.表格語法

復制代碼代碼如下:
<table aling=left>...</table>表格位置,置左
<table aling=center>...</table>表格位置,置中
<table background=圖片路徑>...</table>背景圖片的URL=就是路徑網址
<table border=邊框大小>...</table>設定表格邊框大小(使用數字)
<table bgcolor=顏色碼>...</table>設定表格的背景顏色
<table borderclor=顏色碼>...</table>設定表格邊框的顏色
<table borderclordark=顏色碼>...</table>設定表格暗邊框的顏色
<table borderclorlight=顏色碼>...</table>設定表格亮邊框的顏色
<table cellpadding=參數>...</table>指定內容與格線之間的間距(使用數字)
<table cellspacing=參數>...</table>指定格線與格線之間的距離(使用數字)
<table cols=參數>...</table>指定表格的欄數
<table frame=參數>...</table>設定表格外框線的顯示方式
<table width=寬度>...</table>指定表格的寬度大小(使用數字)
<table height=高度>...</table>指定表格的高度大小(使用數字)
<td colspan=參數>...</td>指定儲存格合並欄的欄數(使用數字)
<td rowspan=參數>...</td>指定儲存格合並列的列數(使用數字)

7.CSS text-transform

text-transform 屬性控制文本的大小寫。
可能的值
值 描述
none 默認。定義帶有小寫字母和大寫字母的標准的文本。
capitalize 文本中的每個單詞以大寫字母開頭。
uppercase 定義僅有大寫字母。
lowercase 定義無大寫字母,僅有小寫字母。
inherit 規定應該從父元素繼承 text-transform 屬性的值。

8. letter-spacing

letter-spacing 屬性增加或減少字符間的空白(字符間距)。
例如: letter-spacing: 2px;

9.textarea去掉右側滾動條,去掉右下角拖拽

代碼: <TEXTAREA style= "overflow:hidden; resize:none; "> </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>div
{
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);

第一個參數:漸變起始位置的顏色

第二個參數:漸變終止位置的顏色

第三個參數:漸變的類型

0 代表豎向漸變 1 代表橫向漸變
19 IE8不識別rgba寫法

20 CSS3的RGB顏色和HSL顏色
其中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;}

XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved