海妖 发表于 2015-1-15 23:20:22

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标准化的影响下,网页设计人员已经把这一要求作为行业标准。

海妖 发表于 2015-1-16 00:43:47

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


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

小妖女 发表于 2015-1-18 07:45:57

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

不帅 发表于 2015-1-27 05:09:52

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

再见西城 发表于 2015-2-5 05:35:59

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

老尸 发表于 2015-2-11 07:08:55

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

飘飘悠悠 发表于 2015-3-2 00:24:09

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

乐观 发表于 2015-3-11 02:48:50

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

变相怪杰 发表于 2015-3-17 19:36:08

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

蒙在股里 发表于 2015-3-24 23:31:52

Dreamweaver在所见即所得添加链接时,可以在选中文字后在属性栏中的链接栏中直接输入文件的地址即可。
页: [1]
查看完整版本: CSS教程之CSS的十八般技能