您的位置: 首页 > 新闻资讯  > 网页设计

web前端-CSS清除样式

2020/4/25 17:27:57

理念: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; }


网站制作的时都有哪些值得我们注意的地方呢?

2020-03-12

随着网络的发展,信息的快速化,人们想要知道什么随时都可以在电脑上搜索,企业的的宣传,企业的推广,早已经不在是整天的跑业务、拉客户。在互联网上进行网站制作已经是大多数企业单位的必然选择,可是面对如此众多的做网站建设的,都有哪些是值得我们注意的呢?怎样做网…
MORE

扫描二维码添加官方微信

在线咨询
联系电话

13160359009

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

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

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