200字范文,内容丰富有趣,生活中的好帮手!
200字范文 > Css Reset -Css样式重置

Css Reset -Css样式重置

时间:2024-01-15 15:10:42

相关推荐

Css Reset -Css样式重置

在网页实际开发过程中,如果将来网页的浏览者存在使用不同的浏览器(IE, Google, FireFox, Opera, Safari等)对网页进行解析展示的可能,那么我们就不得不从完美的理想预期中转回到本真的现实情况。在设计师们的梦想中都存在着一个十分完美的世界:所有的浏览器都能够理解和适用所有的CSS规则,并且呈现相同的视觉效果(不存在兼容性问题)。但是在实际环境中,在很多情况中事与愿违,很多的css样式在不同内核的浏览器中有着不同的解释和呈现,这就导致了您所期望的预期效果和浏览器解释的实际效果略有差异,这是因为HTML标签在浏览器中都有默认的样式,不同的浏览器的默认样式之间存在差别所造成。

为了去除不同的浏览器的默认样式之间存在的差异,尽量能让不同的css样式在不同的浏览器下遵循同一解析标准,我们现在提到的css reset就是用来重置(复位)元素在不同核心浏览器下的默认值。

那么reset css 究竟怎么写,都写些什么?这个规则没有统一标准,也没有权威指导,都是个人在开发过程中遵照自己的开发习惯以及元素样式的一些宏观表现酌情进行设置,形成一些个人的总结,具有明显的个人特点。**不论您有什么特别的特点,建议不要使用通配符(*)这样近乎破坏性的行为进行样式复位 **,浪费资源暂放其后,对于HTML默认的一些UI展示简直是一种侮辱。

在网上搜索css reset有好多关于样式复位的结果,拿来就可以使用(前提是对于自己正在写的结构没有不良影响)。再此不一 一展示。就我个人在使用过程本人比较倾向于Eric Meyer这套初始化样式;

具体代码内容如下:

/* /eric/tools/css/reset/v5.0.1 | 1019License: none (public domain)*/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, menu, 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,main, menu, nav, output, ruby, section, summary,time, mark, audio, video {margin: 0;padding: 0;border: 0;font-size: 100%;font: inherit;vertical-align: baseline;}/* HTML5 display-role reset for older browsers */article, aside, details, figcaption, figure,footer, header, hgroup, main, menu, nav, section {display: block;}/* HTML5 hidden-attribute fix for newer browsers */*[hidden] {display: none;}body {line-height: 1;}menu, 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;}

reset.css npm 地址:reset.css

另附大佬对于css架构的分享:《我是如何对网站CSS进行架构的》 作者:张鑫旭

都是本人在开发过程中积累的一些知识内容,形成一些记录方便后续学习。欢迎各位优秀的同行分享高见,能够让有需要的小伙伴借鉴学习,共同提升技术水平。

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。