css网页重置样式表(多版本)
Eric reset.css
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, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
margin:;
padding:;
border:;
outline:;
font-weight: inherit;
font-style: inherit;
font-size: 100%;
font-family: inherit;
vertical-align: baseline;
}
/* remember to define focus styles! */
:focus {
outline:;
}
body {
line-height:;
color: black;
background: white;
}
ol, ul {
list-style: none;
}
/* tables still need 'cellspacing="0"' in the markup */
table {
border-collapse: separate;
border-spacing:;
}
caption, th, td {
text-align: left;
font-weight: normal;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: "";
}
blockquote, q {
quotes: "" "";
} /*Eric Meyer在他的网站也给出了一个新的写法,在文中他还提到了 Internet Explorer 中解决 inherit 的问题(我研究之后也想简单写一下),值得研究(查看原文:Reset Reloaded)。其实这两个reset.css差别并不大,可以选择其中之一或者合并使用。
reset.css是每个页面都必须的样式文件(或者你已经把它内置到相关的CSS文件中了),是我们实现跨浏览器设计的不可缺少的一环。
原文连接:http://www.dudo.org/article.asp?id=243*/
Normailze.css
/*! 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: 100%; /* 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: 0.67em 0;
} /* 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: 80%;
} /**
* Prevent `sub` and `sup` elements from affecting the line height in
* all browsers.
*/ sub,
sup {
font-size: 75%;
line-height:;
position: relative;
vertical-align: baseline;
} sub {
bottom: -0.25em;
} sup {
top: -0.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: 100%; /* 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: 0.35em 0.75em 0.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: 100%; /* 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;
}
Reset.css
body,ol,ul,h1,h2,h3,h4,h5,h6,p,th,td,dl,dd,form,figure,figcaption,main,footer,nav,header,fieldset,legend,input,textarea,select{margin:;padding:}
body{font:12px "宋体","Arial Narrow",HELVETICA;background:#fff;}
a{color:#172c45;text-decoration:none}
a:hover{color:#cd0200;/*text-decoration:underline*/}
em{font-style:normal}
li{list-style:none}
img{border:;vertical-align:middle;display:inline-block;}
table{border-collapse:collapse;border-spacing:;}
p{word-wrap:break-word}
.ind{text-indent:2em}
.ind10{text-indent:10px;}
.noborder{border:;} .clear{zoom:}
.clear:after{content:"."; display:block; clear:both; height:; visibility:hidden;}
sina reset.css
html, body, ul, li, ol, dl, dd, dt, p, h1, h2, h3, h4, h5, h6, form, fieldset, legend, img { margin:; padding:; }
fieldset, img { border:none; }
img{ vertical-align:top;}
address, caption, cite, code, dfn, th, var { font-style:normal; font-weight:normal; }
ul, ol { list-style:none; }
body { color:#333; font:16px/20px "SimSun","宋体","Arial Narrow",HELVETICA; background:#fff;/* overflow-y:scroll;*/ overflow-x:hidden;}
a { color:#666; text-decoration:none; }
a:visited { color:#666; }
a,input{outline:none;}
Sohu reset.css
body{font-family:"\5B8B\4F53","Arial Narrow",HELVETICA;text-align:center;margin:0 auto;padding:;background:#FFF;font-size:12px;color:#333;}
body > div{text-align:center;margin-right:auto;margin-left:auto;}
div,form,ul,ol,li,span,p{margin:;padding:;border:;}
img,a img{border:;margin:;padding:;}
h1,h2,h3,h4,h5,h6{margin:;padding:;font-size:12px;font-weight:normal;}
ul,ol,li{list-style:none}
table,td,input{font-size:12px;padding:} /* 默认链接颜色 */
a{outline-style:none;color:#333;text-decoration:none}
a:hover{color:#c00;text-decoration:underline;}
Tencent reset.css
body,ol,ul,h1,h2,h3,h4,h5,h6,p,th,td,dl,dd,form,fieldset,legend,input,textarea,select{margin:;padding:}
body{font:12px "宋体","Arial Narrow",HELVETICA;background:#fff;}
a{color:#172c45;text-decoration:none}
a:hover{color:#cd0200;text-decoration:underline}
em{font-style:normal}
li{list-style:none}
img{border:;vertical-align:middle}
table{border-collapse:collapse;border-spacing:}
p{word-wrap:break-word}
.ind{text-indent:2em}
.ind10{text-indent:10px;}
.noborder{border:;} .clear{zoom:}
.clear:after{content:"."; display:block; clear:both; height:; visibility:hidden;}
Yahoo!reset.css
html{color:#000;background:#FFF;}
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,
fieldset,input,textarea,p,blockquote,th,td {
margin:;
padding:;
}
table {
border-collapse:collapse;
border-spacing:;
}
fieldset,img {
border:;
}
address,caption,cite,code,dfn,em,strong,th,var {
font-style:normal;
font-weight:normal;
}
ol,ul {
list-style:none;
}
caption,th {
text-align:left;
}
h1,h2,h3,h4,h5,h6 {
font-size:100%;
font-weight:normal;
}
q:before,q:after {
content:'';
}
abbr,acronym { border:;
}
Douyou reset.css
@charset "utf-8";
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,button,textarea,p,blockquote,th,td{margin:;padding:}fieldset,img{border:}:focus{outline:}address,caption,cite,code,dfn,em,th,var,optgroup{font-style:normal;font-weight:normal}h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:normal}abbr,acronym{border:;font-variant:normal}input,button,textarea,select,optgroup,option{font-family:inherit;font-size:inherit;font-style:inherit;font-weight:inherit}code,kbd,samp,tt{font-size:100%}input,button,textarea,select{*font-size:100%}body{line-height:1.5}ol,ul{list-style:none}table{border-collapse:collapse;border-spacing:}caption,th{text-align:left}sup,sub{font-size:100%;vertical-align:baseline}:link,:visited ,ins{text-decoration:none}blockquote,q{quotes:none}blockquote:before,blockquote:after,q:before,q:after{content:'';content:none}
/* CSS Document */
* {margin:;padding:;}body,html {overflow-y: auto;overflow-x: hidden;}
.clearfix{margin-right:auto;margin-left:auto;*zoom:}.clearfix:before,.clearfix:after{display:table;content:"";line-height:}.clearfix:after{clear:both}
b,em,i{font-style:normal;font-weight:normal;}
body{margin:;font-family:"Microsoft Yahei",Arial,Tahoma,Helvetica,"SimSun","Hiragino Sans GB",sans-serif;font-size:14px;line-height:20px;color:#333;position:relative;}
html,body{width:100%;min-width:1200px;margin:0 auto;overflow-x:hidden;min-height:1000px;background-color:#f4f4f5;}
button,input,select,textarea,th{background:#fff;font-size:12px;line-height:1.5em;font-family:"Microsoft Yahei",Arial,Tahoma,Helvetica,"SimSun","Hiragino Sans GB",sans-serif;}
a{color:#333;text-decoration:none;}
a:hover,a:focus{-webkit-transition:color 150ms ease-in 0ms,background-color 150ms ease-in 150ms;-moz-transition:color 150ms ease-in 0ms,background-color 150ms ease-in 150ms;-ms-transition:color 150ms ease-in 0ms,background-color 150ms ease-in 150ms;-o-transition:color 150ms ease-in 0ms,background-color 150ms ease-in 150ms;transition:color 150ms ease-in 0ms,background-color 150ms ease-in 150ms;}
.rotate360:hover{-webkit-transform:rotate(360deg);-moz-transform:rotate(360deg);-ms-transform:rotate(360deg);-o-transform:rotate(360deg);transform:rotate(360deg);}
a:hover{color:#0091ff;}
.rotate360{-webkit-transition:all 0.5s ease-in-out;-moz-transition:all 0.5s ease-in-out;-ms-transition:all 0.5s ease-in-out;-o-transition:all 0.5s ease-in-out;transition:all 0.5s ease-in-out;}
.fl{float:left;}
.fr{float:right;}
.w1200{width:1200px;margin:0 auto;}
.w1168{width:1168px;margin:0 auto;}
.h30{width:100%;height:30px;}
.h20{width:100%;height:20px;}
.h16{width:100%;height:16px;}
.h12{width:100%;height:12px;}
.hide{display:none;}
a,img,i{display:inline-block;cursor: pointer;}
img{vertical-align: top;border:;}
.bg{background-color: #fff;}
css网页重置样式表(多版本)的更多相关文章
- web前端篇:CSS使用,样式表特征,选择器
目录 web前端篇:CSS使用,样式表特征,选择器 1.CSS介绍 2.CSS使用 3.样式表特征 4.CSS选择器 5.选择器的优先级 6.练习题: web前端篇:CSS使用,样式表特征,选择器 1 ...
- [19/06/05-星期三] CSS基础_样式表的位置(内联、内部、外部样式)、块元素(div)、内联元素(span)、常用的选择器
一.概念 CSS(Cascading Style Sheets,层叠样式表) 可以用来为网页创建样式表,通过样式表可以对网页进行装饰. 所谓层叠,就是可以将整个网页想象成是一层一层的结构,层次高的将会 ...
- CSS重构:样式表性能调优
这两天窝在家里又看了本CSS相关的书:<CSS重构:样式表性能调优>.重构是指在不改变代码行为的前提下,重写代码,使其更加简洁.易于复用. 这本书读起来比较快,可挑自己感兴趣的读,前面三章 ...
- css三种样式表写法
css三种样式表:1.内嵌样式表: <head> <style type="text/css"> 样式表写法 </style> < ...
- CSS重置样式表
网页设计,让人最头疼的莫过于让页面兼容各大浏览器,准确些是兼容它们“默认”的CSS样式表.第一种方式 * {margin:0px; padding:0px;} 这行代码虽然简单,但却让网页解析太慢.于 ...
- CSS 层叠及样式表来源
Web标准化运动的口号——分离.分离.分离. 在2003年的 SXSW 会议中, Steve Champeon 和 Nick Finck 做了一个名为“面向未来的全方位 Web 设计”的演讲,揭示了这 ...
- css选择器,样式表导入
css笔记1.选择器(selecter)共9种 a.类型选择器 p{},body{} b.后代选择器 p h1{} c.ID选择 #idname{} d.类选择 .classname{} e.通用选择 ...
- css reset重置样式有那么重要吗?
在以前写html代码的时候,一般都会在head里添加重置样式reset.css,其内容如下: @charset "utf-8"; html, body, div, span, ap ...
- CSS 四种样式表 六种规则选择器 五种常用样式属性
新的html程序要在VS中编写了,在vs中安装ASP.NET和Web开发,并用ASP.NET Web 应用程序(.NETFramework)创建一个网页程序.添加一个html页 后面的代码都是在htm ...
随机推荐
- [css-animation-101] 8 multiple transitions
原文地址:css animation 101 #multiple-transitions 原文作者:Donovan Hutchinson 译者:JobbyM 到目前为止,我们已经讨论了一个过渡如何在一 ...
- ansible使用指北(二)
前言在上一篇文章里我们了解了ansible的常用模块,今天我们来了解下ansible-playbook,ansbile-playbook是一系统ansible命令的集合,其利用yaml 语言编写,an ...
- YOLO 论文阅读
YOLO(You Only Look Once)是一个流行的目标检测方法,和Faster RCNN等state of the art方法比起来,主打检测速度快.截止到目前为止(2017年2月初),YO ...
- Visual studio2019配置OPENCV 时属性管理器中没有Microsoft.Cpp.x64.user的解决办法
方法一:重新下载Visual studio2017,再次打开2019就会出现Microsoft.Cpp.x64.user,感觉有些麻烦,也占电脑空间,推荐方法二. 方法二:与方法一原理相同,下载201 ...
- js实现图片的懒加载
原文地址:https://blog.phyer.cn/article/9277.欢迎大家访问我的博客(●ˇ∀ˇ●) // 防抖 let lazy_timer; window.addEventListe ...
- c/s用户与服务器之间的传输
####第一页 <%@ page language="java" contentType="text/html; charset=UTF-8" pageE ...
- vue用template还是JSX?
各自特点 template 模板语法(HTML的扩展) 数据绑定使用Mustache语法(双大括号) <span>{{title}}<span> JSX JavaScript的 ...
- python学习基础之变量
变量名只能包含字母.数字和下划线.变量名可以字母或下划线打头,但不能以数字打 头,例如,可将变量命名为message_1,但不能将其命名为1_message. 变量名不能包含空格,但可使用下划线来分隔 ...
- Flutter Form表单控件超全总结
注意:无特殊说明,Flutter版本及Dart版本如下: Flutter版本: 1.12.13+hotfix.5 Dart版本: 2.7.0 Form.FormField.TextFormField是 ...
- Simulink仿真入门到精通(十六) Simulink基于模型设计的工业应用概述
16.1 Simulink用途概述 在基于模型设计广泛应用于汽车电子嵌入式开发的今天,MBD(Model Besed Design)技术也逐步推广到各种嵌入式控制方面.与传统的嵌入式开发相比,BMD以 ...