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 像素，样式为虚线，颜色为红色。

通过上述实例，可以看到不同属性的组合可以产生不同的效果。初学者可以通过反复尝试和调整这些属性的值，以掌握基本的样式设置方法。