Css div 常用CSS标签及属性

Css+div总结的一些常用CSS标签及属性

CSS中的长度

绝对单位：几乎不用在网页中

in 英寸 1in = 2.54cm

cm 厘米 1cm = 0.394in

pt 磅 1in = 72pt

pc pica 1in = 6pc

相对单位：较常用

em 1em = 相应字体的font-size值

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

px 最为常用的

CSS中的元素分类

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

none(设定为不显示在屏幕上)

block(块级元，包括 P,H1-H6,list,div,body)

inline(内联元，包括 a,em,span)

list-item(列表元，如 LI)

颜色与背景类

color 设置文字颜色

#rgb #rrggbb rgb(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();}

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(用关键字)

70px 10px(用长度值)

50% 30%(用百分比)

BODY{background-position:right top;}

BODY{background-position:50px 10px;}

BODY{background-position:20% 50%;}

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

BODY{background:#ffcc00 url() fixed center}

字型类

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

P{font-family:宋体,楷体,黑体,"Time New Rom";}

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

Normal(正常，默认值) italic(斜体) objlique(直斜体)

P{font-style:italic;}

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

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

H3{font-variant:small-caps;}

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

Normal(默认) bold bolder lighter 900

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

P{font-weight:bold;}

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

绝对大小：xx-small x-small small medium（默认值） large x-large xx-large;

相对大小：larger smaller

数字表示可用单位：磅(pt),像素(px),英寸(in),厘米(cm);

亦可用百分比表示

H2{font-size:36pt;}

P{font-size:200%;}

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

{font-style font-variant font-weight font-size /line-height

font-family;} P{bold 12pt/14pt impact,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();}

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

outside(凸排，默认值) inside(缩排)

UL{list-style-imag:url(); list-style-position:outside;}

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

UL{list-style-imag:url() inside;}

边界及其相关类

margin 标记元素边界值的综合设定，可为负值，不可继承，用于所有元。应用于块级元时，纵向相邻边界被压缩/重叠；应用于内联元时，不影响文本的行高。

亦可以用margin-top、margin-right、margin-bottom、margin-left分开设定各边的边界。 声明4个值，其顺序为上、右、下、左边界，如：DIV{margin:12pt

15pt 20pt 16pt;}

声明3个值，其顺序为上、右、下，缺少的左边界取其对边（右），如：DIV{margin:12pt 15pt 16pt;}

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

15pt;}

声明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:5pt solid #ff0000;}

width 设定标记元素的宽度

height 设定标记元素的高度

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

none:以默认方式显示

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

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

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

none:以默认方式显示；

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

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

定位

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

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

inherit:取默认值 visible:可见 hidden:不可见（隐藏） collapse

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

static(默认值) relative(相对定位) absolute(绝对定位) fixed inherit

目前最常用到的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/);}

height:90px; // 高度

width：650px; // 宽度

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

list-style:inside

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

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

background-image:url(../image/); // 背景图片。

font-family:verdana;字体

font-size:12px; 字体大小

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

background:#33ffdd url() repeat-x left top; 背景图，其中repeat-x为水平重复 left top 为水平向左，垂直向上

border:1px solid #fff; 边框1px 实线 颜色值

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

由这个小例子就可以知道，如果想象表格一个，就一个套一个，跟表格一样，关键能让DIV有列出来就好办了。

height:20px; 高度20px;

text-align:left; 文本对齐方式向左,还有居中，还有向右

font-weight:bold; 字体加粗

width:20px; 这是宽度

line-height:24px; 这是行高

overflow:auto; 滚动条自动，意思就是当内容越过设定的高度或者宽度时就会出现滚动条，这个适合任何地方，包括单元格，文本域，DIV， margin:3px 3px 3px 3px; 这个有多种写法四个都写的话，意思就是对象的外边距都为3px的意思，四个都写的时候顺序是 上、右、下、左 当四个都一样时可以简写为maring:3px; margin:3px 6px; 当只有二个时意思就是上下外边距为3px，左右外边距为6px;

padding:3px 3px 3px 3px; padding是内边距其他意思跟margin一样

color:对象颜色，适合用文本，表单，任何对象，img不适用.

img { border:0px;}意思是图像边框为0px，因为在有些情况下默认设置时有时候图像会有1px的边框,所以这个在默认设置是要设置的。

body { font-family:verdana; font-size:12px; background:#59606A

url(images/main_) repeat-x; margin:0px; padding:0px;}

form,input,select,submit,textarea { font-family:arial; font-size:12px;

padding:0px; margin:0px;}* html form { height:1%;}

img { border:0px;}

上面这段是默认设置，根据情况有所不同，默认设置意思就是当有网页内容时上面所设置的参数比如字体， 颜色，背景，背景颜色等等，还有外边距，内边距的设置，这些不是必要的，但是如果设置一些默认设置可以精简代码。

.t11-en-03 { font-size:12px!important; font-size:11px; }

!important这个意思是(更重要)，当写上这个时，这个!important前面的参数设置在除IE外才有效果，后面的是在IE内核的浏览器的效果，适合于任何参数如：

.cor2 { color:#fff;!important; color:#f00; } 意思就是当在除IE外的浏览器上颜色是白色，在IE上的颜色是红色

以下是链接的设置：

a:link,a:visited { text-decoration:none;} 这个是简写，就是链接跟点击后的状态为一样时可以这样子写

a:hover { text-decoration:underline;} 这个是鼠标移上去的效果

text-decoration:underline; 这个是下划线的设置，这里是有下划线如果underline改为none;是没有下划线的意思在这里是给整体的网页设置链接样式

以下这个是给一个特定的对象设置

.aa65 a:link,.aa65 a:visited { text-decoration:none;}

.aa65 a:hover { text-decoration:underline;}

上面这里有.aa65意思就是说当一个对象绑定的.aa65的class时，里面的链接就会象上面设置的效果

DIV常用样式

1.定义DIV

分析一个典型的定义div例子：

#sample{ MARGIN: 10px 10px 10px 10px;

PADDING:20px 10px 10px 20px;

BORDER-TOP: #CCC 2px solid;

BORDER-RIGHT: #CCC 2px solid;

BORDER-BOTTOM: #CCC 2px solid;

BORDER-LEFT: #CCC 2px solid;

BACKGROUND: url(images/bg_) #FEFEFE no-repeat right bottom;

COLOR: #666;

TEXT-ALIGN: center;

LINE-HEIGHT: 150%; WIDTH:60%; }

说明如下：

层的名称为sample，在页面中用