CSS層疊樣式表常見屬性有哪些

這篇文章主要介紹了CSS層疊樣式表常見屬性有哪些，具有一定借鑒價值，感興趣的朋友可以參考下，希望大家閱讀完這篇文章之后大有收獲，下面讓小編帶著大家一起了解一下。

    常見屬性

1   顏色屬性

   color屬性定義文本的顏色

   color:green

   color:#ff6600

   color:#f60(簡寫式)

   color:rgb(255,255,255)    紅(R).綠(G).藍(B)每個的取值范圍0-255

   color:rgba(255,255,255,1)    RGBA是代表Red(紅色).Green(綠色).Blue(藍色)和Alpha的(色彩空間)透明度

2   字體屬性

2.1    font-size   字體大小

   font-size:14px

2.2   font-family   定義字體

   font-family:微軟雅黑，serif;

   可以使用","隔開，以確保當字體不存在的時候直接使用下一個

2.3   font-weight   字體加粗

   normal(默認值).bold(粗).bolder(更粗).lighter(更細)

   100.200.300-900     400=normal，而700=bold

3   背景屬性

3.1   背景顏色   background-color

3.2   背景圖片   background-p_w_picpath

   background-p_w_picpath:url(圖片路徑)

   background-p_w_picpath:none

3.3   背景重復   background-repeat

   repeat   重復平鋪滿

   repeat-x   向X軸重復

   repeat-y   向Y軸重復

   no-repeat   不重復

3.4   背景位置   background-position

   橫向(left,center,right)

   縱向(top,center,bottom)

3.5   簡寫方式

   background:背景顏色  url(圖像)重復 位置

   background:#f60  url(p_w_picpaths/bg.jpg)no-repeat top center

4   文本屬性

4.1   text-align   橫向排列   left,center,right

4.2   line-height   文本行高

   %基于字體大小的百分比行高

   數值來設置固定值

4.3   text-indent   首行縮進

4.4   letter-spacing   字符間距

   normal   默認

   length   設置具體的數值（可以設置負值）

   inherit  繼承

5   邊框屬性

5.1   邊框風格   border-style

5.1.1   統一風格（簡寫風格）   border-style

5.1.2   單獨定義某一方向的邊框樣式

   border-bottom-style   下邊邊框樣式

   border-top-style   上邊邊框樣式

   border-left-style   左邊邊框樣式

   border-right-style   右邊邊框樣式

5.1.3   邊框風格樣式的屬性值

   none   無邊框

   solid   直線邊框

   dashed   虛線邊框

   dotted   點線邊框

   double   雙線邊框

   groove   凸槽邊框

   ridge   壟狀邊框          依托border-color的屬性值

   inset   inset邊框

   outset   outset邊框  

   inherit   繼承

5.2   邊框寬度   border-width

5.2.1   統一風格   border-width

5.2.2   單獨風格

   border-top-width   上邊邊框寬度

   border-bottom-width   下邊邊框寬度

   border-left-width   左邊邊框寬度

   border-right-width   右邊邊框寬度

5.2.3   邊框寬度的屬性值

   thin   細邊框

   medium   中等邊框

   thick   粗邊框

   px   固定值的邊框

   inherit   繼承

5.3邊框顏色   border-color

5.3.1   統一風格   border-color

5.3.2   單獨風格

   border-top-color   上邊邊框顏色

   border-bottom-color   下邊邊框顏色

   border-left-color   左邊邊框顏色

   border-right-color   右邊邊框顏色

5.3.3   屬性值

   顏色值的名稱   red.green

   RGB   rgb（255.255.0）

   RGBA   rgba（255.255.0.0.1）

   十六位進制   #ff0.#ff0000

   繼承   inherit

5.3.4   屬性值的四種情況

   一個值:border-color:（上.下.左.右）

   兩個值:border-color:（上下）（左右）

   三個值:border-color:（上）（左右）（下）

   四個值:border-color:（上）（右）（下）（左）

5.3.5   簡寫方式   border:solid  2px  #f60

6   列表屬性

6.1   標記的類型   list-style-tyle

   none   無標記

   disc   默認，標記是實心圓

   circle   標記是空心圓

   square   標記是實心方塊

   decimal   標記是數字

   decimal-leading-zero   0開頭的數字標記（01,02,03，等）

   lower-roman   小寫羅馬數字（i,ii,iii,iv,v等）

   upper-roman   大寫羅馬數字（I,II,III,IV,V等）

   lower-alpha   小寫英文字母The  marker  is  lower-alpha（a,b,c,d,e,等）

   upper-alpha   大寫英文字母The  marker  is  upper-alpha（A,B,C,D,E,等）

   lower-greek   小寫希臘字母（alpha,beta,gamma,等）

   lower-latin   小寫拉丁字母（a,b,c,d,e,等）

   upper-latin   大寫拉丁字母（A,B,C,D,E,等）

   hebrew   傳統的希伯來編號方式

   armenian   傳統的亞美尼亞編號方式

   georgian   傳統的喬治亞編號方式（an，ban，gan，等）

   cik-ideographic   簡單的表意數字

   hiragana   標記是：a,i,u,e,o,ka,ki,等。（日文片假名）

   katakana   標記是：A,I,U,E,O,KA,KI,等。（日文片假名）

   hiragana-iroha   標記是：i,ro,ha,ni,ho,he,to,等。（日文片假名）

  katakana-iroha   標記是：I,RO,HA,NI,HO,HE,TO,等。（日文片假名）

6.2   標記的位置   list-style-position

   inside   列表項目標記放置在文本以內，且環繞文本根據標記對齊

   outside   默認值，保持標記位于文本的左側，列表項目放置在文本以外，且環繞文本不根據標記對齊

   inherit   規定應該從父元素繼承list-style-position屬性的值

6.3   設置圖像列表標記   list-style-p_w_picpath

   URL   圖像的路徑

   none   默認，無圖形被顯示

   inherit   規定應該從父元素繼承list-style-p_w_picpath屬性的值

6.4   簡寫方式   list-style

   list-style:square  inside  url('/i/arrow.jpg')

感謝你能夠認真閱讀完這篇文章，希望小編分享的“CSS層疊樣式表常見屬性有哪些”這篇文章對大家有幫助，同時也希望大家多多支持億速云，關注億速云行業資訊頻道，更多相關知識等著你來學習!