CSS 百分网手机站

CSS教程之重置默认样式与IE兼容圆角的解决方法

时间:2017-10-19 09:26:09 CSS 我要投稿

CSS教程之重置默认样式与IE兼容圆角的解决方法

  小编这里有一篇总结css reset以及IE兼容css教程3圆角的htc解决方法 ,属于比较全面的文章,希望能对大家有所帮助。

  重置默认样式

  最近看到一个词叫css reset。什么叫做css reset呢?我理解为重置css,也就是重置默认样式。我在中讲到,一些标签元素在HTML下有一个默认属性值,我们在写css页面的时候,为了避免在css中重复定义它们,我们需要重置默认样式(css reset)。每个人的用法和写法都不一样。找到一篇关于 可以看看国外使用css reset的比例调查。

  接下来我也查看了国内的两个网站,用Firebug按F12看看他们的css reset怎么写的?

  淘宝():

  html {

  overflow-x:auto;

  overflow-y:scroll;

  }

  body, dl, dt, dd, ul, ol, li, pre, form, fieldset, input, p, blockquote, th, td {

  font-weight:400;

  margin:0;

  padding:0;

  }

  h1, h2, h3, h4, h4, h5 {

  margin:0;

  padding:0;

  }

  body {

  background-color:#FFFFFF;

  color:#666666;

  font-family:Helvetica,Arial,sans-serif;

  font-size:12px;

  padding:0 10px;

  text-align:left;

  }

  select {

  font-size:12px;

  }

  table {

  border-collapse:collapse;

  }

  fieldset, img {

  border:0 none;

  }

  fieldset {

  margin:0;

  padding:0;

  }

  fieldset p {

  margin:0;

  padding:0 0 0 8px;

  }

  legend {

  display:none;

  }

  address, caption, em, strong, th, i {

  font-style:normal;

  font-weight:400;

  }

  table caption {

  margin-left:-1px;

  }

  hr {

  border-bottom:1px solid #FFFFFF;

  border-top:1px solid #E4E4E4;

  border-width:1px 0;

  clear:both;

  height:2px;

  margin:5px 0;

  overflow:hidden;

  }

  ol, ul {

  list-style-image:none;

  list-style-position:outside;

  list-style-type:none;

  }

  caption, th {

  text-align:left;

  }

  q:before, q:after, blockquote:before, blockquote:after {

  content:"";

  }

  百度有啊():(架构基本上是模仿YUI来做的)

  body {

  font-family:arial,helvetica,sans-serif;

  font-size:13px;

  font-size-adjust:none;

  font-stretch:normal;

  font-style:normal;

  font-variant:normal;

  font-weight:normal;

  line-height:1.4;

  text-align:center;

  }

  body, ul, ol, dl, dd, h1, h2, h3, h4, h5, h6, p, form, fieldset, legend, input, textarea, select, button, th, td {

  margin:0;

  padding:0;

  }

  h1, h2, h3, h4, h5, h6 {

  font-size:100%;

  font-weight:normal;

  }

  table {

  font-size:inherit;

  }

  input, select {

  font-family:arial,helvetica,clean,sans-serif;

  font-size:100%;

  font-size-adjust:none;

  font-stretch:normal;

  font-style:normal;

  font-variant:normal;

  font-weight:normal;

  line-height:normal;

  }

  button {

  overflow:visible;

  }

  th, em, strong, b, address, cite {

  font-style:normal;

  font-weight:normal;

  }

  li {

  list-style-image:none;

  list-style-position:outside;

  list-style-type:none;

  }

  img, fieldset {

  border:0 none;

  }

  ins {

  text-decoration:none;

  }

  在《超越css》一书中建议我们做网站开始重置所有默认样式:

  /* Normalizes margin,padding */

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

  /* Normalizes font-size for headers */

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

  /* Removes list-style from lists */

  ol,ul { list-style:none }

  /* Normalizes font-size and font-weight to normal */

  address,caption,cite,code,dfn,em,strong,th,var { font-size:normal; font-weight:normal }

  /* Removes list-style from lists */

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

  /* Removes border from fieldset and img */

  fieldset,img { border:0 }

  /* Left-aligns text in caption and th */

  caption,th { text-align:left }

  /* Removes quotation marks from q */

  q:before,q:after { content:''}

  那我们实际写代码的时候该怎么来css reset呢?

  我个人推荐使用(和)的 css reset

  Eric Meyer's Reset:

  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;

  }

  body {

  line-height: 1;

  }

  ol, ul {

  list-style: none;

  }

  blockquote, q {

  quotes: none;

  }

  blockquote:before, blockquote:after,

  q:before, q:after {

  content: '';

  content: none;

  }

  /* remember to define focus styles! */

  :focus {

  outline: 0;

  }

  /* remember to highlight inserts somehow! */

  ins {

  text-decoration: none;

  }

  del {

  text-decoration: line-through;

  }

  /* tables still need 'cellspacing="0"' in the markup */

  table {

  border-collapse: collapse;

  border-spacing: 0;

  }

  YUI:

  body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td {

  margin:0;

  padding:0;

  }

  table {

  border-collapse:collapse;

  border-spacing:0;

  }

  fieldset,img {

  border:0;

  }

  address,caption,cite,code,dfn,em,strong,th,var {

  font-style:normal;

  font-weight:normal;

  }

  ol,ul {

  list-style:none;

  }

  caption,th {

  text-align:left;

  }

  h1,h2,h3,h4,h5,h6 {

  font-size:100%;

  font-weight:normal;

  }

  q:before,q:after {

  content:'';

  }

  abbr,acronym { border:0;

  }

  结合他们的'css reset写法,再根据自己的实际情况,一定能写出符合自己网站的完美的css reset。