DIV教程之网页CSS优化使网页具有语义化
如果单独使用DIV而不加任何CSS,那么它在网页中的效果和使用是一样的。网页制造poluoluo文章简介：网站重构,CSS款式表的优化技能.
1、利用css缩写
利用缩写能够匡助削减你CSS文件的巨细，加倍简单浏览。css缩写的次要划定规矩请参看《经常使用css缩写语法总结》，这里就不睁开形貌。
二.明白界说单元，除非值为0
健忘界说尺寸的单元是CSS老手广泛的毛病。在HTML中你能够只写width=100，可是在CSS中，你必需给一个正确的单元，好比:width:100pxwidth:100em。只要两个破例情形能够不界说单元:行高和0值。除此之外，其他值都必需紧跟单元，注重，不要在数值和单元之间加空格。
三.辨别巨细写
当在XHTML中利用CSS，CSS里界说的元素称号是辨别巨细写的。为了不这类毛病，我倡议一切的界说称号都接纳小写。
class和id的值在HTML和XHTML中也是辨别巨细写的，假如你必定要巨细写夹杂写，请细心确认你在CSS的界说和XHTML里的标签是分歧的。
四.作废class和id前的元素限制
当你写给一个元素界说class大概id，你能够省略后面的元素限制，由于ID在一个页面里是独一的，class能够在页面中屡次利用。你限制某个元素毫偶然义。比方:
div#content{}
fieldset.details{}
能够写成
#content{}
.details{}
如许能够节俭一些字节。
五.默许值
一般padding的默许值为0，background-color的默许值是transparent。可是在分歧的扫瞄器默许值大概分歧。假如怕有抵触，能够在款式表一入手下手就先界说一切元素的margin和padding值都为0，象如许:
*{
margin:0;
padding:0;
}
六.不必要反复界说可承继的值
CSS中，子元素主动承继父元素的属性值，象色彩、字体等，已在父元素中界说过的，在子元素中能够间接承继，不必要反复界说。可是要注重，扫瞄器大概用一些默许值掩盖你的界说。
七.比来优先准绳
假如对统一个元素的界说有多种，以最靠近(最小一级)的界说为最优先，比方有这么一段代码
Update:Loremipsumdolorset
在CSS文件中，你已界说了元素p，又界说了一个classupdate
p{
margin:1em0;
font-size:1em;
color:#333;
}
.update{
font-weight:bold;
color:#600;
}
这两个界说中，class=update将被利用，由于class比p更近。你能够查阅W3C的《Calculatingaselector’sspecificity》懂得更多。
八.多重class界说
一个标签能够同时界说多个class。比方:我们先界说两个款式，第一个款式背景为#666;第二个款式有10px的边框。
.one{width:200px;background:#666;}
.two{border:10pxsolid#F00;}
在页面代码中，我们能够如许挪用
如许终极的显现效果是这个div既有#666的背景，也有10px的边框。是的，如许做是能够的，你能够实验一下。
九.利用子选择器(descendantselectors)
CSS初学者不晓得利用子选择器是影响他们效力的缘故原由之一。子选择器能够匡助你勤俭大批的class界说。我们来看上面这段代码:
<divid=subnav>
<ul>
<liclass=subnavitem><ahref=#class=subnavitem>Item1</a></li>>
<liclass=subnavitemselected><ahref=#class=subnavitemselected>Item1</a></li>
<liclass=subnavitem><ahref=#class=subnavitem>Item1</a></li>
</ul>
</div>
这段代码的CSS界说是：
div#subnavul{}
div#subnavulli.subnavitem{}
div#subnavulli.subnavitema.subnavitem{}
div#subnavulli.subnavitemselected{}
div#subnavulli.subnavitemselecteda.subnavitemselected{}
你能够用上面的办法替换下面的代码
<ulid=subnav>
<li><ahref=#>Item1</a></li>
<liclass=sel><ahref=#>Item1</a></li>
<li><ahref=#>Item1</a></li>
</ul>
款式界说是:
#subnav{}
#subnavli{}
#subnava{}
#subnav.sel{}
#subnav.sela{}
用子选择器可使你的代码和CSS加倍简便、加倍简单浏览。
十.不必要给背景图片路径加引号
为了节俭字节，我倡议不要给背景图片路径加引号，由于引号不是必需的。比方:
background:url(images
margin:0auto;
}
可是IE5/Win不克不及准确显现这个界说，我们接纳一个十分有效的技能来办理:用text-align属性。就象如许:
body{
text-align:center;
}
#wrap{
width:760px;
margin:0auto;
text-align:left;
}
第一个body的text-align:center;划定规矩界说IE5/Win中body的一切元素居中(其他扫瞄器只是将笔墨居中)，第二个text-align:left;是将#warp中的笔墨居左。
十五.导进(Import)和埋没CSS
由于老版本扫瞄器不撑持CSS，一个一般的做法是利用@import技能来把CSS埋没起来。比方:
@importurl(main.css);
但是，这个办法对IE4不起感化，这让我非常头疼了一阵子。厥后我用如许的写法:
@importmain.css;
如许就能够在IE4中也埋没CSS了，呵呵，还节俭了5个字节呢。想懂得@import语法的具体申明，能够看这里《centricle’scssfilterchart》
十六.针对IE的优化
有些时分，你必要对IE扫瞄器的bug界说一些出格的划定规矩，这里有太多的CSS技能(hacks)，我只利用个中的两种办法，不论微软期近将公布的IE7beta版里是不是更好的撑持CSS，这两种办法都是最平安的。
1.正文的办法
(a)在IE中埋没一个CSS界说，你可使用子选择器(childselector):
html>bodyp{
}
(b)上面这个写法只要IE扫瞄器能够了解(对其他扫瞄器都埋没)
*htmlp{
}
(c)另有些时分，你但愿IE/Win无效而IE/Mac埋没，你可使用反斜线技能:
*htmlp{
declarations
}
2.前提正文(conditionalcomments)的办法
别的一种办法，我以为比CSS Hacks加倍经得起磨练就是接纳微软的公有属性前提正文(conditionalcomments)。用这个办法你能够给IE独自界说一些款式，而不影响主款式表的界说。
十七.调试技能:层有多年夜?
当调试CSS产生毛病，你就要象排版工人，逐行剖析CSS代码。我一般在出成绩的层上界说一个背景色彩，如许就可以很分明看到层占有多年夜空间。有些人倡议用border，一样平常情形也是能够的，但成绩是，偶然候border会增添元素的尺寸，border-top和boeder-bottom会损坏纵向margin的值，以是利用background加倍平安些。
别的一个常常出成绩的属性是outline。outline看起来象boeder，但不会影响元素的尺寸大概地位。只要多数扫瞄器撑持outline属性，我所晓得的只要Safari、OmniWeb、和Opera。
十八.CSS代码誊写款式
在写CSS代码的时分，关于缩进、断行、空格，每一个人有每一个人的誊写习气。在经由不休理论后，我决意接纳上面如许的誊写款式:
selector1,
selector2{
property:value;
}
当利用团结界说时，我一般将每一个选择器独自写一行，如许便利在CSS文件中找到它们。在最初一个选择器和年夜括号{之间加一个空格，每一个界说也独自写一行，分号间接在属性值后，不要加空格。
我习气在每一个属性值前面都加分号，固然划定规矩上同意最初一个属性值前面能够不写分号，可是假如你要加新款式时简单健忘补上分号而发生毛病，以是仍是都加对照好。
最初，封闭的年夜括号}独自写一行。
空格和换行有助与浏览。
目前我们的站就是div+css做的，美工可以通过css直接控制我的程序输出的页面动态数据的样式DIV就只是布局元素. Dreamweaver是唯一提供RoundtripHTML、视觉化编辑与原始码编辑同步的设计工具。它包含HomeSite和BBEdit等主流文字编辑器。 难以逾越的障碍会大大打击你的学习积极性。这就需要你的恒心，坚持不懈的决心。在自己无法解决某些问题时，就需要虚心请教别人. 每天上网看着那样多的网页，于是我才下定决心选择了网页制作这一门课程，目的就是希望以后能够做出一个完美的网页来。 您在所见即所得网页编辑器进行网页制作和在WORD中进行文本编辑不会感到有什么区别，但它同时也存在着致命的弱点。 所见则所得网页编辑器的优点就是直观性，使用方便，容易上手. 俗话说：兴趣是最好的老师。做每一件事都离不开兴趣的驱动。兴趣是自学技术需要迈出的第一步。在学习的过程中，我们难免会遇到各种各样的问题。 Dreamweaver是唯一提供Roundtrip HTML、视觉化编辑与原始码编辑同步的设计工具。它包含HomeSite和BBEdit等主流文字编辑器。 经过两天的学习，总算对Dreamweaver有进一步的了解了，心中不免有些激动。今天和其他几位老师交流了一下，感觉受益匪浅.
页:
[1]