欢迎来到我们的 CSS 入门教程！CSS（层叠样式表）是用于描述 HTML 或 XML 文档样式的样式表语言。它允许您将文档的结构和外观分离，从而提高网站的可维护性和灵活性。

基础概念

CSS 的基础概念包括选择器、属性和值。选择器用于指定要应用样式的元素，属性定义了元素的样式，值则指定了属性的详细设置。

选择器

选择器是 CSS 中用于定位 HTML 元素的部分。以下是一些常用的选择器：

  • 元素选择器：例如 p 选择所有 <p> 元素。
  • 类选择器：例如 .my-class 选择所有具有 my-class 类的元素。
  • ID 选择器：例如 #my-id 选择具有 my-id ID 的元素。

属性

CSS 属性定义了元素的样式。以下是一些常用的 CSS 属性：

  • 颜色：例如 color 属性用于设置文本颜色。
  • 字体：例如 font-family 属性用于设置字体类型。
  • 大小：例如 font-size 属性用于设置字体大小。
  • 布局：例如 margin 和 padding 属性用于设置元素的边距和内边距。

实践案例

以下是一个简单的 CSS 实践案例，我们将通过一个 HTML 文档来应用 CSS 样式。

<!DOCTYPE html>
<html>
<head>
    <title>CSS 实践案例</title>
    <style>
        body {
            font-family: Arial, sans-serif;
        }
        .highlight {
            color: red;
            font-weight: bold;
        }
    </style>
</head>
<body>
    <h1>欢迎来到我的网站！</h1>
    <p>这是一个 <span class="highlight">高亮</span> 文本。</p>
</body>
</html>

在上面的例子中，我们设置了 <body> 元素的字体为 Arial，并且为具有 highlight 类的文本设置了红色和加粗样式。

扩展阅读

如果您想进一步学习 CSS，我们推荐您阅读以下教程：

希望这个教程能帮助您入门 CSS！🌟