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:0;
}
ul,ol{
    padding:0;
    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: 0;
}
a{
    text-decoration: none;
}
a:hover{
    text-decoration: underline;
}

当然,这只是我自己习惯用的reset,比如有些人就是喜欢把 box-sizing设置为border-box, 觉得那样计算起来很方便,我这里就没有使用通配符给所有元素都设置, 只给了几个表单元素。

这就是萝卜白菜各有所爱了,当时间长后,你肯定会生成自己的reset。

原文地址:https://www.cnblogs.com/wjyz/p/10489910.html

时间: 2024-10-19 03:47:10

css的reset和常用的html标签的默认样式整理的相关文章

bootstrap对HTML标签的默认样式有哪些修改?

CSS Reset:重新设置HTML标签的默认样式. (1)重设了盒子模型的计算方法 * { box-sizing: border-box; } (2)重设了所有元素的默认字体 14px/1.42857143 "Helvetica Neue" (3)body { margin: 0; color: #333; background-color: #fff;} (4)h1~h6 { font-size: xxpx; margin-top: 20px/10px; margin-botton

前端开发入门到实战:css实现修改浏览器自动填充表单的默认样式

当表单中存在input[password]的时候,采用submit方式提交.就会触发浏览器自动填充表单.比如chrome自动填充后,淡×××输入框代替了背景样式,看起来有些怪异. ?那么如何通过css实现取消浏览器自动填充表单的默认样式呢? 解决方法一: 当input文本框是纯色背景的,可以对input:-webkit-autofill使用足够大的纯色内阴影来覆盖input输入框的×××背景:如: input:-webkit-autofill { -webkit-box-shadow: 0 0

web前端入门到实战:css实现修改浏览器自动填充表单的默认样式

当表单中存在input[password]的时候,采用submit方式提交.就会触发浏览器自动填充表单.比如chrome自动填充后,淡慌色输入框代替了背景样式,看起来有些怪异. 那么如何通过css实现取消浏览器自动填充表单的默认样式呢? 解决方法一: 当input文本框是纯色背景的,可以对input:-webkit-autofill使用足够大的纯色内阴影来覆盖input输入框的慌色背景:如: web前端开发学习Q-q-u-n: 767273102 ,分享学习的方法和需要注意的小细节,不停更新最新

使用 CSS 去掉 iPhone 网页上按钮的超大圆角默认样式

使用 iPhone 上的浏览器去浏览网页的时候,按钮总是显示超大圆角的样式,显得超级恶心,但是我们自己定义 border-radius 为 0 也无法去除这个圆角,经过搜索发现这是 webikt 内核浏览器通过私有属性 -webkit-appearance 对控件设置了默认样式. 我们只要对按钮设置这个属性,并设置为 ‘none’ 就可以取消浏览器对于控件的默认样式. input {-webkit-appearance:none; /*去除input默认样式*/} 另外这个属性也有个神奇的地方,

<p>标签的默认样式会留下空白,怎样用css样式来删除空白

把margin padding 都设置为 0 : { margin:0; padding:0; } // 单位 px可以省略 示例如下: <!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title> p标签</title> </head>

教你小三角,适用移动端等,解决移动端a标签的默认样式

1.小三角,通过给一个div设置足够大的边框,让它的上边框,右边框,左边框,的背景颜色设置成透明的,来实现,如下: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> #demo { width: 0; height: 0; /*边框的宽20px*/

select标签的默认样式修改

在项目中,用到select标签,需要对select标签自定义样式. 在chrome浏览器中会对select有一个默认的border-radius,并且无法去掉. 可以通过下面的方法来解决: 1.需要通过下面的css才能修改select的border-radius .select { -webkit-appearance: none; -webkit-border-radius: 0px; } 但是这个方法会让select自带的三角箭头消失. 可以通过background来设置一个背景三角箭头来解

你们有关注过HTML标签的默认样式和浏览器默认样式吗?

HTML默认样式 html, address,blockquote,body, dd, div,dl, dt, fieldset, form,frame, frameset,h1, h2, h3, h4,h5, h6, noframes,ol, p, ul, center,dir, hr, menu, pre { display: block }/*以上列表元素默认状态下一块状显示,未显示的将以内联元素显示,该列表针对HTML4版本,部分元素在XHTML1中将废弃*/ li { display:

HTML的各个标签的默认样式

1 head{ display: none } 2 body{ margin: 8px;line-height: 1.12 } 3 button, textarea,input, object,select { display:inline-block;} 4 ol, ul, dir,menu, dd{ margin-left: 40px } 5 i, cite, em,var, address{ font-style: italic } 6 7 //块级元素 8 html, body, div