正文

首先，我们需要在HTML中创建一个标题元素，然后在CSS中设置其样式。

小编
小编 V管理员 /0 评论 /22 阅读
1210
欧意国内注册

## HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS样式示例</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <h1 class="title">这是一个标题</h1>
</body>
</html>

在这个例子中，我们创建了一个<h1>元素，并为其添加了一个名为title的类，接下来，我们将在CSS文件中定义这个类的样式。

## CSS (styles.css)

.title {
    font-family: Arial, sans-serif;
    font-size: 24px;
    font-weight: bold;
    color: #333;
    text-align: center;
    margin-top: 50px;
}

在这个CSS文件中，我们为.title类定义了以下样式：

1、font-family: 设置字体为Arial，如果用户计算机上没有安装Arial字体，则使用其他无衬线字体。

2、font-size: 设置字体大小为24像素。

3、font-weight: 设置字体粗细为粗体（bold）。

4、color: 设置字体颜色为深灰色（#333）。

5、text-align: 设置文本居中对齐。

6、margin-top: 设置上边距为50像素，使标题与页面顶部有一定的间距。

当我们打开HTML文件时，我们应该能看到一个居中的粗体标题，字体为Arial，大小为24像素，颜色为深灰色。