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有进一步的了解了，心中不免有些激动。今天和其他几位老师交流了一下，感觉受益匪浅.