CSS中的背景、邊距與邊框樣式屬性設(shè)置范例

 背景色、背景圖 背景格式：

內(nèi)容

例1：

文字的背景顏色

其中，WIDTH: 300px是背景寬度，#99ff00是背景色。效果：文字的背景顏色
例2：

背景圖背景色

其中，#99FF00 、no-repeat，分別是背景屬性的顏色值、不重復(fù)值。背景大小為300×150。
效果：背景圖背景色
背景屬性：背景顏色 background-color:顏色值
背景圖片 background-image:url(圖片地址) 圖片重復(fù)
background-repeat:重復(fù)值 ： repeat-x 橫向重復(fù) repeat-y 豎向重復(fù)
no-repeat 不重復(fù)圖片滾動
background-attachment:滾動值： scroll滾動 fixed固定不動背景位置
background-position:位置值： 離網(wǎng)頁最左面、上面的距離，單位：px。
更多的背景屬性 在上例中，我們還可以添加更多的背景屬性值。
例3：

上面的代碼表示，網(wǎng)頁的背景顏色是翠綠色，背景圖片是background.gif圖片，背景圖片橫向重復(fù)，背景圖片距離網(wǎng)頁最左面0px，距離網(wǎng)頁最上面20px，背景大小為500×160。
效果： 背景實(shí)例：設(shè)置背景顏色 期而至本例演示如何為元素設(shè)置背景顏色。 設(shè)
置文本的背景顏色 本例顏色如何設(shè)置部分文本的背景顏色。
將圖像設(shè)置為背景 本例演示如何將圖像設(shè)置為背景。
將圖像設(shè)置為背景 2 本例演示如何為多個元素同時設(shè)置背景圖像。
如何重復(fù)背景圖像 本例演示如何重復(fù)背景圖像。
如何在垂直方向重復(fù)背景圖像 本例演示如何垂直地重復(fù)背景圖像。
如何在水平方向重復(fù)背景圖像 本例演示如何水平地重復(fù)背景圖像。
如何僅顯示一次背景圖像 本例演示如何僅顯示一次背景圖像。
如何放置背景圖像 本例演示如何在頁面上放置背景圖像。
如何使用%來定位背景圖像 本例演示如何使用百分比來在頁面上定位背景圖像。
如何使用像素來定位背景圖像 本例演示如何使用像素來在頁面上定位背景圖像。
如何設(shè)置固定的背景圖像 本例演示如何設(shè)置固定的背景圖像。圖像不會隨著頁面的其他部分滾動。
所有背景屬性在一個聲明之中 本例演示如何使用簡寫屬性來將所有背景屬性設(shè)置在一個聲明之中。
邊距與邊框 基本知識：
框模結(jié)構(gòu)，由內(nèi)容 內(nèi)邊距(呈現(xiàn)內(nèi)容背景) 邊框 外邊距(默認(rèn)透明 )構(gòu)成；width 、height指內(nèi)容的寬、高。

在左右或上下邊距、邊框相等情況下，框�？傞L=內(nèi)容＋(內(nèi)邊距＋邊框＋外邊距)×2。邊距格式：

內(nèi)容

例4：

文字

效果：
這個段落帶有指定的外邊距，上外邊距0.5cm ，右外邊距3cm，下外邊距1cm，左外邊距3cm。外邊距為透明。
這個段落帶有指定的內(nèi)邊距，內(nèi)邊距四邊均為0.5cm。這段文字的背景色是翠綠色，背景色包含內(nèi)邊距。

例5： <P style="BORDER: #ff00ff 2px double;BACKGROUND:#99ff00; PADDING-BOTTOM:10px; MARGIN-left:4cm;MARGIN-right:4cm;PADDING-TOP:10px"align=center>
圖片與文字效果：左右外邊距均為4cm，上下內(nèi)邊距均為10px，邊框2px，內(nèi)容居中。

例6：

這個表格TABLE有左右外邊距均為5cm，這個表格TD有上下左右內(nèi)邊距均為1cm。

效果：這個表格TABLE有左右外邊距均為5cm，這個表格TD有上下左右內(nèi)邊距均為1cm。
邊距屬性：內(nèi)邊距：padding 簡寫 padding-top 上 right 右 bottom 下 left 左 （ length % ）
外邊距：margin 簡寫 margin-top 上 right 右 bottom 下 left 左 （auto length % ）屬性值：auto 設(shè)置邊距 length 固定邊距，
默認(rèn)值是0 % 基于父對象的百分比邊距更多的邊距屬性：內(nèi)邊距 外邊距 邊距實(shí)例：所有內(nèi)邊距屬性在一個聲明中

本例演示使用簡寫屬性將所有的內(nèi)邊距屬性設(shè)置于一個聲明中，可以有一到四個值。
設(shè)置下內(nèi)邊距 1 本例演示如何使用厘米值來設(shè)置單元格的下內(nèi)邊距。
設(shè)置下內(nèi)邊距 2 本例演示如何使用百分比值來設(shè)置單元格的下內(nèi)邊距。
設(shè)置左內(nèi)邊距 1 本例演示如何使用厘米值來設(shè)置單元格的左內(nèi)邊距。
設(shè)置左內(nèi)邊距 2 本例演示如何使用百分比值來設(shè)置單元格的左內(nèi)邊距。
設(shè)置右內(nèi)邊距 1 本例演示如何使用厘米值來設(shè)置單元格的右內(nèi)邊距。
設(shè)置右內(nèi)邊距 2 本例演示如何使用百分比值來設(shè)置單元格的右內(nèi)邊距。
設(shè)置上內(nèi)邊距 1 本例演示如何使用厘米值來設(shè)置單元格的上內(nèi)邊距。
設(shè)置上內(nèi)邊距 2 本例演示如何使用百分比值來設(shè)置單元格的上內(nèi)邊距。
設(shè)置文本的左外邊距 本例演示如何設(shè)置文本的左外邊距。
設(shè)置文本的右外邊距 本例演示如何設(shè)置文本的右外邊距。
設(shè)置文本的上外邊距 本例演示如何設(shè)置文本的上外邊距。
設(shè)置文本的下外邊距 本例演示如何設(shè)置文本的下外邊距。
所有的外邊距屬性在一個聲明中。 本例演示如何將所有的外邊距屬性設(shè)置于一個聲明中。

邊框格式：

內(nèi)容

例7：

有上下邊位、邊寬、樣式、顏色的邊框

效果：有上下邊位、邊寬、樣式、顏色的邊框 例8：

點(diǎn)狀邊框，在大多數(shù)瀏覽器中呈現(xiàn)為實(shí)線。

虛線邊框，在大多數(shù)瀏覽器中呈現(xiàn)為虛線。

實(shí)線邊框，在瀏覽器中呈現(xiàn)為實(shí)線。

雙線邊框，寬度等于 border-width 的值。

3D 凹槽邊框，其效果取決于 border-color 的值。

3D 壟狀邊框，其效果取決于 border-color 的值。

3D inset 邊框，其效果取決于 border-color 的值。

3D outset 邊框，其效果取決于 border-color 的值。

效果：
dotted 點(diǎn)狀邊框，在大多數(shù)瀏覽器中呈現(xiàn)為實(shí)線。
dashed 虛線邊框，在大多數(shù)瀏覽器中呈現(xiàn)為虛線。
solid 實(shí)線邊框，在瀏覽器中呈現(xiàn)為實(shí)線。
double 雙線邊框，寬度等于 border-width 的值。
groove 3D 凹槽邊框，其效果取決于 border-color 的值。
ridge 3D 壟狀邊框，其效果取決于 border-color 的值。
inset 3D inset 邊框，其效果取決于 border-color 的值。
outset 3D outset 邊框，其效果取決于 border-color 的值。
例9：

效果： 邊框?qū)傩裕哼吙蜻呂唬?border 簡寫 border-top上邊 border-bottom 下邊 border-left 左邊 border-right 右邊。
邊框?qū)挾龋?border-width: thin 細(xì) medium 較細(xì) thick較粗 length 或 數(shù)量px。
邊框樣式： border-style: none; (無邊框) dotted; (點(diǎn)線) dashed; (虛線) solid; (實(shí)線) double; (雙線) groove; (凹槽) ridge; (脊?fàn)? inset; (邊框) outset; (邊框)。
邊框顏色： border-color: name 顏色名 rgb10進(jìn)制 hex 16進(jìn)制；transparent 透明。
更多的邊框?qū)傩?
邊框?qū)嵗�：所有邊框�(qū)傩栽谝粋�聲明之中
本例演示用簡寫屬性來將所有四個邊框?qū)傩栽O(shè)置于同一聲明中。
設(shè)置四邊框樣式 本例演示如何設(shè)置四邊框樣式。
設(shè)置每一邊的不同邊框 本例演示如何在元素的各邊設(shè)置不同的邊框。
所有邊框?qū)挾葘傩栽谝粋�聲明之中 本例演示用簡寫屬性來將所有邊框?qū)挾葘傩栽O(shè)置于同一聲明中。
設(shè)置四個邊框的顏色 本例演示如何設(shè)置四個邊框的顏色�？梢栽O(shè)置一到四個顏色。
所有下邊框?qū)傩栽谝粋�聲明中 本例演示用簡寫屬性來將所有下邊框?qū)傩栽O(shè)置在同一聲明中。
設(shè)置下邊框的顏色 本例演示如何設(shè)置下邊框的顏色。 設(shè)置下邊框的樣式 本例演示如何設(shè)置下邊框的樣式。
設(shè)置下邊框的寬度 本例演示如何設(shè)置下邊框的寬度。
所有左邊框?qū)傩栽谝粋�聲明之中 所有左邊框?qū)傩栽谝粋�聲明之中。
設(shè)置左邊框的顏色 本例演示如何設(shè)置左邊框的顏色。
設(shè)置左邊框的樣式 本例演示如何設(shè)置左邊框的樣式。 設(shè)置左邊框的寬度 本例演示如何設(shè)置左邊框的寬度。
所有右邊框?qū)傩栽谝粋�聲明之中 本例演示一個簡寫屬性，用于把所有右邊框?qū)傩栽O(shè)置在一條聲明中。
設(shè)置右邊框的顏色 本例演示如何設(shè)置右邊框的顏色。 設(shè)置右邊框的樣式 本例演示如何設(shè)置右邊框的樣式。 設(shè)置右邊框的寬度 本例演示如何設(shè)置右邊框的寬度。
所有上邊框?qū)傩栽谝粋�聲明之中 本例演示用簡寫屬性來將所有上邊框?qū)傩栽O(shè)置于同一聲明之中。
設(shè)置上邊框的顏色 本例演示如何設(shè)置上邊框的顏色。 設(shè)置上邊框的樣式 本例演示如何設(shè)置上邊框的樣式。 設(shè)置上邊框的寬度 本例演示如何設(shè)置上邊框的寬度。