HTML标签CSS默认样式详解：字体大小与对齐规则

需积分: 9 128 浏览量更新于2024-09-10 收藏 2KB TXT 举报

在HTML中，CSS（层叠样式表）默认值对于页面布局和元素呈现起着关键作用。默认情况下，HTML标签与CSS属性结合，提供了对网页内容的标准样式定义，确保了不同级别的标题、列表、表格等元素在浏览器中具有一致的呈现效果。首先，HTML的一些通用元素如`<html>`, `<address>`, `<blockquote>`等，默认显示为块级元素（display:block），这意味着它们会占据完整的一行，并允许在其内部添加其他内容。同时，行内元素如`<body>`, `<dd>`, `<p>`等，它们默认显示为行内元素（display:inline），占据文本行的一部分空间。 `<head>`元素在HTML中是不可见的（display:none），但它包含CSS样式表和元数据。`<table>`及其相关子元素（如`<tr>`, `<td>`, `<th>`）则默认表现为表格元素，各自有特定的显示方式，如表格体（tbody）、表头（thead）和表尾（tfoot）。对于标题标签，从`<h1>`到`<h6>`，它们的字体大小和外边距都有预设的默认值。例如，`<h1>`的默认字体大小为2em，外边距为0.67em，而`<h6>`的字体大小为0.75em，外边距为1.67em。所有这些标题标签都具有更粗的字体权重（font-weight:bolder），以突出其重要性。 `<blockquote>`元素用于引用，其默认左、右外边距为40px，用于显示引文的边界。此外，`<i>`, `<cite>`, `<em>`等通常用于斜体，它们的默认字体风格为斜体（font-style:italic）。 `<pre>`, `<tt>`, `<code>`, `<kbd>`, 和 `<samp>`等表示预格式化文本，它们使用固定的字符集（font-family:monospace）以保持代码或特殊字符的格式。`<pre>`元素还设置了预格式化空白（white-space:pre），保留原样展示。总结来说，HTML中标签的CSS默认值对于维护网页结构的清晰度和一致性至关重要。理解并合理运用这些默认值，可以优化页面布局，提高可读性和用户体验。在开发过程中，根据需要可以随时覆盖这些默认样式，以实现自定义设计。

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 }
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,

下载后可阅读完整内容，剩余2页未读，立即下载

gongziwu

粉丝: 0
资源: 3

HTML标签CSS默认样式详解：字体大小与对齐规则

HTML标签与CSS基础知识点详解

前端第一阶段测试：CSS选择器、HTML属性与标签解析

HTML基础标签属性与CSS样式详解：控制网页呈现和行为

使用jQuery给input标签设置默认值

html常用的标签和css

css中常见各种标签

<html:select>： 选择默认值

系统讲解css中的l高级标签

html-css

css列表标签list与表格标签table详解

最新资源

<html:select>：选择默认值