【前端老赵的CSS简明教程】3-2 如何使用CSS样式美化HTML元素

大家好，我是前端老赵，今天我们来讲解如何使用CSS样式美化HTML元素。CSS是前端开发必不可少的一部分，通过CSS可以为网页添加各种各样的样式，让网页看起来更加美观和舒适。

在前面的课程中，我们已经学习了CSS的基本语法和常用的CSS样式，今天我们将会学习如何使用CSS样式来美化HTML元素。

假设我们有一个简单的HTML页面，其中包含一个段落和一个按钮元素。现在我们想要通过CSS样式来改变它们的外观。

我们首先可以通过使用font-family属性来改变页面中文本的字体。例如，我们可以将段落的字体设置为"Arial"：

CSS

p{ font-family: Arial; }

接下来，我们可以使用color属性来改变文本的颜色。例如，我们可以将段落的文本颜色设置为红色：

CSS

p{ font-family: Arial; color: red; }

同样地，我们也可以使用background-color属性来改变元素的背景颜色。例如，我们可以将按钮的背景颜色设置为蓝色：

CSS

button{ background-color: blue; }

除了基础样式之外，我们还可以使用CSS样式来改变元素的大小、位置和形状等。例如，我们可以使用width和height属性来改变元素的大小，使用margin和padding属性来改变元素的内部和外部间距，使用border属性来改变元素的边框。

接下来，我们来看一个完整的案例。假设我们有一个包含登录