下载文档原格式
DIV归纳1.文件中只调用过一次的用id（占位的可以用class）2.反复用的用class3.尽量使用继承父级属性4.文字部分两端用<p></p>5.标题用<h></h>6.使用<dl><dt><dd></dd></dt></dl>设置属性7.空连接不要连接#8.尽量减少多余代码9.尽量减少css中新建样式10.文档中不要出现border(边)11.图片标签alt="xx"（无意义的图片标签使用alt=""）12.换行用<br></br>13.翻转的图片name要用有意义的名称14.所有id名要有意义15.“<”要用“&glt”代替16.空格用“ ”代替17.div要有结尾，例如<div id="index"> <!-- /index --></div>18.在文件里不能出现物理属性值19.图片必须有长和宽。
例如：<img src="images/localnavi_07.gif" width="3" height="10" alt="" />20.如果需要居中显示，要在外面设一个居中的，里面的要设置居左或居右，否则在火狐浏览器中无法正常显示21.javascript要在外部调用22.<body>中不要出现其他属性，如需要则在外部调用。
DIV+CSS定义及优势Div+css 是什么?Div+css 是⼀种⽬前⽐较流⾏的⽹页布局技术Div 来存放需要显⽰的数据(⽂字，图表..) , css 就是⽤来指定怎样显⽰，从⽽做到数据和显⽰相互的效果Div+css 优势表现和内容相分离代码简洁，提⾼页⾯浏览速度易于维护和改版提⾼搜索引擎对⽹页的索引效率我们可以简单的这样理解div+css:div 是⽤于存放内容(⽂字,图⽚,元素)的容器。
css 是⽤于指定放在div中的内容如何显⽰,包括这些内容的位置和外观.2、“⽆意义”的HTML元素div和spanHTML只是赋予内容的⼿段，⼤部分HTML标签都有其意义（例如，标签p创建段落，h1标签创建标题等等）的，然⽽div和span标签似乎没有任何内容上的意义，听起来就像⼀个泡沫做成的锤⼦⼀样⽆⽤。
但实际上，与CSS结合起来后，它们被⽤得⼗分⼴泛。
你所需要记住的是span和div是“⽆意义”的标签。
它们的存在纯粹是应⽤样式，所以当样式表失效时它就没有任何的作⽤它们被⽤来组合成⼀⼤块的HTML代码并赋予⼀定的信息，⼤部分⽤类属性class和标识属性id与元素联系起来。
span和div的不同之处在于span是内联的，⽤在⼀⼩块的内联HTML中。
⽽div（division）元素是块级的（简单地说，它等同于其前后有断⾏），⽤于组合⼀⼤块的代码，为HTML ⽂档内⼤块的内容提供结构和背景的元素，可以包含段落、标题、表格甚⾄其他部分，这使div便于建⽴不同集成的类。
div的起始标签和结束标签之间的所有内容都是⽤来构成这个块的，其中所包含元素的特性由div标签的属性来控制，或者是通过使⽤样式表格式化这个块来进⾏控制3、页⾯布局的盒⼦模型（1）盒⼦模型的相关属性margin（外边距/边界）border（边框）padding（内边距/填充）我们看图理解⼀下各属性作⽤：以上属性⼜分为上、右、下、左四个⽅向问题：页⾯元素的宽度width、⾼度height如何计算？答案：元素的实际占位尺⼨ = 元素尺⼨ + padding + 边框宽度⽐如：元素实际占位⾼度 = height属性 + 上下padding + 上下边框宽度（2）盒模型的层次关系我们通过⼀个经典的盒模型3D⽴体结构图来理解，如图：从上往下看，层次关系如下：第1层：盒⼦的边框(border)，第2层：元素的内容(content)、内边距(padding)第3层：背景图(background-image)第4层：背景⾊(background-color)第5层：盒⼦的外边距(margin)从这个层次关系中可以看出，当同时设置背景图和背景⾊时，背景图将在背景⾊的上⽅显⽰4、声明盒⼦模型的CSS属性例如：1 <html>2 <head>3 <title>盒⼦模型</title>4 <style>5 #box { /* ID为box的盒⼦模型 */6 width:200px; /* 盒⼦的宽度为200px */7 height:200px; /* 盒⼦的⾼度为200px */8 border:5px solid #ccc; /* 盒⼦边框实线各边宽5px */9 padding:10px; /* 盒⼦的4个内填充为10px */10 margin:20px; /* 盒⼦的4个外边距为10px */11 }12 </style>13 </head>14 <body>15 <div id="box"> <!-- 使⽤DIV声明⼀个盒⼦ -->16 内容区 <!-- 盒⼦内容可再嵌套个盒⼦ -->17 </div>18 </body>19 </html>⽔平居中和垂直居中⽔平居中包含两种情况：块级元素的⽔平居中：margin:0px auto;⽂字内容的⽔平居中：text-align: center;垂直居中：常见的单⾏⽂字的垂直居中可设置⽂字所在⾏的height与⾏⾼样式属性⼀致，⽐如：div{width: 400px;height: 400px;line-height: 400px;/*⾏⾼与div⾼度⼀致*/}5、和页⾯布局有关的CSS属性1 #box { /* 声明ID选择器，名称为box */2 position:absolute; /* 设置层的定位为绝对定位 */3 top:30px; /* 层距离顶点纵向坐标的距离为30个像素 */4 left:100px; /* 层距离左点横向坐标的距离为100个像素 */5 width:300px; /* 设置层的宽度为300个像素 */6 height:150px; /* 设置层的⾼度为150个像素 */7 overflow:auto; /* 当内容超出层的范围时显⽰滚动条 */8 z-index:1; /* 设置层的先后顺序为覆盖关系 */9 visibility:visible; /* ⽆论⽗层是否可见，⼦层都可见 */10 }6、盒⼦区块框的定位层模型--绝对定位如果想为元素设置层模型中的绝对定位，需要设置position:absolute(表⽰绝对定位)，这条语句的作⽤将元素从⽂档流中拖出来，然后使⽤left、right、top、bottom属性相对于其最接近的⼀个具有定位属性的⽗包含块进⾏绝对定位。
第三章【DIV】div——block块状对象（块级元素），显示为一个方块，默认状态下占据一行，其他对象将在下一行显示。
in-line行间对象（内联元素），允许下一个对象与之共享一行进行显示。
【XHTML标签与功能】-----------结构标签-----------html 根元素head 头部区域body 主体区域div 区块定义标签span 行间区块定义标签-----------Meta信息-----------DOCTYPE 文档类型指定title 浏览器标题栏link 链接到扩展资源meta Meta信息vstyle 样式表区域-----------文本控制-----------p 段落h1~h6 标题1~6级strong 加重重点em 重点/强调abbr 定义文本的简写词acronym 定义首字母简写词address 标签联系信息bdo 字母顺序左右反转blockguote 块状引用内容cite 行间引用内容q 行间小型的引用-----------链接-----------a 链接vbase 基础链接类-----------图像和对象-----------img 插入图像area 图像热区细节map 图像热区object 插入对象patam 对象的参数-----------列表-----------ul 无序列表ol 有序列表li 列表项dl 带描述的列表dt 描述列表中的名词dd 描述列表中的描述-----------表格-----------table 表格tr 行td 单元格th 表头tbody 表格主体thead 表格头部tfoot 表格底部col 表格列colgroup 表格列的集合caption 表格的标题-----------表单-----------form 表单区域input 输入框textarea 文本域select 下拉列表option 下拉列表项optgroup 下拉列表项集合button 按钮label 标签fieldset 标签页legent 标签页的标题-----------脚本-----------script 脚本区域noscript 无法执行脚本的替代-----------表现-----------b 加粗i 斜体tt 打字机字体sub 下标sup 上标big 加大small 减小hr 分割线【定位】--------------------------------- 【两列右侧自适应】--------------------------------- #left{background-color:#999;border:2px #000 solid;width:100px;height:300px;float:left;}#right{background-color:#999;border:2px #000 solid;height:300px;}---------------------------------绝对定位position:static;（默认）absolute;（漂浮，可使用top，right，bottom，left）relative;---------------------------------【三列，左右两列固定，中间列自适应】主要在blog中应用，大型网站设计较少使用。
css命名及书写规范CSS命名规范一．文件命名规范全局样式：global.css；框架布局：layout.css；字体样式：font.css；链接样式：link.css；打印样式：print.css；二．常用类/ID命名规范页眉：header内容：content容器：container页脚：footer版权：copyright导航：menu主导航：mainMenu子导航：subMenu标志：logo标语：banner标题：title侧边栏：sidebar图标：Icon注释：note搜索：search按钮：btn登录：login链接：link信息框：manage……常用类的命名应尽量以常见英文单词为准，做到通俗易懂，并在适当的地方加以注释。
对于二级类/ID命名，则采用组合书写的模式，后一个单词的首字母应大写：诸如―搜索框‖则应命名为―searchInput‖、―搜索图标‖命名这―searchIcon‖、―搜索按钮‖命名为―searchBtn‖……CSS书写规范及方法一. 常规书写规范及方法1. 选择DOCTYPE：XHTML 1.0 提供了三种DTD声明可供选择：过渡的(Transitional):要求非常宽松的DTD，它允许你继续使用HTML4.01的标识(但是要符合xhtml的写法)。
完整代码如下：<!DOCTYPE html PUBLIC ―-//W3C//DTD XHTML 1.0 Transitional//EN‖―/TR/xhtml1/DTD/xhtml1-transitional.dtd―>严格的(Strict):要求严格的DTD，你不能使用任何表现层的标识和属性，例如<br>。
完整代码如下：<!DOCTYPE html PUBLIC ―-//W3C//DTD XHTML 1.0 Strict//EN‖―/TR/xhtml1/DTD/xhtml1-strict.dtd―>框架的(Frameset):专门针对框架页面设计使用的DTD，如果你的页面中包含有框架，需要采用这种DTD。
DIV+CSS布局使⽤的个⼈⼼得⽹站制作离不开⽹页布局就是说DIV+CSS都会涉及到的，以下是⼯作中总结的⼀些技巧，留下备⽤，也可以学习。
1、ul：默认的ul的margin和padding不是0，如果在导航中⽤到了左浮动的li，往往会把外部的div撑⼤，导致页⾯变形，改成：ul{margin:0px; padding:0px;}2、img：（1）这⾥牵涉的不同浏览器的问题，ie6⾥显⽰的图⽚height总是要⼤于准确值，这⾥就需要我们记住下⾯这⼀点 img{ display：block}；（2）页⾯中最好不要⽤⼤块背景，能平铺的要平铺，否则加载起来会很慢，也不利于以后的优化和扩展，当然也有些⼤的⽹站，现在都尽量把背景统⼀放到⼀张图⽚上，⽤background-postion来取得背景。
（3）最好的格式就是gif格式，即确保了背景透明，在ie6中⼜不会有阴影，有时gif图⽚会有锯齿，这就需要我们保存成web格式，设置⼀下matter，matter的值⽤背景颜⾊的值越相近越好。
3、overflow：有时⼀些公司的注册协议都是很长，这就⽤到了overflow，可以把div的style⾥加上这个：overflow：auto4、float：有时候⼀些div会挤到页⾯的上⽅，这⾥可能就是浮动引起的，可以加上clear：both。
5、div：height等于1px的div，在ie6中可能并不是1px，在这个div的style⾥加上font-size：1px;这样就ok了。
6、id和class：当⼀个样式在页⾯中多次使⽤时，不要⽤id，要⽤class，要使⽤js的时候，样式最好不要⽤id，因为id要留给js使⽤。
7，link：.link：link{}、.link：visited{}、.link：hover{}、.link：active{}。
有⼀点，visited与hover的顺序⼀定不能倒换，否则ie6中会⼤⼤的问题。
Css+div总结的一些常用CSS标签及属性CSS中的长度绝对单位：几乎不用在网页中in 英寸 1in = 2.54cmcm 厘米 1cm = 0.394inpt 磅 1in = 72ptpc 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) nonebody{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(用关键字)70px 10px(用长度值)50% 30%(用百分比)BODY{background-position:right top;}BODY{background-position:50px 10px;}BODY{background-position:20% 50%;}background 定义背景综合属性，不要求顺序，各属性值以空格分开BODY{background:#ffcc00 url(bg.jpg) fixed center}字型类font-family 设置字型属性，取值可以是任何字型名称，缺省为浏览器内定字型，可以设多个以逗号(,)分开，有空格的英文字型可用单引号或双引号括起来。
文件规范1. html, css, js, images文件均归档至<系统开发规范>约定的目录中;2. html文件命名: 英文命名, 后缀.htm. 同时将对应界面稿放于同目录中, 若界面稿命名为中文, 请重命名与html文件同名, 以方便后端添加功能时查找对应页面;3. css文件命名: 英文命名, 后缀.css. 共用base.css, 首页index.css, 其他页面依实际模块需求命名.;4. Js文件命名: 英文命名, 后缀.js. 共用common.js, 其他依实际模块需求命名.css书写规范1. 编码统一为utf-8;2. 协作开发及分工: i会根据各个模块, 同时根据页面相似程序, 事先写好大体框架文件, 分配给前端人员实现内部结构&表现&行为; 共用css文件base.css由i书写, 协作开发过程中, 每个页面请务必都要引入, 此文件包含reset及头部底部样式, 此文件不可随意修改;3. class与id的使用: id是唯一的并是父级的, class是可以重复的并是子级的, 所以id仅使用在大的模块上, class可用在重复使用率高及子级中; id原则上都是由我分发框架文件时命名的, 为JavaScript预留钩子的除外;4. 为JavaScript预留钩子的命名, 请以js_ 起始, 比如: js_hide, js_show;5. class与id命名: 大的框架命名比如header/footer/wrapper/left/right之类的在2中由i统一命名.其他样式名称由小写英文& 数字& _ 来组合命名, 如i_comment, fontred, width200; 避免使用中文拼音, 尽量使用简易的单词组合; 总之, 命名要语义化, 简明化.6. 规避class与id命名(此条重要, 若有不明白请及时与i沟通):a, 通过从属写法规避, 示例见d;b, 取父级元素id/class命名部分命名, 示例见d;c, 重复使用率高的命名, 请以自己代号加下划线起始, 比如i_clear;d, a,b两条, 适用于在2中已建好框架的页面, 如, 要在2中已建好框架的页面代码<div id=”mainnav”></div>中加入新的div元素,按a命名法则: <div id=”mainnav”><div class=”firstnav”>…</div></div>,样式写法: #mainnav .firstnav{…….}按b命名法则: <div id=”mainnav”><div class=”main_firstnav”>…</div></div>,样式写法: .main_firstnav{…….}7. css属性书写顺序, 建议遵循布局定位属性–>自身属性–>文本属性–>其他属性. 此条可根据自身习惯书写, 但尽量保证同类属性写在一起. 属性列举: 布局定位属性主要包括: margin ＆padding ＆float（包括clear）＆position（相应的top,right,bottom,left）＆display ＆visibility ＆overflow等；自身属性主要包括: width & height & background & border; 文本属性主要包括：font ＆color ＆text-align ＆text-decoration ＆text-indent等；其他属性包括: list-style(列表样式) ＆vertical-vlign ＆cursor ＆z-index(层叠顺序) ＆zoom等. 我所列出的这些属性只是最常用到的, 并不代表全部;8. 书写代码前, 考虑并提高样式重复使用率;9. 充分利用html自身属性及样式继承原理减少代码量, 比如:<ul class=”list”><li>这儿是标题列表<span>2010-09-15</span></ul>定义ul.list li{position:relative} ul.list li span{position:absolute; right:0}即可实现日期居右显示10. 样式表中中文字体名, 请务必转码成unicode码, 以避免编码错误时乱码;11. 背景图片请尽可能使用sprite技术, 减小http请求, 考虑到多人协作开发, sprite按模块制作;12. 使用table标签时(尽量避免使用table标签), 请不要用width/ height/cellspacing/cellpadding等table属性直接定义表现, 应尽可能的利用table自身私有属性分离结构与表现, 如thead,tr,th,td,tbody,tfoot,colgroup,scope; (cellspaing及cellpadding的css 控制方法: table{border:0;margin:0;border-collapse:collapse;} table th, table td{padding:0;} , base.css文件中我会初始化表格样式)13. 杜绝使用<meta http-equiv=”X-UA-Compatible” content=”IE=7″ /> 兼容ie8;14. 用png图片做图片时, 要求图片格式为png-8格式,若png-8实在影响图片质量或其中有半透明效果, 请为ie6单独定义背景:_background:none;_filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod= crop, src=’img/bg.png’);15. 避免兼容性属性的使用, 比如text-shadow || css3的相关属性;16. 减少使用影响性能的属性, 比如position:absolute || float ;17. 必须为大区块样式添加注释, 小区块适量注释;18. 代码缩进与格式: 建议单行书写, 可根据自身习惯, 后期优化i会统一处理;命名时需要注意的点：- 规则命名中，一律采用小写加中划线的方式，不允许使用大写字母或_- 命名避免使用中文拼音，应该采用更简明有语义的英文单词进行组合- 命名注意缩写，但是不能盲目缩写，具体请参见常用的CSS命名规则- 不允许通过1、2、3等序号进行命名- 避免class与id重名- id用于标识模块或页面的某一个父容器区域，名称必须唯一，不要随意新建id- class用于标识某一个类型的对象，命名必须言简意赅。
操作系统版本：Windows 7浏览器版本：IE6,IE7,IE8,Firefox 3.6.2,Safari 4.0.4,Chrome 5.0.356.2 dev 受影响的浏览器：所有浏览器.经常讲到css选择器命名规则，其实不只是在团队合作基础上来讲这个，每个浏览器,IE产品，火狐，苹果，谷歌，都会因为命名不规范会产生不同样式..一、关于选择器的命名W3C CSS2.1的 4.1.3 节中提到：标识符（包括选择器中的元素名，类和ID）只能包含字符[a- zA-Z0-9]和ISO 10646字符编码U+00A1及以上，再加连字号（-）和下划线（_）；它们不能以数字，或一个连字号后跟数字为开头。
它们还可以包含转义字符加任何ISO 10646字符作为一个数字编码。
由于设计到的字符很多，本文只针对字符[a-zA-Z0-9]，再加连字号（-）和下划线（_）进行讨论。
关于CSS中允许使用的字符和大小写信息，请参考W3C CSS2.1的4.1.3节二、差异及可能产生的问题在W3C CSS2.1说明文档中，只提到选择器标识符不能以数字，或一个连字号后跟数字为开头。
除此之外，没有相关的说明。
那么各浏览器下的表现是否遵循这一规则呢？请观察如下代码：12 3 4 5 6 7 8 9 1 0 1 1 1 2 div{width:160px;height:20px;font-size:12px;line-height: 20px;background- color:yellow;}.f-1_f_{background-color:#d4d4d4;}.1{background-color:#A8A8A8;}.123456{background-color:#d4d4d4;}.2demo{background-color:#A8A8A8;}.2-demo {background-color:#d4d4d4;}.2_demo {background-color:#A8A8A8;}13 14 15 16 17 18 19 2 0 2 1 2 2 2 3 2 4 2 5 2 6 2 7 2 8 2 9 3 0 3 1 3 2 3 3 3 4 .-demo{background-color:#d4d4d4;}.-2demo {background-color:#A8A8A8;} ._demo {background-color:#d4d4d4;} ._2demo {background-color:#A8A8A8;} .-{background-color:#d4d4d4;}.---{background-color:#A8A8A8;}._{background-color:#d4d4d4;} .——{background-color:#A8A8A8;}._-{background-color:#d4d4d4;}.-_{background-color:#A8A8A8;}.-{background-color:#d4d4d4;}.---_{background-color:#A8A8A8;}.---123{background-color:#d4d4d4;} .__123{background-color:#A8A8A8;}3536373839441421 23 45 67 89 1011 1213 1415 1617 1819 20<div class ="f-1_f_">字母开头</div ><div class ="1">单个数字</div ><div class ="123456">多个数字</div > <div class ="2demo">数字开头 + [a-z][A-Z]</div > <div class ="2-demo">数字 + "-" 开头</div > <div class ="2_demo">数字 + "_" 开头</div > <div class ="-demo">连字符(-)开头 + [a-z][A-Z]</div > <div class ="-2demo">连字符(-) + 数字 开头</div > <div class ="_demo">下划线(_)开头 + [a-z][A-Z]</div > <div class ="_2demo">下划线(_) + 数字 开头</div > <div class ="-">单个连字符(-)</div > <div class ="---">多个连字符(-)</div > <div class ="_">单个下划线(_)</div ><div class =" ">多个下划线(_)</div ><div class="_-">下划线(_) + 连字符(-)</div><div class="-_">连字符(-) + 下划线(_)</div><div class=" -">多个下划线(_) + 连字符(-)</div> <div class="---_">多个连字符(-) + 下划线(_)</div><div class="---123">多个连字符(-) + 数字</div><div class=" 123">多个下划线(_) + 数字</div>看看各浏览器下面的结果观察上表，分析各浏览器下的表现，总结如下从上面看到，我们可以直观的了解到选择器的命名在各浏览器下的支持情况有所不同。
利于SEO的DIV+CSS的命名规则小结来源：互联网作者：佚名时间：10-15 16:12:50 【大中小】点评：由于项目中编写文档结构、编写CSS的人员较多，并与程序员协同工作，所以就需要统一开发规范，根据XHTMl和CSS编织的规范和大多人的习惯，整理了以下针对本项目的一个简单的开发规范.-一、CSS文件及样式命名1、CSS文件命名规范全局样式：global.css；框架布局：layout.css；字体样式：font.css；链接样式：link.css；打印样式：print.css；2、CSS样式命名规范本人建议：用字母、_号工、-号、数字组成，必须以字母开头，不能为纯数字。
为了开发后样式名管理方便，大家请用有意义的单词或缩写组合来命名，让同事一看就明白这样式大概是哪一块的，这样就节省了查找样式的时间，例如：头部样式用header，头部左边，可以用header_left或header_l,还有如果是列结构的可以这样——box _1of3 (三列中的第一列)，box_2of3 (三列中的第二列)、box _3of3 (三列中的第三列)，其它的我就不一一举例了，大家按以上规律去命名就好。
下面列出一些常用的命名单词方便大家使用：（以后大家工作过程中慢慢把自己积累的单词都共享出来，那大家的命就会更加统一了，就不会有一义多词的情况了。
）容器：container/box头部：header主导航：mainNav子导航：subNav顶导航：topNav网站标志：logo大广告：banner页面中部：mainBody底部：footer菜单：menu菜单内容：menuContent子菜单：subMenu子菜单内容：subMenuContent搜索：search搜索关键字：keyword搜索范围：range标签文字：tagTitle标签内容：tagContent当前标签：tagCurrent/currentTag标题：title内容：content列表：list当前位置：currentPath侧边栏：sidebar图标：icon注释：note登录：login注册：register列定义：column_1of3 (三列中的第一列)column_2of3 (三列中的第二列)column_3of3 (三列中的第三列)二、id和class的使用及区别我们知道在样式表定义一个样式的时候，可以定义id也可以定义class，例如：ID方法：#test{color:#333333}，在页面中调用<div id="test">内容<div>CLASS方法：.test{color:#333333}，在页面中调用<div class="test">内容<div>id一个页面只可以使用一次，class可以多次引用。
我在页面中用了多个相同id在IE中显示也正常，id和class好象没什么区别，用多个相同id有什么影响吗？页面存在多个相同的ID影响就是不能通过W3的校验。
在页面显示上，目前的浏览器还都允许你犯这个错误，用多个相同ID“一般情况下”也能正常显示。
但是当你需要用JavaScript通过id来控制这个div，那就会出现错误。
id是一个标签，用于区分不同的结构和内容，就象你的名字，如果一个屋子有2个人同名，就会出现混淆；class是一个样式，可以套在任何结构和内容上，就象一件衣服；概念上说就是不一样的：id是先找到结构/内容，再给它定义样式；class是先定义好一种样式，再套给多个结构/内容。
也就是说建议大家在写XHML+CSS时如果是维一的结构定位的就用id，否则就用class吧（这样让出非结构定位的div块的id让程序员自己定义使用）web标准希望大家用严格的习惯来写代码。
三.使用css缩写使用缩写可以帮助减少你CSS文件的大小，更加容易阅读。
常用的css缩写的主要规则：颜色16进制的色彩值，如果每两位的值相同，可以缩写一半，例如：#000000可以缩写为#000;#336699可以缩写为#369;盒尺寸通常有下面四种书写方法:property:value1; 表示所有边都是一个值value1；property:value1 value2; 表示top和bottom的值是value1,right和left的值是value2 property:value1 value2 value3; 表示top的值是value1，right和left的值是value2，bottom的值是value3property:value1 value2 value3 value4; 四个值依次表示top,right,bottom,left方便的记忆方法是顺时针，上右下左。
具体应用在margin和padding的例子如下：margin:1em 0 2em 0.5em;边框(border)边框的属性如下：border-width:1px;border-style:solid;border-color:#000;可以缩写为一句：border:1px solid #000;语法是border:width style color;背景(Backgrounds)背景的属性如下：background-color:#f00;background-image:url(background.gif);background-repeat:no-repeat;background-attachment:fixed;background-position:0 0;可以缩写为一句：background:#f00 url(background.gif) no-repeat fixed 0 0;语法是background:color image repeat attachment position;你可以省略其中一个或多个属性值，如果省略，该属性值将用浏览器默认值，默认值为：color: transparentimage: nonerepeat: repeatattachment: scrollposition: 0% 0%字体(fonts)字体的属性如下：font-style:italic;font-variant:small-caps;font-weight:bold;font-size:1em;line-height:140%;font-family:"Lucida Grande",sans-serif;可以缩写为一句：font:italic small-caps bold 1em/140% "Lucida Grande",sans-serif;注意，如果你缩写字体定义，至少要定义font-size和font-family两个值。
列表(lists)取消默认的圆点和序号可以这样写list-style:none;list的属性如下:list-style-type:square;list-style-position:inside;list-style-image:url(image.gif);可以缩写为一句：list-style:square inside url(image.gif);更多属性写法请参考《CSS样式手册》，在线手册地址：/css/四、明确定义单位，除非值为0忘记定义尺寸的单位是CSS新手普遍的错误。
在HTML中你可以只写width=100，但是在CSS中，你必须给一个准确的单位，比如：width:100px width:100em。
只有两个例外情况可以不定义单位：行高和0值。
除此以外，其他值都必须紧跟单位，注意，不要在数值和单位之间加空格。
五、区分大小写当在XHTML中使用CSS，CSS里定义的元素名称是区分大小写的。
为了避免这种错误，我建议所有的定义名称都采用小写。
class和id的值在HTML和XHTML中也是区分大小写的，如果你一定要大小写混合写，请仔细确认你在CSS的定义和XHTML里的标签是一致的。
六、取消class和id前的元素限定当你写给一个元素定义class或者id，你可以省略前面的元素限定，因为ID在一个页面里是唯一的，class可以在页面中多次使用。
你限定某个元素毫无意义。
例如：div#id1{}可以写成#id1{}这样可以节省一些字节。
七、默认值通常padding和margin的默认值为0，background-color的默认值是transparent。
但是在不同的浏览器默认值可能不同。
如果怕有冲突，可以在样式表一开始就先定义所有元素的margin 和padding值都为0，象这样：* {padding:0;margin:0}或者是针对某元素来定义：ul,li,div,span {padding:0;margin:0}八、CSS的优先级行内样式(inline style) > ID选择符> 样式(class),伪类(pseudo-class)和属性(attribute)选择符> 类别(type)，伪对象(pseudo-element)解释:*内联样式(inline style)：元素的style属性，比如<div style="color:red;"></div> ,其中的color:red;就是行内样式*ID选择符：元素的id属性，比如<div id="content"></div> 可以用ID选择符#content*伪类(pseudo-class)：最常见的是锚(a)伪类，比如a:link,a:visited.*属性选择符(attribute selectors)：比如div[class=demo],含有class为demo的div元素*类别选择器(type selector)：HTML标签选择，比如div .demo,div元素下含有class为demo 的元素*伪对象选择器(pseudo-element selector)：比如div:first-letter,div元素下的第一个单词。
九、不需要重复定义可继承的值CSS中，子元素自动继承父元素的属性值，象颜色、字体等，已经在父元素中定义过的，在子元素中可以直接继承，不需要重复定义，除非是为了更变当前元素样式不使用父元素的属性值，但是要注意，浏览器可能用一些默认值覆盖你的定义。
十.多重CSS样式定义，属性追加重复最后优先原则一个标签可以同时定义多个class，也可以是同一个class中重复定义属性。
