css/css3常用樣式總結

來源:互聯網
上載者:User
1.強制文本單行顯示:
white-space:nowrap;

多行文本最後省略符號:

display: -webkit-box; -webkit-line-clamp:2; overflow: hidden; -webkit-box-orient: vertical; text-overflow: ellipsis;
2.設定溢出文本顯示為省略標記:
text-overflow:ellipsis;

(註:text-overflow:clip | ellipsis | ellipsis-word;(css3新增加的)
其中clip表示直接裁切溢出的文本;
值ellipsis表示文本溢出時,顯示省略標記(...),省略標記代替最後一個字元;
值ellipsis-word表示文本溢出時,也是顯示省略標記(...),不同的是,省略標記代替的是最後一個詞)

例:想讓一段文字在固定寬度在一行顯示,最後一個字元為省略標記(...),css樣式如下

white-space:nowrap;text-overflow:ellipsis;overflow:hidden;
 
 3.例如一段代碼:<a href="javascript:void(0)"><img src="images/suba.gif"></a> 

當點擊a標籤裡面的圖片的時候,有虛線框,IE中圖片還有邊框,如何解決。
解決辦法:

a{outline:none;}//主要是針對Firefox等瀏覽器,但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>

//上面情況剛好顯示三張圖

<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 ]:設定或檢索對象中的文字的描邊顏色
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 13:text-shadow

text-shadow:0px 0px 0px #333333;

屬性值依次:水平方向位移(支援負值)、垂直方向位移(支援負值)、模糊半徑、陰影顏色
text-shadow對同一個text,可設定多個陰影,與box-shadow類似,使用逗號","分割,前一個設定效果在後一個設定效果之上。
box-shadow 參考:http://www.cnblogs.com/lhb25/archive/2013/02/20/css3-box-shadow.html 14.css3設定字型

<style> @font-face{font-family: myFirstFont;src: url('Sansation_Light.ttf'),    url('Sansation_Light.eot'); /* IE9+ */}div{font-family:myFirstFont;}</style>
15. css強制性換行
{word-break:break-all; /*支援IE,chrome,FF不支援*/word-wrap:break-word;/*支援IE,chrome,FF*/} 
 16.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表示“隔二取一”

  17. 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  代表橫向漸層   18.css3的RGB顏色和HSL顏色, IE8不識別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使裡面的元素也透明了,而上面的不會。

background-color:rgba(0,0,0,0.5),此寫法解決opacity帶來的元素也透明問題,單IE8低版本瀏覽器不支援。 19.初始化em,u的斜體

em,u{font-style: normal;}
20.取消手機頁面點擊a中圖片出現的虛線框問題
-webkit-tap-highlight-color: transparent;-webkit-touch-callout: none;-webkit-user-select: none; 
21.媒體查詢功能: 一般寫法:
@media screen and (max-width: 960px){    body{        background: #000;    }}
應該有人會發現上面這段代碼裡面有個screen,他的意思是在告知裝置在列印頁面時使用
相關文章

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.