DIV常用屬性大全自己整理

2019-10-26 17:13:58

字體：大中小

來源：轉載

供稿：網友

一、屬性列表

復制代碼

代碼如下:
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 四邊框
虛線
<TEXTAREA STYLE="border:1px dashed pink">
實線
<TEXTAREA STYLE="border:1px solid pink">
設置div的高度與文字的行高一樣就可以了,即 line-height 和 height 的數值是一樣的就可以了,最后給div一個 over-flow: hidden ,讓超出的部分隱藏.

二、常用屬性

復制代碼

代碼如下:
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(超出時隱藏內容)。

上一篇：表單元素屬性readonly和disabled使用對比

下一篇：在html中添加script腳本的2種方法和注意事項

發表評論

共有條評論