CSS Reset(样式重置)

CSS Reset(样式重置)CSSReset,意为重置默认样式。HTML中绝大部分标签元素在网页显示中都有一个默认属性值,通常为了避免重复定义元素样式,需要进行重置默认样式(CSSReset)。举几个例子:1.淘宝(CSS

大家好,又见面了,我是你们的朋友全栈君。

CSS Reset,意为重置默认样式。HTML中绝大部分标签元素在网页显示中都有一个默认属性值,通常为了避免重复定义元素样式,需要进行重置默认样式(CSS Reset)。举几个例子:
1.淘宝(CSS Reset):
html {
overflow-x:auto;
overflow-y:scroll;
}
body, dl, dt, dd, ul, ol, li, pre, form, fieldset, input, p, blockquote, th, td {
font-weight:400;
margin:0;
padding:0;
}
h1, h2, h3, h4, h4, h5 {
margin:0;
padding:0;
}
body {
background-color:#FFFFFF;
color:#666666;
font-family:Helvetica,Arial,sans-serif;
font-size:12px;
padding:0 10px;
text-align:left;
}
select {
font-size:12px;
}
table {
border-collapse:collapse;
}
fieldset, img {
border:0 none;
}
fieldset {
margin:0;
padding:0;
}
fieldset p {
margin:0;
padding:0 0 0 8px;
}
legend {
display:none;
}
address, caption, em, strong, th, i {
font-style:normal;
font-weight:400;
}
table caption {
margin-left:-1px;
}
hr {
border-bottom:1px solid #FFFFFF;
border-top:1px solid #E4E4E4;
border-width:1px 0;
clear:both;
height:2px;
margin:5px 0;
overflow:hidden;
}
ol, ul {
list-style-image:none;
list-style-position:outside;
list-style-type:none;
}
caption, th {
text-align:left;
}
q:before, q:after, blockquote:before, blockquote:after {
content:””;
}
2.百度(CSS Reset):
body {
font-family:arial,helvetica,sans-serif;
font-size:13px;
font-size-adjust:none;
font-stretch:normal;
font-style:normal;
font-variant:normal;
font-weight:normal;
line-height:1.4;
text-align:center;
}
body, ul, ol, dl, dd, h1, h2, h3, h4, h5, h6, p, form, fieldset, legend, input, textarea, select, button, th, td {
margin:0;
padding:0;
}
h1, h2, h3, h4, h5, h6 {
font-size:100%;
font-weight:normal;
}
table {
font-size:inherit;
}
input, select {
font-family:arial,helvetica,clean,sans-serif;
font-size:100%;
font-size-adjust:none;
font-stretch:normal;
font-style:normal;
font-variant:normal;
font-weight:normal;
line-height:normal;
}
button {
overflow:visible;
}
th, em, strong, b, address, cite {
font-style:normal;
font-weight:normal;
}
li {
list-style-image:none;
list-style-position:outside;
list-style-type:none;
}
img, fieldset {
border:0 none;
}
ins {
text-decoration:none;
}
3.《超越css》(CSS Reset):
/* Normalizes margin,padding */
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,p,blockquote,th,td { margin:0;padding:0}
/* Normalizes font-size for headers */
h1,h2,h3,h4,h5,h6 { font-size:100%}
/* Removes list-style from lists */
ol,ul { list-style:none }
/* Normalizes font-size and font-weight to normal */
address,caption,cite,code,dfn,em,strong,th,var { font-size:normal; font-weight:normal }
/* Removes list-style from lists */
table { border-collapse:collapse; border-spacing:0 }
/* Removes border from fieldset and img */
fieldset,img { border:0 }
/* Left-aligns text in caption and th */
caption,th { text-align:left }
/* Removes quotation marks from q */
q:before,q:after { content:”}
4.Eric Meyer(CSS Reset)——推荐:
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, font, 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 {
margin: 0;
padding: 0;
border: 0;
outline: 0;
font-size: 100%;
vertical-align: baseline;
background: transparent;
}
body {
line-height: 1;
}
ol, ul {
list-style: none;
}
blockquote, q {
quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: ”;
content: none;
}
/* remember to define focus styles! */
:focus {
outline: 0;
}
/* remember to highlight inserts somehow! */
ins {
text-decoration: none;
}
del {
text-decoration: line-through;
}
/* tables still need ‘cellspacing=”0″‘ in the markup */
table {
border-collapse: collapse;
border-spacing: 0;
}
5.YUI(CSS Reset):
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td {
margin:0;
padding:0;
}
table {
border-collapse:collapse;
border-spacing:0;
}
fieldset,img {
border:0;
}
address,caption,cite,code,dfn,em,strong,th,var {
font-style:normal;
font-weight:normal;
}
ol,ul {
list-style:none;
}
caption,th {
text-align:left;
}
h1,h2,h3,h4,h5,h6 {
font-size:100%;
font-weight:normal;
}
q:before,q:after {
content:”;
}
abbr,acronym { 
border:0;
}
———————
作者:Eason_Severus
来源:CSDN
原文:https://blog.csdn.net/eason_severus/article/details/53665074
版权声明:本文为博主原创文章,转载请附上博文链接!

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请联系我们举报,一经查实,本站将立刻删除。

发布者:全栈程序员-站长,转载请注明出处:https://javaforall.net/155178.html原文链接:https://javaforall.net

(0)
上一篇 2022年7月2日 下午5:46
下一篇 2022年7月2日 下午5:46


相关推荐

  • 探索Python与文心一言的交互:构建智能对话系统新实践

    探索Python与文心一言的交互:构建智能对话系统新实践

    2026年3月12日
    2
  • pycharm qt designer_pycharm怎么运行py文件

    pycharm qt designer_pycharm怎么运行py文件pycharm集成QTdesigner+ui转py工具前言一、前期安装二、pycharm配置QTdesigner1.外部工具配置2.pycharm可直接调用designer三、pycharm配置pyuic(将ui文件转换为py文件)1.外部工具配置2.pycharm可直接调用pyuic工具四、显示代码和逻辑代码分离1.使用designer设计示意界面总结前言后面使用PyQt5开始设计界面、使用pycharm这个IDE进行逻辑代码和界面代码的融合。一、前期安装前提:按照《PythonGUI.

    2022年8月29日
    4
  • h5 iframe嵌套页面_汇总IOS下奇葩BUG以及iframe嵌套页面带来的一些困扰

    h5 iframe嵌套页面_汇总IOS下奇葩BUG以及iframe嵌套页面带来的一些困扰做H5开发,安卓和IOS的兼容问题经常会困扰我们,尤其是跟第三方平台合作,用到iframe嵌入式应用,令很多Web前端开发的童鞋脑壳疼,相信大家也入了不少坑,且踩且珍惜吧,呵呵^_^。今天抽时间整理一些出来,希望能帮助到大家。iframe自动变宽了,在IOS手机上出现滚动条第一步:定义iframe中的scrolling属性为no,设置iframe中不显示滚动条。第二步:设置iframe的样式为…

    2022年6月17日
    191
  • 手机版即梦AI怎么操作

    手机版即梦AI怎么操作

    2026年3月13日
    5
  • jsessionid的困扰「建议收藏」

    问题:向某银行发送支付请求时,如果客户端cookie开启,第一次请求时,请求地址会自动增加一jsessionid,第二次没有问题。如果客户端cookie关闭,无论如何请求地址会自动添加一jsessionid,从而导致支付页面不能显示。————————-查了网上的一些解决办法,找到原因,如下:在你的程序第一次访问服务器的时候,服务端并不知道

    2022年4月14日
    111
  • python中divmod_python中divmod是什么

    python中divmod_python中divmod是什么python 中 divmod 是什么 下面给大家带来 divmod 的相关介绍 divmod 函数是 Python 的内置函数 它可以把除数和余数运算结果结合起来 返回一个包含商和余数的元组 a b a b 语法 divmod dividend divisor 1 整数参数 divmod 9 5 1 4 type divmod 9 5 返回的元组中 第一个元素是 9 5

    2026年3月19日
    2

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注

关注全栈程序员社区公众号