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教程之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独自界说一些款式，而不影响主款式表的界说。就象如许: <!-->
<linkrel="stylesheet"type="text/css"href="ie.css"/>
<!-->上一页1234</p>上一页12
一个样式规则由一个选择器后跟一个声明块组成，声明块是一个大容器,由大括号中间的部分组成,声明块中间的空间会被忽略。 您在所见即所得网页编辑器进行网页制作和在WORD中进行文本编辑不会感到有什么区别，但它同时也存在着致命的弱点。 使用所见即所得的接口，亦有HTML编辑的功能。它现在有Mac和Windows系统的版本。原本由Macromedia公司所开发。 还是在Dreamweaver所见即所得添加链接是，可以选中文字或图片然后按下shift键不放鼠标拖出箭头直接指向文件即可。这是比较简单的也是常用的方之一。 由CS4 版本开始，则转用WebKit 排版引擎（亦即Google Chrome和Apple Safari浏览器所用的排版引擎）作为网页预览。 难以逾越的障碍会大大打击你的学习积极性。这就需要你的恒心，坚持不懈的决心。在自己无法解决某些问题时，就需要虚心请教别人. 使用内容管理系统进行开发并实现快速、精确的浏览器兼容性测试。 在刚开始接触网页的第一堂课上，听说网页制作会是一门很无聊并且很难听懂的过程，而事实却印证了这样一个事实。 Dreamweaver在所见即所得添加链接时，可以在选中文字后在属性栏中的链接栏中直接输入文件的地址即可。
页:
[1]