CSS 清除默认样式

CSS 清除默认样式

通常有以下几句就够了:

*{
    margin:0;
    padding:0
}
li{
    list-style:none
}
img{
    vertical-align:top;
    border:none
}

如果你想写全也可以:

/* 清除内外边距 */
body, h1, h2, h3, h4, h5, h6, hr, p, blockquote, /* structural elements 结构元素 */
dl, dt, dd, ul, ol, li, /* list elements 列表元素 */
pre, /* text formatting elements 文本格式元素 */
fieldset, lengend, button, input, textarea, /* form elements 表单元素 */
th, td { /* table elements 表格元素 */
    margin: 0;
    padding: 0;
}

/* 设置默认字体 */
body,
button, input, select, textarea { /* for ie */
    /*font: 12px/1 Tahoma, Helvetica, Arial, "宋体", sans-serif;*/
    font: 12px/1 Tahoma, Helvetica, Arial, "\5b8b\4f53", sans-serif; /* 用 ascii 字符表示,使得在任何编码下都无问题 */
}

h1 { font-size: 18px; /* 18px / 12px = 1.5 */ }
h2 { font-size: 16px; }
h3 { font-size: 14px; }
h4, h5, h6 { font-size: 100%; }

address, cite, dfn, em, var { font-style: normal; } /* 将斜体扶正 */
code, kbd, pre, samp, tt { font-family: "Courier New", Courier, monospace; } /* 统一等宽字体 */
small { font-size: 12px; } /* 小于 12px 的中文很难阅读,让 small 正常化 */

/* 重置列表元素 */
ul, ol { list-style: none; }

/* 重置文本格式元素 */
a { text-decoration: none; }
a:hover { text-decoration: underline; }

abbr[title], acronym[title] { /* 注:1.ie6 不支持 abbr; 2.这里用了属性选择符,ie6 下无效果 */
border-bottom: 1px dotted;
cursor: help;
}

q:before, q:after { content: ‘‘; }

/* 重置表单元素 */
legend { color: #000; } /* for ie6 */
fieldset, img { border: none; } /* img 搭车:让链接里的 img 无边框 */
/* 注:optgroup 无法扶正 */
button, input, select, textarea {
    font-size: 100%; /* 使得表单元素在 ie 下能继承字体大小 */
}

/* 重置表格元素 */
table {
border-collapse: collapse;
border-spacing: 0;
}

/* 重置 hr */
hr {
    border: none;
    height: 1px;
}

原文地址:https://www.cnblogs.com/queende7/p/8666616.html

时间: 2024-08-06 10:00:02

CSS 清除默认样式的相关文章

表单单选多选项清除默认样式小技巧

工作中做项目都会遇到表单 单选.多选项的样式问题,对于一个刚入行的菜鸟来说,可能不知道如何修改很low的选项默认样式,下表给初学者提供了改变默认样式的小技巧 首先要清除默认样式,非常简单的css: input{-webkit-user-select:text;-ms-user-select:text;user-select:text;-webkit-appearance:none;font-size:1em;line-height:1.5em;list-style:none;} input{ou

CSS重置默认样式reset.css代码模板

   由于各大浏览器存在兼容性问题,同一个CSS属性在不同浏览器下的表现不一定相同,有经验的前端设计者都会自定义一个重置浏览器样式的CSS文件,在这个文件中定义一些针对不同的浏览器最终表现出一致的代码,大家最熟悉的也许就是* {margin:0 0}了,其实这是最简单的兼容性的代码,一般情况下,仅有这个是不够的,因此笔者收集了几个前端设计网站使用的reset.css代码模板,如果需要你可以复制这些代码保存为reset.css文件,然后引用在所需的html文件中即可. 注意:您可以根据您自己的实际

5.清除默认样式_reset.css

body,ul,ol,li,p,h1,h2,h3,h4,h5,h6,form,fieldset,table,td,img,div,dl,dt,dd,input{ margin: 0; padding: 0; } body{font-family: "Microsoft YaHei";font-size:12px;} img{border:none;} li{list-style:none;} input,select,textarea{outline:none;} a{text-dec

CSS 清除默认格式

/* 把标签默认的间距设为0 */ body,ul,ol,p,h1,h2,h3,h4,h5,h6,dl,dd,select,input,textarea,form{margin:0;padding:0} /* 让h标签文字大小继承body的文字设置 */ h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:normal;} /* 去掉列表默认的图标 */ ul,ol{list-style:none;} /* 去掉em默认的斜体 */ em{font-styl

清除默认样式

body, ul, ol{ margin: 0px; padding: 0px; } ul, ol{ list-style: none; } a{ text-decoration: none; }

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, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol,

清除浏览器默认样式——css reset & normalize.css

css reset 自己挨个清除很麻烦 可以使用网上一些css库——css reset 把模板复制到css文件最上方,其他的样式我们自己编写来覆盖它们 但是这个也有一些弊端,会把一些本来需要的样式给清除了,比如h标签,本来是分级别的,但是使用css reset后,所有都变得一样了 normalize css 所以改用normalize css 我们可以使用 npm安装:npm install normalize.css 也可以用百度静态资源库:cdn.code.baidu.com 如果打不开可以

用纯css改变下拉列表select框的默认样式(不兼容IE10以下)

在这篇文章里,我将介绍如何不依赖JavaScript用纯css来改变下拉列表框的样式. 事情是这样的,您的设计师团队向您发送一个新的PSD(Photoshop文档),它是一个新的网站的最终设计. 一切看起来很好,很正常,直到你看到他/她设计的一个选择下拉框跟浏览器默认提供的样式有些不同!你说:“这没办法做!你应该不会抱怨设计师,其实更改下拉输入的默认样式并不是非常难的! 下面是解决方案. 我们看到默认的下载选择框在firefox和chrome中是有些不同的 Chrome 和 Firefox 中分

前端学习 -- Css -- 默认样式

浏览器为了在页面中没有样式时,也可以有一个比较好的显示效果, 所以为很多的元素都设置了一些默认的margin和padding,而它的这些默认样式,正常情况下我们是不需要使用的. 所以我们往往在编写样式之前需要将浏览器中的默认的margin和padding统统的去掉. 如何去除默认样式? 添加如下css代码: /* * 清除浏览器的默认样式 */ *{ margin: 0; padding: 0; }