以下为css a标签去掉默认样式:
创新互联专业为企业提供邵武网站建设、邵武做网站、邵武网站设计、邵武网站制作等企业网站建设、网页设计与制作、邵武企业网站模板建站服务,十年邵武做网站经验,不只是建网站,更提供有价值的思路和整体网络服务。
a { text-decoration:none out-line: nonecolor: #*****;}
层叠样式表(英文全称:Cascading Style Sheets)是一种用来表现HTML(标准通用标记语言的一个应用)或XML(标准通用标记语言的一个子集)等文件样式的计算机语言。CSS不仅可以静态地修饰网页,还可以配合各种脚本语言动态地对网页各元素进行格式化。
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;}
/** 清除内外边距 **/
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 期望提供一套普适通用的基础样式. 但没有银弹, 推荐根据具体需求, 裁剪和修改后再使用.
写法:*{}
星号即为通配符选择器,写在其中的样式会应用页面到所有的元素中,所以使用的频率并不高,主要用于清除浏览器默认样式。
在使用各种元素的过程中,我们会发现很多元素都是有默认样式的,比如body标签有默认的padding值和margin值,h1和p标签有默认的行高字号,margin值,a标签有默认的下划线,列表前面有小圆点等等,常常会干扰我们进行页面的编写,所以我们可以事先使用通配符选择器进行浏览器默认样式清除。
更精准的清除方法
刚刚我们使用的通配符选择器,会给所有元素都设置一遍默认样式,解析的工作量会比较大,所以我们可以根据我的页面里到底有哪些元素需要清除,使用群组选择器写出更精确的清除默认样式css,如:
可以把它写入一个外部样式表reset.css,如果需要清除直接导入就可以啦。
1、清除在编写页面中由于浏览器默认样式带来的干扰。
2、兼容性更好,不同浏览器的默认样式可能会有所不同,如果不清楚可能会造成我们编写的页面在不同浏览器上的效果有所出入。
选择器部分文章:
选择器介绍(一)标签选择器、id选择器、类选择器
选择器介绍(二)后代选择器,子代选择器,交集选择器,并集(群组)选择器
通配符选择器清除浏览器默认样式
手机设备下的界面
正常浏览器下的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;
}