CSS网页设计实例代码
CSS（层叠样式表）是一种用于描述HTML或XML（包括如SVG、MathML等派生语言）文档样式的样式表语言，CSS描述了如何在屏幕、纸质、音频等媒体上呈现元素，使用CSS，您可以控制文本的颜色、字体和大小，调整图片和其他媒体元素的布局，以及为网页添加动画和过渡效果。
下面是一个简单的CSS网页设计实例代码，包括HTML和CSS，这个例子将演示如何使用CSS来改变文本的颜色、字体和大小，以及如何调整元素的位置和大小。
<!DOCTYPE html>
<html>
<head>
<title>CSS网页设计实例</title>
<style>
/* 设置页面背景颜色和字体 */
body {
background-color: #f0f0f0;
font-family: Arial, sans-serif;
}
/* 设置标题样式 */
h1 {
color: #333333;
font-size: 24px;
text-align: center;
}
/* 设置段落样式 */
p {
color: #666666;
font-size: 16px;
}
/* 设置链接样式 */
a {
color: #0066cc;
text-decoration: none;
}
/* 设置按钮样式 */
.button {
background-color: #0066cc;
color: white;
padding: 10px 20px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
margin: 4px 2px;
cursor: pointer;
}
</style>
</head>
<body>
<h1>欢迎来到我的网站！</h1>
<p>这是一个使用CSS进行网页设计的例子。</p>
<p>您可以看到，CSS可以轻松地改变文本的颜色、字体和大小，还可以调整元素的位置和大小。</p>
<a href="#">点击这里</a>查看更多信息。
<button class="button">点我！</button>
</body>
</html>
在这个例子中，我们使用了内联样式来直接在HTML元素上应用CSS，我们还使用了外部样式表，它是在``标签中定义的，这种方法很适合小型项目或者快速原型设计，但在大型项目中，通常推荐使用外部样式表，因为这样可以使样式和内容分离，使代码更容易维护。
