DIV教程之CSS网页实例:合适一切项目通用的reset.css

可以将站点上所有的网页风格都使用一个CSS文件进行控制，只要修改这个CSS文件中相应的行，那么整个站点的所有页面都会随之发生变动。
破洛洛文章简介：另外一个是用于特定项目标“reset”，自界说修正的内容，这些内容能够放在layout.css、typography.css之类的文件中，他们配合导进到一个base.css构成一个项目标基本款式。本文就是来先容怎样写一个符合一切项目标通用的reset.css，和先容在设置玩reset.css以后必要针对
0，弁言
屡屡有新项目，第一步就是应该利用一个reset.css来重置款式。滥用不如不必，间接拿个现成的reset.css过去将招致前期各类古怪bug的产生。以是最好仍是本人写一个reset.css，而且要分明每条reset都是用来做甚么的。reset.css本意就是重置款式，我一直倡议把.clearfix放进layout.css,而把h1、h2之类的界说放进typography.css。详细怎样计划网站CSS布局，不在文本会商之列，能够参考SmashingMagazine上的文章，国际有差强者意的中文译版。注重，本文把reset分红了两个部分，一个是纯reset.css，能够用于任何项目。另外一个是用于特定项目标“reset”，自界说修正的内容，这些内容能够放在layout.css、typography.css之类的文件中，他们配合导进到一个base.css构成一个项目标基本款式。本文就是来先容怎样写一个符合一切项目标通用的reset.css，和先容在设置玩reset.css以后必要针对分歧项目要起首要设置的内容。1，基本
牛顿是站在伟人伽利略的肩膀上的，我们也能够这么做。起首我们要选定一个行进的基本。
请永久不要利用

• *{margin:0;padding:0;}
  

这成绩太多了，在此未几加表述。
今朝对照盛行的有EricMeyer的重置款式和YUI的重置款式。尚有CondensedMeyerReset简化EricMeyer的款式。风趣的是，Eric的重置款式也是源于YUI的。而那份简化版又把Eric的款式简化回YUI的款式了。但同时，糟的是，网下流传的对照广的(特别是国际)都不是最新的版本。下面两个页面里间接看到的都不是最新的，Eric专门为有一个reset.css页面。而YUI以后版本(2.7.0)的reset.css实践地点里，比下面的页面中还多一些器材。别的，我们还能够基于一些罕见的框架，对照出名的好比Blueprint大概ElementsCSSFramework（这个的reset也是源自于EricMeyer的）。OK，筹办事情就差未几了。以上这些都能够作为参考材料来构造我们本人的reset。我这里次要接纳YUI，兼带Eric的reset。
2，默许色采
关于页面是否是有默许背景致和远景色，YUI和Eric有着分歧的意见。
YUI重置背景致为红色而笔墨色彩为玄色。

• html{
  
• color:#000;
  
• background:#FFF;
  
• }
  

而Eric在以后最新版中让一切色彩为通明，他以为通明才是最原始的色彩。固然他曾一度以为也应该设置红色背景致、玄色笔墨色彩。至于最初为何改了，Eric并没有给出详细来由。
这个成绩我基础以为是用户自界说的更主要仍是你的计划更主要的成绩。我团体的概念是，假如你的计划自己就是红色背景，那末不要设置背景。一小部分中高程度的用户，他们会自界说网页默许背景致。设置成他们喜好的背景致，好比浅蓝色。基础罕见的扫瞄器都供应了这个复杂的功效。而我们的背景致重置则会损坏用户的选择——只管如许能包管你的计划原汁原味的出现给一切用户。固然我晓得，更高真个用户会用Stylish之类的Firefox扩大来自界说页面。但不能不说，只会用“选项”来调背景致的用户更多，不是么？而同时，假如计划自己就有其他背景致，好比玄色、蓝色、绿色之类的，OK，这些计划固然能够设置背景致。但请不要放进reset.css里。这里是重置款式的中央，不是你计划的中央。请把你的计划放在更广袤的地皮上。
以是，复杂说来，NO，不要在reset中设置背景致。
那末，笔墨色彩呢？准绳下去说，也是不该该设置笔墨色彩的。可是IE中的表单位素中legend这个工具对照出格，跟主题分离的对照严密。legend会默许有本人的色彩（跟以后的主题有关）而不会承继父元素的色彩（即使设了color:inherit;）。
从某些角度来讲，能够想固然地以为设置字体色彩人数远小于设置背景致的人数；和以为就算设置了背景致，人们看到legend元素是玄色的也不会以为奇异。因而，YUI在其reset中设置了legend{color:#000;}是无可厚非的。
但反过去说，把这个放到typography.css大概form.css里岂不是更好？分歧的页面计划，其对legend的色采请求极可能是分歧的，放在reset.css里反复界说是没有需要的。因而这条CSS划定规矩能够作为在reset.css以后起首应该设置的划定规矩。
3，padding和margin
已经一度盛行的*{margin:0;padding:0;}也就是出于这个目标。让各个元素的padding和margin都回零，特别是那些h1和p和ul/ol/li之类的元素，另有，body自己也是有margin的。扫除元素的padding和margin是很有效的。
YUI如许做：

• body,div,dl,dt,dd,ul,ol,li,
  
• h1,h2,h3,h4,h5,h6,pre,code,
  
• form,fieldset,legend,input,button,
  
• textarea,p,blockquote,th,td{
  
• margin:0;
  
• padding:0;
  
• }
  

而Eric如许做：

• html,body,div,span,applet,object,iframe,
  
• h1,h2,h3,h4,h5,h6,p,blockquote,pre,
  
• a,abbr,acronym,address,big,cite,code,
  
• del,dfn,em,font,img,ins,kbd,q,s,samp,
  
• small,strike,strong,sub,sup,tt,var,
  
• b,u,i,center,
  
• dl,dt,dd,ol,ul,li,
  
• fieldset,form,label,legend,
  
• table,caption,tbody,tfoot,thead,tr,th,td{
  
• margin:0;
  
• padding:0;
  
• border:0;
  
• outline:0;
  
• font-size:100%;
  
• vertical-align:baseline;
  
• background:transparent;
  
• }
  

能够看到，Eric把几近一切的元素都写上了划定规矩。而YUI只把有padding和margin的元素清空款式，而其他元素则不动。我团体对照偏好YUI的做法，由于他如许能够制止给一些有关元素带上不用要的款式。招致元素过量时的功能下落。但Eric的也有可取的地方，他如许写，全部reset.css能够小上很多字节，对服务器的压力会小一些。但进一步想，这类做法跟用*来选择一切元素另有甚么区分呢？这已几近包括了一切元素了！你怎样用呢？看你本人喜欢了。

破洛洛文章简介：另外一个是用于特定项目标“reset”，自界说修正的内容，这些内容能够放在layout.css、typography.css之类的文件中，他们配合导进到一个base.css构成一个项目标基本款式。本文就是来先容怎样写一个符合一切项目标通用的reset.css，和先容在设置玩reset.css以后必要针对

4，边框
YUI里：

• fieldset,img{
  
• border:0;
  
• }
  
• abbr,acronym{
  
• border:0;
  
• font-variant:normal;
  
• }
  

Eric已在上一条中把一切的边框都清失落了，仍是保举用YUI的，来由同上。
5，外边框(outline)
这个就是元素猎取核心时的虚线框，在ie以外的扫瞄器上能够像上面Eric做的那样，经由过程设置outline来打消。

• /*remembertodefinefocusstyles!*/
  
• :focus{
  
• outline:0;
  
• }
  

而YUI则没有设置这一条。而在Eric的款式中，能够看到Eric的提示：务必从头界说猎取核心后的款式！
这点实在很主要，出于可会见性的角度动身，那些方便于利用鼠标的人基础上都是用tab导航来扫瞄网页的。猎取核心的元素有特定款式的话能够极年夜匡助这类群体的用户，一般倡议设置成跟:hover一样。常常计划上会由于这个虚线框而年夜打扣头。因而这条保存在reset中，而且作为reset.css以后尽早界说的划定规矩。
别的，关于在Firefox之类的撑持outline的扫瞄个中，除猎取核心的元素外，扫瞄器自己并没有给元素设置outline属性，以是，像Eric那样把一切元素的outline设成0，我就以为没有太年夜需要了。
6，字体款式(fontstyle/weight/size/variant)
YUI里，分红了多条：

• address,caption,cite,code,dfn,
  
• em,strong,th,var,optgroup{
  
• font-style:inherit;
  
• font-weight:inherit;
  
• }
  
• 
  
• h1,h2,h3,h4,h5,h6{
  
• font-size:100%;
  
• font-weight:normal;
  
• }
  
• abbr,acronym{
  
• border:0;
  
• font-variant:normal;
  
• }
  
• 
  
• input,button,textarea,
  
• select,optgroup,option{
  
• font-family:inherit;
  
• font-size:inherit;
  
• font-style:inherit;
  
• font-weight:inherit;
  
• }
  
• 
  
• /*@purposeToenableresizingforIE*/
  
• /*@branchForIE6-Win,IE7-Win*/
  
• input,button,textarea,select{
  
• *font-size:100%;
  
• }
  

Eric则在他终极版的reset中往失落了关于这些的款式重置，只保存了font-size:100%;一样他没有给出详细来由。
但一般情形下，我以为仍是重置一下这些款式好，好比strong元素，良多时分只是语义罢了，并不是但愿他真的加粗。大概会有背景致大概其他体例来夸大。而之以是这里都用了inherit这个承继属性而不是界说font-weight:normal;能够在Eric先前的reset文章中看到。这是为了避免——父元素字体加粗了，而没有一个子元素承继加粗属性（由于设置了normal）——这类情形的产生。以是把YUI中设置h1-h6的款式和abbr和acronym的两句款式都改成inherit会对照好。
别的，关于h1-h6的字体巨细界说，倡议放到专门的typography.css里，不倡议放在reset.css里。以是这里我一样偏向于用YUI的战略，全体重置。
可是很不幸，在ie6/ie7傍边，不管是strong仍是h1-h6,亦或是em等元素，设置了inherit均没法承继父元素属性，仍然坚持本人的特征。这就带来了扫瞄器差别，款式重置自己是为了不扫瞄器差别的，但如今带来了扫瞄器差别，是切切不成取的。关于这个成绩我思索了好久，究竟是为了一致一切扫瞄器都重置成normal（YUI的设法），仍是保持重置这些元素，让他们天真烂漫，来包管在一切扫瞄器中款式一样（Eric的设法）。我最初决意接纳YUI的做法。由于，不管重置成normal仍是不重置，这些元素都没法承继父元素属性。既然云云，那末退而求其次，包管这些元素都恢复到一般表面，制止在计划的时分还要重置款式。
不能不说，这类让步是仅仅针对IE6和IE7的，大概在5年后，老板和客户都不请求撑持IE7的时分，我们能够宁神勇敢得利用inherit了。
别的，YUI并没有给codekbdsamptt这几个元素重置字体巨细。但实践上在IE中，他们城市被减少显现。以是此处应该赐与重置font-size:100%;

破洛洛文章简介：另外一个是用于特定项目标“reset”，自界说修正的内容，这些内容能够放在layout.css、typography.css之类的文件中，他们配合导进到一个base.css构成一个项目标基本款式。本文就是来先容怎样写一个符合一切项目标通用的reset.css，和先容在设置玩reset.css以后必要针对

7，行高(line-height)
关于行高，YUI并没有给出重置界说，而Eric则给出了重置：

• body{
  
• line-height:1;
  
• }
  

行高默许一切元素城市承继的，以是给body设置行高为1就充足了。一般行高设为1时分，英文照旧浏览，但中文就没法浏览了，行间距过于严密招致简单看错行。一般在中文情况下得设置1.4到1.5才干是用户一般浏览。我倡议是1.5，如许算出来的值也是整数。好比字体巨细12px的时分行高是18px，字体巨细16px时行高24px。看起来也会对照恬逸。别的，另有一个不设置成1的主要缘故原由是：IE下，行高为1时，中笔墨顶部会被削失落几像素，字体加粗时尤其分明。以是，重置的准绳是好的，但切不成重置为1。
8，列表款式
YUI用了：

• li{
  
• list-style:none;
  
• }
  

Eric用了：

• ol,ul{
  
• list-style:none;
  
• }
  

只管我没有测试出YUI的有甚么成绩，但我一直以为设置ol和ul会对照稳妥。并且，涉及的元素更少，功能应当更高一点。固然下载量会多3字节。
9，表格元素
在表格方面，都对照一致。均是：

• /*tablesstillneedcellspacing="0"inthemarkup*/
  
• table{
  
• border-collapse:collapse;
  
• border-spacing:0;
  
• }
  

Eric还提示到，必要在html中设置cellspacing=”0″来到达完善重置效果。
但别的YUI还设置了

• caption,th{
  
• text-align:left;
  
• }
  

让caption和th元素不要居中。作为重置，是可取的。倡议增加此划定规矩。
10，高低标和baseline
YUI写成

• sup{
  
• vertical-align:baseline;
  
• }
  
• 
  
• sub{
  
• vertical-align:baseline;
  
• }
  

仿佛没有优化，不晓得为什么没有写到一同往。而Eric则在最入手下手那条中就已界说。而个中的成绩是，YUI如许界说了，但没有重置字体巨细，这点是有所遗憾的。既然是重置款式，就完全一些，以是倡议改成如许的：

• sup,sub{
  
• font-size:100%;
  
• vertical-align:baseline;
  
• }
  

一样关于Eric把一切元素都放到了Baseline上，包含上标下标。Eric的注释是，强迫让计划师准确定位这些元素的垂直偏移。

破洛洛文章简介：另外一个是用于特定项目标“reset”，自界说修正的内容，这些内容能够放在layout.css、typography.css之类的文件中，他们配合导进到一个base.css构成一个项目标基本款式。本文就是来先容怎样写一个符合一切项目标通用的reset.css，和先容在设置玩reset.css以后必要针对

11，拔出和删除(ins/del)
关于这个成绩，YUI间接扫除了ins的下划线和del的删除线这两个文本粉饰：

• del,ins{
  
• text-decoration:none;
  
• }
  

而Eric保存了删除线：

• /*remembertohighlightinsertssomehow!*/
  
• ins{
  
• text-decoration:none;
  
• }
  
• del{
  
• text-decoration:line-through;
  
• }
  

怎样弃取？我选择Eric的，为何我这里不寻求完善的款式重置了呢？很复杂，我这个reset的方针是为了让我们写页面的时分只管制止扫瞄器默许款式，和分歧扫瞄器之间默许款式差别带来的成绩。而del元素删除线的文本粉饰，我信任没有人会否决的。有人会加上其他款式，好比字体变淡之类的，但关于del云云强语义的元从来说，没有甚么比用删除线更能表达寄义的了。而不像下面谁人focus款式，一定大家喜好虚线框。但仿佛又没有甚么扫瞄器默许不给del元素加删除线，故这条能够省略。
以是，这里我只重置ins款式，别忘了给ins元素在等下也增加一些款式。
12，援用元素的引号
某些扫瞄器中，q大概blockquote前后会呈现引号。这个并非谁都喜好的。以是必要重置他。
YUI的对照复杂，只重置了q：

• q:before,
  
• q:after{
  
• content:;
  
• }
  

而Eric则对照周密，把q和blockquote都重置了。

• blockquote,q{
  
• quotes:none;
  
• }
  
• blockquote:before,blockquote:after,
  
• q:before,q:after{
  
• content:;
  
• content:none;
  
• }
  

OK，就决意用Eric的了，关于款式重置，仔细一点周密一点总没有错。
13，链接
关于链接，YUI和Eric都没有接纳款式重置，但从我思索好久后仍是决意把链接款式重置放出去。究其缘故原由，仍是由于款式重置一来要完全，二来关于链接款式并不是一切计划师都喜好用下划线粉饰。因而，我仍是倡议把链接的下划线重置失落。

• a{
  
• text-decoration:none;
  
• }
  

但如许做有点粗拙。真正有下划线款式的实在只要:link和:visited以是改成上面如许对照好：

• :link,:visited{
  
• text-decoration:none;
  
• }
  

别的，关于链接色彩，能够作为reset后急需设置的划定规矩来处置。间接放进reset.css中不是很符合。

破洛洛文章简介：另外一个是用于特定项目标“reset”，自界说修正的内容，这些内容能够放在layout.css、typography.css之类的文件中，他们配合导进到一个base.css构成一个项目标基本款式。本文就是来先容怎样写一个符合一切项目标通用的reset.css，和先容在设置玩reset.css以后必要针对

14，我的重置款式
总结下面各种划定规矩，这里给出一下我的CSS重置划定规矩，BSD协定公布，请随便利用。测试样本（这个是从YUI那边复制过去的，感激YUI为此做出的奉献。）
下载：reset.cssreset-min.css

• /*
  
• Copyright(c)2009,Shawphy(shawphy.com).Allrightsreserved.
  
• http://shawphy.com/2009/03/my-own-reset-css.html
  
• BasedonYUIhttp://developer.yahoo.com/yui/reset/
  
• andEricMeyerhttp://meyerweb.com/eric/tools/css/reset/index.html
  
• LicensedundertheBSDLicense:
  
• http://creativecommons.org/licenses/BSD/
  
• version:1.1|20090303
  
• */
  
• 
  
• body,div,dl,dt,dd,ul,ol,li,
  
• h1,h2,h3,h4,h5,h6,pre,code,
  
• form,fieldset,legend,input,button,
  
• textarea,p,blockquote,th,td{
  
• margin:0;
  
• padding:0;
  
• }
  
• fieldset,img{
  
• border:0;
  
• }
  
• /*remembertodefinefocusstyles!*/
  
• :focus{
  
• outline:0;
  
• }
  
• address,caption,cite,code,dfn,
  
• em,strong,th,var,optgroup{
  
• font-style:normal;
  
• font-weight:normal;
  
• }
  
• 
  
• h1,h2,h3,h4,h5,h6{
  
• font-size:100%;
  
• font-weight:normal;
  
• }
  
• abbr,acronym{
  
• border:0;
  
• font-variant:normal;
  
• }
  
• 
  
• input,button,textarea,
  
• select,optgroup,option{
  
• font-family:inherit;
  
• font-size:inherit;
  
• font-style:inherit;
  
• font-weight:inherit;
  
• }
  
• code,kbd,samp,tt{
  
• font-size:100%;
  
• }
  
• /*@purposeToenableresizingforIE*/
  
• /*@branchForIE6-Win,IE7-Win*/
  
• input,button,textarea,select{
  
• *font-size:100%;
  
• }
  
• body{
  
• line-height:1.5;
  
• }
  
• ol,ul{
  
• list-style:none;
  
• }
  
• /*tablesstillneedcellspacing="0"inthemarkup*/
  
• table{
  
• border-collapse:collapse;
  
• border-spacing:0;
  
• }
  
• caption,th{
  
• text-align:left;
  
• }
  
• sup,sub{
  
• font-size:100%;
  
• vertical-align:baseline;
  
• }
  
• /*remembertohighlightanchorsandinsertssomehow!*/
  
• :link,:visited,ins{
  
• text-decoration:none;
  
• }
  
• blockquote,q{
  
• quotes:none;
  
• }
  
• blockquote:before,blockquote:after,
  
• q:before,q:after{
  
• content:;
  
• content:none;
  
• }
  

15，完成一个开端的CSS框架
之条件到了，款式重置作为一个一切项目可使用的个性存在，而分歧的项目应该有其本性。固然另有其他一些个性，不属于款式重置的部分，但一样主要。再往下讲就能够做一个CSS框架了。CSS框架所要思索的内容远比一个CSSReset要思索的多良多，这里只是点到为止，不做更多睁开。
layout.css
起首除reset.css以外要创建的layout.css，这里今朝次要保举放进.clearfix。扫除浮动很主要。但这不属于款式重置，放在结构傍边正符合。

• .clearfix:after{
  
• content:".";
  
• display:block;
  
• height:0;
  
• clear:both;
  
• visibility:hidden;
  
• }
  
• .clearfix{display:inline-block;}
  
• 
  
• /*HidesfromIE-mac*/
  
• *html.clearfix{height:1%;}
  
• .clearfix{display:block;}
  
• /*EndhidefromIE-mac*/
  

别的，layout.css中还能够放进本人经常使用的结构，好比#wrap{margin:0auto;width:960px;}之类的划定规矩。看团体喜欢而定。
typography.css
这里能够安排良多划定规矩，十分主要的是以下三个：
:focus,a,ins
这三个是被重置失落的，但又很主要的内容，倡议在reset以后当即在typography中设定全站款式，坚持款式一致。
ins能够独自设置，:focus最好设置成跟:hover一样，而a的款式仍是依照LoVe,HAte的法例来设置。
h1-h6系列也是之前被重置失落的。能够思索在这里设置款式。按站点特征来定。我团体是不喜好全局界说hx系列的字体巨细的，一致为100%我以为挺好。
接上去要设置的是font-family属性，能够参考射雕的文章。别的，小麦的文章中提到，表单位素的字体在IE中都不克不及承继父元素的字体，以是要独自设置。
至于其他必要全局设置的，能够参考前文中的叙说，找到响应的部分增加到typography.css中便可。如许就能够在包管reset.css通用性的情形下，使分歧的项目又有本性。只管包管reset.css在一切项目中都是一样的。有益于项目标开辟。最初不要健忘在写表格的时分加cellspacing=”0″来到达完善重置效果。
16，切磋
文章写的对照仓皇，也受限与自己才能所限，只能写到这里。接待留言切磋，也可发邮件或上Twitter找我。以便进一步完美这个reset。感谢。
</p>
声明块由一个一个的声明组成,声明由属性和值组成,属性和值用冒号隔开,分号结束。

还可以在Dreamweaver常用工具中选择超级链接，完成相应的填写即可。

布局表格、绘制层、制作CSS样式表等，这些内容迷糊了我的视线，真是没想到制作一个精巧别致的网页是如此的困难，可是心有不甘。

Dreamweaver是集网页制作和管理网站于一身的所见即所得网页编辑器，在编辑时能同时看到源码和设计界面，非常方便新手学习制作网页。

运动)时间轴面板--拖动关键帧--单击整条--将鼠标移至中间一点--右击选择增加关键帧--移动中间关键帧的图层--勾选自动播放,循环

直接用代码建立链接，如：可以直接输入 <a herf = \\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\"red.html\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\">红色的网页 12、插入标签法建立链接，可以再选中文字后在代码中插入html标签，页元素<a>.也可以按ctrl+t进入html标签插入方法之后输入代码即可。

可以使用 CSS 检查工具进行设计。

运动)时间轴面板--拖动关键帧--单击整条--将鼠标移至中间一点--右击选择增加关键帧--移动中间关键帧的图层--勾选自动播放,循环

只要我们努力，无论是怎样的艰难险阻，成功依然会迎面直击。在刚开始时我觉得dreamweaver mx XX很难理解。