Reset.css和Normalize.css样式表初始化相关

时间:2022-11-10 12:01:33

(1)Reset.css

  简介:在HTML标签在浏览器里有默认的样式,例如 p 标签有上下边距,strong标签有字体加粗样式,em标签有字体倾斜样式。不同浏览器的默认样式之间也会有差别,例如ul默认带有缩进的样式,在IE下,它的缩进是通过margin实现的,而Firefox下,它的缩进是由padding实现的。在切换页面的时候,浏览器的默认样式往往会给我们带来麻烦,影响开发效率。所以解决的方法就是一开始就将浏览器的默认样式全部去掉,更准确说就是通过重新定义标签样式。“覆盖”浏览器的CSS默认属性。最最简单的说法就是把浏览器提供的默认样式覆盖掉!这就是CSS reset。

/* 清除内外边距 */
body, h1, h2, h3, h4, h5, h6, hr, p, blockquote, /* structural elements 结构元素 */
dl, dt, dd, ul, ol, li, /* list elements 列表元素 */
pre, /* text formatting elements 文本格式元素 */
fieldset, lengend, button, input, textarea, /* form elements 表单元素 */
th, td { /* table elements 表格元素 */
margin: ;
padding: ;
} /* 设置默认字体 */
body,
button, input, select, textarea { /* for ie */
/*font: 12px/1 Tahoma, Helvetica, Arial, "宋体", sans-serif;*/
font: 12px/ Tahoma, Helvetica, Arial, "\5b8b\4f53", sans-serif; /* 用 ascii 字符表示,使得在任何编码下都无问题 */
} h1 { font-size: 18px; /* 18px / 12px = 1.5 */ }
h2 { font-size: 16px; }
h3 { font-size: 14px; }
h4, h5, h6 { font-size: %; } address, cite, dfn, em, var { font-style: normal; } /* 将斜体扶正 */
code, kbd, pre, samp, tt { font-family: "Courier New", Courier, monospace; } /* 统一等宽字体 */
small { font-size: 12px; } /* 小于 12px 的中文很难阅读,让 small 正常化 */ /* 重置列表元素 */
ul, ol { list-style: none; } /* 重置文本格式元素 */
a { text-decoration: none; }
a:hover { text-decoration: underline; } abbr[title], acronym[title] { /* 注:1.ie6 不支持 abbr; 2.这里用了属性选择符,ie6 下无效果 */
border-bottom: 1px dotted;
cursor: help;
} q:before, q:after { content: ''; } /* 重置表单元素 */
legend { color: #; } /* for ie6 */
fieldset, img { border: none; } /* img 搭车:让链接里的 img 无边框 */
/* 注:optgroup 无法扶正 */
button, input, select, textarea {
font-size: %; /* 使得表单元素在 ie 下能继承字体大小 */
} /* 重置表格元素 */
table {
border-collapse: collapse;
border-spacing: ;
} /* 重置 hr */
hr {
border: none;
height: 1px;
} /* 让非ie浏览器默认也显示垂直滚动条,防止因滚动条引起的闪烁 */
html { overflow-y: scroll; }

(2)Normalize.css

  简介:Normalize.css是一种CSS reset的替代方案。Normalize.css 只是一个很小的CSS文件,但它在默认的HTML元素样式上提供了跨浏览器的高度一致性。相比于传统的CSS reset,Normalize.css是一种现代的、为HTML5准备的优质替代方案。Normalize.css现在已经被用于Twitter Bootstrap、HTML5 Boilerplate、GOV.UK、Rdio、CSS Tricks 以及许许多多其他框架、工具和网站上。

/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */

/* Document
========================================================================== */ /**
* 1. Correct the line height in all browsers.
* 2. Prevent adjustments of font size after orientation changes in iOS.
*/ html {
line-height: 1.15; /* 1 */
-webkit-text-size-adjust: %; /* 2 */
} /* Sections
========================================================================== */ /**
* Remove the margin in all browsers.
*/ body {
margin: ;
} /**
* Render the `main` element consistently in IE.
*/ main {
display: block;
} /**
* Correct the font size and margin on `h1` elements within `section` and
* `article` contexts in Chrome, Firefox, and Safari.
*/ h1 {
font-size: 2em;
margin: .67em ;
} /* Grouping content
========================================================================== */ /**
* 1. Add the correct box sizing in Firefox.
* 2. Show the overflow in Edge and IE.
*/ hr {
box-sizing: content-box; /* 1 */
height: ; /* 1 */
overflow: visible; /* 2 */
} /**
* 1. Correct the inheritance and scaling of font size in all browsers.
* 2. Correct the odd `em` font sizing in all browsers.
*/ pre {
font-family: monospace, monospace; /* 1 */
font-size: 1em; /* 2 */
} /* Text-level semantics
========================================================================== */ /**
* Remove the gray background on active links in IE 10.
*/ a {
background-color: transparent;
} /**
* 1. Remove the bottom border in Chrome 57-
* 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
*/ abbr[title] {
border-bottom: none; /* 1 */
text-decoration: underline; /* 2 */
text-decoration: underline dotted; /* 2 */
} /**
* Add the correct font weight in Chrome, Edge, and Safari.
*/ b,
strong {
font-weight: bolder;
} /**
* 1. Correct the inheritance and scaling of font size in all browsers.
* 2. Correct the odd `em` font sizing in all browsers.
*/ code,
kbd,
samp {
font-family: monospace, monospace; /* 1 */
font-size: 1em; /* 2 */
} /**
* Add the correct font size in all browsers.
*/ small {
font-size: %;
} /**
* Prevent `sub` and `sup` elements from affecting the line height in
* all browsers.
*/ sub,
sup {
font-size: %;
line-height: ;
position: relative;
vertical-align: baseline;
} sub {
bottom: -.25em;
} sup {
top: -.5em;
} /* Embedded content
========================================================================== */ /**
* Remove the border on images inside links in IE 10.
*/ img {
border-style: none;
} /* Forms
========================================================================== */ /**
* 1. Change the font styles in all browsers.
* 2. Remove the margin in Firefox and Safari.
*/ button,
input,
optgroup,
select,
textarea {
font-family: inherit; /* 1 */
font-size: %; /* 1 */
line-height: 1.15; /* 1 */
margin: ; /* 2 */
} /**
* Show the overflow in IE.
* 1. Show the overflow in Edge.
*/ button,
input { /* 1 */
overflow: visible;
} /**
* Remove the inheritance of text transform in Edge, Firefox, and IE.
* 1. Remove the inheritance of text transform in Firefox.
*/ button,
select { /* 1 */
text-transform: none;
} /**
* Correct the inability to style clickable types in iOS and Safari.
*/ button,
[type="button"],
[type="reset"],
[type="submit"] {
-webkit-appearance: button;
} /**
* Remove the inner border and padding in Firefox.
*/ button::-moz-focus-inner,
[type="button"]::-moz-focus-inner,
[type="reset"]::-moz-focus-inner,
[type="submit"]::-moz-focus-inner {
border-style: none;
padding: ;
} /**
* Restore the focus styles unset by the previous rule.
*/ button:-moz-focusring,
[type="button"]:-moz-focusring,
[type="reset"]:-moz-focusring,
[type="submit"]:-moz-focusring {
outline: 1px dotted ButtonText;
} /**
* Correct the padding in Firefox.
*/ fieldset {
padding: .35em .75em .625em;
} /**
* 1. Correct the text wrapping in Edge and IE.
* 2. Correct the color inheritance from `fieldset` elements in IE.
* 3. Remove the padding so developers are not caught out when they zero out
* `fieldset` elements in all browsers.
*/ legend {
box-sizing: border-box; /* 1 */
color: inherit; /* 2 */
display: table; /* 1 */
max-width: %; /* 1 */
padding: ; /* 3 */
white-space: normal; /* 1 */
} /**
* Add the correct vertical alignment in Chrome, Firefox, and Opera.
*/ progress {
vertical-align: baseline;
} /**
* Remove the default vertical scrollbar in IE 10+.
*/ textarea {
overflow: auto;
} /**
* 1. Add the correct box sizing in IE 10.
* 2. Remove the padding in IE 10.
*/ [type="checkbox"],
[type="radio"] {
box-sizing: border-box; /* 1 */
padding: ; /* 2 */
} /**
* Correct the cursor style of increment and decrement buttons in Chrome.
*/ [type="number"]::-webkit-inner-spin-button,
[type="number"]::-webkit-outer-spin-button {
height: auto;
} /**
* 1. Correct the odd appearance in Chrome and Safari.
* 2. Correct the outline style in Safari.
*/ [type="search"] {
-webkit-appearance: textfield; /* 1 */
outline-offset: -2px; /* 2 */
} /**
* Remove the inner padding in Chrome and Safari on macOS.
*/ [type="search"]::-webkit-search-decoration {
-webkit-appearance: none;
} /**
* 1. Correct the inability to style clickable types in iOS and Safari.
* 2. Change font properties to `inherit` in Safari.
*/ ::-webkit-file-upload-button {
-webkit-appearance: button; /* 1 */
font: inherit; /* 2 */
} /* Interactive
========================================================================== */ /*
* Add the correct display in Edge, IE 10+, and Firefox.
*/ details {
display: block;
} /*
* Add the correct display in all browsers.
*/ summary {
display: list-item;
} /* Misc
========================================================================== */ /**
* Add the correct display in IE 10+.
*/ template {
display: none;
} /**
* Add the correct display in IE 10.
*/ [hidden] {
display: none;
}

  官网:官网: http://nicolasgallagher.com/about-normalize-css/

  

(3)对比

  ①Normalize.Css 保护了有价值的默认值

Reset通过为几乎所有的元素施加默认样式,强行使得元素有相同的视觉效果。
相比之下,Normalize.css保持了许多默认的浏览器样式。这就意味着你不用再为所有公共的排版元素重新设置样式
。当一个元素在不同的浏览器中有不同的默认值时,Normalize.css会力求让这些样式保持一致并尽可能与现代标准相符合。

  ②Normalize.Css 修复了浏览器的Bug

它修复了常见的桌面端和移动端浏览器的bug。这往往超出了Reset所能做到的范畴。
关于这一点,Normalize.css修复的问题包含了HTML5元素的显示设置、预格式化文字的font-size问题、在IE9中SVG的溢出、
许多出现在各浏览器和操作系统中的与表单相关的bug。

  ③Normalize.Css 不会让你的调试工具变的杂乱

使用Reset最让人困扰的地方莫过于在浏览器调试工具中大段大段的继承链。在Normalize.css中就不会有这样的问题。

  ④Normalize.Css 是模块化的

这个项目已经被拆分为多个相关却又独立的部分,这使得你能够很容易也很清楚地知道哪些元素被设置了特定的值。
因此这能让你自己选择性地移除掉某些永远不会用到部分(比如表单的一般化)。

  ⑤Normalize.Css 拥有详细的文档

Normalize.css的代码基于详细而全面的跨浏览器研究与测试。这个文件中拥有详细的代码说明并在Github Wiki中有进一步的说明。
这意味着你可以找到每一行代码具体完成了什么工作、为什么要写这句代码、浏览器之间的差异,并且你可以更容易地进行自己的测试。

.

Reset.css和Normalize.css样式表初始化相关的更多相关文章

  1. CSS 四种引入样式表优缺点分析

    CSS 四种引入样式表 CSS 有四种方式引入样式表,如下: 外部样式表 内部样式表 行内样式表 导入样式表 外部样式表优缺点 优点 实现了结构与表现的代码完全分离 方便复用及维护 因为分离到各自独立 ...

  2. CSS样式表初始化代码

    CSS为什么要初始化?建站老手都知道,这是为了考虑到浏览器的兼容问题,其实不同浏览器对有些标签的默认值是不同的,如果没对CSS初始化往往会出现浏览器之间的页面差异.当然,初始化样式会对SEO有一定的影 ...

  3. CSS之Normalize.css的使用(重置表)

    本文译自Normalize.css官网: http://nicolasgallagher.com/about-normalize-css/ Normalize.css 只是一个很小的CSS文件,但它在 ...

  4. CSS三种插入样式表格式

    首先简单理解浏览器与网页的交互过程 CSS样式表(stylesheet) cascading style sheet 级联样式表 表现HTML或XHTML文件样式的计算机语言:包含对字体.颜色.边距. ...

  5. CSS标签类型和样式表继承与优先级

    标签类型 块级标签 什么是块级标签:在html中<div>. <p>.h1~h6.<form>.<ul> 和 <li>就是块级元素 块级标签 ...

  6. CSS的三种样式表和优先级

    1.外部样式表当样式需要应用于很多页面时,外部样式表将是理想的选择.在使用外部样式表的情况下,你可以通过改变一个文件来改变整个站点的外观.每个页面使用 <link> 标签链接到样式表. & ...

  7. css(1-1)样式表

    CSS Id 和 Class id 和 class 选择器 如果你要在HTML元素中设置CSS样式,你需要在元素中设置"id" 和 "class"选择器. id ...

  8. css清除常用默认样式表

    /*公共样式*/ html, body, div, ul, li, h1, h2, h3, h4, h5, h6, p, dl, dt, dd, ol, form, input, textarea, ...

  9. css常用元素通用样式表

    @charset "utf-8";html,body,a,h1,h2,h3,h4,h5,h6,p,a,b,i,em,s,u,dl,dt,dd,ul,ol,li,strong,spa ...

随机推荐

  1. IT在线笔试总结(二)

    1. 循环队列的长度计算:对于非循环队列,尾指针与头指针的差值便是队列长度,而对于循环队列,差值可能为负数,因此需要将差值加上MAXQSIZE再与MAXQSIZE求余. 2. 算法的时间复杂度取决于: ...

  2. org&period;apache&period;catalina&period;LifecycleException

    web.xml中<url-pattern>.do</url-pattern>改为<url-pattern>*.do</url-pattern> 1 严重 ...

  3. 常用jsp include用法,三种include的区别

    <@ include file=””> :静态导入,jsp指令,同一个request , <jsp:include page=”” flush=””>:动作元素,不同一个req ...

  4. centos下安装node js

    #wget http://nodejs.org/dist/v0.10.24/node-v0.10.24.tar.gz #tar xf node-v0.10.24.tar.gz #cd node-v0. ...

  5. Centos 用户组管理

    #组帐号管理 linux 组管理 =-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=--= 1.组的分类 私用组:只能包含一个用 ...

  6. normalization归一化

    简单的举个例子:一张表有两个变量,一个是体重kg,一个是身高cm.假设一般情况下体重这个变量均值为60(kg),身高均值为170(cm).1,这两个变量对应的单位不一样,同样是100,对于身高来说很矮 ...

  7. jQuery选择

    1.基本的选择 watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvY29tZW9uc3RvbmU=/font/5a6L5L2T/fontsize/400/fil ...

  8. cc2530 -----SampleApp&period;c解析

    /************************************************************************************************** ...

  9. ulimit -a

    在linux中执行ulimit -a 即可查询linux相关的参数 用ulimit命令是可以修改这些配置的命令的格式:ulimit [-SHacdefilmnpqrstuvx] [limit] 中间的 ...

  10. 2018铁三测评题write以及一些想送给你们的话

    一..前言 此文献给实验室的萌新们,以及刚刚接触CTF的同学们,希望能对你们的成长起到一些帮助. 二.关于CTF 可能你已经接触过CTF或者对它有所了解,这里我再简单介绍一下. 1.什么是CTF? C ...