css3新增屬性API

寫在前面：因爲CSS5標準還未徹底訂下來，因此各類內核的瀏覽器都有本身的標準，爲了避免使屬性混淆，因此各家在各自標準前加了一個前綴。

• -moz-  主要是firefox火狐
• -webikt-主要是chrome谷歌和Safari
• -o-主要是用於蘋果機上的瀏覽器如Opera

下面主要從顏色、文本、選擇器等方面來總結一下CSS3新增的屬性

顏色

css1和css2只能經過如下三種方式來表示顏色

• 顏色名稱 

　　　　eg:color:red

• HEX方式

　　　　（語法：#RRGGBB或#RGB   各點的取值範圍爲00-FF）

• RGB方式

　　　　（語法：RGB(R,G,B)  各點的取值範圍爲0~255或者0%~200%）

css3針對上述模式不能表示透明，增長了以下表示方法

RGBA模式

語法：RGBA(R,G,B,A)     R紅色 G綠色 B藍色 A透明

各點取值跟RGB相似   A的取值爲0~1之間

eg:rgba(255,0,0,0.5)表示半透明紅色

HSL模式（色輪模式）

語法：HSL(H,S,L)    H色調  S飽合度  L亮度

H取值爲0~360之間  其中0或者360表示紅色  120表示綠色 240表示藍色

S和L取值都是0%到100%之間

HSLA模式

語法及各點取值跟HSL模式一下，惟一不一樣在於後面的A表示透明度

eg:hsl(360,50%,50%,0.5) 紅色

 

其次在css3中能夠使用color:transparent和使用濾鏡filter:alpha(opacity=50)    （不過濾鏡僅僅限於IE）

文本

css1和css2當中經常使用的文本屬性有

css3當中經常使用的文本屬性有

下面分別來介紹一個css3文本屬性

text-overflow屬性

做用：設定內容溢出狀態下的文本處理方式。

取值：

clip： 默認值

  當對象內文本溢出時不顯示省略標記（...），而是將  溢出的部分裁切掉。

 ellipsis：

   當對象內文本溢出時顯示省略標記（...）。 

注意:該屬性須要和over-flow:hidden屬性(超出處理)還有white-space:nowrap(禁止換行)配合使用，不然沒法看到效果

text-align屬性

做用:設定文本對齊方式

取值：

　　left ：默認值 內容左對齊。

　　center：內容居中對齊。

　　right： 內容右對齊。

　　justify： 內容兩端對齊。寫本文檔時僅Firefox能看到正確效果

　　start： 內容對齊開始邊界。（CSS3）

　　end： 內容對齊結束邊界。（CSS3）

text-transform屬性

做用：設定文本的大小寫等形式的轉換

取值：

　　none：  默認值 無轉換

　　capitalize：   將每一個單詞的第一個字母轉換成大寫

　　uppercase：  轉換成大寫

　　lowercase：  轉換成小寫

 　  full-width：  將左右字符設爲全角形式（CSS3）不支持

 　  full-size-kana：將全部小假名字符轉換爲普通假名（CSS3）不支持         例如：土耳其語。

text-decoration屬性

做用：設定文本修飾線。

取值：

[ text-decoration-color]：不支持

  指定文本裝飾的顏色。

[ text-decoration-line ]：不支持

   指定文本修飾線條的種類。至關於CSS1時的text-decoration屬性

[ text-decoration-style ]：不支持

  指定文本裝飾的樣式。

 blink： 指定文字的裝飾是閃爍。  僅opera和firefox

例如:text-decoration : overline   CSS1實例

text-decoration : #F00 double overline   CSS3實例

text-decoration-line屬性

做用：設定文本修飾線的位置。

取值：

none：默認值

  指定文字無裝飾

underline：

  指定文字的裝飾是下劃線

overline：

  指定文字的裝飾是上劃線

line-through：

  指定文字的裝飾是貫穿線

text-decoration-color屬性

做用：設定文本修飾線的顏色

取值：指定顏色。

text-decoration-style屬性

做用：設定文本修飾線的樣式。

取值：

• solid：默認值   實線
• double：雙線
• dotted：點狀線條
• dashed：  虛線
• wavy：  波浪線

text-shadow屬性

做用:設定文本的陰影效果

取值：

none：默認值  無陰影  

• <length>第1個長度值用來設置對象的陰影水平偏移值。能夠爲負值
• <length>第2個長度值用來設置對象的陰影垂直偏移值。能夠爲負值
• <length> 若是提供了第3個長度值則用來設置對象的陰影模糊值。不容許負值 0:不模糊，10px：模糊程度10像素
•  <color> 設置對象的陰影的顏色。

 

text-fill-color屬性

做用:文本填充顏色，指定文字填充部分的顏色

取值: 顏色

備註:使用該屬性須要使用瀏覽器似有前綴

text-stroke屬性

做用:文本邊框顏色，指定文字描邊部分的顏色

取值:

• [ text-stroke-width ]： 

　　　　設置或檢索對象中的文字的描邊厚度

• [ text-stroke-color ]：   

　　　　設置或檢索對象中的文字的描邊顏色

備註:使用該屬性須要使用瀏覽器似有前綴

text-stroke-width屬性

做用:指定文字描邊部分的寬度，text-stroke的派生屬性

取值:長度

備註:使用該屬性須要使用瀏覽器似有前綴

text-stroke-color屬性

做用:指定文字描邊部分的顏色，text-stroke的派生屬性

取值:顏色

備註:使用該屬性須要使用瀏覽器似有前綴

tab-size屬性

做用:設定一個tab縮進鍵，在頁面中的顯示長度。

取值:　默認值：８  （長度或者整數值）

解釋一下：整數值 : z-index:1  此處的1就是整數值，不須要單位，相似倍數。

　　　　　長度: margin:10px 此處的10px是長度值。

注意:該屬性只在<pre>標籤以內(預格式化狀態)顯示纔會有效。由於瀏覽器會自動忽略空白字符。

     opera和火狐瀏覽器須要使用瀏覽器私有前綴。

word-wrap屬性

做用:溢出文本(特指類英文文字)的處理方式。

取值:

• normal： 默認值 

　　　　容許內容頂開或溢出指定的容器邊界。

• break-word： 內容將在邊界內換行。

　　　　若是須要，單詞內部容許斷行。

選擇器

元素選擇器

關係選擇器

僞類選擇器

屬性選擇器

僞對象選擇器

 css1和css2

css1&css2元素選擇器

css1&css2關係選擇器

css1&css2僞類選擇器

css1&css2屬性選擇器

css1&css2僞對象選擇器

css3關係選擇器

css3僞類選擇器

css3屬性選擇器

css3僞對象選擇器