web前端-CSS清除样式

作者:管理员 来源:本站 2019/10/10 14:58:36 人评论

理念:1. reset 的目的不是清除浏览器的默认样式,这仅是部分工作。清除和重置是紧密不可分的。2. reset 的目的不是让默认样式在所有浏览器下一致,而是减少默认样式有可能带来的问题。3. reset 期望提供一套普适通用的基础样式。但没有银弹,推荐根据具体需求,裁剪和修…

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

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

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


/* …………………………………………清除默认样式 ………………………………………… */

/*

*{margin:0; padding:0;font-size:12px;font-family:"微软雅黑";color: #666;  border: none;}

*/

/*去掉所有元素的边框*/

/*

*:focus { outline: none; }

*/

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, ul, li,

fieldset, form, label, legend,

table, caption, tbody, tfoot, thead, tr, th, td,

article, aside, canvas, details, embed,

figure, figcaption, footer, header,

menu, nav, output, ruby, section, summary,

time, mark, audio, video, input, button, textarea,select{

    margin: 0;

    padding: 0;

    font-size: 12px;

    font-family: "微软雅黑";

    font-weight: normal;

    color: #666;

    border: none;

    vertical-align: baseline;

}

 

body{ line-height: 1; }

ul,ol{ list-style: none; }

input,button,textarea,select,input:focus,textarea:focus{ background:none; outline:none; }

textarea{ resize: none; overflow: auto;}

select{ border: none; }

a,button{ cursor: pointer; }

a{ text-decorattion: none; blr:expression(this.onFocus=this.blur());}

blockquote, q { quotes: none; }

blockquote:before, blockquote:after, q:before, q:after { content: none; }

 

/* 合并表格线 && 去掉间隙 */

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

 

/* 去掉webkit默认的表单样式 */

button,input,optgroup,select,textarea { -webkit-appearance:none; }

 

/* 去掉a、input和button点击时的蓝色外边框和灰色半透明背景 */

a,button,input,optgroup,select,textarea { -webkit-tap-highlight-color:rgba(0,0,0,0); }

 

/* 禁止长按链接与图片弹出菜单 */

a,img { -webkit-touch-callout: none; }

 

/* img,video下面产生间隙清除 */

video,img{ vertical-align:top; }

 

/* …^_^… 重置 HTML5 元素搜索 */

article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section,summary,time,mark,audio,video { display: block; margin: 0; padding: 0; }

 

/* 去掉mark默认背景颜色 */

mark{ background: none; }

 

/* 清除上下标位置 */

sub,sup{ vertical-align: baseline; }

 

/* 其它清除 */

:link, :visited,ins{

    text-decoration: none;

}

:focus {

    outline: 0;

}

/* 禁止页面选中复制 *IE10、Oprea15以下不支持,若需要,要在需要禁止选中的元素上面添加一个属性unselectable="on" */

/*

html,body{ -moz-user-select: -moz-none; -moz-user-select: none; -o-user-select:none; -khtml-user-select:none; -webkit-user-select:none; -ms-user-select:none; user-select:none; }

*/

 

/* 选中颜色修改 *IE10以下不支持*/

::selection { background: #FF8888; color: #FFFFFF; }

::-moz-selection { background: #FF8888; color: #FFFFFF; }

::-webkit-selection { background: #FF8888; color: #FFFFFF; }

 

 

/* …………………………………………自定义样式 ………………………………………… */

 

/* 设置浮动 */

.fl{ float: left; }

.fr{ float: right; }

 

/* 清除浮动 引用了bootstrap可以使用clearfix */

.clear{ clear: both; }

 

/* 用下面的代码去掉你要去掉的元素的边框 */

.clearoutline:focus { outline:none; }

 

/* …………………………………………其它样式清除 ………………………………………… */

 

/* 清除bootstrap中a的下划线 */

a:link{ text-decoration: none;  color: #666; }


上一篇:没有了
下一篇:没有了

共有条评论 网友评论

验证码: 看不清楚?

    售前咨询热线

    13160359009

    在线QQ咨询

    关注我们

    仟助网络官方微信

    扫描关注官方微信

    添加微信

    仟助网络官方微信公众号

    扫描关注微信公众号

    咨询热线:13160359009 (微信同号) 商务合作QQ:923212290 技术QQ:2827013797 邮箱:jsmyd100@163.com 地址:江苏省宿迁市泗阳县

    Copyright © 2014-2019 www.qianzhuweb.com. All Rights Reserved 宿迁仟助网络科技有限公司 版权所有 苏ICP备17075047号

    网页设计

    微信扫一扫

    专注互联网营销行业10余年

    非纯技术输出团队 具有实战运营经验

    咨询热线:13160359009
    注册立享折扣 一对一产品咨询