詳解CSS定義字體、顏色、背景等屬性

•字體屬性
•字體font-family:"字體1","字體2",... 例:font-family:“宋體”;
•字號(hào)font-size:大小的取值 例:font-size:16px; 注意:xx-small:絕對(duì)字體尺寸,最小。 x-small:絕對(duì)字體尺寸,較小。 medium:絕對(duì)字體尺寸,正常默認(rèn)值。對(duì)應(yīng)還有l(wèi)arge、x-large、xx-large等。larger:相對(duì)字體尺寸,相對(duì)于父對(duì)象中字體尺寸進(jìn)行相對(duì)增大。smaller:相對(duì)字體尺寸,相對(duì)于父對(duì)象中字體尺寸進(jìn)行相對(duì)減小。length:可采用百分比或長(zhǎng)度值,不可為負(fù)值,其百分比取值是基于父對(duì)象中字體的尺寸。
•字體風(fēng)格font-style:樣式的取值 例:font-style:normal .normal是默認(rèn)的正常字體;italic以斜體顯示文字;oblique屬于中間狀態(tài),以偏斜體顯示。
•加粗字體font-weight:字體粗細(xì)值 例:font-weight:normal. 其中normal表示正常粗細(xì);bold表示粗體;bolder表示特粗體;lighter表示特細(xì)體;number不是真正的取值,其范圍是100~900,一般情況下都是整百的數(shù)字,如200、300等。
•小寫(xiě)字母轉(zhuǎn)化為大寫(xiě)font-variant:取值 例:font-variant:small-caps;能將小寫(xiě)的英文字母轉(zhuǎn)化為大寫(xiě)字母且字體較小。另一個(gè)normal,表示正常顯示。
•CSS中可采用復(fù)合樣式,來(lái)簡(jiǎn)化代碼,如:.h{font-family:"宋體"; font-weight:bold; font-style:italic;}
•顏色和背景屬性
•顏色屬性color:顏色取值 例:color:red。 color可以用關(guān)鍵字或者一個(gè)十六進(jìn)制的RGB值。
color:#ff0000 表示紅色 color:#ffff00 表示黃色 color:#000099 表示藍(lán)色
關(guān)鍵字就是顏色的英文名稱(chēng),如red,green,blue,分別表示紅、綠、藍(lán)。
•背景顏色background-color:顏色取值
•背景圖像background-image:url(圖像地址)
•背景重復(fù)background-repeat:取值 . no-repeat表示背景圖像不平鋪;repeat表示背景圖像平鋪排滿(mǎn)整個(gè)網(wǎng)頁(yè);repeat-x表示背景圖像只在水平方向上平鋪;repeat-y表示背景圖像只在垂直方向上平鋪。
•背景附件background-attachment:scroll/fixed scroll表示背景圖像隨對(duì)象滾動(dòng)而滾動(dòng),是默認(rèn)選項(xiàng);fixed表示背景圖像固定在頁(yè)面上不動(dòng),只有其它內(nèi)容隨滾動(dòng)條滾動(dòng)。
•背景位置background-position:位置取值 。一種采用數(shù)字取值,另一種采用關(guān)鍵字描述。如:x,y. left top .
•背景復(fù)合屬性background:url(圖像地址) no-repeat left top;
•段落屬性
•單詞間隔word-spacing:取值。默認(rèn)normal;取值可正可負(fù)。
•字符間隔letter-spacing:取值。6px,3px等具體的值
•文字修飾text-decoration:取值。 none表示不修飾,默認(rèn)值;underline表示對(duì)文字添加下劃線(xiàn);overline表示對(duì)文字添加上劃線(xiàn);line-through表示對(duì)文字添加刪除線(xiàn);blink表示文字閃爍效果。
•垂直對(duì)齊方式vertical-align:排列取值
baseline:瀏覽器默認(rèn)的垂直對(duì)齊方式。
sub:文字的下標(biāo)。
super:文字的上標(biāo)。
top:垂直靠上對(duì)齊。
text-top:使元素和上級(jí)元素的字體向上對(duì)齊。
middle:垂直居中對(duì)齊。
text-bottom:使元素和上級(jí)元素的字體向下對(duì)齊。
•文本轉(zhuǎn)換text-transform:轉(zhuǎn)換值
none:表示使用原始值。
capitalize:表示使每個(gè)單詞的第一個(gè)字母大寫(xiě)。
uppercase:表示使每個(gè)單詞的所有字母大寫(xiě)。
lowercase:表示使每個(gè)單詞的所有字母小寫(xiě)。
•水平對(duì)齊方式text-align:排列值。
left:左對(duì)齊。
right:右對(duì)齊。
center:居中對(duì)齊。
justify:兩端對(duì)齊。
•文本縮進(jìn)text-ident:縮進(jìn)值。取值為:長(zhǎng)度值或者百分比。
•文本行高line-height:行高值。取值為:長(zhǎng)度、倍數(shù)或百分比。
•處理空白white-space:值。normal是默認(rèn)值,即將連續(xù)的多個(gè)空格合并;pre會(huì)導(dǎo)致源代碼中的空格和換行符被保留,但這一選項(xiàng)只有在IE6中才能正確顯示;nowrap強(qiáng)制在同一行內(nèi)顯示所有文本,直到文本結(jié)束或者遇到換行(<br>)對(duì)象。
•文本反排unicode-bidi:bidi-override | normal |embed override表示嚴(yán)格按照direction屬性的值重排序;normal表示為默認(rèn)值;embed表示對(duì)象打開(kāi)附加的嵌入層。 •direction:ltr | rtl |inherit ltr表示從左到右順序閱讀;rtl表示從右到左順序閱讀;inherit表示文本流的值不可繼承。
•外邊框與內(nèi)邊距屬性 •內(nèi)容區(qū) 通過(guò)width , height ,overflow調(diào)整
•內(nèi)邊距通過(guò)padding-top,padding-bottom,padding-left,padding-right調(diào)整
•邊框通過(guò)border-style,border-width,border-color調(diào)整
•外邊框通過(guò)margin-left,margin-right,margin-top,margin-bottom調(diào)整
•復(fù)合屬性margin:長(zhǎng)度值 | 百分比 | auto 可以取1~4個(gè)值 • {margin:10px 20px 10px 10px}代表上,下,左,右分別是10px,20px,10px,10px
•{margin:10px 20px 30px}.上邊距是10px,左右邊距是20px,下邊距是30px
• {margin:10px 20px}代表上下邊距是10px,左右邊距是20px
•{margin:10px} 代表所有邊距都是10px
•邊框?qū)傩?/strong>
• 邊框樣式語(yǔ)法 •border-style:樣式值
•border-top-style:樣式值
•border-right-style:樣式值
•border-left-style:樣式值
•border-bottom-style:樣式值
•邊框樣式的取值和含義
取值 | 含義 |
---|---|
none | 默認(rèn)值,無(wú)邊框 |
dotted | 點(diǎn)線(xiàn)邊框 |
dashed | 虛線(xiàn)邊框 |
solid | 實(shí)線(xiàn)邊框 |
double | 雙實(shí)線(xiàn)邊框 |
groove | 邊框具有立體感的溝槽 |
ridge | 邊框成脊形 |
inset | 使整個(gè)邊框凹陷,即在邊框內(nèi)嵌入一個(gè)立體邊框 |
outset | 使整個(gè)邊框凸起,即在邊框內(nèi)嵌入一個(gè)立體邊框 |
總結(jié)
以上所述是小編給大家介紹的CSS定義字體、顏色、背景等屬性,希望對(duì)大家有所幫助,如果大家有任何疑問(wèn)請(qǐng)給我留言,小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持!
相關(guān)文章
- 這篇文章主要介紹了CSS中的背景屬性background的相關(guān)知識(shí),本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì),具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2019-04-30
css3實(shí)現(xiàn)一個(gè)div設(shè)置多張背景圖片及background-image屬性實(shí)例演示
這篇文章主要介紹了css3實(shí)現(xiàn)一個(gè)div設(shè)置多張背景圖片及background-image屬性,同時(shí)對(duì)于css3背景漸變也做了詳細(xì)的解釋,水平漸變,左上角漸變等等方式,需要的朋友可以參考下2017-08-10css 背景固定樣式background-attachment屬性基礎(chǔ)
這篇文章主要為大家介紹了在CSS中,使用背景附件屬性background-attachment可以設(shè)置背景圖像是隨對(duì)象滾動(dòng)還是固定不動(dòng),需要的朋友可以參考下2017-03-08CSS的background屬性及CSS3的背景圖片設(shè)置總結(jié)
這篇文章主要介紹了CSS的background屬性及CSS3的背景圖片設(shè)置總結(jié),背景圖片的顯示區(qū)域和定位是非常值得注意的地方,需要的朋友可以參考下2016-06-13- CSS3新增屬性:background-clip ,background-origin , background-size,本文給大家分享CSS3新增的背景屬性,感興趣的朋友跟隨小編一起看看吧2019-12-25