DIV常用屬性大全自己整理_HTML/Xhtml_網頁製作
- WBOY原創
- 2016-05-16 16:39:451427瀏覽
一、屬性列表
color : #999999 文字顏色
font-family : 宋體文字字體
font-size : 10pt 文字大小
font-style:itelic 文字斜體育
font-variant:small-caps 小字體
letter-spacing : 1pt 文字間距
line-height : 200% 設定行高
font-weight:bold 文字粗體
vertical-align:sub 下標字
vertical -align:super 上標
text-decoration:line-through 加?h除線
text-decoration:overline 加頂線
text-decoration:underline 加底線
text-decoration: none ?h除連接底線
text-transform : capitalize 首字大寫
text-transform : uppercase 英文大寫
text-transform : lowercase 英文寫
text-align:right 文字右對齊
text-align:left 文字*左對齊
text-align:center 文字置中對齊
這些是一些簡單的文字效果，可以應用到css的頁面中。
背景
background-color:black 背景顏色
background-image : url(image/bg.gif) 背景圖片
background-attachment : fixed 固定背景
background-repeat : repeat 重複排列-網頁預設
background-repeat : no-repeat 不重複排列
background-repeat : repeat-x 在x軸重複排列
background-repeat : repeat-y 在y軸重複排列
background-position : 90% 90% 背景圖片x與y軸的位置
連結
A 所有超連結
A:link 超連結文字格式
A:visited 瀏覽的連結文字格式
A:active 按下連接的格式
A:hover 滑鼠移至連接
邊框
border-top : 1px solid black 上框
border-bottom : 1px solid #6699cc 下框
border-left : 1px solid #6699cc 左框
border-right : 1px solid #6699cc 右框
border: 1px solid #6699cc 四邊框
border: 1px solid #6699cc 四邊框
虛線：虛線:1px dashed pink">
實線
二、常用屬性
1、Height:設定DIV的高度；Width:設定DIV的寬度。
2、margin:用來設定DIV的外延邊距，也就是到父容器的距離。 margin:後面跟有四個距離分別為到父容器的上-右-下-左邊的距離；margin: [top][right][bottom][left]
可以分別設定：margin-left:到父容器左邊框的距離；margin-right:到父容器右邊框的距離；margin-top: 到父容器上邊框的距離；margin-bottom:到父容器下邊框的距離。
3、padding:用來設定DIV的內邊距（內如子元素與DIV邊界的距離）。 padding:後面跟有四個距離分別為到父容器的上-右-下-左邊的距離；margin: [top][right][bottom][left]：需要注意的是padding設定的距離不包括在本身的width和height內(在IE7和FF中)，例如一個DIV的width設定了100px,而padding-left設定了50px,那麼這個DIV在頁面上顯示的將是150px寬。
4、border:設定DIV的邊框樣式；display:設定顯示屬性。其值有block、none；float:設定DIV在頁面上的流向，其值有left(靠左顯示)、right(靠右顯示)、none;
background:設定DIV的背景樣式；background後可直接接背景的顏色、背景圖片、平鋪方式等樣式。也可以用以下屬性分別設定。
background-color:設定背景顏色；background-attachment:背景影像的附加方式，其值有scroll、fixed; background-image:指定使有的背景圖片;background-repeat:背景圖象的平鋪方式。其值有no-repeat(不平鋪)、repeat(兩個方向平鋪)、repeat-x(水平方向平鋪)、repeat-y(垂直方向平鋪); background-position:在DIV中定位背景位置。其值有top bottom left right的不同組合。也可以用座標指定具體的位置。
5、position:設定DIV的定位方式。 position的屬性中有static、fixed、relative、absolute四個屬性。常用relative和absolute。若指定為static時，DIV遵循HTML規則；若指定為relative時，可以用top、left、right、bottom來設定DIV在頁面中的偏移（相對於自身的偏移），但此時無法使用層；若指定為absolute時，可以用top、left、right、bottom對DIV進行絕對定位（對自己最近的父級元素）；若指定為fixed時，在IE7與FF中DIV的位置相對於屏幕固定不變，IE6中沒有效果（不知為什麼）。
6、font:指定DIV中文字的樣式，其後可接文字的多個樣式。 font-family:設定要使用的字體名稱；font-weight:指定文字的粗細,其值有bold bolder lighter等；font-size:指定文字的大小；font-style:指定文字樣式，其值有italic normal oblique等；color:指定文字顏色；text-align:指定文字水平對齊方式，其值有center(居中) left right justify；text-decorator:用於文字的修飾；其值有none underline overline line-through和blink的組合；text-indent:設定文字的縮排；text-transform:設定文字的字母大小寫。其值有lowercase uppercase capitalize(首字母大寫) none;direction:內容的流向。其值有ltr(由左至右)、rtl(由右至左)；line-height:指定文字的行高；Word-spacing:字間距。
7、overflow:內容溢位控制，其值有scroll(總是顯示捲軸)、visible(不顯示捲軸，但超出部分可見)、auto(內容超出時顯示捲軸)、hidden(超出時隱藏內容)。
三、一些特殊效果：
1、z-index:設定DIV的層疊順序。用z-index屬性時，position必需要指定為absolute才行。
2、cursor:設定DIV上遊標的樣式。
3、clip:設定剪輯矩形。 clip:rect(top right bottom left);設定上下左右的距離,但此時要把position指定為absolute。
4、opacity 透明度filter:alpha(opacity=value) eg：filter:alpha(opacity=50);opacity:0.5;
四、定位與控制
絕對定位和相對定位（position）
絕對定位：
定位屬性將是網蟲打開幸福之門的鑰匙：
H4 { position: absolute; left: 100px; top: 43px }
這項CSS規則讓瀏覽器將的起始位置精確地定在距離瀏覽器左邊100像素，距離其頂部43像素的位置。注意這裡唯一設定了的是左邊和頂部，也就說，文字將從左到右，從上到下載入瀏覽視窗。
複製代碼
代碼如下:color : #999999 文字顏色
font-family : 宋體文字字體
font-size : 10pt 文字大小
font-style:itelic 文字斜體育
font-variant:small-caps 小字體
letter-spacing : 1pt 文字間距
line-height : 200% 設定行高
font-weight:bold 文字粗體
vertical-align:sub 下標字
vertical -align:super 上標
text-decoration:line-through 加?h除線
text-decoration:overline 加頂線
text-decoration:underline 加底線
text-decoration: none ?h除連接底線
text-transform : capitalize 首字大寫
text-transform : uppercase 英文大寫
text-transform : lowercase 英文寫
text-align:right 文字右對齊
text-align:left 文字*左對齊
text-align:center 文字置中對齊
這些是一些簡單的文字效果，可以應用到css的頁面中。
背景
background-color:black 背景顏色
background-image : url(image/bg.gif) 背景圖片
background-attachment : fixed 固定背景
background-repeat : repeat 重複排列-網頁預設
background-repeat : no-repeat 不重複排列
background-repeat : repeat-x 在x軸重複排列
background-repeat : repeat-y 在y軸重複排列
background-position : 90% 90% 背景圖片x與y軸的位置
連結
A 所有超連結
A:link 超連結文字格式
A:visited 瀏覽的連結文字格式
A:active 按下連接的格式
A:hover 滑鼠移至連接
邊框
border-top : 1px solid black 上框
border-bottom : 1px solid #6699cc 下框
border-left : 1px solid #6699cc 左框
border-right : 1px solid #6699cc 右框
border: 1px solid #6699cc 四邊框
border: 1px solid #6699cc 四邊框
虛線：虛線:1px dashed pink">
實線
二、常用屬性
複製程式碼
程式碼如下:1、Height:設定DIV的高度；Width:設定DIV的寬度。
2、margin:用來設定DIV的外延邊距，也就是到父容器的距離。 margin:後面跟有四個距離分別為到父容器的上-右-下-左邊的距離；margin: [top][right][bottom][left]
可以分別設定：margin-left:到父容器左邊框的距離；margin-right:到父容器右邊框的距離；margin-top: 到父容器上邊框的距離；margin-bottom:到父容器下邊框的距離。
3、padding:用來設定DIV的內邊距（內如子元素與DIV邊界的距離）。 padding:後面跟有四個距離分別為到父容器的上-右-下-左邊的距離；margin: [top][right][bottom][left]：需要注意的是padding設定的距離不包括在本身的width和height內(在IE7和FF中)，例如一個DIV的width設定了100px,而padding-left設定了50px,那麼這個DIV在頁面上顯示的將是150px寬。
4、border:設定DIV的邊框樣式；display:設定顯示屬性。其值有block、none；float:設定DIV在頁面上的流向，其值有left(靠左顯示)、right(靠右顯示)、none;
background:設定DIV的背景樣式；background後可直接接背景的顏色、背景圖片、平鋪方式等樣式。也可以用以下屬性分別設定。
background-color:設定背景顏色；background-attachment:背景影像的附加方式，其值有scroll、fixed; background-image:指定使有的背景圖片;background-repeat:背景圖象的平鋪方式。其值有no-repeat(不平鋪)、repeat(兩個方向平鋪)、repeat-x(水平方向平鋪)、repeat-y(垂直方向平鋪); background-position:在DIV中定位背景位置。其值有top bottom left right的不同組合。也可以用座標指定具體的位置。
5、position:設定DIV的定位方式。 position的屬性中有static、fixed、relative、absolute四個屬性。常用relative和absolute。若指定為static時，DIV遵循HTML規則；若指定為relative時，可以用top、left、right、bottom來設定DIV在頁面中的偏移（相對於自身的偏移），但此時無法使用層；若指定為absolute時，可以用top、left、right、bottom對DIV進行絕對定位（對自己最近的父級元素）；若指定為fixed時，在IE7與FF中DIV的位置相對於屏幕固定不變，IE6中沒有效果（不知為什麼）。
6、font:指定DIV中文字的樣式，其後可接文字的多個樣式。 font-family:設定要使用的字體名稱；font-weight:指定文字的粗細,其值有bold bolder lighter等；font-size:指定文字的大小；font-style:指定文字樣式，其值有italic normal oblique等；color:指定文字顏色；text-align:指定文字水平對齊方式，其值有center(居中) left right justify；text-decorator:用於文字的修飾；其值有none underline overline line-through和blink的組合；text-indent:設定文字的縮排；text-transform:設定文字的字母大小寫。其值有lowercase uppercase capitalize(首字母大寫) none;direction:內容的流向。其值有ltr(由左至右)、rtl(由右至左)；line-height:指定文字的行高；Word-spacing:字間距。
7、overflow:內容溢位控制，其值有scroll(總是顯示捲軸)、visible(不顯示捲軸，但超出部分可見)、auto(內容超出時顯示捲軸)、hidden(超出時隱藏內容)。
三、一些特殊效果：
1、z-index:設定DIV的層疊順序。用z-index屬性時，position必需要指定為absolute才行。
2、cursor:設定DIV上遊標的樣式。
3、clip:設定剪輯矩形。 clip:rect(top right bottom left);設定上下左右的距離,但此時要把position指定為absolute。
4、opacity 透明度filter:alpha(opacity=value) eg：filter:alpha(opacity=50);opacity:0.5;
四、定位與控制
絕對定位和相對定位（position）
絕對定位：
定位屬性將是網蟲打開幸福之門的鑰匙：
H4 { position: absolute; left: 100px; top: 43px }
這項CSS規則讓瀏覽器將
的起始位置精確地定在距離瀏覽器左邊100像素，距離其頂部43像素的位置。注意這裡唯一設定了的是左邊和頂部，也就說，文字將從左到右，從上到下載入瀏覽視窗。
左邊和頂部屬性很直觀，左邊（left）設定要素距瀏覽器視窗左邊的距離，頂部（top）設定距離瀏覽器視窗頂端的距離。設定這些距離時，你可以使用所學過的各種度單位或比例值。使用比例值時，比例值的是相對於母體要素的尺寸。
你可以定位什麼呢？任何東西！段落、單字、GIF和JPEG圖象、QUICKTIME電影等等。
相對定位：
絕對定位使你能精確地定位要素在頁面的獨立位置，而不考慮頁面其它要素的定位設定。相對定位指你所定位的要素的位置相對於在文件中所分配的位置。例：
I { position: relative; left: 40px; top: 10px }
相對定位的關鍵在於定位了的要素的位置是相對於它通常應在的位置進行定位。相對定位單元出現在普通的靜態定位單元的行間，定位時沒有把自己和靜態定位單元完全分開。如果你停止使用相對定位，文字的顯示位置將會恢復正常。使用相對定位時要小心，否則容易將頁面弄得非常亂。
除了相對定位和絕對定位，你還可以使用static（靜止）參數值。 Static 是 position 特性的預設值。它的使用方法同普通HTML中的定位方法，不能附加特殊的定位設定。也就是說，除了邊距特性，或透過使用 float 特性來浮動單元可影響單元的定位外，其它均不可以。
定位單元的控制（width、height、visiblility）
除了控制定位單元的左上角位置，你還可以控制單元的寬度和高度，及單元在頁面的可視性。
寬度：定位了的要素在頁面上顯示時仍會從左到右一直顯示。利用寬度屬性就可以設定字元向右流動的限制，也就是設定要素的寬度。
DIV { position: absolute; left: 200px; top: 40px; width: 150px }
瀏覽器接到這項規則時，它將文字按照規則規定的效果顯示，還將段落的最大水平尺寸限制在150像素。
寬度屬性只適用於絕對定位的要素。你可以使用我們學過的任何一種長度單位，或使用比例值設定寬度，比例值指相對於母體要素的比例。 IE 4中，這項屬性還可用於圖象。你可以透過寬度設定人為地拉寬或壓縮圖象。
高度：理論上講，高度應該和寬度的設定類似，只不過是在垂直方向上：
DIV { position: absolute; left: 200px; top: 40px; height: 150px }
這裡我用了“理論上講”，因為有些瀏覽器不支援高度屬性。
視覺性：利用CSS，你可以隱藏要素，使其在頁面上看不見。這條屬性對於定位了的和未定位的要素都適用。
H4 { visibility: hidden }
選項：
visible 使要素可以被看見
hidden 使要素隱藏
值 inherit 為預設值。這使單元繼承父單元的可見性。所以，如果某一段是隱藏的，則它所包含的任何行間單元也都被隱藏。此繼承性可被明確指定的可見性取代。例如，段內的 EM 單元被指定為可見，這時如果該段被隱藏，則段內的所有其它內容都將消失，而唯有 EM 單元中的文本是可見的。
當一個要素被隱藏後，它仍然要佔據瀏覽器視窗中的原有空間。所以，如果你將文字包圍在一幅被隱藏的圖象周圍，那麼，其顯示效果將是文字包圍著一塊空白區域。此新聞
這條屬性在寫語言和使用動態HTML時很有用，例如你可以讓某段落或圖像只在滑鼠滑過時才顯示。
單元層級 （z-index）
特性 z-index 用於堆疊螢幕上的單元。預設情況下，單元堆疊的順序為它們出現在HTML標記的順序－也就是說，後出現單元堆疊在早期單元的上面。 Z-index 特性實際上定義同屬（sibling）單元的堆疊順序以及單元相對父單元的堆疊。依照規範草案，具有正 z-index 值的單元群都堆疊在父單元之上，它們自己的堆疊順序則按其取值的大小來決定（值大的單元在上層）。同樣，具有負z-index 值的單元群都堆疊在父單元之下，它們自己的堆疊順序也按取值的大小來定（值大的單元在上層，例如值為-1 的單元在值為-2 的單元的上面）。
此參數值使用純整數。 z-index用於絕對定位或相對定位了的要素。你也可以給圖象設定z-index。 （對於Communicator，最好將![DIV常用屬性大全自己整理_HTML/Xhtml_網頁製作]()
標籤包在或標籤內，然後將z-index應用到或。）
剪輯絕對定位單元（clip）
絕對定位單元可以被剪輯－也即剪輯顯示給使用者的區域，只顯示單元的一部分而把其餘部分作透明處理。對於傳統的基於文字和圖像的網路頁面，這並不是一個很有用的特徵。但若要求多媒體頁面，這是很有用的。如 Netscape Communivator 4 和 Internet Explorer 4 都支援多媒體頁面，它們透過文件的腳本介面動態地調整單元周圍的剪輯區，從而實線文字「劃入」和影像漸顯等顯示特徵。
在CSS中，剪輯透過clip 特性來控制，這一特性只能用於絕對定位單元，其缺省值為auto，按單元的外邊緣來剪輯單元（實際上等於沒有剪輯） 。另外，可透過以下表達式設定剪輯框：
clip : rect(top,right.bottom,left) ;
其中top、right、bottom 和left 分別是矩形剪輯框的上邊、右邊、下邊和左邊相對於被剪輯單元左上角的位置。 Top、right、bottom 和 left 的值可以是任意絕對或相對長度值（但不能為百分比值），或是關鍵字 auto。取值為 auto 表示剪輯區域的各邊放好以後，被剪輯單元中的任何內容都不會超出這個區域。
控制單元溢位（overflow）
固定絕對或相對定位單元的width 和height，很可能會因為指定的區域無法滿足單元實際內容的需要，而造成單元內容溢出。這時可使用 overflow 指定瀏覽器如何處理溢位：值 none（預設值）可讓瀏覽器顯示溢位的內容，因此單元可溢位指定的區域。而值 clip 要求瀏覽器在單元底部和右邊剪輯單元內容，這樣，超出指定區域的單元內容將不顯示。值 scroll 也同樣要求瀏覽器在單元底部和右邊剪輯單元內容（同 clip），不過，瀏覽器應該（如果可能的話）為單元提供滾動條以使用戶能通過滾動來瀏覽被剪輯的內容
。）
剪輯絕對定位單元（clip）
絕對定位單元可以被剪輯－也即剪輯顯示給使用者的區域，只顯示單元的一部分而把其餘部分作透明處理。對於傳統的基於文字和圖像的網路頁面，這並不是一個很有用的特徵。但若要求多媒體頁面，這是很有用的。如 Netscape Communivator 4 和 Internet Explorer 4 都支援多媒體頁面，它們透過文件的腳本介面動態地調整單元周圍的剪輯區，從而實線文字「劃入」和影像漸顯等顯示特徵。
在CSS中，剪輯透過clip 特性來控制，這一特性只能用於絕對定位單元，其缺省值為auto，按單元的外邊緣來剪輯單元（實際上等於沒有剪輯） 。另外，可透過以下表達式設定剪輯框：
clip : rect(top,right.bottom,left) ;
其中top、right、bottom 和left 分別是矩形剪輯框的上邊、右邊、下邊和左邊相對於被剪輯單元左上角的位置。 Top、right、bottom 和 left 的值可以是任意絕對或相對長度值（但不能為百分比值），或是關鍵字 auto。取值為 auto 表示剪輯區域的各邊放好以後，被剪輯單元中的任何內容都不會超出這個區域。
控制單元溢位（overflow）
固定絕對或相對定位單元的width 和height，很可能會因為指定的區域無法滿足單元實際內容的需要，而造成單元內容溢出。這時可使用 overflow 指定瀏覽器如何處理溢位：值 none（預設值）可讓瀏覽器顯示溢位的內容，因此單元可溢位指定的區域。而值 clip 要求瀏覽器在單元底部和右邊剪輯單元內容，這樣，超出指定區域的單元內容將不顯示。值 scroll 也同樣要求瀏覽器在單元底部和右邊剪輯單元內容（同 clip），不過，瀏覽器應該（如果可能的話）為單元提供滾動條以使用戶能通過滾動來瀏覽被剪輯的內容
剪輯絕對定位單元（clip）
絕對定位單元可以被剪輯－也即剪輯顯示給使用者的區域，只顯示單元的一部分而把其餘部分作透明處理。對於傳統的基於文字和圖像的網路頁面，這並不是一個很有用的特徵。但若要求多媒體頁面，這是很有用的。如 Netscape Communivator 4 和 Internet Explorer 4 都支援多媒體頁面，它們透過文件的腳本介面動態地調整單元周圍的剪輯區，從而實線文字「劃入」和影像漸顯等顯示特徵。
在CSS中，剪輯透過clip 特性來控制，這一特性只能用於絕對定位單元，其缺省值為auto，按單元的外邊緣來剪輯單元（實際上等於沒有剪輯） 。另外，可透過以下表達式設定剪輯框：
clip : rect(top,right.bottom,left) ;
其中top、right、bottom 和left 分別是矩形剪輯框的上邊、右邊、下邊和左邊相對於被剪輯單元左上角的位置。 Top、right、bottom 和 left 的值可以是任意絕對或相對長度值（但不能為百分比值），或是關鍵字 auto。取值為 auto 表示剪輯區域的各邊放好以後，被剪輯單元中的任何內容都不會超出這個區域。
控制單元溢位（overflow）
固定絕對或相對定位單元的width 和height，很可能會因為指定的區域無法滿足單元實際內容的需要，而造成單元內容溢出。這時可使用 overflow 指定瀏覽器如何處理溢位：值 none（預設值）可讓瀏覽器顯示溢位的內容，因此單元可溢位指定的區域。而值 clip 要求瀏覽器在單元底部和右邊剪輯單元內容，這樣，超出指定區域的單元內容將不顯示。值 scroll 也同樣要求瀏覽器在單元底部和右邊剪輯單元內容（同 clip），不過，瀏覽器應該（如果可能的話）為單元提供滾動條以使用戶能通過滾動來瀏覽被剪輯的內容
陳述：
本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn