来一发进阶性教程 CSS的惯例利用技能
声明块由一个一个的声明组成,声明由属性和值组成,属性和值用冒号隔开,分号结束。本篇总结了一些CSS经常使用技能，为网站重构打下基本，希望您能学到一点有效的器材。一.利用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{/*declarations*/}
fieldset.details{/*declarations*/}能够写成
#content{/*declarations*/}
.details{/*declarations*/}如许能够节俭一些字节。五.默许值一般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;}在页面代码中，我们能够如许挪用
＜divclass=onetwo＞＜/div＞如许终极的显现效果是这个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{/*Somestyling*/}
div#subnavulli.subnavitem{/*Somestyling*/}
div#subnavulli.subnavitema.subnavitem{/*Somestyling*/}
div#subnavulli.subnavitemselected{/*Somestyling*/}
div#subnavulli.subnavitemselecteda.subnavitemselected{/*Somestyling*/}你能够用上面的办法替换下面的代码
＜ulid=subnav＞
＜li＞＜ahref=#＞Item1＜/a＞＜/li＞
＜liclass=sel＞＜ahref=#＞Item1＜/a＞＜/li＞
＜li＞＜ahref=#＞Item1＜/a＞＜/li＞
＜/ul＞款式界说是：
#subnav{/*Somestyling*/}
#subnavli{/*Somestyling*/}
#subnava{/*Somestyling*/}
#subnav.sel{/*Somestyling*/}
#subnav.sela{/*Somestyling*/}用子选择器可使你的代码和CSS加倍简便、加倍简单浏览。
</p>
你可以将许多网页的风格格式同时更新，不用再一页一页地更新了。 Dreamweaver是唯一提供RoundtripHTML、视觉化编辑与原始码编辑同步的设计工具。它包含HomeSite和BBEdit等主流文字编辑器。 Dreamweaver是唯一提供Roundtrip HTML、视觉化编辑与原始码编辑同步的设计工具。它包含HomeSite和BBEdit等主流文字编辑器。 经过两天的学习，总算对Dreamweaver有进一步的了解了，心中不免有些激动。今天和其他几位老师交流了一下，感觉受益匪浅. 布局表格、绘制层、制作CSS样式表等，这些内容迷糊了我的视线，真是没想到制作一个精巧别致的网页是如此的困难，可是心有不甘。 由CS4 版本开始，则转用WebKit 排版引擎（亦即Google Chrome和Apple Safari浏览器所用的排版引擎）作为网页预览。 使用所见即所得的接口，亦有HTML编辑的功能。它现在有Mac和Windows系统的版本。原本由Macromedia公司所开发。 Adobe Dreamweaver CS5 软件使设计人员和开发人员能充满自信地构建基于标准的网站。由于同新的 Adobe CS Live 在线服务 Adobe BrowserLab 集成。 Dreamweaver由MX版本开始使用Opera软件公司的排版引擎“Presto”作为网页预览。
页:
[1]