CSS/CSS3經常使用樣式小結

 

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表示文本溢出時，也是顯示省略標記(...),不一樣的是，省略標記代替的是最後一個詞)

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>

//上面狀況恰好顯示三張圖

<div><img /><img /><img /></div>

這種狀況就沒法在橫向顯示三張圖，由於回車致使兩圖間有間隙。
解決辦法就是讓圖片浮動。

5.css ie六、ie7中overflow:hidden無效解決辦法

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

解決辦法：
咱們在IE 六、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"]{ }

b.用css的expression判斷表達式

input{ }

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:rgba(255,255,255,0.8);

不使用opacity的緣由是：opacity使裏面的元素也透明瞭，而上面的不會。

font-size: 17px; border-radius: 6px; color: rgb(255, 255, 255); font-family: 微軟雅黑, 宋體, 黑體, Arial; height: 26px; line-height: 25px; text-shadow: rgb(34, 34, 34) 2px 2px 3px; margin: 12px 0px !important; background: rgb(119, 119, 119);">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，他的意思是在告知設備在打印頁面時使用 襯線字體，在屏幕上顯示時用無襯線字體。可是目前我發現不少網站都會直接省略screen,由於你的網站可能不須要考慮用戶去打印時，你能夠直接這樣寫：

@media (max-width: 960px){
    body{
        background: #000;
    }
}

其中css2的媒體查詢：<link rel="stylesheet" type="text/css" media="screen" href="style.css">

 

咱們想知道移動設備是否是縱向放置的顯示屏，能夠這樣寫：

<link rel="stylesheet" type="text/css" media="screen and (orientation:portrait)" href="style.css">

 

咱們把第一段的代碼也用CSS2來實現，讓它同樣可讓頁面寬度小於960的執行指定的樣式文件：

<link rel="stylesheet" type="text/css" media="screen and (max-width:960px)" href="style. css">

可是上面這個方法，最大的弊端是他會增長頁面http的請求次數，增長了頁面負擔，咱們用CSS3把樣式都寫在一個文件裏面纔是最佳的方法。

 

下面的寫法是實現尺寸等於480px：

@media (max-device-height:480px) and (-webkit-min-device-pixel-ratio:2){

//本身添加的樣式

}

其中對於-webkit-min-device-pixel-ratio做以下解釋：

    -webkit-min-device-pixel-ratio爲1.0

    1.  全部非Retina的Mac

    2.  全部非Retina的iOS設備

    3.  Acer Iconia A500 

    4.  Samsung Galaxy Tab 10.1

    5.  Samsung Galaxy S 

 

     -webkit-min-device-pixel-ratio爲1.3

    1.  Google Nexus 7

 

    -webkit-min-device-pixel-ratio爲1.5

    1.  Google Nexus S 

    2.  Samsung Galaxy S II 

    3.  HTC Desire

    4.  HTC Desire HD

    5.  HTC Incredible S 

    6.  HTC Velocity

    7.  HTC Sensation 

 

    -webkit-min-device-pixel-ratio爲2.0

    1.  iPhone 4

    2.  iPhone 4S

    3.  iPhone 5

    4.  iPad (3rd generation)

    5.  iPad 4

    6.  全部Retina displays 的MAC

    7.  Google Galaxy Nexus

    8.  Google Nexus 4

    9.  Google Nexus 10

    10.  Samsung Galaxy S III

    11.  Samsung Galaxy Note II

    12.  Sony Xperia S

    13.  HTC One X 

22.CSS美化Placeholder提示信息的樣式兼容：

input::-webkit-input-placeholder{color:#AAAAAA;}
input:focus::-webkit-input-placeholder{color:#EEEEEE;}

 

手機對Placeholder提示信息都基本帶有默認的樣式，要修改其樣式須要這樣添加：

/* WebKit browsers */::-webkit-input-placeholder {color: #777;}

/* Mozilla Firefox 4 to 18 */:-moz-placeholder {color: #777;opacity: 1;}

/* Mozilla Firefox 19+ */::-moz-placeholder {color: #777;opacity: 1;}

/* Internet Explorer 10+ */:-ms-input-placeholder {color: #777;}

- 谷歌瀏覽器(Webkit): ::-webkit-input-placeholder pseudo-element;

- IE10: :-ms-input-placeholder pseudo-class;

- 火狐瀏覽器(Gecko18-): :-moz-placeholder pseudo-class;

- 火狐瀏覽器(Gecko19+): ::-moz-placeholder pseudo-element;

- Opera(Presto): 無。

23.清除IOS系統手機對input框的默認樣式：

-webkit-appearance:none; 

24.取消點擊a標籤出現的高亮：

-webkit-tap-highlight-color:rgba(0, 0, 0, 0); /* 取消連接高亮 */

25.開發移動端頁面時候，常常會設置滾動條的默認樣式：

  /* 設置滾動條的樣式 */
    - ::-webkit-scrollbar {
    - width:12px;
    - }
    - /* 滾動槽 */
    - ::-webkit-scrollbar-track {
    - -webkit-box-shadow:inset006pxrgba(0,0,0,0.3);
    - border-radius:10px;
    - }
    - /* 滾動條滑塊 */
    - ::-webkit-scrollbar-thumb {
    - border-radius:10px;
    - background:rgba(0,0,0,0.1);
    - -webkit-box-shadow:inset006pxrgba(0,0,0,0.5);
    - }
    - ::-webkit-scrollbar-thumb:window-inactive {
    - background:rgba(255,0,0,0.4);
    - }

26.爲移動端頁面中滑動滾動條的時候，添加慣性效果的方法：

首先設置：

div{height:100%;overflow-y:auto;}

可是實際在 iPhone 上測試時，發現 Safari（也包括不少 iOS App 內置瀏覽器使用的 UIWebView）居然徹底禁用掉了著名的「慣性滾動」效果。

但解決方法是有的，使人吃驚的是還很是簡單：只有一條 CSS 屬性便可解決問題：

-webkit-overflow-scrolling:touch;

有的同窗添加了這一條屬性後遇到了向下滑動後頁面變成空白的問題，實際上能夠經過一條 CSS 屬性把頁面加載到內存來解決：

-webkit-transform:translate3d(0,0,0);

注：若是設置了-webkit-overflow-scrolling: touch;那麼在IOS系統下對於改變滾動條的默認樣式將失效，即上面一條所述。

27.樣式實現三角形：

position:absolute;
left:50%;
bottom:0;
margin-left:-10px;
width:0;
height:0; 
border-width:10px;
border-style:solid dashed dashed dashed;
border-color:transparent transparent #71151c transparent;

28.移動端實現控制文本行數

display: -webkit-box;
-webkit-line-clamp: 4;
overflow: hidden;
text-overflow: ellipsis;
-webkit-box-orient: vertical;

29. css3水平垂直居中

display: box; 
display: -webkit-box; 
display: -moz-box; 
-webkit-box-pack:center; 
-moz-box-pack:center; 
-webkit-box-align:center; 
-moz-box-align:center; 

30.Css--input輸入框點擊時去掉外框outline:medium;(chrome)

outline:medium;

31.移動端字體

/* 移動端定義字體的代碼 */

body{font-family:Helvetica;}

32.禁止ios 長按時不觸發系統的菜單，禁止ios&android長按時下載圖片

.css{-webkit-touch-callout: none}

 33.禁止ios和android用戶選中文字

.css{-webkit-user-select:none}

34.打電話發短信，發郵件的怎麼實現

打電話：<a href="tel:0755-10086">打電話給:0755-10086</a>

發短信：winphone系統無效，<a href="sms:10086">發短信給: 10086</a>

發郵件：<a href="mailTo:10086@qq.com">10086@qq.com</a>

 

35.css3屬性 -webkit-filter(改變模糊度 亮度 透明度等方法)

　　-webkit-filter是css3的一個屬性，Webkit率先支持了這幾個功能，感受效果很不錯。下面我們就學習一下filter這個屬性吧。

如今規範中支持的效果有：

    - grayscale 灰度               值爲0-1之間的小數 

    - sepia 褐色　　　　　　   值爲0-1之間的小數

    - saturate 飽和度　　　　 值爲num

    - hue-rotate 色相旋轉　　值爲angle

    - invert 反色　　　　　　  值爲0-1之間的小數

    - opacity 透明度　　　　　值爲0-1之間的小數

    - brightness 亮度　　　　 值爲0-1之間的小數

    - contrast 對比度　　　　 值爲num

    - blur 模糊　　　　　　     值爲length

    - drop-shadow 陰影

用法是標準的CSS寫法，如：

使用方法：（配合動畫使用）

.jaguar-con-show img.jaguar-con-imglast{               
    -webkit-transition: all 0.3s ease-in-out;
    -moz-transition: all 0.3s ease-in-out;
    -o-transition: all 0.3s ease-in-out;
    -ms-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
    
}
.jaguar-con-show img.jaguar-con-imglast{   
    -webkit-filter: blur(3px) brightness(.6);
    -moz-filter: blur(3px) brightness(.6);
    -o-filter: blur(3px) brightness(.6);
    -ms-filter: blur(3px) brightness(.6);    
    filter: blur(3px) brightness(.5); 
    -webkit-transform:scale(1.1,1.1);
    -moz-transform:scale(1.1,1.1);
    /*border: 3px solid #000;*/
}

36.CSS pointer-events

Pointer-events本來來源於SVG，目前在不少瀏覽器中已經獲得體現。不過，要讓任何HTML元素生效還得藉助於一點點css。該屬性稱之爲pointer-events，基本上能夠將它設置爲auto，這是正常的行爲，而「none」是一個有趣的屬性。

若是你已經設置一個元素的css屬性爲pointer-events: none。它將不會捕獲任何click事件，而是讓事件穿過該元素到達下面的元素.

 

Firefox 3.6+和chrome 2.0+ 以及safari 4.0+都支持這個CSS3屬性，IE6/7/8/9都不支持，Opera在SVG中支持該屬性可是HTML中不支持。