一个网站设计的CSS文件个数最好是1~2个,如果是2个的话可以用一个公共(common)样式和一个主要(main)样式,样式个数少方便修改管理,出现问题能很快找出问题所在。
1.样式的规范性:
a)命名:最好用英文缩写,不会英文可以用Google翻译,并把常用的样式命名记下来,如:头部:head或header,中部:main或mainbody,底部用foot或footer。例:
<body>
<div id="header">头部内容</div>
<div id="main">中间内容</div>
<div id="footer">底部内容</div>
</body>
然后,可以继续在这三大块里面继续写其他的DIV。
b)格式书写规范:DIV无非就是层层嵌套,层层之间要对好关系,让人看起来简洁明了,例:
<body> <div id="header">头部内容</div> <div id="main"> <div class=”m_left”>左边部分</div> <div calss=”m_right”> <div class=”right_top”>右边上部分</div> <div calss=”right_middle”> <div class=”other”>其他部分</div> </div> </div> </div> <div id="footer">底部内容</div> </body>
也就是每个DIV收尾在垂直位置上对其,子DIV适当后移空出一部分出来。
C)简洁明了:
①样式命名缩写:如想往左浮动:.fl{float:left;}; 宽度200:w200{width:200px},这些可以根据习惯。
②样式属性简洁:有时候有多个子属性的时候就可以合并,例
.fl{background:url(index.jpg);background-color:#999933;background-position:left;background-repeat:repeat-x;},
可以简写成 .fl{background:#999933 url(index.jpg) left repeat-x;}
③样式名称合并:有时候有多个样式需要设置float和border属性就可以合并,例:
.boxleft{ float:left; border:solid 1px #ccc;}; .boxright{ float:left; border:solid 1px #ccc;},
这两个就可以这样写成一行:.boxleft , .boxright{ float:left; border:solid 1px #ccc;},
中间用“,“分开。
④样式引用简洁:一个class里面可以引用多个样式,用空格分开,例
.fl{float:left;} .box200{width:200px;} .bold{font-weight:bold} .red{color:#ff0000;}可以这么引用它们。
<div class=”fl box200 bold red”></div>
2.DIV高度和宽度
一个DIV一般要设置高度和宽度,大部分情况下宽度是给定的,高度要自动增加,因为内容多了。在固定高度和宽度情况下,一般要设置防溢出属性:overflow:hidden, 不然内容超出部分溢出,导致DIV变形,影响整个页面布局。
DIV在计算高度和宽度的时候要计算border和padding的距离,例
<div style=”width:200px; padding-left:20px; border:solid 5px #ccc”>那么这个div实际的宽度就是225px了,这点要注意。
3.DIV浮动
DIV一般都会设置浮动,除非是宽度是100%的情况下就不用了,设置浮动后需要清除浮动(用到属性:clear:both)溢出现象。一般在一个div里面,前面的部分div有浮动,后面的没有,那么就要设置清除浮动。例
<div>
<div style=”float:left”></div> //这两个都有浮动
<div style=”float:left”></div> //这两个都有浮动
<div style=”width:200px”></div> //这个没有浮动
</div>
所以要在前两个div里面给他设置清除浮动的样式。可以这样
<div tyle=”float:left”>div内容<div style=”clear:both”></div></div> //这两个都有浮动
<div style=”float:left”> div内容<div style=”clear:both”></div></div> //这两个都有浮动
<div style=”width:200px”></div> //这个没有浮动
4.DIV样式的距离
Padding,Margin,Border等这样样式在设置内外间距时候,通常在IE6下会出现双倍距离,这是可以用:display:inline属性来解决,例
<div style=”margin-left:20px; padding:20px; float:left”></div>
可以写成
<div tyle=”margin-left:20px; padding:20px; float:left;display:inline”></div>
但这个只能针对DIV,如果一些列表样式ul,li,a的样式下不能用这个方法。
5.一些需要注意的问题
div文件里面不宜出现2个同名样式,如果是这样的话会以最后引用该样式的属性为标准,div样式的优先引用顺序是style>id>class。例
#head{width:200px;} .heads{width:300px;}
<div id=”head” class=”heads”></div>,这个div最后的宽度是300px.
<div id=”head” class=”heads” style=”width:500px;”></div>,这个div最后的宽度是500px.
一般情况下,如果一个DIV的样式仅用到一次,就用id来命名,需要用到多次就用class属性。Id用“#”,class用“.”
注意一些样式的默认属性,默认的就不用设置了,比如宽度和高度默认都是0,自动增长,display默认的师block等,
A的样式
A:link 默认链接样式
A:visited 点击过后的链接样式
A:active 点击瞬间的样式
A:hover 鼠标放上去的样式
ul,li,ol,dl,dt,dd一般用于列表,<h1><h2>…一般用于文字主题,用的时候要注意。
div标准居中:*{margin:0 auto; padding:0;}
常用命名及缩写参考(个人习惯):
.fl{ float:left} .fr{ float:right} .ml{ margin-left:} .mt{margin-top:} .ml10{margin-left:10px;} .pl{padding-left} .pl10{ padding-left:10px;} .w200{width:200px;} .h300{width:300px;} .red{color:#ff0000}, .bold{font-weight:bold}, .font12{font-size:12px;}
转载请注明: ITTXX.CN--分享互联网 » 书写DIV+CSS需要注意的一些基本问题
最后更新:2019-01-11 09:41:10