HTML_CSS学习:布局

马龙强_

于 2024-05-06 20:53:19 发布

阅读量151

点赞数 2

文章标签： html css 学习

本文链接：https://blog.csdn.net/m0_74972727/article/details/138507943

版权

本文介绍了如何使用CSSreset来统一HTML元素的默认样式，包括在HTML5中应用reset，以确保跨浏览器的一致性。示例代码展示了如何从头开始设置基本的HTML结构和一个简单的reset.css文件。

摘要由CSDN通过智能技术生成

一、重置默认样式

HTML代码:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>重置默认样式</title>
    <link rel="stylesheet" href="css/reset.css">
    <style>
        .demo{
            background-color: red;
        }
    </style>
<!--    <style>-->
<!--        *{-->
<!--            margin: 0;-->
<!--            padding: 0;-->
<!--            color: #000;-->
<!--            text-decoration: none;-->
<!--        }-->
<!--    </style>-->
</head>
<body>
    <div class="demo">123</div>
    <h1>一级标题</h1>
    <h2>二级标题</h2>
    <h3>三级标题</h3>
    <h4>四级标题</h4>
    <a href="#">去百度</a>
<!--    <span>123</span>-->
    <ul>
        <li>张三</li>
        <li>李四</li>
        <li>王五</li>
    </ul>

</body>
</html>

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, 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, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
	display: block;
}
body {
	line-height: 1;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}