CSS(一):样式重置
作者 Viliam | 发布于 2015-11-05
CSS

在这个浏览器横行的时代,每个浏览器对于html标签的默认样式有所不同,例如:ul列表有项目符,a链接带下划线,strong标签有字体加粗样式,em标签有字体倾斜样式等等,CSS reset就是为了覆盖这些默认样式,然后再将它统一定义,以解决它们之间的差异。

比较常用的Reset.css

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,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,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline;
  zooom: 1;
}
article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section {
  display: block;
}
body {
  font: 12px/1.5 Tahoma, Helvetica, Arial, "\5b8b\4f53", sans-serif;
  line-height: 1;
}
ol,
ul {
  list-style: none;
}
blockquote,
q {
  quotes: none;
}
blockquote:before,
blockquote:after,
q:before,
q:after {
  content: '';
  content: none;
}
table {
  border-collapse: collapse;
  border-spacing: 0;
}
h1,h2,h3,h4,h5,h6 {
font-size:100%;
font-weight:normal;
}
input {
  vertical-align: middle;
}
a {
  text-decoration: none;
}
a:hover {
  text-decoration: underline;
}
img {
  border: 0;
  vertical-align: middle;
}
:focus {
  outline: 0;
}
b,
strong {
  font-weight: 700;
}

初始以为上面的这份重置样式应该可以走到哪,就把它带到哪,不管是什么样的页面,都引入一次,然而并不能解决所有问题,当你需要到一些默认样式的时候,还是要重新设置回来。最近发现很多网站使用Normalize.css,于是好奇地去看了下Normalize.css官网: http://nicolasgallagher.com/about-normalize-css/

好吧,英文版完全看不懂,还是来点中文的,就是写这个Normalize的目的

创造normalize.css有下面这几个目的:

    1、保护有用的浏览器默认样式而不是完全去掉它们
    2、一般化的样式:为大部分HTML元素提供
    3、修复浏览器自身的bug并保证各浏览器的一致性
    4、优化CSS可用性:用一些小技巧
    5、解释代码:用注释和详细的文档来

Normalize.css支持包括手机浏览器在内的超多浏览器,同时对HTML5元素、排版、列表、嵌入的内容、表单和表格都进行了一般化。尽管这个项目基于一般化的原则,但我们还是在合适的地方使用了更实用的默认值。

normalize.css v2.0.1 样式和一些注释如下:

/*
 * 更正IE/8/9没有定义的块.
 */

article,aside,details,figcaption,figure,footer,header,hgroup,nav,section,summary {
    display: block;
}
/*
 * 下列HTML5新模块元素在IE8、9版本浏览器中没有被定义默认样式,考虑到其特殊性,特为下列元素添加“inline-block”显示属性
 */
audio,canvas,video{
  display: inline-block;
}

/*
//为防止主流浏览器中,显示“不带控制按钮的音频模块”
//解决iOS5移动端显示多余高度的兼容性
*/
  audio:not([controls]){
      display: none;
      height: 0;
  }
/*
// 处理 IE 8/9 中未定义的样式。
*/
           [hidden]{
               display: none;
           }
/*
//默认字体设置,边距设置
*/
html{
    font-family: sans-serif;
    -webkit-text-size-adjust: 100%; /* 2 */
      -ms-text-size-adjust: 100%; /* 2 */
  }

/*
//去除默认边距
*/
  body {
      margin: 0;
      font-family:  Tahoma, Helvetica, Arial, "\5b8b\4f53", sans-serif;
      line-height: 1;

  }

/*
//链接相关样式
*/
a {
    text-decoration: none;
}
a:hover {
  text-decoration: underline;
}

a:focus {
  outline: thin dotted;
}

/*
//使h1标签在section标签和article标签的留白和字体样式统一。可同时兼容Firefox 4+、Safari 5和Chrome等不同的浏览器
*/
h1 {
    font-size: 2em;
    margin: 0.67em 0;
}

/*
// 解决首字母样式在IE8/9、Safari 5和chrome浏览器中未定义的问题
*/
abbr[title] {
   border-bottom: 1px dotted;

}


b,
strong {
  font-weight: bold;
}

dfn {
  font-style:italic;
}

hr {
  -moz-box-sizing: content-box;
  box-sizing: content-box;
  height: 0;
}

mark {
  background: #ff0;
  color: #000;
}

code,
kbd,
pre,
samp {
  font-family: monospace, serif;
  font-size: 1em;
}
/*
//提高pre标签格式化文本在所有浏览器中的可读性
*/

pre {
    white-space: pre-wrap;
}

q {
  quotes: "\201C" "\201D" "\2018" "\2019";
}

small {
  font-size: 80%;
}

sub,
sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}

sup {
  top: -0.5em;
}

sub {
  bottom: -0.25em;
}


input {
  vertical-align: middle;
}

/*
// 在IE8/9浏览器中,当img标签中包含a标签时,去除img边框属性
*/

img {
   border: 0;
}

svg:not(:root) {
  overflow: hidden;
}

figure {
  margin: 0;
}
/*
//表单
*/

fieldset {
    border: 1px solid #c0c0c0;
    margin: 0 2px;
    padding: 0.35em 0.625em 0.75em;
}

legend {
  border: 0;
  padding: 0;
}

button,
input,
select,
textarea {
  font-family: inherit;
  font-size: 100%;
  margin: 0;
}

button,
input {
  line-height: normal;
}

button,
select {
  text-transform: none;
}

button,
html input[type="button"],
input[type="reset"],
input[type="submit"] {
  -webkit-appearance: button;
  cursor: pointer;
}

button[disabled],
html input[disabled] {
  cursor: default;
}

input[type="checkbox"],
input[type="radio"] {
  box-sizing: border-box;
  padding: 0;
}

input[type="search"] {
  -webkit-appearance: textfield;
  -moz-box-sizing: content-box;
  -webkit-box-sizing: content-box;
  box-sizing: content-box;
}

input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-decoration {
  -webkit-appearance: none;
}

button::-moz-focus-inner,
input::-moz-focus-inner {
  border: 0;
  padding: 0;
}

/*
//IE8/9中,去除默认垂直滚动条属性
*/
textarea {
   overflow: auto;
   vertical-align: top;
}

关于对CSS Reset 与 Normalize.css的区别?可以引用知乎上 张小核桃 的一个回答:

CSS Reset 是革命党,CSS Reset 里最激进那一派提倡不管你小子有用没用,通通给我脱了那身衣服,凭什么你 body 出生就穿一圈 margin,凭什么你姓 h 的比别人吃得胖,凭什么你 ul 戴一胳膊珠子。于是 *{margin:0;} 等等运动,把人家全拍扁了。看似是众生平等了,实则是浪费了资源又占不到便宜,有求于人家的时候还得贱贱地给加回去,实在需要人家的默认样式了怎么办?人家锅都扔炉子里烧了,自己看着办吧。

Normalize.css 是改良派。他们提倡,各个元素都有其存在的道理,简单粗暴地一视同仁是不好的。body 那一圈确实挤压了页面的生存空间,那就改掉。士农工商,谁有谁的作用,给他们制定个规范,确保他们在任何浏览器里都干好自己的活儿。

CSS Reset被Normalize.css所替代也是理所当然了

附:文件引用绝对路径

     <link rel="stylesheet" href="http://www.i--do.com/libs/css/reset.css"/>
     <link rel="stylesheet" href="http://www.i--do.com/libs/css/normalize.css"/>

本站说明

前端开发、体验、交互、设计、技术、分享 i--do.com,包含javascript、html、css、nodeJS、demo展示等。转载文章请标注文章来源。

联系我

E-Mail: 709694072@qq.com