CSS顏色及背景屬性

2024-01-14    分類: 網(wǎng)站建設(shè)

顏色 語法: color: <顏色>

初始值: 由瀏覽器決定

適用于: 所有對象

向下兼容: 是

顏色屬性允許網(wǎng)頁制作者指定一個元素的顏色。查看單位可以知道顏色值的描述. 一些顏色規(guī)則的例子包括:

H1 { color: blue } H2 { color: #000080 } H3 { color: #0c0 } 為了避免與用戶的樣式表之間的沖突,背景和顏色屬性應(yīng)該始終一起指定。

背景顏色 語法: background-color: <值>

允許值: <顏色> | transparent (透明)

初始值: transparent (透明)

適用于: 所有對象

向下兼容: 否

背景顏色屬性設(shè)定一個元素的背景顏色。例如:

BODY { background-color: white } H1 { background-color: #000080 } 為了避免與用戶的樣式表之間的沖突,無論任何背景顏色被使用的時候,背景圖象都應(yīng)該被指定。而大多數(shù)情況下,background-image: none都是合適的。

網(wǎng)頁制作者也可以使用略寫的背景屬性,通常會比背景顏色屬性獲得更好的支持。

背景圖象 語法: background-image: <值>

允許值: <統(tǒng)一資源定位URLs> | none (無)

初始值: none (無)

適用于: 所有對象

向下兼容: 否

背景圖象屬性設(shè)定一個元素的背景圖象。例如:

BODY { background-image: url(/images/foo.gif) } P { background-image: url(http://www.muchs.cn/bg.png) } 為了那些不載入圖象的瀏覽者,當(dāng)定義了背景圖象后,應(yīng)該也要定義一個類似的背景顏色。

網(wǎng)頁制作者也可以使用略寫的背景屬性,通常會比背景圖象屬性獲得更好的支持。

背景重復(fù) 語法: background-repeat: <值>

允許值: repeat | repeat-x | repeat-y | no-repeat

初始值: repeat

適用于: 所有對象

向下兼容: 否

背景重復(fù)屬性決定一個指定的背景圖象如何被重復(fù)。值為repeat-x時,圖象橫向重復(fù),當(dāng)值為repeat-y時圖象縱向重復(fù)。例如:

BODY { background: white url(candybar.gif); background-repeat: repeat-x } 在以上例子中, 圖象只會被橫向平鋪。

網(wǎng)頁制作者也可以使用略寫的背景屬性,通常會比背景重復(fù)屬性獲得更好的支持。

背景附件 語法: background-attachment: <值>

允許值: scroll | fixed

初始值: scroll

適用于: 所有對象

向下兼容: 否

背景附件屬性決定指定的背景圖象是跟隨內(nèi)容滾動,還是被看作油畫固定不動。例如,以下指定一個固定的背景圖象:

BODY { background: white url(candybar.gif); background-attachment: fixed } 網(wǎng)頁制作者也可以使用略寫的背景屬性,通常會比背景附件屬性獲得更好的支持。

背景位置 語法: background-position: <值>

允許值: [<百分比> | <長度>]{1,2} | [top | center | bottom] || [left | center | right]

初始值: 0% 0%

適用于: 塊級及替換元素

向下兼容: 否

圖象位置屬性給出指定背景圖象的最初位置。這個屬性只能應(yīng)用于塊級元素和替換元素。(替換元素僅指一些已知原有尺寸的元素。HTML替換元素包括 IMG, INPUT, TEXTAREA, SELECT, 和 OBJECT。)

安排背景位置最容易的方法是使用關(guān)鍵字:

橫向的關(guān)鍵字 (left, center, right) 縱向的關(guān)鍵字 (top, center, bottom) 百分比和長度也可用作安排背景圖象的位置。百分比和元素字體大小有關(guān)。雖然使用長度是允許的,但因?yàn)樗鼈兲幚聿煌娘@示分辨率有不可避免的缺點(diǎn),所以不被推薦。

當(dāng)使用百分比或長度時,需首先指定橫向位置,接著是縱向位置。一個值,例如20% 65%,指定圖象的左起20%上起65%的那點(diǎn)會被放在元素的左起20%上起65%的那點(diǎn)的所在位置。一個值如5px 10px,指定圖象的左上角會被放在元素的左起5像素上起10像素的位置。

如果僅給出橫向的值,縱向位置的值為50%。長度和百分比的組合是允許的,負(fù)值也行。例如,10% -2cm是允許的。雖然,百分比和長度是不能夠和關(guān)鍵字組合。

關(guān)鍵字解釋如下:

top left = left top = 0% 0% top = top center = center top = 50% 0% right top = top right = 100% 0% left = left center = center left = 0% 50% center = center center = 50% 50% right = right center = center right = 100% 50% bottom left = left bottom = 0% 100% bottom = bottom center = center bottom = 50% 100% bottom right = right bottom = 100% 100% 如果背景圖象被看作油畫般固定不動,關(guān)于油畫的圖象會代替元素被放置。

網(wǎng)頁制作者也可以使用略寫的背景屬性,通常會比背景位置屬性獲得更好的支持。

背景 語法: background: <值>

允許值: <背景顏色> || <背景圖象> || <背景重復(fù)> || <背景附件> || <背景位置>

初始值: 未定義

適用于: 所有對象

向下兼容: 否

背景屬性是一個更明確的背景—關(guān)系屬性的略寫。以下是一些背景的聲明:

BODY { background: white url(http://www.muchs.cn/foo.gif) } BLOCKQUOTE { background: #7fffd4 } P { background: url(../backgrounds/pawn.png) #f0f8ff fixed } TABLE { background: #0c0 url(leaves.jpg) no-repeat bottom right } 當(dāng)一個值未被指定時,將接受其初始值。例如,在上述的前三條規(guī)則,背景位置屬性將被設(shè)置為0% 0%。

為了避免與用戶的樣式表之間的沖突,背景和顏色應(yīng)該一起被指定。

本文來源于成都網(wǎng)站建設(shè)公司與成都網(wǎng)站設(shè)計(jì)制作公司-創(chuàng)新互聯(lián)成都公司!

分享名稱:CSS顏色及背景屬性
標(biāo)題路徑:http://www.muchs.cn/news22/313672.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián),為您提供軟件開發(fā)手機(jī)網(wǎng)站建設(shè)、微信小程序、定制開發(fā)網(wǎng)站內(nèi)鏈、品牌網(wǎng)站設(shè)計(jì)

廣告

聲明:本網(wǎng)站發(fā)布的內(nèi)容(圖片、視頻和文字)以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主,如果涉及侵權(quán)請盡快告知,我們將會在第一時間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場,如需處理請聯(lián)系客服。電話:028-86922220;郵箱:631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載,或轉(zhuǎn)載時需注明來源: 創(chuàng)新互聯(lián)

成都網(wǎng)頁設(shè)計(jì)公司