css清除默认样式,去掉css样式

css去掉浏览器默认样式

/** 清除内外边距 **/

body, h1, h2, h3, h4, h5, h6, hr, p, blockquote, /* structural elements 结构元素 */

dl, dt, dd, ul, ol, li, /* list elements 列表元素 */

pre, /* text formatting elements 文本格式元素 */

form, fieldset, legend, button, input, textarea, /* form elements 表单元素 */

th, td /* table elements 表格元素 */ {

    margin: 0;

    padding: 0;

}

/** 设置默认字体 **/

body,

button, input, select, textarea /* for ie */ {

    font: 14px/1.5 tahoma, \5b8b\4f53, sans-serif;

}

h1, h2, h3, h4, h5, h6 { font-size: 100%; font-weight: normal;}

address, cite, dfn, em, var { font-style: normal; } /* 将斜体扶正 */

code, kbd, pre, samp { 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; }

sup { vertical-align: text-top; } /* 重置, 减少对行高的影响 */

sub { vertical-align: text-bottom; }

/** 重置表单元素 **/

legend { color: #000; } /* for ie6 */

fieldset, img { border: 0; } /* img 搭车：让链接里的 img 无边框 */

button, input, select, textarea { font-size: 100%; } /* 使得表单元素在 ie 下能继承字体大小 */

/* 注：optgroup 无法扶正 */

/** 重置表格元素 **/

table { border-collapse: collapse; border-spacing: 0; }

/* 重置 HTML5 元素 */

article, aside, details, figcaption, figure, footer,header, hgroup, menu, nav, section,

summary, time, mark, audio, video {

    display: block;

    margin: 0;

    padding: 0;

}

mark { background: #ff0; }

理念：

1. reset 的目的不是清除浏览器的默认样式, 这仅是部分工作. 清除和重置是紧密不可分的.

2. reset 的目的不是让默认样式在所有浏览器下一致, 而是减少默认样式有可能带来的问题.

3. reset 期望提供一套普适通用的基础样式. 但没有银弹, 推荐根据具体需求, 裁剪和修改后再使用.

相关问答

Q1: 如何去掉列表的默认样式

新建一个html文件，命名为test.html，用于讲解css如何清除li列表默认样式。

请点击输入图片描述

在test.html文件内，使用ul、li标签创建一个列表。

请点击输入图片描述

在test.html文件内，设置ul标签的class属性为mycss。

请点击输入图片描述

在css标签内，通过class设置ul的样式，将list-style属性设置为none，消除列表的默认序号。

请点击输入图片描述

在css标签内，再将padding属性和margin属性消除li列表的内外边距。

请点击输入图片描述

6

在浏览器打开test.html文件，查看实现的效果。

请点击输入图片描述

Q2: css 苹果手机按钮默认样式如何去掉

只要在样式里面加一句去掉css去掉iPhone、iPad的默认按钮样式就可以了。 （不要写在class里哦）

input[type="button"], input[type="submit"], input[type="reset"] {-webkit-appearance: none;}

textarea {  -webkit-appearance: none;}

如果还有圆角的问题，

.button{ border-radius: 0; }

1、去除Chrome等浏览器文本框默认发光边框

input:focus, textarea:focus {outline: none;}

去掉高光样式：

input:focus{

-webkit-tap-highlight-color:rgba(0,0,0,0);

-webkit-user-modify:read-write-plaintext-only;}

当然这样以来，当文本框载入焦点时，所有浏览器下的文本框的边框都不会有颜色上及样式上的变化了，这样的话，当文本框载入焦点时，边框颜色就会变为橙色，给用户一个反馈。

2、去除IE10+浏览器文本框后面的小叉叉，只需下面一句就ok了

input::-ms-clear {display: none;}

Q3: 如何用css样式去掉默认设备或者浏览器的默认样式

手机设备下的界面

正常浏览器下的html5界面

要解决该问题需要加入一些css样式,如下：

input[type="button"], input[type="submit"], input[type="reset"] {

-webkit-appearance: none;

-moz-appearance: none;

appearance: none;

}

如果还有圆角的问题，

.button{ border-radius: 0; }

在写表单时候会发现一些浏览器对表单赋了默认的样式，如在谷歌浏览器下，文本框和下拉选择框当载入焦点时，会出现发光的边框！文本框textarea可以自由拖拽拉大！在IE10下，文本框输入内容后，会在右侧出现一个小叉叉。面对这些问题，下面来看看解决方法。

去除谷歌等浏览器文本框默认发光边框

input:focus, textarea:focus {

outline: none;

}

去掉高光样式：

input:focus{

-webkit-tap-highlight-color:rgba(0,0,0,0);

-webkit-user-modify:read-write-plaintext-only;

}

也可以重新根据自己的需要设置一下，如：

input:focus,textarea:focus {

outline: none;

border: 1px solid #f60;

}

这样的话，当文本框载入焦点时，边框颜色就会变为橙色，增强用户体验！

去除IE10+浏览器文本框后面的小叉叉

input::-ms-clear {

display: none;

}

禁止多行文本框textarea拖拽

添加属性多行文本框就不能拖拽放大缩小了：

textarea {

resize: none;

}

Q4: 【css】通配符选择器&清除浏览器默认样式

写法：*{}

星号即为通配符选择器，写在其中的样式会应用页面到所有的元素中，所以使用的频率并不高，主要用于清除浏览器默认样式。

在使用各种元素的过程中，我们会发现很多元素都是有默认样式的，比如body标签有默认的padding值和margin值，h1和p标签有默认的行高字号，margin值，a标签有默认的下划线，列表前面有小圆点等等，常常会干扰我们进行页面的编写，所以我们可以事先使用通配符选择器进行浏览器默认样式清除。

更精准的清除方法

刚刚我们使用的通配符选择器，会给所有元素都设置一遍默认样式，解析的工作量会比较大，所以我们可以根据我的页面里到底有哪些元素需要清除，使用群组选择器写出更精确的清除默认样式css，如：

可以把它写入一个外部样式表reset.css，如果需要清除直接导入就可以啦。

1、清除在编写页面中由于浏览器默认样式带来的干扰。

2、兼容性更好，不同浏览器的默认样式可能会有所不同，如果不清楚可能会造成我们编写的页面在不同浏览器上的效果有所出入。

选择器部分文章：

选择器介绍（一）标签选择器、id选择器、类选择器

选择器介绍（二）后代选择器，子代选择器，交集选择器，并集（群组）选择器

通配符选择器清除浏览器默认样式