移动端页面默认样式重置

1.-webkit-tap-highlight-color

-webkit-tap-highlight-color:rgba(0,0,0,0);//透明度设置为0,去掉点击链接和文本框对象时默认的灰色半透明覆盖层(iOS)或者虚框(Android)

-webkit-tap-highlight-color:rgba(255,0,0,0.5);   //利用此属性,设置touch时链接区域高亮为50%的透明红,只在ios上起作用。android上只要使用了此属性就表现为边框。在body上加此属性,这样就保证body的点击区域效果一致了

2.outline:none

(1)在pc端为a标签定义这个样式的目的是为了取消ie浏览器下点击a标签时出现的虚线。ie7及以下浏览器还不识别此属性,需要在a标签上添加hidefocus="true"

(2)input,textarea{outline:none}  取消chrome下默认的文本框聚焦样式

(3)在移动端是不起作用的,想要去除文本框的默认样式可以使用-webkit-appearance,聚焦时候默认样式的取消是-webkit-tap-highlight-color。看到一些移动端reset文件加了此属性,其实是多余。

3.-webkit-appearance

-webkit-appearance: none;//消除输入框和按钮的原生外观,在iOS上加上这个属性才能给按钮和输入框自定义样式

不同type的input使用这个属性之后表现不一。text、button无样式,radio、checkbox直接消失

4.-webkit-user-select

-webkit-user-select: none; // 禁止页面文字选择 ,此属性不继承,一般加在body上规定整个body的文字都不会自动调整

5.-webkit-text-size-adjust

-webkit-text-size-adjust: none; //禁止文字自动调整大小(默认情况下旋转设备的时候文字大小会发生变化),此属性也不继承,一般加在body上规定整个body的文字都不会自动调整

6.-webkit-touch-callout

-webkit-touch-callout:none; // 禁用长按页面时的弹出菜单(iOS下有效) ,img和a标签都要加

7.-webkit-overflow-scrolling
-webkit-overflow-scrolling:touch;// 局部滚动(仅iOS 5以上支持)

时间: 2024-08-09 02:21:03

移动端页面默认样式重置的相关文章

移动端默认样式重置

1.outline:none (1)在pc端为a标签定义这个是为了取消ie浏览器下点击a标签时出现的虚线.ie7及以下浏览器还不识别此属性,需要在a标签上添加hidefocus="true" (2)input,textarea{outline:none}  取消chrome下默认的文本框聚焦样式 (3)在移动端是不起作用的,想要去除文本框的默认样式可以使用-webkit-appearance,聚焦时候默认样式的取消是-webkit-tap-highlight-color.看到一些移动端

移动端一些默认样式调整

1.-webkit-tap-highlight-color -webkit-tap-highlight-color:rgba(0,0,0,0);//透明度设置为0,去掉点击链接和文本框对象时默认的灰色半透明覆盖层(iOS)或者虚框(Android) -webkit-tap-highlight-color:rgba(255,0,0,0.5);  //利用此属性,设置touch时链接区域高亮为50%的透明红,只在iOS上起作用.Android上只要使用了此属性就表现为边框.在body上加此属性,这样

CSS3初学篇章_6(布局/浏览器默认样式重置)

CSS布局说到布局,就不得不提布局的核心<div>标签,它与其它标签一样,也是一个XHTML所支持的标签,专门用于布局设计的容器标签.在css布局方式中,div 是这种布局方式的核心对象,我们的页面排版不再依赖于表格, 仅从div的使用上说,做一个简单的布局只需要两样东西:div 与 css.因此我们称这种 布局方式为 div + css 布局. 语义元素 <header>.<nav>.<section>.<article>.<aside&

伪元素表单控件默认样式重置与自定义大全

by zhangxinxu from http://www.zhangxinxu.com 本文地址:http://www.zhangxinxu.com/wordpress/?p=3381 本文参考自TJ VanToll的List of Pseudo-Elements to Style Form Controls. 如果你想看原汁原味的译文,可以移步这里:伪元素控制表单样式. 我这里所有的效果都自己重新制作demo试验了下,辨别下真伪,看看window环境下的差异以及其他一些属性支持等,然后,补充

移动端h5页面编写样式重置

@charset "UTF-8"; /* stylelint-enable */ /* 重置样式 */ * { -webkit-tap-highlight-color: transparent; outline: 0; } body, h1, h2, h3, h4, h5, h6, hr, p, blockquote, dl, dt, dd, ul, ol, li, pre, form, fieldset, legend, button, input, textarea, th, td

默认样式重置 (css reset)

---恢复内容开始--- body,p,h1,h2,h3,h4,h5,h6,dl,dd{margin:0; font-size:12px;/* font-family:XX; */}ol,ul{list-style:none;padding:0;margin:0;}a{text-decoration:none;}img{border:none;} *{margin:0;padding:0} 影响性能,比如div没有默认的margin以及padding,重置所有标签影响性能 ---恢复内容结束--

清除页面默认样式

在前端开发中,我们经常会为自己的网页写自己的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,

常用的默认样式重置

body,p,h1,h2,h3,h4,h5,h6,ul,ol,dl,dd,figure{margin:0; font-family:Arial,"宋体";}ul,ol{padding:0;list-style:none;}a{text-decoration:none;}h1,h2,h3,h4,h5,h6,strong{ font-weight:normal;}em{ font-style:normal;}mark{background:none;}img{ vertical-align

讲课笔记3——浮动、margin失效的问题、默认样式重置

EO:搜索引擎优化,一般在网页里面只写一个h1标签,搜索引擎可以通过该h1标签里面的内容搜索你所写的网页(a标签和img标签最好写上title属性)标准写法:.logo {        text-decoration: none;        width: 144px;        height: 62px;        background: url(logo.jpg) no-repeat;    }a {    display: block;    text-indent: -999