Css div常用CSS标签及属性.docx

Css div常用CSS标签及属性.docx

《Css div常用CSS标签及属性.docx》由会员分享，可在线阅读，更多相关《Css div常用CSS标签及属性.docx（11页珍藏版）》请在冰豆网上搜索。

Cssdiv常用CSS标签及属性

总结

Css+div常用CSS标签及属性

2009年10月15日评论（0）|浏览（64）点击查看原文

CSS中的长度

绝对单位：

几乎不用在网页中

in英寸1in=2.54cm

cm厘米1cm=0.394in

pt磅1in=72pt

pcpica1in=6pc

相对单位：

较常用

em1em=相应字体的font-size值

ex1ex=相应字体中的小写x字母的高度值，较难求得，一般取0.5em

px最为常用的

CSS中的元素分类

display设定元素所属类别，不可继承

none（设定为不显示在屏幕上）

block（块级元，包括P,H1-H6,list,div,body）

inline（内联元，包括a,em,span）

list-item（列表元，如LI）

颜色与背景类

color设置文字颜色

#rgb#rrggbbrgb（255,255,255）rgb（100%,100%,100%）

H1{color:

red}

H1{color:

#f00}

H1{color:

#ff0000}

H1{color:

rgb（255,0,0）}

H1{color:

rgb（100%,0%,0%）}

background-color设置背景颜色，格式同上；不可继承，可用于所有元

BODY{background-color:

red}

BODY{background-color:

#f00}

BODY{background-color:

#ff0000}

BODY{background-color:

rgb（255,0,0）}

BODY{background-color:

rgb（100%,0%,0%）}

background-image设置背景图片，默认为none，不可继承，可用于所有元

url（imageURL）none

body{backround-image:

url（back.jpg）;}

background-repeat设置背景图片是否重复排列，不可继承，用于所有元

repeat（XY轴均重复）repeat-x（X轴重复排列）repeat-y（Y轴重复排列）No-repeat（不重复排列，默认值）

BODY{background-repeat:

repeat-x;}

BODY{background-repeat:

No-repeat;}

background-attachment设定背景图片是否卷动，不可继承，用于所有元

scroll（随网页卷动，默认值）fixed（不随网页卷动）

BODY{background-attachment:

fixed;}

background-position设定背景图片或背景颜色开始显示的位置，不可继承，用于块级元和可替换元

top,buttom,left,right,center（用关键字）

70px10px（用长度值）

50%30%（用百分比）

BODY{background-position:

righttop;}

BODY{background-position:

50px10px;}

BODY{background-position:

20%50%;}

background定义背景综合属性，不要求顺序，各属性值以空格分开

BODY{background:

#ffcc00url（bg.jpg）fixedcenter}

字型类

font-family设置字型属性，取值可以是任何字型名称，缺省为浏览器内定字型，可以设多个以逗号（,）分开，有空格的英文字型可用单引号或双引号括起来。

可继承，用于所有元

P{font-family:

宋体,楷体,黑体,"TimeNewRom";}

font-style设定字型样式，可继承，用于所有元

Normal（正常，默认值）italic（斜体）objlique（直斜体）

P{font-style:

italic;}

font-variant需要特定的字体配合，可继承，用于所有元

Normal（默认）small-caps（如果是中文字型则将字型缩小显示，如果是英文则全部改为较小的大写）

H3{font-variant:

small-caps;}

font-weight设定字体粗细，可继承，用于所有元

Normal（默认）boldbolderlighter100200...900

由于浏览器支持程度不同，一般只用normal和bold两种属性

P{font-weight:

bold;}

font-size设定字体的大小，可继承，用于所有元

绝对大小：

xx-smallx-smallsmallmedium（默认值）largex-largexx-large;

相对大小：

largersmaller

数字表示可用单位：

磅（pt）,像素（px）,英寸（in）,厘米（cm）;

亦可用百分比表示

H2{font-size:

36pt;}

P{font-size:

200%;}

font设定字型的综合属性，必须含有字体名称和字体大小，顺序如下

{font-stylefont-variantfont-weightfont-size/line-heightfont-family;}P{bold12pt/14ptimpact,Arial;}

文字类

letter-spacing设定文字间距，默认为0，可为负值，可继承，用于所有元

P{letter-spacing:

5pt;}

text-decoration设定文字加上下划线、删除线等效果，不可继承，用于所有元

none（无，默认值）underline（下划线）overline（上划线）line-through（删除线）

vertical-align设定文字或图片垂直方向的对齐方式

baseline（默认值）sub（下标）super（上标）top（垂直向上对齐）middle（垂直居中）bottom（垂直向下对齐）百分比（相对于行高，可为负值）

text-transform转换英文字母大小写，可继承，用于所有元

none（默认值）capitalize（首字母大写）uppercase（所有英文字母大写）lowercase（所有英文字母小写）

text-align设置文字的水平对齐方式，可继承，用于块级元

left（左对齐）right（右对齐）center（水平居中）justify（左右对齐）

text-indent设定标记元素内文字的首行缩进或配合margin-left属性设定首行凸排，可为负值，可继承，用于块级元

line-height设定行高，声明方式有标准行高、固定值表示法、百分比行高（相对于字体尺寸）、字型大小比例行高等，可继承，用于所有元

white-space设定空白符处理方式，不可继承，用于块级元

pre（不忽略块中的空白符）nowrap（文字不在块中自动换行）normal（忽略空白符，默认值）

列表类

list-style-type有序列表的编号方式（供标记使用），可继承

none:

无编号decimal:

阿拉伯数字lower-roman:

小写罗马数字upper-roman:

大写罗马数字lower-alpha:

小写英文字母upper-alpha:

大写英文字母

list-style-type无序列表的符号样式（供使用），可继承

none:

无符号disc:

实心圆符号circle:

空心圆符号square:

实心方形符号

list-style-image无序列表的自定义符号样式，可继承

url（图片名称）none（默认值）

UL{list-style-imag:

url（dd.gif）;}

list-style-position设置列表清单符号缩排属性，可继承

outside（凸排，默认值）inside（缩排）

UL{list-style-imag:

url（dd.gif）;list-style-position:

outside;}

list-style列表清单项目的综合设定，属性之间用空格隔开

UL{list-style-imag:

url（dd.gif）inside;}

边界及其相关类

margin标记元素边界值的综合设定，可为负值，不可继承，用于所有元。

应用于块级元时，纵向相邻边界被压缩/重叠；应用于内联元时，不影响文本的行高。

亦可以用margin-top、margin-right、margin-bottom、margin-left分开设定各边的边界。

声明4个值，其顺序为上、右、下、左边界，如：

DIV{margin:

12pt15pt20pt16pt;}

声明3个值，其顺序为上、右、下，缺少的左边界取其对边（右），如：

DIV{margin:

12pt15pt16pt;}

声明2个值，其顺序为上、右，缺少的下、左边界取其对边，如：

DIV{margin:

12pt15pt;}

声明1个值，则4个边界同一个值，如：

DIV{margin:

15pt;}

padding设定标记内容与标记边框之间的留白的综合设定，不能为负值，不可继承，用于所有元。

也可分开设定padding-top、padding-right、padding-bottom、padding-left各值。

border-width标记元素边框宽度的综合设定。

也可分开设定border-top-width、border-right-width、border-bottom-width、border-left-width各值

border-color标记元素边框颜色的综合设定（规则类似于margin属性）。

颜色取值见color属性。

也可分开设定border-top-color、border-right-color、border-bottom-color、border-left-color各值

border-style标记元素边框样式的综合设定（规则类似于margin属性）。

边框样式有none（默认值）,dotted,dashed,solid,double,goove,ridge,inset,outset等。

也可分开设定border-top-style、border-right-style、border-bottom-style、border-left-style各值

border标记元素4个边框的综合设定，可以分别声明边框宽度、边框样式、和边框颜色

DIV{border:

5ptsolid#ff0000;}

width设定标记元素的宽度

height设定标记元素的高度

float设定标记元素与文字间的相对位置（文字绕排方式），不可继承，用于所有元

none:

以默认方式显示

left:

标记元素靠左，文字在右边绕排

right:

标记元素靠右，文字在左边绕排

clear设定标记元素与文字间的相对位置（与float不同的是标记元素两边都不绕排），不可继承，用于所有元

none:

以默认方式显示；

left:

标记元素靠左，右边无文字绕排；

right:

标记元素靠右，左边无文字绕排；

定位

z-index设定标记元素的堆叠层次，取值为整数，也可以是负数，数值大的在上层，不可继承，用于定位元

visibility设定标记元素是否可见，不可继承，用于所有元

inherit:

取默认值visible:

可见hidden:

不可见（隐藏）collapse

position设定定位样式，不可继承，用于所有元

static（默认值）relative（相对定位）absolute（绝对定位）fixedinherit

目前最常用到的DIV相关属性有：

height,width,list-style,UL,LI,margin,float,background,padding等…一小段例子：

#banner{height:

90px;width=650px;list-style:

none;margin-top:

10px;margin-left:

10px;float:

left;background:

#DADADA;margin-bottom:

10px;background-image:

url（../image/adv1.jpg）;}

height:

90px;//高度

width：

650px;//宽度

list-style:

none;//设置该行文本不显示最前面的小黑点，若想显示设置list-style:

inside

margin-top:

10px;//设置上边距为10px;其他下左右同理。

float：

left//为整个元素靠左对齐。

background-image:

url（../image/adv1.jpg）;//背景图片。

font-family:

verdana;字体

font-size:

12px;字体大小

background:

#33ffdd;背景颜色，颜色值是#cccccc;可以简写为#ccc;或者是#ddccee;这样简写为#dce;当从左到右的rrggbb值其中rr,gg,bb值三组都一样时就能简写

background:

#33ffddurl（aa.gif）repeat-xlefttop;背景图，其中repeat-x为水平重复lefttop为水平向左，垂直向上

border:

1pxsolid#fff;边框1px实线颜色值

float:

left;浮动向左，浮动的意思就是因为DIV只有一行，没有列，如果要想有一行二列，就是为这二个DIV设置浮动，才可以有列出来。

以下是一行三列示例：

200px;height:

30px;background:

#f00;margin:

5px;float:

left;">