1.CSS Reset

河湾欢儿

发布于 2018-09-06 16:01:39

6020

发布于 2018-09-06 16:01:39

浏览器对标签进行了默认设置，所以在我们没有定义样式的时候，会有五花八门的效果不同的浏览器设置的默认样式是由差异，效果也会有差异。因为浏览器对标签进行设置，所以我们必须额外设置标签的样式，把之前的样式覆盖(reset)掉。

下列是常用的所有的html标签

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8"/>

<title>HTML Only</title>

</head>

<body>

<article>article</article>

<nav>nav</nav>

<h1>h1</h1>

<h2>h2</h2>

<h3>h3</h3>

<h4>h4</h4>

<h5>h5</h5>

<h6>h6</h6>

<address>address</address>

<p>p</p>

<pre>pre</pre>

<blockquote>blockquote</blockquote>

<ol>

<li>ol li</li>

</ol>

<ul>

<li>ul li</li>

</ul>

<dl>

<dt>dl dt</dt>

<dd>dl dd</dd>

</dl>

<table>

<caption>table caption</caption>

<thead>

<tr><th>table thead tr th</th></tr>

</thead>

<tbody>

<tr><td>table tbody tr td</td></tr>

</tbody>

<tfoot>

<tr><td>table tfoot tr td</td></tr>

</tfoot>

</table>

<form>form</form>

<fieldset>

<legend>fieldset legend</legend>

</fieldset>

<label>label</label>

<input type="text" value="input text">

<input type="button" value="input button">

<button type="button">button button</button>

<select>

<option>select option</option> 

</select>

<textarea>textarea</textarea>

<del>del</del>

<ins>ins</ins>

<img src="icon.png">

<iframe src=""></iframe>

<a href="">a</a>

<em>em</em>

<strong>strong</strong>

<i>i</i>

<b>b</b>

<u>u</u>

<s>s</s>

<small>small</small>

<abbr>abbr</abbr>

<q>q</q>

<cite>cite</cite>

<dfn>dfn</dfn>

<sub>sub</sub>

<sup>sup</sup>

<time>time</time>

<code>code</code>

<kbd>kbd</kbd>

<samp>samp</samp>

<var>var</var>

<mark>mark</mark>

</body>

</html>

清除默认样式为

    html,body,h1,h2,h3,h4,h5,h6,div,dl,dt,dd,ul,ol,li,p,blockquote,pre,hr,figure,table,caption,th,td,form,fieldset,legend,input,button,textarea,menu{margin:0;padding:0;}
    header,footer,section,article,aside,nav,hgroup,address,figure,figcaption,menu,details{display:block;}
    table{border-collapse:collapse;border-spacing:0;}
    caption,th{text-align:left;font-weight:normal;}
    html,body,fieldset,img,iframe,abbr{border:0;}
    i,cite,em,var,address,dfn{font-style:normal;}
    [hidefocus],summary{outline:0;}
    li{list-style:none;}
    h1,h2,h3,h4,h5,h6,small{font-size:100%;}
    sup,sub{font-size:83%;}
    pre,code,kbd,samp{font-family:inherit;}
    q:before,q:after{content:none;}
    textarea{overflow:auto;resize:none;}
    label,summary{cursor:default;}
    a,button{cursor:pointer;}
    h1,h2,h3,h4,h5,h6,em,strong,b{font-weight:normal;}
    del,ins,u,s,a,a:hover{text-decoration:none;}
    body,textarea,input,button,select,keygen,legend{font:12px/1.14 arial,simsun;color:#333;outline:0;}
    body{background:#fff;}
    a,a:hover{color:#333;}

浏览器是通过标签来定义的，所以我们通过标签把浏览的默认样式去掉，这就是清除浏览器的默认样式，也叫做css reset，也可以理解为全局样式定义，在项目初期的时候就定好，引用的时候一定要在第一位。

产品中会有各种各样的需求，所以reset也是变通的，并不是一成不变的：比如说字体颜色链接背景这些都是由需求决定的。

所以reset没什么标准答案，因为不同的产品，需求是不同，所以我们自己要跟句需求来制定属于自的的reset。

本文参与腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。

原始发表：2016.11.25 ，如有侵权请联系 cloudcommunity@tencent.com 删除

其他

本文分享自作者个人站点/博客前往查看

如有侵权，请联系 cloudcommunity@tencent.com 删除。

本文参与腾讯云自媒体同步曝光计划，欢迎热爱写作的你一起参与！

其他

登录后参与评论

0 条评论

热度

1.CSS Reset

1.CSS Reset

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐