前端学习——初探CSS与html的结合
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>初探CSS与HTML的融合</title>
<style>
body {
font-family: 'Microsoft YaHei', sans-serif;
background-color: #F7F7F7;
}
.container {
max-width: 600px;
margin: 0 auto;
padding: 20px;
background-color: #FFF;
border: 1px solid #EEE;
box-sizing: border-box;
}
h1 {
color: #333;
text-align: center;
}
p {
color: #666;
font-size: 18px;
line-height: 1.5;
}
a {
color: #1088e4;
text-decoration: none;
}
a:hover {
text-decoration: underline;
}
</style>
</head>
<body>
<div class="container">
<h1>欢迎来到我的网站</h1>
<p>这里是网站的介绍文字，可以通过CSS来控制样式。</p>
<p>
<a href="https://www.example.com">点击这里访问我的网站</a>
</p>
</div>
</body>
</html>这段代码展示了如何在HTML文件中嵌入CSS样式，并通过class选择器为页面元素添加样式。同时也演示了如何使用<style>标签内嵌样式，以及如何通过链接外部CSS文件来控制样式。这是学习Web开发的基础，有助于理解前端开发的核心概念。
评论已关闭