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还剩点良心,还保留了一些浏览器默 ...
随机推荐
- Forms in Angular 2
Input handling is an important part of application development. The ng-model directive provided in A ...
- SOCKET句柄泄露带来的内存灾难
前些时候游戏莫名其妙出现大量内存泄露,我感到很诧异,当然一般情况下游戏的内存管理是极其严苛的,出现如此大量的内存泄露到底是怎么回事? 句柄滥用导致的内存泄露会多夸张呢,尤其SOCKET,在某些客户端系 ...
- Shell脚本传递带有空格的参数[摘录自网络]
参数处理 说明 $# 传递到脚本的参数个数 $* 以一个单字符串显示所有向脚本传递的参数 $$ 脚本运行的当前进程ID号 $! 后台运行的最后一个进程的ID号 $@ 与$#相同,但是使用时加引号,并在 ...
- 再议GCC编译时的静态库依赖次顺问题
假设有如三个源代码文件: $ cat a.cpp void a() { } $ cat b.cpp extern void a(); void b() { a(); // 调用a.cpp中的a() } ...
- Get Current LOV Query SQL
--3 click the lov object activing last query address. SELECT T.SQL_TEXT FROM V$SQLTEXT_WITH_NEWL ...
- WIP and COST Frequently Used Troubleshooting Scripts (Doc ID 105647.1)
Applies to: Oracle Work in Process - Version 10.7.16.1 to 12.1 [Release 10.7 to 12.1] Information in ...
- [Erlang18]教练!又发现Erlang Shell里面的神奇函数一只
人嘛,总是想提高效率,创造更多的价值,同时也得到更多的选择空间.可一个人的精力,时间终归是有限的,减少自身重复或无意义工作就显得格外重要! 要么懂得授权,要么把重复的工作交给机器来做: 现实: 美 ...
- asp:Repeater数据源为空时处理方式
当Repeater的数据源为空时,会显示空白,界面不友好,以下方式可以简单处理. <asp:repeater runat="server" id="rplist2& ...
- Wpf Page间跳转传参数 And Window To Page
这段时间用到Wpf,页面间的跳转网上有不少的示例,但是有些已经不能用了,尤其是页面间的传参问题更是一大堆,但正确的解决方案却没有几个,或者说写的不清楚,让人走了很多弯路,查看官方文档后发现了正确的姿势 ...
- 基于ASP.NET生成二维码详细源码
详细链接:https://shop499704308.taobao.com/?spm=a1z38n.10677092.card.11.594c1debsAGeakusing System; using ...