CSS 简介

CSS（Cascading Style Sheets，层叠样式表）是一种用于描述文档展示方式的样式表语言。它与 HTML（超文本标记语言）一起被广泛用于构建网页和Web应用程序。

CSS 的作用

样式定义：CSS 用于定义网页元素的外观和布局，包括字体、颜色、间距、大小等方面。
分离内容与表现：通过将样式与内容分离，使得可以在不改变 HTML 结构的情况下改变页面的外观和布局，增强了可维护性和灵活性。
层叠性：多个 CSS 样式可以叠加，通过层叠规则（如优先级、继承等）来决定最终样式的呈现。

CSS 的基本语法

CSS 由选择器（Selector）和声明块（Declaration Block）组成：

选择器：用于选中HTML文档中的元素，例如 h1, .class, #id 等。
声明块：包含一个或多个属性-值对，用花括号 {} 括起来，例如 color: blue

selector {
    property: value;
    another-property: value;
    /* more properties */
}

CSS 的版本

CSS 有不同的版本和模块，目前主要是CSS3。CSS3引入了许多新的特性，如圆角、阴影、动画、多列布局等，丰富了设计和布局选项。

使用CSS

CSS 可以通过以下几种方式应用到HTML文档中：

内联样式：直接在HTML标签的style属性中定义样式。
内部样式表：使用<style>标签将CSS代码嵌入到HTML文档的<head>部分。
外部样式表：将CSS代码写在一个单独的.css文件中，并通过<link>标签将其链接到HTML文档中。

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <link rel="stylesheet" href="styles.css">
    <style>
        /* Internal CSS */
        body {
            font-family: Arial, sans-serif;
        }
    </style>
</head>
<body>
    <h1 style="color: red;">Hello, CSS!</h1> <!-- Inline CSS -->
    <p>This is a paragraph.</p>
</body>
</html>

总结

CSS 是 Web 开发中不可或缺的一部分，通过定义样式，使得网页可以呈现出丰富多样的外观和布局。它的灵活性和强大功能使得开发者可以更好地控制和设计网页的视觉效果。