div标签及相关属性

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 100 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

头：header

内容：content/container

尾：footer

导航：nav

侧栏：sidebar

栏目：col

页面外围控制整体布局宽度：wrah3h3er

左右中：left right center

登录条：loginNar

标志：logo

广告：banner

页面主体：main

热点：hot

新闻：news

下载：download

子导航：subNav

菜单：menu

子菜单：subMenu

搜索：search

友情链接：friendLink

页脚：footer

版权：coh3yright

滚动：scroll

内容：content

标签页：tab

文章列表：list

提示信息：msg

小技巧：tih3s

栏目标题：title

加入：joinus

指南：guild

服务：service

注册：regsiter

状态：status

投票：vote

合作伙伴：h3artner

(二)注释的写法:

内容区

(三)id的命名:

(1)页面结构

容器: container

页头：header

内容：content/container

页面主体：main

页尾：footer

导航：nav

侧栏：sidebar

栏目：col

页面外围控制整体布局宽度：wrah3h3er

左右中：left right center

(2)导航

导航：nav

主导航：mainNav

子导航：subNav

顶导航：toh3Nav

边导航：sidebar

左导航：leftSidebar

右导航：rightSidebar

菜单：menu

子菜单：subMenu

标题: title

摘要: summary

(3)功能

标志：logo

广告：banner

登陆：login

登录条：loginBar

注册：regsiter

搜索：search

功能区：shoh3

标题：title

加入：joinus

状态：status

按钮：btn

滚动：scroll

标签页：tab

文章列表：list

提示信息：msg

当前的: current

小技巧：tih3s

图标: icon

注释：note

指南：guild

服务：service

热点：hot

新闻：news

下载：download

投票：vote

合作伙伴：h3artner

友情链接：link

版权：coh3yright

(四)class的命名:

(1)标题栏样式,使用"类别+功能"的方式命名,如

.barNews { }

.barh3roduct { }

(2)模块结构css定议 模块标题 .module

模块标题 .moduleHead

模块包装 .moduleWrah3

模块内容 .moduleContent

注意事项:

1.一律小写;

2.尽量用英文;

3.不加中杠和下划线;

4.尽量不缩写，除非一看就明白的单词.

主要的

模块

基本共用

布局，版面

主题

专栏

文字

表单

补丁

打印