CSS 样式入门：属性全知晓
CSS（层叠样式表）是一种用于控制网页样式和布局的语言。它包含了一系列属性，用于定义元素的外观和行为。下面将详细介绍一些常见的 CSS 属性，以及通过实例展示它们的使用方法和效果。
- 字体样式属性：
- font-family：用于定义文本的字体族名称或字体的名称。可以设置多个字体，以确保在用户没有安装第一个字体的情况下应用备选字体。
- font-size：用于指定文本的字体大小。可以使用像素、百分比或其他单位进行设置。
- font-weight：用于指定文本的粗细程度。常见的值包括 normal（普通）、bold（粗体）和 lighter（较轻）。
- font-style：用于指定文本的风格。常见的值包括 normal（普通）、italic（斜体）和 oblique（倾斜）。
实例：
<style>
p {
font-family: Arial, sans-serif;
font-size: 16px;
font-weight: bold;
font-style: italic;
}
</style>
<p>This is a sample text.</p>
效果：文本将以 Arial 字体、16 像素大小、粗体和斜体样式显示。
- 背景样式属性：
- background-color：用于指定元素的背景颜色。
- background-image：用于指定元素的背景图片。可以设置单个图片或使用逗号分隔的多个图片。
- background-repeat：用于指定背景图片的重复方式。常见的值包括 repeat（重复）、repeat-x（水平重复）和 repeat-y（垂直重复）。
- background-position：用于指定背景图片的位置。可以使用关键字（如 left、center、right、top、bottom）或像素单位进行设置。
实例：
<style>
div {
background-color: #f2f2f2;
background-image: url('background.jpg');
background-repeat: no-repeat;
background-position: center;
}
</style>
<div>This is a div with a background image.</div>
效果：元素的背景颜色为浅灰色，背景图片为 background.jpg，不重复，位于元素的中心位置。
- 边框样式属性：
- border-width：用于指定边框的宽度。可以设置单个值或使用空格分隔的多个值来指定上、右、下、左四条边的宽度。
- border-style：用于指定边框的样式。常见的值包括 solid（实线）、dashed（虚线）和 dotted（点线）。
- border-color：用于指定边框的颜色。可以设置单个颜色值或使用空格分隔的多个值来指定上、右、下、左四条边的颜色。
实例：
<style>
div {
border-width: 2px;
border-style: dashed;
border-color: red;
}
</style>
<div>This is a div with a dashed red border.</div>
效果：元素的边框宽度为 2 像素，样式为虚线，颜色为红色。
通过上述实例，可以看到不同属性的组合可以产生不同的效果。初学者可以通过反复尝试和调整这些属性的值，以掌握基本的样式设置方法。