为段落元素应用边框样式
在这一步中,你将学习如何使用 CSS 为段落元素应用基本的边框样式。我们将修改上一步中创建的 HTML 文件,为段落添加一个简单的边框。
在 WebIDE 中打开 border-styles.html
文件,并更新 <style>
部分,添加以下 CSS:
<style>
p {
border-style: solid;
border-color: blue;
border-width: 2px;
}
</style>
让我们分解一下这些 CSS 属性:
border-style: solid;
创建一个实线边框
border-color: blue;
将边框颜色设置为蓝色
border-width: 2px;
将边框宽度定义为 2 像素
你也可以使用简写形式来组合这些属性:
<style>
p {
border: 2px solid blue;
}
</style>
这种简写形式将边框宽度、样式和颜色组合在一个声明中。顺序并不重要,但通常的惯例是先写宽度,然后是样式,最后是颜色。
当你保存并在浏览器中查看 HTML 文件时,你会看到段落现在有一个蓝色的实线边框。
示例输出:
[一个带有 2 像素宽、蓝色实线边框的段落,围绕文本]