重置默认样式 css reset
html {
overflow-x:auto;
overflow-y:scroll;
}
body, dl, dt, dd, ul, ol, li, pre, form, fieldset, input, p, blockquote, th, td {
font-weight:400;
margin:0;
padding:0;
}
h1, h2, h3, h4, h4, h5 {
margin:0;
padding:0;
}
body {
color:#666666;
font-family:Helvetica,Arial,sans-serif;
font-size:12px;
padding:0 10px;
text-align:left;
}
select {
font-size:12px;
}
table {
border-collapse:collapse;
}
fieldset, img {
border:0 none;
}
fieldset {
margin:0;
padding:0;
}
fieldset p {
margin:0;
padding:0 0 0 8px;
}
legend {
display:none;
}
address, caption, em, strong, th, i {
font-style:normal;
font-weight:400;
}
table caption {
margin-left:-1px;
}
hr {
border-bottom:1px solid #FFFFFF;
border-top:1px solid #E4E4E4;
border-width:1px 0;
clear:both;
height:2px;
margin:5px 0;
overflow:hidden;
}
ol, ul {
list-style-image:none;
list-style-position:outside;
list-style-type:none;
}
caption, th {
text-align:left;
}
q:before, q:after, blockquote:before, blockquote:after {
content:"";
}
百度有啊(www.youa.com):(架构基本上是模仿YUI来做的)
body {
font-family:arial,helvetica,sans-serif;
font-size:13px;
font-size-adjust:none;
font-stretch:normal;
font-style:normal;
font-variant:normal;
font-weight:normal;
line-height:1.4;
text-align:center;
}
body, ul, ol, dl, dd, h1, h2, h3, h4, h5, h6, p, form, fieldset, legend, input, textarea, select, button, th, td {
margin:0;
padding:0;
}
h1, h2, h3, h4, h5, h6 {
font-size:100%;
font-weight:normal;
}
table {
font-size:inherit;
}
input, select {
font-family:arial,helvetica,clean,sans-serif;
font-size:100%;
font-size-adjust:none;
font-stretch:normal;
font-style:normal;
font-variant:normal;
font-weight:normal;
line-height:normal;
}
button {
overflow:visible;
}
th, em, strong, b, address, cite {
font-style:normal;
font-weight:normal;
}
li {
list-style-image:none;
list-style-position:outside;
list-style-type:none;
}
img, fieldset {
border:0 none;
}
ins {
text-decoration:none;
}
在《超越css》一书中建议我们做网站开始重置所有默认样式:
/* Normalizes margin,padding */
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,p,blockquote,th,td { margin:0;padding:0}
/* Normalizes font-size for headers */
h1,h2,h3,h4,h5,h6 { font-size:100%}
/* Removes list-style from lists */
ol,ul { list-style:none }
/* Normalizes font-size and font-weight to normal */
address,caption,cite,code,dfn,em,strong,th,var { font-size:normal; font-weight:normal }
/* Removes list-style from lists */
table { border-collapse:collapse; border-spacing:0 }
/* Removes border from fieldset and img */
fieldset,img { border:0 }
/* Left-aligns text in caption and th */
caption,th { text-align:left }
/* Removes quotation marks from q */
q:before,q:after { content:''}
那我们实际写代码的时候该怎么来css reset呢?
我个人推荐使用(Eric Meyer和YUI)的 css reset
Eric Meyer's Reset:
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,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
margin: 0;
padding: 0;
border: 0;
outline: 0;
font-size: 100%;
vertical-align: baseline;
background: transparent;
}
body {
line-height: 1;
}
ol, ul {
list-style: none;
}
blockquote, q {
quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: '';
content: none;
}
/* remember to define focus styles! */
:focus {
outline: 0;
}
/* remember to highlight inserts somehow! */
ins {
text-decoration: none;
}
del {
text-decoration: line-through;
}
/* tables still need 'cellspacing="0"' in the markup */
table {
border-collapse: collapse;
border-spacing: 0;
}
YUI:
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td {
margin:0;
padding:0;
}
table {
border-collapse:collapse;
border-spacing:0;
}
fieldset,img {
border:0;
}
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:0;
}
结合他们的css reset写法,再根据自己的实际情况,一定能写出符合自己网站的完美的css reset。
重置默认样式 css reset的更多相关文章
- 清除浏览器默认样式——css reset & normalize.css
css reset 自己挨个清除很麻烦 可以使用网上一些css库——css reset 把模板复制到css文件最上方,其他的样式我们自己编写来覆盖它们 但是这个也有一些弊端,会把一些本来需要的样式给清 ...
- CSS 重置默认样式
1. 概述 1.1 说明 css重置样式主要是为了让各个浏览器的CSS样式有一个统一的基准,使HTML元素样式在跨浏览器时有一致性的效果. 备注:浏览器的兼容问题,不同浏览器对有些标签的默认值是不同的 ...
- 清除浏览器默认样式的reset.css(转载于reset.css的官方)
/* http://meyerweb.com/eric/tools/css/reset/ v2.0-modified | 20110126 License: none (public domain) ...
- 浏览器默认样式及reset
写在前面 首先纠正一个易错概念.div并非生来就是块元素,而是每个浏览器都有一套默认的css样式(优先级最低),默认样式里会把div设置成display: block;还有margin,padding ...
- 统一各浏览器CSS 样式——CSS Reset
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, ...
- 重置浏览器的默认样式(css reset)
(1)定义:首先css reset指的是重置浏览器的默认样式 (2)作用:因为现在的浏览器很多,并且每个浏览器都有自己的默认样式,这样就会导致一个页面在多个浏览器下展示产生差异,所以我们需要做一些处理 ...
- CSS Reset(样式重置)
CSS Reset,意为重置默认样式.HTML中绝大部分标签元素在网页显示中都有一个默认属性值,通常为了避免重复定义元素样式,需要进行重置默认样式(CSS Reset).举几个例子:1.淘宝(CSS ...
- 一个简易的css reset
/*css reset*/ /*清除内外边距*/ body, h1, h2, h3, h4, h5, h6, p, hr, /*结构元素*/ ul, ol, li, dl, dt, dd, /*列表元 ...
- 默认样式重置 (css reset)
body,p,h1,h2,h3,h4,h5,h6,dl,dd,t{margin:0; font-size:12px;/* font-family:XX; */} ol,ul{list-style:no ...
随机推荐
- linux内核对块设备的使用
1 partition table 这里的分析以经典的MBR为例. 在MBR里面有partition table,每一项对应一个逻辑的块设备,partion table中的每一项是16个字节. 第一个 ...
- P2465 [SDOI2008]山贼集团 dp
这个题是一道树形dp+状压dp二合一,先预处理每种组合会有什么额外的费用,然后在树上dp就行了. 题干: 题目描述 某山贼集团在绿荫村拥有强大的势力,整个绿荫村由N个连通的小村落组成,并且保证对于每两 ...
- 洛谷 P1236 算24点
题目描述 几十年前全世界就流行一种数字游戏,至今仍有人乐此不疲.在中国我们把这种游戏称为"算24点".您作为游戏者将得到4个1~9之间的自然数作为操作数,而您的任务是对这4个操作数 ...
- Spark 分布式环境---slave节点无法启动(已解决)
soyo@soyo-VPCCB3S1C:~$ start-slaves.sh soyo-slave01: starting org.apache.spark.deploy.worker.Worker, ...
- 15_activity生命周期方法说明
现在是可见并且可以被操作,所以现在是一个前台的Activity. 按一下Home键,它是先onPause然后onStop. 现在它就处于一个Stop停止的状态.停止的状态如果我当前内存够用的情况下,它 ...
- 在Android.mk文件中输出打印消息 (转载)
转自:http://blog.csdn.net/xiaibiancheng/article/details/8479694 在进行Android NDK的开发当中有时想看看Android.mk文件当中 ...
- VBNET AUTOCAD NETAPI 让插件随autocad启动
定义一个函数,随AutoCAD 启动加载当前程序集到autocad,涉及到写入注册表,注意这是在autocad内部加载dll之后处理的方法.... 写入HKLM表示所有登录的用户都会受影响(autoc ...
- vue中引入swiper插件
这里我们使用npm的方式安装swiper插件. 1.npm install vue-awesome-swiper --save 2.在main.js文件中引入文件 import Vue from 'v ...
- 转 awr自动收集脚本
1. remote get awr report #!/usr/bin/ksh ####sample: sh awr.sh 20170515 20170516 AWR ### default it w ...
- TensorFlow---image recognition--classify_image运行、文件说明与错误(路径)解决
tutorial系列mnist已经玩过了,这篇玩一下 classify_image,其实就是image label.模型已经训练好的了,直接下载下来在.pb文件中. 本机环境: Win10 + Pyt ...