野史衍生和变化与Normalize,CSS代码优化原则

至于CSS Reset那多少个事(一):历史演化与Normalize.css

2015/08/01 · CSS · CSS
Reset,
Normalize.css

原来的书文出处: Alsiso   

一3条Css 书写规范,一叁条css书写

壹.
见仁见智浏览器成分的默许属性有所不相同,使用Reset可重置浏览器元素的片段暗中认可属性,以达到浏览器的匹配。 
/** 清除内外边距 **/ 
body, h1, h2, h3, h4, h5, h6, hr, p, blockquote, 
/* structural elements 结构成分 */ 
dl, dt, dd, ul, ol, li, 
/* list elements 列表成分 */pre, 
/* text formatting elements 文本格式成分 */ 
form, fieldset, legend, button, input, textarea, 
/* form elements 表单成分 */ 
th, td, 
/* table elements 表格成分 */ 
img/* img elements 图片成分 */ 
{   border:medium none;   margin: 0;   padding: 0; } 
/** 设置默许字体 **/body,button, input, select, textarea 
{   font: 12px/1.5 ‘宋体’,tahoma, Srial, helvetica, sans-serif; } 
h1, h2, h3, h4, h5, h6 { font-size: 100%; } 
em{font-style:normal;} /** 重置列表成分 **/ 
ul, ol { list-style: none; } 
/** 重置超链接成分 **/a 
{ text-decoration: none; color:#333;} 
a:hover { text-decoration: underline; color:#F40; } 
/** 重置图片元素 **/img{ border:0px;} 
/** 重置表格元素 **/ 
table { border-collapse: collapse; border-spacing: 0; }

  1. 杰出的命名习惯

  2. 野史衍生和变化与Normalize,CSS代码优化原则。代码缩写 
    li{    
    font-family:Arial, Helvetica, sans-serif; 
        font-size: 1.2em; 
        line-height: 1.4em;   
      padding-top:5px;   
      padding-bottom:10px;   
    padding-left:5px; 

    变成 
    li{   
      font: 1.2em/1.4em Arial, Helvetica, sans-serif;  
       padding:5px 0 10px 5px; 
    }

  3. 利用CSS继承 
    假设页面中父成分的四个子成分使用同1的体制,那最佳把她们相同的体裁定义在其父成分上, 
    让它们继续那个CSS样式。 
    那般您可以很好的爱惜你的代码,并且还是能减去代码量。那么自然如此的代码: 
    #container li{ font-family:Georgia, serif; } 
    #container p{ font-family:Georgia, serif; } 
    #container h1{font-family:Georgia, serif; } 
    #container{ font-family:Georgia, serif; }

  4. 应用多重选用器 
      
    您能够统一七个CSS接纳器为1个,假诺他们有协同的样式的话。 
    如此那般做不仅代码简洁且可为你节省时间和空中。如: 
    h1{ font-family:Arial, Helvetica, sans-serif; font-weight:normal; } 
    h2{ font-family:Arial, Helvetica, sans-serif; font-weight:normal; } 
    h3{ font-family:Arial, Helvetica, sans-serif; font-weight:normal; } 
    能够统壹为 
    h1, h2, h3{ font-family:Arial, Helvetica, sans-serif;
    font-weight:normal; }

  5. 合适的代码注释

  6. 给您的CSS代码排序 
      
    一经代码中的属性都能根据字母排序,那查找修改的时候就能尤其便捷:

/*** 样式属性按字母排序 ***/ 
div{     
   
  color:#666;   
  font:1.2em/1.4em Arial, Helvetica, sans-serif; 
    height:300px;  
   margin:10px 5px;   
padding:5px 0 10px 5px;  
   width:30%;   
  z-index:10; 

  1. 选料更优的体制属性值 
      
    CSS中微微属性采取不相同的属性值,即使达到的效果差不离,当品质上却存在着差异,如 
      
    分化在于border:0把border设为0px,即便在页面上看不见,但按border默许值通晓,浏览器还是对border-width/border-color举办了渲染,即现已占据了内存值。 
      
    而border:none把border设为“none”即未有,浏览器解析“none”时将不作出渲染动作,即不会消耗内部存款和储蓄器值。所以建议采纳border:none; 
      
    壹致的,display:none隐藏对象浏览器不作渲染,不占用内部存款和储蓄器。而visibility:hidden则会。

  2. 使用<link>代替@import 
      
    先是,@import不属于XHTML标签,也不是Web标准的一有个别,它对于较早先时期的浏览器包容也不高,并且对于网址的特性有有些负面包车型客车熏陶。具体能够参照《高质量网址设计:不要接纳@import》。所以,请防止使用@import

  1. 动用外部体制表 
      
    本条条件始终是三个很好的设计执行。不单能够更易于维护修改,更珍视的是行使外部文件可以增强页面速度,因为CSS文件都能在浏览器中生出缓存。内置在HTML文书档案中的CSS则会在每一回请求中随HTML文书档案重新下载。所以,在实际应用中,未有供给把CSS代码内置在HTML文书档案中:

  2. 幸免采用CSS表明式(Expression) 
      
    CSS表明式是动态设置CSS属性的有力(但危急)方法。

  3. 代码压缩 
      
    当您控制把网站项目配置到网络上,那你就要思考对CSS进行压缩,出去注释和空格,以使得网页加载得更快。压缩您的代码,能够使用局地工具,如YUI
    Compressor 
      
    选择它可精简CSS代码,减少文件大小,以取得更高的加载速度

书写规范,一三条css书写 1.
不等浏览器成分的暗许属性有所差异,使用Reset可重置浏览器成分的有的暗中认可属性,以高达浏览器的相当。…

高效用、简洁、CSS代码优化原则

编写制定优良CSS代码的壹一个提议

2011/12/02 · CSS · 1
评论 · 来源:
维奇     ·
CSS

来源: 野史衍生和变化与Normalize,CSS代码优化原则。维奇

CSS学起来并不难,但在大型项目中,就变得难以管理,越发是差别的人在CSS书写风格上稍有两样,团队上就越是不便维系,为此总计了部分哪些兑现神速清洁的CSS代码原则:

一. 选取Reset但不用全局Reset

不一样浏览器元素的私下认可属性有所差别,使用Reset可重置浏览器成分的一对暗许属性,以高达浏览器的卓殊。但供给注意的是,请不要使用全局Reset:

CSS

*{ margin:0; padding:0; }

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

那不只因为它是舒缓和低功效的主意,而且还会招致有些不须求的因素也重置了各州距和内边距。在此建议参考YUI
Reset和Eric
Meyer的做法。小编跟埃里克迈尔的观点相同,Reset并不是铁钉铁铆的,具体还必要依照项指标不如须求做适合的改动,以完成浏览器的格外和操作上的便利性。小编动用的Reset如下:

CSS

/** 清除内外边距 **/ body, h1, h2, h3, h4, h5, h6, hr, p,
blockquote, /* structural elements 结构成分 */ dl, dt, dd, ul, ol, li,
/* list elements 列表元素 */ pre, /* text formatting elements
文本格式成分 */ form, fieldset, legend, button, input, textarea, /*
form elements 表单成分 */ th, td, /* table elements 表格成分 */
img/* img elements 图片成分 */{ border:medium none; margin: 0;
padding: 0; } /** 设置暗中认可字体 **/ body,button, input, select,
textarea { font: 12px/1.5 ‘宋体’,tahoma, Srial, helvetica, sans-serif; }
h1, h2, h3, h4, h5, h6 { font-size: 100%; } em{font-style:normal;} /**
重置列表成分 **/ ul, ol { list-style: none; } /** 重置超链接成分
**/ a { text-decoration: none; color:#333;} a:hover {
text-decoration: underline; color:#F40; } /** 重置图片元素 **/ img{
border:0px;} /** 重置表格成分 **/ table { border-collapse: collapse;
border-spacing: 0; }

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
/** 清除内外边距 **/
body, h1, h2, h3, h4, h5, h6, hr, p,
blockquote, /* structural elements 结构元素 */
dl, dt, dd, ul, ol, li, /* list elements 列表元素 */
pre, /* text formatting elements 文本格式元素 */
form, fieldset, legend, button, input, textarea, /* form elements 表单元素 */
th, td, /* table elements 表格元素 */
img/* img elements 图片元素 */{
border:medium none;
margin: 0;
padding: 0;
}
/** 设置默认字体 **/
body,button, input, select, textarea {
font: 12px/1.5 ‘宋体’,tahoma, Srial, helvetica, sans-serif;
}
h1, h2, h3, h4, h5, h6 { font-size: 100%; }
em{font-style:normal;}
/** 重置列表元素 **/
ul, ol { list-style: none; }
/** 重置超链接元素 **/
a { text-decoration: none; color:#333;}
a:hover { text-decoration: underline; color:#F40; }
/** 重置图片元素 **/
img{ border:0px;}
/** 重置表格元素 **/
table { border-collapse: collapse; border-spacing: 0; }

二. 优异的命名习惯

逼真乱7八糟只怕无语义命名的代码,什么人看了都会抓狂。就好像那样的代码:

CSS

.aaabb{margin:2px;color:red;}

1
.aaabb{margin:2px;color:red;}

自家想即便是初大家,也不见得会在实际上项目中那样命名1个class,但有未有想过那样的代码同样是很有题指标:

XHTML

<h1>My name is <span>Wiky</span></h1>

1
<h1>My name is <span>Wiky</span></h1>

标题在于一旦您供给把拥有原先深灰蓝的书体制改良成深紫,那修改后就样式就会成为:

CSS

.red{color:bule;}

1
.red{color:bule;}

这么的命名就会很令人费解,同样的命名叫.leftBar的侧面栏借使急需修改成左侧边栏也会很辛勤。所以,请不要选择要素的天性(颜色,地点,大小等)来定名二个class或id,您能够挑选意义的命名如:#navigation{…},.sidebar{…},.postwrap{…}

诸如此类,无论你怎么修改定义这么些class或id的体制,都不影响它跟HTML成分间的关系。

其它还有一种情景,壹些定位的样式,定义后就不会修改的了,那您命名时就无须担忧刚刚说的那种情状,如

CSS

.alignleft{float:left;margin-right:20px;}
.alignright{float:right;text-align:right;margin-left:20px;}
.clear{clear:both;text-indent:-9999px;}

1
2
3
.alignleft{float:left;margin-right:20px;}
.alignright{float:right;text-align:right;margin-left:20px;}
.clear{clear:both;text-indent:-9999px;}

那么对于如此二个段子

XHTML

<p class=”alignleft”>笔者是三个段子!</p>

1
<p class="alignleft">我是一个段落!</p>

设若急需把这一个段子由原来的左对齐修改为右对齐,那么只供给修改它的className就为alignright就足以了。

叁. 代码缩写

CSS代码缩写能够增长你写代码的进程,精简你的代码量。在CSS里面有众多足以缩写的性质,蕴含margin,padding,border,font,background和颜色值等,假设您学会了代码缩写,原本如此的代码:

CSS

li{ font-family:Arial, Helvetica, sans-serif; font-size: 1.2em;
line-height: 1.4em; padding-top:5px; padding-bottom:10px;
padding-left:5px; }

1
2
3
4
5
6
7
8
li{
font-family:Arial, Helvetica, sans-serif;
font-size: 1.2em;
line-height: 1.4em;
padding-top:5px;
padding-bottom:10px;
padding-left:5px;
}

就能够缩写为:

JavaScript

li{ font: 1.2em/1.4em Arial, Helvetica, sans-serif; padding:5px 0 10px
5px; }

1
2
3
4
li{
font: 1.2em/1.4em Arial, Helvetica, sans-serif;
padding:5px 0 10px 5px;
}

设若您想更通晓那几个属性要怎么缩写,可以参考《常用CSS缩写语法总括》只怕下载CSS-Shorthand-Cheat-Sheet.pdf

4. 利用CSS继承

尽管页面中父成分的八个子元素使用同一的体制,那最棒把他们相同的体裁定义在其父元素上,让它们继续那几个CSS样式。那样你能够很好的维护您的代码,并且还足以削减代码量。那么自然如此的代码:

CSS

#container li{ font-family:Georgia, serif; } #container p{
font-family:Georgia, serif; } #container h1{font-family:Georgia, serif;
}

1
2
3
#container li{ font-family:Georgia, serif; }
#container p{ font-family:Georgia, serif; }
#container h1{font-family:Georgia, serif; }

就能够简写成:

CSS

#container{ font-family:Georgia, serif; }

1
#container{ font-family:Georgia, serif; }

伍. 施用多重选择器

您能够统一四个CSS选拔器为2个,假设他们有同步的体裁的话。那样做不仅代码简洁且可为你节省时间和空中。如:

CSS

h1{ font-family:Arial, Helvetica, sans-serif; font-weight:normal; } h2{
font-family:Arial, Helvetica, sans-serif; font-weight:normal; } h3{
font-family:Arial, Helvetica, sans-serif; font-weight:normal; }

1
2
3
h1{ font-family:Arial, Helvetica, sans-serif; font-weight:normal; }
h2{ font-family:Arial, Helvetica, sans-serif; font-weight:normal; }
h3{ font-family:Arial, Helvetica, sans-serif; font-weight:normal; }

能够统一为

CSS

h1, h2, h3{ font-family:Arial, Helvetica, sans-serif;
font-weight:normal; }

1
h1, h2, h3{ font-family:Arial, Helvetica, sans-serif; font-weight:normal; }

(相关阅读:《三十几个最常用CSS选用器解析》)

陆. 适龄的代码注释

代码注释能够让别人更便于读懂你的代码,且合理的团伙代码注释,可使得协会更为明显。你能够选拔做的样式表的发端添加目录:

CSS

/*———————————— 1. Reset 2. Header 3. Content 4.
SideBar 5. Footer ———————————– */

1
2
3
4
5
6
7
/*————————————
1. Reset
2. Header
3. Content
4. SideBar
5. Footer
———————————– */

如此你代码的布局就一目领会,你能够不难的摸索和修改代码。

而对此代码的主内容,也应适当的加以划分,甚至在有须要的地点在对代码加以注释表达,那样也利于团队开发:

CSS

/*** Header ***/ #header{ height:145px; position:relative; }
#header h1{ width:324px; margin:45px 0 0 20px; float:left;
height:72px;} /*** Content ***/ #content{ background:#fff;
width:650px; float:left; min-height:600px; overflow:hidden;} #content
h1{color:#F00}/* 设置字体颜色 */ #content .posts{ overflow:hidden; }
#content .recent{ margin-bottom:20px; border-bottom:1px solid #f3f3f3;
position:relative; overflow:hidden; } /*** Footer ***/ #footer{
clear:both; padding:50px 5px 0; overflow:hidden;} #footer h4{
color:#b99d7f; font-family:Arial, Helvetica, sans-serif;
font-size:1.1em; }

1
2
3
4
5
6
7
8
9
10
11
/*** Header ***/
#header{ height:145px; position:relative; }
#header h1{ width:324px; margin:45px 0 0 20px; float:left; height:72px;}
/*** Content ***/
#content{ background:#fff; width:650px; float:left; min-height:600px; overflow:hidden;}
#content h1{color:#F00}/* 设置字体颜色 */
#content .posts{ overflow:hidden; }
#content .recent{ margin-bottom:20px; border-bottom:1px solid #f3f3f3; position:relative; overflow:hidden; }
/*** Footer ***/
#footer{ clear:both; padding:50px 5px 0; overflow:hidden;}
#footer h4{ color:#b99d7f; font-family:Arial, Helvetica, sans-serif; font-size:1.1em; }

 

7. 给您的CSS代码排序

假使代码中的属性都能遵照字母排序,那查找修改的时候就能更为便捷:

CSS

/*** 样式属性按字母排序 ***/ div{ background-color:#3399cc;
color:#666; font:1.2em/1.4em Arial, Helvetica, sans-serif;
height:300px; margin:10px 5px; padding:5px 0 10px 5px; width:30%;
z-index:10; }

1
2
3
4
5
6
7
8
9
10
11
/*** 样式属性按字母排序 ***/
div{
background-color:#3399cc;
color:#666;
font:1.2em/1.4em Arial, Helvetica, sans-serif;
height:300px;
margin:10px 5px;
padding:5px 0 10px 5px;
width:30%;
z-index:10;
}

八. 保持CSS的可读性

书写可读的CSS将会使得更易于寻找和改动样式。对于以下三种景况,哪一种可读性更高,作者想不言而明。

CSS

/*** 各类样式属性写壹行 ***/ div{ background-color:#3399cc;
color:#666; font: 1.2em/1.4em Arial, Helvetica, sans-serif;
height:300px; margin:10px 5px; padding:5px 0 10px 5px; width:30%;
z-index:10; } /*** 全体的体裁属性写在相同行 ***/ div{
background-color:#3399cc; color:#666; font: 1.2em/1.4em Arial,
Helvetica, sans-serif; height:300px; margin:10px 5px; padding:5px 0 10px
5px; width:30%; z-index:10; }

1
2
3
4
5
6
7
8
9
10
11
12
13
/*** 每个样式属性写一行 ***/
div{
background-color:#3399cc;
color:#666;
font: 1.2em/1.4em Arial, Helvetica, sans-serif;
height:300px;
margin:10px 5px;
padding:5px 0 10px 5px;
width:30%;
z-index:10;
}
/*** 所有的样式属性写在同一行 ***/
div{ background-color:#3399cc; color:#666; font: 1.2em/1.4em Arial, Helvetica, sans-serif; height:300px; margin:10px 5px; padding:5px 0 10px 5px; width:30%; z-index:10; }

当对于部分体裁属性较少的选拔器,小编会写到壹行:

CSS

/*** 选用器属性少的写在相同行 ***/ div{ background-color:#3399cc;
color:#666;}

1
2
/*** 选择器属性少的写在同一行 ***/
div{ background-color:#3399cc; color:#666;}

对此那些规则并非硬性规定,但随便你使用哪一类写法,小编的建议是壹味维持代码一致。属性多的子公司写,属性少于2个能够写一行。

九. 精选更优的体裁属性值

CSS中稍微属性选择差别的属性值,尽管达到的成效大概,当品质上却存在着异样,如

区别在于border:0把border设为0px,即使在页面上看不见,但按border暗中同意值通晓,浏览器依旧对border-width/border-color进行了渲染,即现已占据了内部存款和储蓄器值。

而border:none把border设为“none”即未有,浏览器解析“none”时将不作出渲染动作,即不会消耗内存值。所以提出利用border:none;

一如既往的,display:none隐藏对象浏览器不作渲染,不占用内存。而visibility:hidden则会。

十. 选取代替@import

先是,@import不属于XHTML标签,也不是Web标准的一片段,它对于较早先时代的浏览器包容也不高,并且对于网站的习性有一些负面包车型大巴影响。具体能够参见《高质量网址设计:不要选拔@import》。所以,请幸免采纳@import

11. 施用外部样式表

那个规则始终是二个很好的布置性执行。不单能够更便于维护修改,更关键的是应用外部文件能够拉长页面速度,因为CSS文件都能在浏览器中生出缓存。内置在HTML文书档案中的CSS则会在每趟请求中随HTML文书档案重新下载。所以,在事实上行使中,没有要求把CSS代码内置在HTML文书档案中:

CSS

<style type=”text/css” >     #container{ .. }     #sidebar{ .. }
</style>

1
2
3
4
<style type="text/css" >
    #container{ .. }
    #sidebar{ .. }
</style>

XHTML

<li style=”font-family:Arial, helvetica, sans-serif; color:#666; ”
>

1
<li style="font-family:Arial, helvetica, sans-serif; color:#666; " >

而是选择<link>导入外部样式表:

CSS

<link rel=”stylesheet” type=”text/css” href=”css/styles.css” />

1
<link rel="stylesheet" type="text/css" href="css/styles.css" />

12. 防止使用CSS表明式(Expression)

CSS表明式是动态设置CSS属性的兵不血刃(但危急)方法。Internet
Explorer从第一个本子初阶帮忙CSS表明式。上边包车型大巴事例中,使用CSS表明式能够兑现隔一个钟头切换一次背景颜色:

CSS

background-color: expression( (new Date()).getHours()%2 ? “#B8D4FF” :
“#F08A00” );

1
background-color: expression( (new Date()).getHours()%2 ? "#B8D4FF" : "#F08A00" );

如上所示,expression中采纳了JavaScript表明式。CSS属性遵照JavaScript说明式的猜测结果来安装。

表达式的难点就在于它的盘算频率要比我们想象的多。不仅仅是在页面呈现和缩放时,正是在页面滚动、乃至移动鼠标时都会要重新总括三遍。给CSS表达式扩大2个计数器能够跟踪表达式的持筹握算频率。在页面中不管移动鼠标都足以轻松达成10000次以上的总计量。

如果必须利用CSS表明式,一定要牢记它们要总计不可胜道次并且大概会对你页面包车型大巴属性产生影响。所以,在非不得已,请幸免采纳CSS表明式。

  一三. 代码压缩

当您控制把网址项目配置到互连网上,那你就要思量对CSS举办削减,出去注释和空格,以使得网页加载得更快。压缩您的代码,能够运用局地工具,如YUI
Compressor

接纳它可精简CSS代码,减少文件大小,以博取更高的加载速度。

14. 总结

在本文中,作者努力更详实的总括书写更高效的CSS代码的口径,但由于我见识和精力有限,作者如故希望这几个标准能支持您更好的书写和管理您的CSS代码,不知你又是何等下笔CSS的,是或不是也有一对想要分享的技艺?给本身留言吗多谢~

 

赞 5 收藏 1
评论

皇家赌场手机版 1

前言

近日在阅读陈旧的历史资料,整理以前饱受争议的CSS
Reset难点,但是好像十多年过去,以后大家统一了条件,纷纭推荐应用Normalize.css,包罗Bootstrap都举办了安置使用,可知它的承认程度之高。

鉴于小说提到内容较多,会分成体系作品

第一章
整治CSS Reset历史的嬗变痕迹,从第三份CSS Reset的降生,到提议No CSS
Reset的构思,再到进口CSS Reset 一.0目中无人的出世;最后一噎止餐,CSS
Reset被Normalize.css所代替;
进而开始认识Normalize.css,掌握它都做了那么些事情,诉说与CSS
Reset的分别,特出优势,告诉您干什么要选拔它。

第二章
是因为Normalize.css只提供了英文文书档案,未有提供相应的普通话版本,所以从这章起头对其源码进行翻译整理与解读,本章包括html与body,HTML5成分,链接,语义化文本标签,内嵌成分,群组成分等剧情解读。

第三章,
一连来介绍源码中的表单和表格部分,并且整理一份normalize-zh.css普通话注释的版本上传至Github,供我们参考运用,敬请期待

CSS学起来并不难,但在大型项目中,三个组织中分化的人在挥洒CSS风格上也有两样那样这些类型就变得难以管理,团队上就越是不便沟通,为此总括了1部分怎么着落到实处火速清洁的CSS代码原则:

CSS Reset 历史回想

 步骤/方法1

第一份 CSS Reset

怎么会有CSS
Reset的存在吗?那是因为早期的浏览器补助和掌握的CSS规范区别,导致浏览器在渲染页面时效力不均等,出现众多包容性难点。
关于 浏览器的暗许样式 请点击查看!

遵照玉伯的篇章中透漏,最早的一份CSS Reset来自Tantek
的undohtml.css,从URAV肆L中的日期能够看到时间是200四年,Tantek依据小编供给对此部分标签进行了简便的重置,源码如下:

CSS

/* undohtml.css */ /* (CC) 2004 Tantek Celik. Some Rights Reserved.
*/ :link,:visited { text-decoration:none } ul,ol { list-style:none }
h1,h2,h3,h4,h5,h6,pre,code { font-size:1em; }
ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,body,html,p,blockquote,
fieldset,input{ margin:0; padding:0 } a img,:link img,:visited img {
border:none } address { font-style:normal }

1
2
3
4
5
6
7
8
9
/* undohtml.css */
/* (CC) 2004 Tantek Celik. Some Rights Reserved.             */
:link,:visited { text-decoration:none }
ul,ol { list-style:none }
h1,h2,h3,h4,h5,h6,pre,code { font-size:1em; }
ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,body,html,p,blockquote,
fieldset,input{ margin:0; padding:0 }
a img,:link img,:visited img { border:none }
address { font-style:normal }
  1. 行使Reset但决不全局Reset

CSS Reset 大旨代码与效能

随后进入到CSS
RESET的类别的大腕更多,比如产业界带头大哥 YUI团队 以及Eric
Meyer把那份CSS
Reset变的进一步充实,可是我们一面如旧发现代码的着力部分或许重置,从此能够结论出早期的CSS
Reset的功效便是祛除全数浏览器暗中同意样式,让它1切归零!

CSS

* { margin:0; padding:0 }

1
* { margin:0; padding:0 }

然而在此之后1段时间,有人伊始批判那种暴力清零的CSS
Reset情势,随后部分前端开发者们也不胫而走一些争辨声音,比如:

  1. *{ margin:0; padding:0; }会推动品质难点
  2. 接纳通配符存在隐性难点
  3. 连着的标签重置等于画蛇添足
  4. 连片的竹签重置导致语言因素失效

注:由于都是局地破旧的老难点,就不提供出处了,再此可是多切磋,感兴趣谷歌(Google)~

不等浏览器成分的暗中同意属性有所分裂,使用Reset可重置浏览器成分的有个别默许属性,以达到浏览器的协作。但需求小心的是,请不要采用全局Reset:

No CSS Reset 思想

乔恩athan Snook是第五个建议No CSS Reset思想,其基本是Less is
more,少便是多,不提倡使用暴力归零的点子。

玉伯新兴也在《Reset CSS商讨》小说中阐释表达,其实 埃里克 Meyer并不希望我们下载她的 CSS Reset
后直接就拿去用,而是应该根据自个儿的急需,适量裁剪和改动后再使用。

后来YUI更新了cssreset,还配套有
cssfonts 和 cssbase。cssreset只负责清除暗中认可样式,而CSS fonts 和 CSS base
则将一部分因素的暗许样式重设回来,那就免去了事先的冲突,那壹又快捷成为大家的通用化解方法了。

YUI 提供的cssfonts.css

CSS

/* YUI 3.18.1 (build f7e7bcb) Copyright 2014 Yahoo! Inc. All rights
reserved. Licensed under the BSD License.
*/ /** * Percents could work for IE, but for backCompat purposes, we
are using keywords. * x-small is for IE6/7 quirks mode. */ body {
font:13px/1.231 arial,helvetica,clean,sans-serif; *font-size:small; /*
for IE */ *font:x-small; /* for IE in quirks mode */ } /** *
Nudge down to get to 13px equivalent for these form elements */ select,
input, button, textarea { font:99% arial,helvetica,clean,sans-serif; }
/** * To help tables remember to inherit */ table {
font-size:inherit; font:100%; } /** * Bump up IE to get to 13px
equivalent for these fixed-width elements */ pre, code, kbd, samp, tt {
font-family:monospace; *font-size:108%; line-height:100%; } /* YUI CSS
Detection Stamp */ #yui3-css-stamp.cssfonts { display: none; }

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
/*
YUI 3.18.1 (build f7e7bcb)
Copyright 2014 Yahoo! Inc. All rights reserved.
Licensed under the BSD License.
http://yuilibrary.com/license/
*/
 
/**
* Percents could work for IE, but for backCompat purposes, we are using keywords.
* x-small is for IE6/7 quirks mode.
*/
body {
font:13px/1.231 arial,helvetica,clean,sans-serif;
*font-size:small; /* for IE */
*font:x-small; /* for IE in quirks mode */
}
 
/**
* Nudge down to get to 13px equivalent for these form elements
*/
select,
input,
button,
textarea {
font:99% arial,helvetica,clean,sans-serif;
}
 
/**
* To help tables remember to inherit
*/
table {
font-size:inherit;
font:100%;
}
 
/**
* Bump up IE to get to 13px equivalent for these fixed-width elements
*/
pre,
code,
kbd,
samp,
tt {
font-family:monospace;
*font-size:108%;
line-height:100%;
}
 
/* YUI CSS Detection Stamp */
#yui3-css-stamp.cssfonts { display: none; }

*{margin:0;padding:0;}

国产 CSS Reset

那是YUI最新更新的三遍版本V3.18.1,不过很窘迫的觉察,YUI 提供的
cssfonts 和 cssbase
只思索了西Owen字,对汉字的帮助却不多,那就造成恒河沙数用户只行使了cssreset,而从不利用其它三个。

听说nake和adiaos两大移动品牌到天朝后,有个别活动科学技术会缩小,可是相对没悟出,万能的代码到了天朝也是会浓缩的。
– -!

于是,某些大腕不甘心,不仅厌倦了国内抄来抄去的CSS
Reset,也受够了只思虑西亚洲字体,不思索汉字的欠缺,大厂们就起来探寻制定属于自身的CSS
Reset,比如二零一零年AliKissy框架
(源码连接已失效,主页留回顾) 的首先份CSS Reset:

CSS

/* KISSY CSS Reset 理念:清除和重置是紧凑不可分的 特色:一.适应汉语2.依照最新主流浏览器 维护:玉伯(lifesinger@gmail.com),
正淳(ragecarrier@gmail.com) */ /* 清除内外边距 */ body, h1, h2, h3,
h4, h5, h6, hr, p, blockquote, /* structural elements 结构成分 */ dl,
dt, dd, ul, ol, li, /* list elements 列表成分 */ pre, /* text
formatting elements 文本格式成分 */ fieldset, lengend, button, input,
textarea, /* form elements 表单成分 */ th, td { /* table elements
表格成分 */ margin: 0; padding: 0; } /* 设置暗中同意字体 */ body, button,
input, select, textarea { /* for ie */ /*font: 12px/1 Tahoma,
Helvetica, Arial, “宋体”, sans-serif;*/ font: 12px/1 Tahoma, Helvetica,
Arial, “\5b8b\4f53”, sans-serif; /* 用 ascii
字符表示,使得在其余编码下都无难点 */ } h1 { font-size: 18px; /* 18px
/ 12px = 1.5 */ } h2 { font-size: 16px; } h3 { font-size: 14px; } h4,
h5, h6 { font-size: 100%; } address, cite, dfn, em, var { font-style:
normal; } /* 将斜体扶正 */ code, kbd, pre, samp, tt { font-family:
“Courier New”, Courier, monospace; } /* 统一等宽字体 */ small {
font-size: 12px; } /* 小于 1贰px 的华语很难阅读,让 small 寻常化 */ /*
重置列表元素 */ ul, ol { list-style: none; } /* 重置文本格式成分 */ a
{ text-decoration: none; } a:hover { text-decoration: underline; }
abbr[title], acronym[title] { /* 注:1.ie陆 不辅助 abbr;
2.那边用了品质采纳符,ie6 下无效果 */ border-bottom: 1px dotted;
cursor: help; } q:before, q:after { content: ”; } /* 重置表单成分 */
legend { color: #000; } /* for ie6 */ fieldset, img { border: none; }
/* img 搭车:让链接里的 img 无边框 */ /* 注:optgroup 不恐怕扶正 */
button, input, select, textarea { font-size: 100%; /* 使得表单成分在 ie
下能继承字体大小 */ } /* 重置表格成分 */ table { border-collapse:
collapse; border-spacing: 0; } /* 重置 hr */ hr { border: none;
height: 1px; } /*
让非ie浏览器默许也出示垂直滚动条,制止因滚动条引起的闪烁 */ html {
overflow-y: scroll; }

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
/* KISSY CSS Reset
理念:清除和重置是紧密不可分的
特色:1.适应中文 2.基于最新主流浏览器
维护:玉伯(lifesinger@gmail.com), 正淳(ragecarrier@gmail.com)
*/
 
/* 清除内外边距 */
body, h1, h2, h3, h4, h5, h6, hr, p, blockquote, /* structural elements 结构元素 */
dl, dt, dd, ul, ol, li, /* list elements 列表元素 */
pre, /* text formatting elements 文本格式元素 */
fieldset, lengend, button, input, textarea, /* form elements 表单元素 */
th, td { /* table elements 表格元素 */
    margin: 0;
    padding: 0;
}
 
/* 设置默认字体 */
body,
button, input, select, textarea { /* for ie */
    /*font: 12px/1 Tahoma, Helvetica, Arial, "宋体", sans-serif;*/
    font: 12px/1 Tahoma, Helvetica, Arial, "\5b8b\4f53", sans-serif;
    /* 用 ascii 字符表示,使得在任何编码下都无问题 */
}
 
h1 { font-size: 18px; /* 18px / 12px = 1.5 */ }
h2 { font-size: 16px; }
h3 { font-size: 14px; }
h4, h5, h6 { font-size: 100%; }
 
address, cite, dfn, em, var { font-style: normal; } /* 将斜体扶正 */
code, kbd, pre, samp, tt { font-family: "Courier New", Courier, monospace; } /* 统一等宽字体 */
small { font-size: 12px; } /* 小于 12px 的中文很难阅读,让 small 正常化 */
 
/* 重置列表元素 */
ul, ol { list-style: none; }
 
/* 重置文本格式元素 */
a { text-decoration: none; }
a:hover { text-decoration: underline; }
 
abbr[title], acronym[title] { /* 注:1.ie6 不支持 abbr; 2.这里用了属性选择符,ie6 下无效果 */
border-bottom: 1px dotted;
cursor: help;
}
 
q:before, q:after { content: ”; }
 
/* 重置表单元素 */
legend { color: #000; } /* for ie6 */
fieldset, img { border: none; } /* img 搭车:让链接里的 img 无边框 */
/* 注:optgroup 无法扶正 */
button, input, select, textarea {
    font-size: 100%; /* 使得表单元素在 ie 下能继承字体大小 */
}
 
/* 重置表格元素 */
table {
border-collapse: collapse;
border-spacing: 0;
}
 
/* 重置 hr */
hr {
    border: none;
    height: 1px;
}
/* 让非ie浏览器默认也显示垂直滚动条,防止因滚动条引起的闪烁 */
html { overflow-y: scroll; }

 

记得玉伯在写完第贰本子的CSS Reset后,在篇章的尾声照旧千叮咛,万嘱咐说:

请记住:永远不设有万能缓解方案,永远不曾银弹。
因而笔者的建议和 埃里克 是平等的:请依照现实须求,适量裁剪和修改后再采用。

那不仅仅因为它是舒缓和低效用的艺术,而且还会招致有个别不须要的要素也重置了异乡距和内边距。在此建议参考YUI
Reset和埃里克 迈尔的做法。

CSS Reset 替代品 Normalize.css

大家把历史拉回来前些天,时移俗易,CSS Reset
逐步脱离的前线前端的视野,被取而代之正是Normalize.css,关于对CSS
Reset 与
Normalize.css的分别?能够引用乐乎上 张小核桃 的1个回应:

CSS Reset 是革命党,CSS Reset
里最激进那一面提倡不管你小子有用没用,通通给本身脱了那身衣裳,凭什么你
body 出生就穿1圈 margin,凭什么您姓 h 的比别人吃得胖,凭什么你 ul
戴一手臂珠子。于是 *{margin:0;}
等等运动,把人家全拍扁了。看似是众终生等了,实则是荒废了财富又占不到方便人民群众,有求于人家的时候还得贱贱地给加回去,实在须要每户的暗中认可样式了咋做?人家锅都扔炉子里烧了,自个儿望着办吧。

Normalize.css
是勘误派。他们发起,各种要素都有其存在的道理,不难暴虐地一碗水端平是倒霉的。body
那壹圈确实挤压了页面包车型地铁生存空间,那就改掉。士农工商,哪个人有何人的功能,给他俩制订个正规,确定保障他们在其余浏览器里都干好温馨的劳动。

下一章节会对诺玛lize.css举行简要的牵线,关于两岸的差别不同能够看问答平台的题材:
利用normalize.css蒙受的题材?
诺玛lize.css 和 Reset CSS
有啥本质分裂没?

/** 清除内外边距 **/

Normalize.css 不难介绍

有关对Github的牵线,那里引用 咀嚼之味 针对 法定介绍 翻译的的 华语版本。

body, h1, h2, h3, h4, h5, h6, hr, p,

简言之概述

Normalize.css
是@necolas和@jon_neal 两位大拿花了几百个时辰来探究不一致浏览器的默许样式的差别而得出的收获,多谢前辈们的进献。

Normalize.css
只是一个一点都不大的CSS文件,但它在默许的HTML成分样式上提供了跨浏览器的万丈一致性。相比于守旧的CSS
Reset,Normalize.css是1种现代的、为HTML伍预备的优质替代方案。Normalize.css未来早就被用于推特(TWTR.US)Bootstrap、HTML伍 Boilerplate、GOV.UK、Highlanderdio、CSS Tricks
以及巨额别的框架、工具和网址上。

当下Normalize.css 已经变成了CSS
Reset的代表方案是的确的业务了。国内盛名的皇家赌场手机版,AliceUI,AmazeUI 框架都以基于大概借鉴Normalize.css进行的制定化版本。

可以从那里下载:
Github:

blockquote, /* structural elements 结构成分 */

做了那多个事

Normalize.css做了以下几件事:

  • Preserves useful defaults, unlike many CSS resets.
    保卫安全得力的浏览器暗许样式而不是完全去掉它们
  • Normalizes styles for a wide range of elements
    一般化的体裁:为绝超越三分之二HTML成分提供
  • Corrects bugs and common browser inconsistencies
    修补浏览器自身的bug并确定保证各浏览器的一致性
  • Improves usability with subtle improvements
    优化CSS可用性:用有个别小技巧
  • Explains what code does using detailed comments
    表达朝码:用注释和详尽的文书档案来

dl, dt, dd, ul, ol, li, /* list elements 列表元素 */

优势相比

眼下讲到CSS
Reset的主题作用正是清零,而且过于暴力;那么作为继承者Normalize.css,到底有何样优势能够完全代表前者呢?

1.Normalize.css 保卫安全了有价值的暗中认可值
Reset通过为差不离拥有的因素施加默许样式,强行使得成分有雷同的视觉效果。
相比较之下,Normalize.css保持了广大暗中同意的浏览器样式。
这就意味着你不要再为全体公共的排版成分重新安装样式。
当二个要素在分裂的浏览器中有例外的暗许值时,Normalize.css会力求让这几个样式保持1致并尽恐怕与现代专业相契合。

二.Normalize.css 修复了浏览器的bug
它修复了科普的桌面端和活动端浏览器的bug。那频仍超越了Reset所能做到的范围。
关于这或多或少,Normalize.css修复的标题暗含了HTML5成分的来得设置、预格式化文字的font-size难点、在IE玖中SVG的溢出、许多出现在各浏览器和操作系统中的与表单相关的bug。

三.Normalize.css 修复了浏览器的bug
选取Reset最令人苦恼的地点莫过于在浏览器调节和测试工具中大段大段的继承链。在Normalize.css中就不会有那样的标题,因为在大家的守则中对多选择器的行使时相当小心的,大家仅会有目标地对目的成分设置样式。

四.Normalize.css 是模块化的
以此类型早就被拆分为几个相关却又单独的一些,这使得你可见很简单也很精通地领悟如何因素棉被服装置了一定的值。由此那能让您协调选择性地移除掉有个别永远不会用到壹些(比如表单的1般化)。

5.Normalize.css 具备详细的文书档案
Normalize.css的代码基于详细而完善的跨浏览器研商与测试。那一个文件中存有详细的代码表达并在Github
Wiki中有尤其的辨证。那意味你能够找到每1行代码具体做到了怎么样工作、为啥要写这句代码、浏览器之间的差距,并且你可以更易于地实行温馨的测试。

这一个项指标对象是帮衬人们理解浏览器默许是怎么渲染成分的,同时也让大千世界很简单地理解怎么样革新浏览器渲染。

pre, /* text formatting elements 文本格式元素 */

源码解析

就算Normalize.css第陆条优势是提供了详尽的文书档案,不过它并从未提供相应的中文版本,英文注释首先看起来不够明晰,其次对难题的剖析程度也不够细化,而且也不含有失水准案例,所以接下去会分章节对模块举行源码解读与整治。

1 赞 1 收藏
评论

皇家赌场手机版 2

form, fieldset, legend, button, input, textarea, /* form elements
表单成分 */

th, td, /* table elements 表格成分 */

img/* img elements 图片成分 */{

border:medium none;

margin: 0;

padding: 0;

}

/** 设置暗许字体 **/

body,button, input, select, textarea {

font: 12px/1.5 ‘宋体’,tahoma, Srial, helvetica, sans-serif; }

h1, h2, h3, h4, h5, h6 { font-size: 100%; }

em{font-style:normal;}

/** 重置列表成分 **/

ul, ol { list-style: none; }

/** 重置超链接成分 **/

a { text-decoration: none; color:#333;}

a:hover { text-decoration: underline; color:#F40; }

/** 重置图片成分 **/

img{ border:0px;}

/** 重置表格成分 **/

table { border-collapse: collapse; border-spacing: 0; }

 

  1. 精美的命名习惯

如实乱七捌糟或许无语义命名的代码,什么人看了都会抓狂。比如上边那样的代码:

.aaabb{margin:2px;color:red;}

自家想固然是初大方,也未必会在骨子里项目中如此命名多个class,但有未有想过这样的代码同样是很有题指标:

<h1>My name is <span class=”red
blod”>Wiky</span></h1>

题材在于一旦你须要把全体原先金色的字体制改良成浅青,那修改后就样式就会成为:

red{color:bule;}

诸如此类的命名就会很令人费解,同样的命名字为.leftBar的侧面栏借使急需修改成左边边栏也会很麻烦。所以,请不要选择要素的特色(颜色,地方,大小等)来命名贰个class或id,您能够挑选意义的命名如:#navigation{…},.sidebar{…},.postwrap{…}

那样,无论你怎么着修改定义这一个class或id的体制,都不影响它跟HTML成分间的维系。

别的还有1种意况,1些固定的样式,定义后就不会修改的了,那你命名时就绝不担忧刚刚说的这种情形,如:

.alignleft{float:left;margin-right:20px;}

.alignright{float:right;text-align:right;margin-left:20px;}

.clear{clear:both;text-indent:-9999px;}

要是需求把这一个段落由原本的左对齐修改为右对齐,那么只须求修改它的className就为alignright就能够了。

叁代码缩写

CSS代码缩写能够增强你写代码的进程,精简你的代码量。在CSS里面有过多方可缩写的特性,包含margin,padding,border,font,background和颜色值等,假设您学会了代码缩写,原本如此的代码:

li{

font: 1.2em/1.4em Arial, Helvetica, sans-serif;

padding:5px 0 10px 5px;

}

4利用CSS继承

假诺页面中父成分的多少个子成分使用同壹的体制,那最棒把她们1如既往的体裁定义在其父成分上,让它们继续这一个CSS样式。那样您能够很好的掩护您的代码,并且仍是能够削减代码量。那么自然如此的代码:

#container li{ font-family:Georgia, serif; }

#container p{ font-family:Georgia, serif; }

#container h1{font-family:Georgia, serif; }

能够写成:

#container{font-family:Georgia,serif; }

 

伍施用多重选取器

你能够统1七个CSS选取器为1个,固然她们有联手的体制的话。那样做不仅代码简洁且可为你节省时间和空中。如:

h1, h2, h3{ font-family:Arial, Helvetica, sans-serif;
font-weight:normal; }

  1. 适于的代码注释

代码注释可以让别人更便于读懂你的代码,且合理的组织代码注释,可使得组织更为清晰。

  1. 维持CSS的可读性

挥洒可读的CSS将会使得更便于物色和改动样式。对于以下两种情况,哪类可读性更高,笔者想不言而明。

  1. 使用外部样式表

那几个条件始终是2个很好的筹划执行。不单能够更易于维护修改,更注重的是利用外部文件能够增强页面速度,因为CSS文件都能在浏览器中爆发缓存。内置在HTML文书档案中的CSS则会在历次请求中随HTML文书档案重新下载。

9.防止使用CSS表明式(Expression)

表明式的题材就在于它的测算频率要比大家想象的多。不仅仅是在页面彰显和缩放时,就是在页面滚动、乃至移动鼠标时都会要重新计算3回。给CSS表明式增加二个计数器能够跟踪表明式的计量频率。在页面中不管移动鼠标都足以轻松完结一千0次以上的计算量。

十代码压缩

当你控制把网址项目配置到网络上,那您将要思量对CSS举办削减,出去注释和空格,以使得网页加载得更快。压缩您的代码,能够应用部分工具,如YUI
Compressor,利用它可精简CSS代码,收缩文件大小,以博得更高的加载速度。

Leave a Comment.