`

HTML默认样式和浏览器默认样式

    博客分类:
  • css
阅读更多

各种HTML标签:h1-h6,p,ul,ol,dl…即使没有给他们定义样式属性值,他们在浏览器中显示时,也会具有各种样式属性(主要是字体大小和各种间距)。这是因为浏览器和CSS给这些标签设置了默认的样式属性值,各种版本的浏览器和CSS可能略有差别,下面列举的是Firefox 1.5 和CSS 2.1(IE)设置的一些常见标签的默认样式属性值。

HTML样式

html, address,blockquote,body, dd, div,dl, dt, fieldset, form,frame, frameset,h1, h2, h3, h4,h5, h6, 
noframes,ol, p, ul, center,dir, hr, menu, pre { display: block }
/*以上列表元素默认状态下一块状显示,未显示的将以内联元素显示,该列表针对HTML4版本,部分元素在XHTML1中将废弃*/
li { display: list-item }/*默认以列表显示*/ head { display: none }/*默认不显示*/ table { display: table }/*默认为表格显示*/ tr { display: table-row }/*默认为表格行显示*/ thead { display: table-header-group }/*默认为表格头部分组显示*/ tbody { display: table-row-group }/*默认为表格行分组显示*/ tfoot { display: table-footer-group }/*默认为表格底部分组显示*/ col { display: table-column }/*默认为表格列显示*/ colgroup { display: table-column-group }/*默认为表格列分组显示*/ td, th { display: table-cell; }/*默认为单元格显示*/ caption { display: table-caption }/*默认为表格标题显示*/ th { font-weight: bolder; text-align: center }/*默认为表格标题显示,呈现加粗居中状态*/ caption { text-align: center }/*默认为表格标题显示,呈现居中状态*/ body { margin: 8px; line-height: 1.12 } h1 { font-size: 2em; margin: .67em 0 } h2 { font-size: 1.5em; margin: .75em 0 } h3 { font-size: 1.17em; margin: .83em 0 } h4, p, blockquote, ul, fieldset, form, ol, dl, dir, menu { margin: 1.12em 0 } h5 { font-size: .83em; margin: 1.5em 0 } h6 { font-size: .75em; margin: 1.67em 0 } h1, h2, h3, h4, h5, h6, b,strong { font-weight: bolder } blockquote { margin-left: 40px; margin-right: 40px } i, cite, em,var, address { font-style: italic } pre, tt, code, kbd, samp { font-family: monospace } pre { white-space: pre } button, textarea, input, object, select { display:inline-block; } big { font-size: 1.17em } small, sub, sup { font-size: .83em } sub { vertical-align: sub }/*定义sub元素默认为下标显示*/ sup { vertical-align: super }/*定义sub元素默认为上标显示*/ table { border-spacing: 2px; } thead, tbody, tfoot { vertical-align: middle }/*定义表头、主体表、表脚元素默认为垂直对齐*/ td, th { vertical-align: inherit }/*定义单元格、列标题默认为垂直对齐默认为继承*/ s, strike, del { text-decoration: line-through }/*定义这些元素默认为删除线显示*/ hr { border: 1px inset }/*定义分割线默认为1px宽的3D凹边效果*/ ol, ul, dir, menu, dd { margin-left: 40px } ol { list-style-type: decimal } ol ul, ul ol, ul ul, ol ol { margin-top: 0; margin-bottom: 0 } u, ins { text-decoration: underline } br:before { content: "A" }/*定义换行元素的伪对象内容样式*/ :before, :after { white-space: pre-line }/*定义伪对象空格字符的默认样式*/ center { text-align: center } abbr, acronym { font-variant: small-caps; letter-spacing: 0.1em } :link, :visited { text-decoration: underline } :focus { outline: thin dotted invert } /* Begin bidirectionality settings (do not change) */ BDO[DIR="ltr"] { direction: ltr; unicode-bidi: bidi-override }
/*定义BDO元素当其属性为DIR="ltr"时的默认文本读写显示顺序*/
BDO[DIR="rtl"] { direction: rtl; unicode-bidi: bidi-override }
/*定义BDO元素当其属性为DIR="rtl"时的默认文本读写显示顺序*/
*[DIR="ltr"] { direction: ltr; unicode-bidi: embed }
/*定义任何元素当其属性为DIR="ltr"时的默认文本读写显示顺序*/
*[DIR="rtl"] { direction: rtl; unicode-bidi: embed }
/*定义任何元素当其属性为DIR="rtl"时的默认文本读写显示顺序*/
@media print { /*定义标题和列表默认的打印样式*/ h1 { page-break-before: always } h1, h2, h3, h4, h5, h6 { page-break-after: avoid } ul, ol, dl { page-break-before: avoid } }

浏览器默认样式

1.页边距

IE默认为10px,通过body的margin属性设置

FF默认为8px,通过body的padding属性设置

要清除页边距一定要清除这两个属性值

 

body {
    margin:0;
    padding:0;
}

 
2.段间距

IE默认为19px,通过p的margin-top属性设置

FF默认为1.12em,通过p的margin-bottom属性设

p默认为块状显示,要清除段间距,一般可以设置

 

p {
    margin-top:0;
    margin-bottom:0;
}

 
3.标题样式

h1~h6默认加粗显示:font-weight:bold;。

默认大小请参上表

还有是这样的写的

h1 {font-size:xx-large;}
h2 {font-size:x-large;}
h3 {font-size:large;}
h4 {font-size:medium;}
h5 {font-size:small;}
h6 {font-size:x-small;}

 
个大浏览器默认字体大小为16px,即等于medium,h1~h6元素默认以块状显示字体显示为粗体,

要清除标题样式,一般可以设置

hx {
    font-weight:normal;
    font-size:value;
}

 
4.列表样式

IE默认为40px,通过ul、ol的margin属性设置

FF默认为40px,通过ul、ol的padding属性设置

dl无缩进,但起内部的说明元素dd默认缩进40px,而名称元素dt没有缩进。

要清除列表样式,一般可以设置

ul, ol, dd {
    list-style-type:none;/*清楚列表样式符*/
    margin-left:0;/*清楚IE左缩进*/
    padding-left:0;/*清楚非IE左缩进*/
}

 
5.元素居中

IE默认为text-align:center;

FF默认为margin-left:auto;margin-right:auto;

6.超链接样式

a 样式默认带有下划线,显示颜色为蓝色,被访问过的超链接变紫色,要清除链接样式,一般可以设置

a {
    text-decoration:none;
    color:#colorname;
}

7 鼠标样式

IE默认为cursor:hand;

FF默认为cursor:pointer;。该声明在IE中也有效

8 图片链接样式

IE默认为紫色2px的边框线

FF默认为蓝色2px的边框线

要清除图片链接样式,一般可以设置

img {
    border:0;
}
分享到:
评论

相关推荐

    css 浏览器默认样式清除

    -通常情况下,浏览器会给元素设置一些默认样式 -默认样式的存在会影响页面的布局 -通常情况下编写网页时需要去除浏览器的默认样式 重置样式表 :专门用来对浏览器的样式进行重置 reset:直接取消了浏览器的默认...

    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,font,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,...

    浏览器默认样式表

    此外,学习浏览器默认样式表也能帮助开发者更好地理解和预测元素在没有明确指定样式时的行为,从而提高工作效率和页面的用户体验。 在实际开发中,可以借助开发者工具查看和分析浏览器的默认样式,例如Chrome的...

    重置浏览器默认样式的CSS文件

    在网页设计和开发中,浏览器默认样式是每个前端开发者都需要面对的问题。不同的浏览器对HTML元素的默认渲染方式可能有所差异,这可能导致在不同浏览器中页面显示不一致,从而增加了跨浏览器兼容性的难度。"重置...

    自用的HTML清除CSS浏览器默认样式,包含移动PC,带详细注释说明

    自用了几年的清除默认样式的css文件,包含详细的注释说明,以及一些快捷便利的样式,易看懂。

    HTML标签默认样式重置文件reset.css

    这些默认样式在不同的浏览器中可能会不一样,这就导致浏览器默认样式会给我们带来很大的麻烦,从而影响开发效率,所以最好的解决方案就是在一开始就将默认样式都全部去掉或者覆盖。通过重新定义标签的样式确保标签在...

    HTML标签的默认CSS样式汇总

    这些默认样式在不同浏览器间可能存在差异,因此在进行跨浏览器开发时,可能需要通过CSS重置(reset.css或normalize.css)来确保一致性。此外,使用CSS预处理器(如Sass、Less)可以帮助组织和管理样式,避免直接在...

    各浏览器默认的css

    1. **研究浏览器默认样式**:了解每个浏览器如何处理HTML元素的默认样式,例如,有的浏览器可能默认会给`<p>`标签添加下边距,有的则没有。 2. **使用CSS重置或Normalize.css**:这些工具可以消除浏览器间的样式...

    重置浏览器默认样式

    在实际应用中,需要注意的是,虽然重置浏览器默认样式有助于实现跨浏览器的一致性,但它也可能会影响到一些功能性和语义化的样式,如`<input>`和`<textarea>`的字体大小。在重置`input, textarea, select`等表单元素...

    CSS样式表教程:浏览器默认样式

    因此,理解并掌握浏览器默认样式的处理方式对于创建跨浏览器兼容的网页至关重要。 首先,我们需要了解为何要在CSS中设置`* {padding:0;margin:0}`。这是因为浏览器默认会给元素添加内边距(padding)和外边距...

    css 清除默认样式

    当我们谈论“清除CSS默认样式”时,实际上是指去除浏览器对HTML元素的默认渲染效果,以便我们可以自定义页面的视觉表现。这是因为不同的浏览器对某些HTML元素的默认样式可能有所不同,这可能导致页面在不同浏览器中...

    XHTML标签的默认样式

    在XHTML中,每个标签都有其预设的默认样式,这些样式由浏览器自动应用,使得网页能够呈现出基本的布局和外观。理解这些默认样式对于开发人员来说至关重要,它可以帮助我们在设计网页时避免一些常见的布局问题,并且...

    reset.css 重置浏览器标签的样式表

    不同浏览器的默认样式之间也会有差别,例如ul默认带有缩进的样式,在IE下,它的缩进是通过margin实现的,而Firefox下,它的缩进是由padding实现的。在切换页面的时候,浏览器的默认样式往往会给我们带来麻烦,影响...

    CSS教程之重置默认样式与IE兼容圆角的解决方法.pdf

    CSS 重置默认样式和 IE 兼容圆角解决方法是提高网页可读性和可访问性的重要方法。通过使用 CSS Reset 机制和 normalize.css 库,可以确保网页在不同浏览器中的显示效果一致,而使用 CSS hacks 可以解决 IE 浏览器中...

    html标签默认样式整理

    在HTML中,每个标签都有其默认的样式属性,这些...这些默认样式是HTML文档的基础,理解它们可以帮助开发者更好地控制页面布局和视觉效果。在实际开发中,通常会通过CSS重写这些默认样式,以实现更个性化的网页设计。

    HTML4标签的默认样式列表

    为了确保网页元素在不同浏览器中具有一致的表现形式,HTML4定义了一系列标签及其默认样式。本文将详细介绍这些标签的默认样式,并提供如何根据需要自定义这些样式的指导。 #### 块级元素 块级元素(block-level ...

    CSS3恢复默认样式案例.pdf

    运行这段代码后,`h1`标题的字体大小和粗细都会恢复为浏览器默认的标题样式,使得标题回归其原有的视觉强调。 总结: `initial`关键字在CSS3中用于设置一个属性的初始值,即浏览器默认值。它可以帮助开发者快速清除...

    兼容所有浏览器的样式写法

    1. **使用CSS Reset**:通过CSS重置消除不同浏览器默认样式的差异。 2. **保持简洁**:避免使用过于复杂的选择器组合,以免在老旧浏览器中出现问题。 3. **测试与验证**:在多个浏览器中进行测试,确保样式正确无误...

    CSS3恢复默认样式.pdf

    在上述代码中,`#text02`的段落将不再使用蓝色字体和宋体,而是遵循浏览器默认的文本颜色和字体设置。 **2. initial属性的效果** `initial`属性的效果并不总是等同于简单地删除对应的样式规则。这是因为某些属性的...

    浏览器默认样式

    浏览器默认样式是指不同浏览器在解析HTML元素时内置的一系列CSS样式。这些样式因浏览器而异,导致在不同浏览器中展示同一网页时可能会出现视觉差异。了解浏览器默认样式对于前端开发者来说至关重要,因为它能帮助...

Global site tag (gtag.js) - Google Analytics