CSS教程之CSS的十八般技能

现在YAHOO,MSN等国际门户网站，网易，新浪等国内门户网站，和主流的WEB2.0网站，均采用DIV+CSS的框架模式，更加印证了DIV+CSS是大势所趋。

　　翻译:阿捷

　　原文作者:RogerJohansson

　　作者简介:住在瑞典哥德堡，1994年入手下手打仗和介入web计划，456BereaStreet是他的住址，因而接纳这个名字作为他的团体主页域名

　　原文出处:www.456bereastreet.com

　　原文宣布工夫:2005年3月15日

　　阿捷申明:此文原名"CSStipsandtricks"，有2篇，我将它们兼并翻译在本文中。

　　比来，常常有伴侣问我一些事情中碰到的CSS成绩。他们老是不克不及很好的把持CSS，影响CSS的效力发扬。我来剖析总结一下毛病地点，匡助人人加倍简单利用CSS。

　　本文总结了我入手下手利用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;

　　}

1234下一页
　　九.利用子选择器(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加倍简便、加倍简单浏览。　　十.不必要给背景图片路径加引号　　为了节俭字节，我倡议不要给背景图片路径加引号，由于引号不是必需的。比方:　　background:url("images/***.gif")#333;　　能够写为　　background:url(images/***.gif)#333;　　假如你加了引号，反而会引发一些扫瞄器的毛病。　　十一.组选择器(Groupselectors)　　当一些元素范例、class大概id都有配合的一些属性，你就能够利用组选择器来制止屡次的反复界说。这能够节俭很多字节。　　比方:界说一切题目的字体、色彩和margin，你能够如许写:　　h1,h2,h3,h4,h5,h6{　　font-family:"LucidaGrande",Lucida,Arial,Helvetica,sans-serif;　　color:#333;　　margin:1em0;　　}　　假如在利用时，有一般元素必要界说自力款式，你能够再加上新的界说，能够掩盖老的界说，比方:　　h1{font-size:2em;}　　h2{font-size:1.6em;}上一页1234下一页
　　十二.用准确的按次指定链接的款式　　当你用CSS来界说链接的多个形态款式时，要注重它们誊写的按次，准确的按次是::link:visited:hover:active。抽取第一个字母是"LVHA"，你能够影象成"LoVeHAte"(喜好厌恶)。为何这么界说，能够参考EricMeyer的《LinkSpecificity》。　　假如你的用户必要用键盘来把持，必要晓得以后链接的核心，你还能够界说:focus属性。:focus属性的效果也取决与你誊写的地位，假如你但愿聚焦元素显现:hover效果，你就把:focus写在:hover后面;假如你但愿聚焦效果替换:hover效果，你就把:focus放在:hover前面。　　十三.扫除浮动　　一个十分罕见的CSS成绩，定位利用浮动的时分，上面的层被浮动的层所掩盖，大概层里嵌套的子层超越了外层的局限。　　一般的办理举措是在浮动层前面增加一个分外元素，比方一个div大概一个br，而且界说它的款式为clear:both。这个举措有一点牵强，侥幸的是另有一个好举措能够办理，参看这篇文章《HowToClearFloatsWithoutStructuralMarkup》(注:本站将尽快翻译此文)。　　下面2种办法能够很好办理浮动超越的成绩，可是假如当你真的必要对层大概层里的工具举行clear的时分怎样办?一种复杂的办法就是用overflow属性，这个办法最后的宣布在《SimpleClearingofFloats》，又在《Clearance》和《Supersimpleclearingfloats》中被普遍会商。　　下面那一种clear办法更合适你，要看详细的情形，这里不再睁开叙述。别的关于float的使用，一些优异的文章已说得很分明，保举你浏览:《Floatutorial》、《ContainingFloats》和《FloatLayouts》　　十四.横向居中(centering)　　这是一个复杂的技能，可是值得再说</p>

12下一页

业界越来越关注DIV+CSS的标准化设计，大到各大门户网站，小到不计其数的个人网站，在Div+CSS标准化的影响下，网页设计人员已经把这一要求作为行业标准。

属性值就追加上去，重复的属性值就以最后一个为准。这里要注意的是，样式的先后不是根据页面上应用的名字顺序，而是样式表里的样式顺序。
一遍，由于我瞥见太多的老手成绩都是问这个:CSS怎样横向居中?你必要界说元素的宽，而且界说横向的margin，假如你的结构包括在一个层(容器)中，就象如许:　　你能够如许界说使它横向居中:　　#wrap{　　width:760px;/*修正为你的层的宽度*/　　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中的笔墨居左。上一页1234下一页
　　十五.导进(Import)和埋没CSS　　由于老版本扫瞄器不撑持CSS，一个一般的做法是利用@import技能来把CSS埋没起来。比方:　　@importurl("main.css");　　但是，这个办法对IE4不起感化，这让我非常头疼了一阵子。厥后我用如许的写法:　　@import"main.css";　　如许就能够在IE4中也埋没CSS了，呵呵，还节俭了5个字节呢。想懂得@import语法的具体申明，能够看这里《centricle’scssfilterchart》　　十六.针对IE的优化　　有些时分，你必要对IE扫瞄器的bug界说一些出格的划定规矩，这里有太多的CSS技能(hacks)，我只利用个中的两种办法，不论微软期近将公布的IE7beta版里是不是更好的撑持CSS，这两种办法都是最平安的。　　1.正文的办法　　(a)在IE中埋没一个CSS界说，你可使用子选择器(childselector):　　html>bodyp{　　/*界说内容*/　　}　　(b)上面这个写法只要IE扫瞄器能够了解(对其他扫瞄器都埋没)　　*htmlp{　　/*declarations*/　　}　　(c)另有些时分，你但愿IE/Win无效而IE/Mac埋没，你可使用"反斜线"技能:　　/*/*/　　*htmlp{　　declarations　　}　　/**/　　2.前提正文(conditionalcomments)的办法　　别的一种办法，我以为比CSS　Hacks加倍经得起磨练就是接纳微软的公有属性前提正文(conditionalcomments)。用这个办法你能够给IE独自界说一些款式，而不影响主款式表的界说。就象如许:　　　　<!--[ifIE]>
　　<linkrel="stylesheet"type="text/css"href="ie.css"/>
　　<![endif]-->上一页1234</p>

上一页12

一个样式规则由一个选择器后跟一个声明块组成，声明块是一个大容器,由大括号中间的部分组成,声明块中间的空间会被忽略。

您在所见即所得网页编辑器进行网页制作和在WORD中进行文本编辑不会感到有什么区别，但它同时也存在着致命的弱点。

使用所见即所得的接口，亦有HTML编辑的功能。它现在有Mac和Windows系统的版本。原本由Macromedia公司所开发。

还是在Dreamweaver所见即所得添加链接是，可以选中文字或图片然后按下shift键不放鼠标拖出箭头直接指向文件即可。这是比较简单的也是常用的方之一。

由CS4 版本开始，则转用WebKit 排版引擎（亦即Google Chrome和Apple Safari浏览器所用的排版引擎）作为网页预览。

难以逾越的障碍会大大打击你的学习积极性。这就需要你的恒心，坚持不懈的决心。在自己无法解决某些问题时，就需要虚心请教别人.

使用内容管理系统进行开发并实现快速、精确的浏览器兼容性测试。

在刚开始接触网页的第一堂课上，听说网页制作会是一门很无聊并且很难听懂的过程，而事实却印证了这样一个事实。

Dreamweaver在所见即所得添加链接时，可以在选中文字后在属性栏中的链接栏中直接输入文件的地址即可。