(1)默认样式
default style sheet、user agent stylesheet、built-in stylesheet
学习HTML/CSS首先要理解,各浏览器对标签预先都设定了不一样的默认CSS。
比如:
大部分浏览器会把链接显示成蓝色,把点击过的链接显示成紫色。
但不同浏览器不同版本默认显示h1的字体大小是不一样的。
还有最为明显的是很多元素的margin和padding是有很大区别。
世界上第一张网页:
https://www.w3.org/History/19921103-hypertext/hypertext/WWW/TheProject.html
IE11渲染效果:
Chrome52.png渲染效果:
Firefox59.png渲染效果:
其实这个在CSS规范里也有详细的记述:
CSS 1规范:https://www.w3.org/TR/CSS1/#basic-concepts
引用
Each User Agent (UA, often a "web browser" or "web client") will have a default style sheet that presents documents in a reasonable -- but arguably mundane -- manner.
CSS 2规范:https://www.w3.org/TR/CSS21/cascade.html#cascade
引用
Conforming user agents must apply a default style sheet
那么具体哪些元素有哪些默认的样式,可以通过浏览器的开发者工具查看。
W3C规范的定义:
https://www.w3.org/TR/CSS2/sample.html
https://www.w3.org/TR/html5/rendering.html
开源代码:
Firefox: https://github.com/mozilla/gecko-dev/blob/master/layout/style/res/html.css
Safari: https://trac.webkit.org/browser/trunk/Source/WebCore/css/html.css
Chrome: https://chromium.googlesource.com/chromium/blink/+/master/Source/core/css/html.css
(2)样式重置 CSS Reset
将浏览器存在差别的默认样式全部覆写以达到统一。
Eric Meyer’s CSS Reset
https://meyerweb.com/eric/tools/css/reset/
HTML5 Reset Stylesheet
http://html5doctor.com/html-5-reset-stylesheet/
还有很多其他的解决方案。这种直接重置的方案有些暴力!
(3)Normalize.css
在默认的HTML元素样式上提供了跨浏览器的高度一致性。
https://github.com/necolas/normalize.css/
Bootstrap 内置了 Normalize.css:
https://getbootstrap.com/docs/3.3/css/#overview-normalize
(4)其他
关于CSS Reset是有很多争议的,网上很多文章可以参考阅读。
No CSS Reset
https://snook.ca/archives/html_and_css/no_css_reset/
Should You Reset Your CSS?
https://www.webpagefx.com/blog/web-design/should-you-reset-your-css/
To CSS Reset or Not to CSS Reset
http://www.peachpit.com/blogs/blog.aspx?uk=To-CSS-Reset-or-Not-to-CSS-Reset
到底该不该用 CSS reset?
https://www.zhihu.com/question/23554164
关于 CSS Reset 那些事
https://segmentfault.com/a/1190000003021766