您好,登錄后才能下訂單哦!
這篇文章主要介紹了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 背景重復(fù) background-repeat
repeat 重復(fù)平鋪滿
repeat-x 向X軸重復(fù)
repeat-y 向Y軸重復(fù)
no-repeat 不重復(fù)
3.4 背景位置 background-position
橫向(left,center,right)
縱向(top,center,bottom)
3.5 簡寫方式
background:背景顏色 url(圖像)重復(fù) 位置
background:#f60 url(p_w_picpaths/bg.jpg)no-repeat top center
4 文本屬性
4.1 text-align 橫向排列 left,center,right
4.2 line-height 文本行高
%基于字體大小的百分比行高
數(shù)值來設(shè)置固定值
4.3 text-indent 首行縮進
4.4 letter-spacing 字符間距
normal 默認
length 設(shè)置具體的數(shù)值(可以設(shè)置負值)
inherit 繼承
5 邊框?qū)傩?/p>
5.1 邊框風格 border-style
5.1.1 統(tǒng)一風格(簡寫風格) 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 邊框?qū)挾? border-width
5.2.1 統(tǒng)一風格 border-width
5.2.2 單獨風格
border-top-width 上邊邊框?qū)挾?/p>
border-bottom-width 下邊邊框?qū)挾?/p>
border-left-width 左邊邊框?qū)挾?/p>
border-right-width 右邊邊框?qū)挾?/p>
5.2.3 邊框?qū)挾鹊膶傩灾?/p>
thin 細邊框
medium 中等邊框
thick 粗邊框
px 固定值的邊框
inherit 繼承
5.3邊框顏色 border-color
5.3.1 統(tǒng)一風格 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 標記是數(shù)字
decimal-leading-zero 0開頭的數(shù)字標記(01,02,03,等)
lower-roman 小寫羅馬數(shù)字(i,ii,iii,iv,v等)
upper-roman 大寫羅馬數(shù)字(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 傳統(tǒng)的希伯來編號方式
armenian 傳統(tǒng)的亞美尼亞編號方式
georgian 傳統(tǒng)的喬治亞編號方式(an,ban,gan,等)
cik-ideographic 簡單的表意數(shù)字
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 列表項目標記放置在文本以內(nèi),且環(huán)繞文本根據(jù)標記對齊
outside 默認值,保持標記位于文本的左側(cè),列表項目放置在文本以外,且環(huán)繞文本不根據(jù)標記對齊
inherit 規(guī)定應(yīng)該從父元素繼承l(wèi)ist-style-position屬性的值
6.3 設(shè)置圖像列表標記 list-style-p_w_picpath
URL 圖像的路徑
none 默認,無圖形被顯示
inherit 規(guī)定應(yīng)該從父元素繼承l(wèi)ist-style-p_w_picpath屬性的值
6.4 簡寫方式 list-style
list-style:square inside url('/i/arrow.jpg')
感謝你能夠認真閱讀完這篇文章,希望小編分享的“CSS層疊樣式表常見屬性有哪些”這篇文章對大家有幫助,同時也希望大家多多支持億速云,關(guān)注億速云行業(yè)資訊頻道,更多相關(guān)知識等著你來學習!
免責聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點不代表本網(wǎng)站立場,如果涉及侵權(quán)請聯(lián)系站長郵箱:is@yisu.com進行舉報,并提供相關(guān)證據(jù),一經(jīng)查實,將立刻刪除涉嫌侵權(quán)內(nèi)容。