css的reset和常用的html标签的默认样式整理
先看下常用的这些标签浏览器的默认样式有哪些:
body{ margin: 8px;}
hr{ border:1px inset; margin-top:.5em;margin-bottom:.5em;}
blockquote{margin: 16px 1em;}
ul{list-style-type: disc;padding-left:40px;margin: 1em 0;}
ol{list-style-type: decimal; padding-left:40px; margin:1em 0;}
dl{ margin: 1em 0;}
dd{ margin-left:40px;}
pre{ margin: 1em 0;}
fieldset{margin: 0 2px; border: 2px groove threedface;border-image: initial;padding:.35em .75em .625em;}
input,textarea,select,button{font: 400 13.333px Arial;}
button{padding:1px 6px;border:2px outset buttonface; background-color:buttonface;color:buttontext;}
input{ padding:1px 0;border:2px inset initial;}
textarea{padding:2px; border:1px solid rgb(169,169,169); resize:auto;}
th,td{padding:1px;}
h1,h2,h3,h4,h5,h6{font-weight:bold;}
h1{ font-size:2em;margin:.67em 0;}
h2{ font-size:1.5em; margin:.83em 0;}
h3{ font-size:1.17em; margin: 1em 0;}
h4{ margin: 1.33em 0;}
h5{ font-size:.83em; margin: 1.67em 0;}
h6{ font-size:.67em; margin: 2.33em 0;}
当然这里列举的都是常用的标签,那些不常用的或者是已经快被淘汰的就没列出来。
根据上面的默认样式,我们就可以有目标的去写reset里面需要重置哪些样式:
1,body的margin
2,ul,ol 的margin和padding
3,dl, dd 的margin
4,pre的margin ,这里pre还有一点要注意,就是它的font-size默认是13px,也可以重置下
5,fieldset的margin
6,input,textarea,select,button的font, border , textarea的resize,
7,th,td的padding
8, h1-h6我觉得不用重写,默认的font-weight和font-size设定的很好,margin上面可写可不写,我觉得设定的也没问题。
由此 ,我便生成了自己的 reset.css,很简洁,没有使用通配符 * 。
body,ul,ol,dl,dd,pre,fieldset{
margin:;
}
ul,ol{
padding:;
list-style:none;
}
input,textarea,select,button{
font-family:'Helvetica Neue',Tahoma,Arial,PingFangSC-Regular,'Hiragino Sans GB','Microsoft Yahei',sans-serif;
font-size:100%;
box-sizing:border-box;
}
pre{
font-size:1em;
}
table{
border-collapse: collapse;
border-spacing:;
}
a{
text-decoration: none;
}
a:hover{
text-decoration: underline;
}
当然,这只是我自己习惯用的reset,比如有些人就是喜欢把 box-sizing设置为border-box, 觉得那样计算起来很方便,我这里就没有使用通配符给所有元素都设置, 只给了几个表单元素。
这就是萝卜白菜各有所爱了,当时间长后,你肯定会生成自己的reset。
css的reset和常用的html标签的默认样式整理的更多相关文章
- html标签默认样式整理
引:http://www.jb51.net/web/94964.html 文为大家整理了html标签默认样式属性及浏览器默认样式等等,喜欢css布局的朋友们可以学下,希望对大家有所帮助 html, a ...
- CSS消除button标签的默认样式
button{ /*消除button的默认样式*/ /*这种写法是对所有的button标签同时生效*/ margin: 0px; padding: 0px; /*自定义边框*/ border: 0px ...
- 使用 CSS 去掉 iPhone 网页上按钮的超大圆角默认样式
使用 iPhone 上的浏览器去浏览网页的时候,按钮总是显示超大圆角的样式,显得超级恶心,但是我们自己定义 border-radius 为 0 也无法去除这个圆角,经过搜索发现这是 webikt 内核 ...
- 教你小三角,适用移动端等,解决移动端a标签的默认样式
1.小三角,通过给一个div设置足够大的边框,让它的上边框,右边框,左边框,的背景颜色设置成透明的,来实现,如下: <!DOCTYPE html> <html> <hea ...
- HTML标签的默认样式
body 有默认的内外边距(margin:0;padding:0); p 有默认的外边距(margin:0;)
- a标签去掉默认样式并自定义样式
a { text-decoration: none;//去掉下划线 color: inherit; -webkit-user-select: none; -moz-user-select: none; ...
- HTML的各个标签的默认样式
head{ display: none } body{ margin: 8px;line-height: 1.12 } button, textarea,input, object,select { ...
- 【input】标签去除默认样式
input{-webkit-appearance: none; -moz-appearance: none; -o-appearance: none; appearance: none;}
- Normalize.css 与 reset.css
Normalize.css 与 reset.css都是初始化页面样式 不同点在于 reset.css更加粗暴,直接把所有的样式全部初始化了: Normalize.css还剩点良心,还保留了一些浏览器默 ...
随机推荐
- Java 设计模式系列(十五)迭代器模式(Iterator)
Java 设计模式系列(十五)迭代器模式(Iterator) 迭代器模式又叫游标(Cursor)模式,是对象的行为模式.迭代子模式可以顺序地访问一个聚集中的元素而不必暴露聚集的内部表象(interna ...
- 主线程不能直接调用webservice方法
@Overrideprotected void onCreate(Bundle savedInstanceState){//StrictMode.setThreadPolicy(new StrictM ...
- DataStage 六、安装和部署集群环境
DataStage序列文章 DataStage 一.安装 DataStage 二.InfoSphere Information Server进程的启动和停止 DataStage 三.配置ODBC Da ...
- jquery的理解
1.jquery的好处 简化js的复杂操作 不再需要关心兼容性 提供大量使用方法 2.jquery的设计思想 选择网页元素 -模拟css选择元素 -独有的表达式选择 -多种筛选方法 写法 -方法函数化 ...
- 441. Arranging Coins
static int wing=[]() { std::ios::sync_with_stdio(false); cin.tie(NULL); ; }(); class Solution { publ ...
- join sql图
SELECT * FROM TableA INNER JOIN TableB ON TableA.name = TableB.name id name id name -- - ...
- linux计划任务(二)
计划任务的授权 1.at任务 /etc/at.allow /etc/at.deny 2.crontab任务 /etc/cron.allow /etc/cron.deny [注:如果allow文件存在, ...
- python之使用API(WEB应用编程接口)
1.处理API响应 import requests #执行API调用并存储响应 url = "https://api.github.com/search/repositories?q=lan ...
- Python + Robotframework + Appium 之APP自动化测试小试牛刀(Android)
Robotframework如何好?这里先不说了~ Python更不用说了~ Appium前面的文章有介绍~ 今天直接来Python+Robotframework+Appium 三者结合起来,对And ...
- 通过一个例子感受C# 6.0新特性
微软在Visual Studio 2015中更新C#语言到6.0,添加了很多很好的特性,以使C#语言继续跻身于最优秀语言之行列.下面通过一个例子快速感受一下C# 6.0的新特性,以下程序在VS2015 ...