html css清除默认样式,CSS reset

一时失言乱红尘 2022-10-08 05:34 477阅读 0赞

前面的话

大部分的时候，作为前端，我们在写 CSS 样式之前，需要添加一份 reset.css 。CSS reset不仅用于清除默认样式，更是一种全局样式定义。如果项目前期不定制好CSS reset，后期维护阶段再对其进行修改，将会牵一发而动全身。本文将详细介绍CSS reset

reset

以网易NEC的CSS reset为例，来进行说明

/\*reset\*/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:bold;\}del,ins,u,s,a,a:hover\{text-decoration:none;\}body,textarea,input,button,select,keygen,legend\{font:12px/1.14 arial,5b8b4f53;color:\#333;outline:0;\}body\{background:\#fff;\}a,a:hover\{color:\#333;\}

下面来说明CSS reset的问题

1、不合理的样式重置

例如， html、div 、dt等标签是没有默认 padding 和 margin 的

2、生僻标签的样式重置

例如，fieldset 、blockquote、q等标签用的较少，用到时，再进行样式设置即可

3、性能负担

CSS reset 通常会增加浏览器进行样式计算的成本(即有一定的性能负担)，因为它引入了许多的针对元素的全局规则，网页中几乎所有元素都会匹配一条乃至几条的reset规则，且往往规则中的属性设定其实会被更特殊的规则所覆盖(比如padding和margin)。极端情况下，可能某条reset规则中的所有属性设置实际上并没有在任何元素上生效(因为全部被更特殊的规则给覆盖了)，所有针对此规则的级联计算全都是浪费

基于这些问题，下面是修改版的CSS reset

body\{margin:0;font:12px/22px Arial,"微软雅黑";color:\#333;\}header,footer,section,article,aside,nav,figure\{display:block\}ul,ol\{margin:0;padding:0;list-style:none;\}p,dl,dd\{margin:0;\}h1,h2,h3,h4\{margin:0;font-size:100%;\}img\{border:none;\}a\{color:\#21a557;cursor:pointer;text-decoration:none; \}a:active,a:hover\{outline：none;\}a:hover\{text-decoration:underline;\}strong\{font-weight:normal;\}em,i\{font-style:normal;\}table\{border-collapse:collapse;table-layout:fixed;border-spacing:0;\}th,td\{padding:0;\}button,input\{box-sizing:border-box;padding:0;border:none;background:none;\}

Normalize

Normalize.css 与 reset.css 的风格恰好相反，注重通用的方案，重置掉该重置的样式(例如body的默认margin)，保留该保留的 user agent 样式，同时进行一些 bug 的修复，这点是 reset 所缺乏的。Normalize不讲求样式一致，而讲求通用性和可维护性

html\{

/\*统一行高\*/line-height:1.15;

/\*防止在winPhone和ISO中，因旋转屏幕而造成的字体大小的改变\*/-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%;

\}body\{

/\*去除margin\*/margin:0;

\}article,aside,footer,header,nav,section,figcaption,figure,main\{

/\*重置IE8-浏览器的display\*/display:block;

\}h1\{

/\*统一字体大小及margin\*/font-size:2em;margin:0.67em 0;

\}figure\{

/\*重置IE8浏览器的margin\*/margin:1em 40px;

\}hr\{

/\*重置firefox浏览器的box-sizing\*/box-sizing:content-box;height:0;

/\*重置IE浏览器的overflow\*/overflow:visible;

\}pre\{

/\*统一字体大小及字体系统\*/font-family:monospace, monospace;font-size:1em;

\}a\{

/\*移除IE10中的灰色背景\*/background-color:transparent;-webkit-text-decoration-skip:objects;

\}abbr\[title\]\{

/\*移除Chrome57- and Firefox 39-中的border-bottom\*/border-bottom:none;

/\*统一text\*/-decoration

text-decoration:underline;text-decoration:underline dotted;

\}b,strong\{

/\*统一字体重量\*/font-weight:bolder;

\}code,kbd,samp\{

/\*统一字体系列及字体大小\*/font-family:monospace, monospace;font-size:1em;

\}dfn\{

/\*重置Android4.3-浏览器的字体样式\*/font-style:italic;

\}mark\{

/\*重置IE8-浏览器的背景颜色及文本颜色\*/background-color:\#ff0;color:\#000;

\}small\{

/\*统一字体大小\*/font-size:80%;

\}sub,sup\{

/\*去除sub、sup对行高的影响\*/font-size:75%;line-height:0;position:relative;vertical-align:baseline;

\}sub\{

/\*统一位置\*/bottom:-0.25em;

\}sup\{

/\*统一位置\*/top:-0.5em;

\}audio,video\{

/\*重置IE8-浏览器的display\*/display:inline-block;

\}audio:not(\[controls\])\{

/\*重置iOS 4-7中的display及height\*/display:none;height:0;

\}img\{

/\*重置IE9-浏览器的border-style\*/border-style:none;

\}svg:not(:root)\{

/\*重置IE浏览器中的overflow\*/overflow:hidden;

\}button,input,optgroup,select,textarea\{

/\*统一样式\*/

/\*移除Firefox and Safari中的margin\*/font-family:sans-serif;font-size:100%;line-height:1.15;margin:0;

\}button,input\{

/\*重置IE浏览器中的overflow\*/overflow:visible;

\}button,select\{

/\*重置firefox浏览器中的text-transform\*/text-transform:none;

\}button,html \[type="button"\], \[type="reset"\],\[type="submit"\]\{

/\*重置webkit浏览器的appearance属性\*/-webkit-appearance:button;

\}button::-moz-focus-inner,\[type="button"\]::-moz-focus-inner,\[type="reset"\]::-moz-focus-inner,\[type="submit"\]::-moz-focus-inner\{

/\*重置firefox浏览器中的border和padding\*/border-style:none;padding:0;

\}button:-moz-focusring,\[type="button"\]:-moz-focusring,\[type="reset"\]:-moz-focusring,\[type="submit"\]:-moz-focusring\{

/\*统一outline\*/outline:1px dotted ButtonText;

\}fieldset\{

/\*重置firefox浏览器的padding\*/padding:0.35em 0.75em 0.625em;

\}legend\{box-sizing:border-box;color:inherit;display:table;max-width:100%;padding:0;white-space:normal;

\}progress\{

/\*重置IE9-浏览器的display\*/display:inline-block;

/\*重置Chrome\*/, Firefox浏览器的vertical-align

vertical-align:baseline;

\}textarea\{

/\*移除IE浏览器中默认的垂直滚动条\*/overflow:auto;

\}\[type="checkbox"\],\[type="radio"\]\{

/\*重置IE9-浏览器的box-sizing及padding\*/box-sizing:border-box;padding:0;

\}\[type="number"\]::-webkit-inner-spin-button,\[type="number"\]::-webkit-outer-spin-button\{

/\*修正Chrome中增加和减量按钮的光标样式\*/height:auto;

\}\[type="search"\]\{

/\*重置Chrome and Safari的appearance和outline-offset\*/-webkit-appearance:textfield;outline-offset:-2px;

\}\[type="search"\]::-webkit-search-cancel-button,\[type="search"\]::-webkit-search-decoration\{

/\*在macOS上删除Chrome和Safari中的内填充和取消按钮。\*/-webkit-appearance:none;

\}::-webkit-file-upload-button\{

/\*在iOS和Safari中，纠正无法点击的类型。\*/-webkit-appearance:button;font:inherit;

\}details, menu\{

/\*重置IE8-浏览器的display\*/display:block;

\}summary\{

/\*统一display\*/display:list-item;

\}canvas\{

/\*重置IE8-浏览器的display\*/display:inline-block;

\}template\{

/\*重置IE浏览器的display\*/display:none;

\}\[hidden\]\{

/\*重置IE9-浏览器的display\*/display:none;

使用

是否 Normalize.css 就真的比 reset.css 好呢？

也不见得，Normalize.css 中重置修复的很多 bug ，其实在我们的项目中十个项目不见得有一个会用得上，那么这些重置或者修复，某种意义上而言也是所谓的冗余代码

所以，应该根据项目需要，混合部分 reset 或者 normalize，编写了一份适合团队项目的 reset ，做出取舍微调，适量裁剪和修改后再使用

对于一般项目而言，在调用normalize.css之后，再根据实际情况，编写reset.css。当然，这个reset并不是将样式清空，而是设置样式的默认值及常用的工具样式

html\{

/\*这样，1rem=100px，方便后续计算，不设置为10px是因为chrome下最小字体大小为12px\*/font-size:100px;

\}body\{

/\*设置为12px\*/font-size:0.12rem;line-height:1.5;

/\*不使用纯黑色\#000，降低页面对比度\*/color:\#222;

\}a\{color:\#666;text-decoration:none;

\}a:hover,a:active\{color:\#0ae;text-decoration:underline;

\}::selection\{background-color:\#b3d4fc;text-shadow:none;

\}ul\{margin:0;padding:0;list-style:none;

\}.fl\{float:left;\}.fr\{float:right;\}.clear:after\{content:"";display:block;clear:both;\}.clear\{zoom:1;\}

/\*低版本浏览器提示\*/.browserupgrade\{margin:0;padding:1rem;background-color:\#ccc;

html css清除默认样式,CSS reset

发表评论取消回复

还没有评论，来说两句吧...

相关阅读

相关清除浏览器默认样式normalize.css源代码

相关清除css默认样式

相关 Vue：清除默认的css样式

相关 CSS清除默认样式

相关 CSS如何清除默认样式

相关 html css清除默认样式,CSS reset

相关 CSS Reset--重置默认样式

相关几个CSS重置默认样式reset.css代码

相关 css清除样式

相关清除浏览器默认样式 reset.css