-
HTML标签默认样式是指浏览器在渲染网页时自动给标签应用的样式。这些样式是浏览器内置的,并且在没有进行任何CSS样式定义时就会生效。
-
对于某些 HTML 标签,浏览器会自动给它们应用一些默认样式。这些样式可以通过 resetting 或 normalize 清除掉,以保证页面的一致性。
下面是一些常见的 HTML 标签和它们的默认样式:
h1
-h6 标签:默认样式是加粗、字号逐渐减小、显示为块(block)元素;p
标签:默认样式是字号 16px、行高 1.5、顶部和底部有一定的间距;ul
和ol
标签:默认样式是缩进、自动编号或者符号(disc、circle、square)等,可以通过修改list-style-type
属性来自定义列表样式;a
标签:默认样式是带下划线、蓝色,可以通过修改text-decoration
和color
属性来改变链接的样式。
示例1:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>HTML标签默认样式示例1</title>
<style>
/* 清除默认样式 */
body, ul, li, p {
margin: 0;
padding: 0;
}
/*自定义列表样式 */
ul {
list-style-type: none;
}
/*自定义链接样式 */
a {
color: red;
text-decoration: none;
}
</style>
</head>
<body>
<h1>Hello, World!</h1>
<p>This is a paragraph.</p>
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
<a href="#">This is a link</a>
</body>
</html>
示例2:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>HTML标签默认样式示例2</title>
<style>
/* 清除默认样式 */
body, ul, li, p {
margin: 0;
padding: 0;
}
/*自定义标题样式 */
h1 {
font-size: 2rem;
font-weight: bold;
text-align: center;
}
/*自定义段落样式 */
p {
font-size: 1.2rem;
line-height: 1.5;
text-indent: 2em;
}
</style>
</head>
<body>
<h1>Hello, World!</h1>
<p>This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. </p>
<p>This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. </p>
</body>
</html>
本攻略的目的是让读者了解 HTML 标签的默认样式,以及如何清除它们或自定义它们。这将有助于确保网站的一致性,并减少跨浏览器和跨设备的显示差异。
本站文章如无特殊说明,均为本站原创,如若转载,请注明出处:html标签默认样式整理 - Python技术站