CSS 教程入门

CSS（Cascading Style Sheets）是一种用来为网页添加样式和布局的语言。通过使用CSS，开发人员可以控制网页的外观和风格，使其更具吸引力和易于阅读。本章将介绍CSS的基础知识和常用属性。

什么是 CSS？

CSS是一种样式表语言，用于描述网页的外观和布局。通过将CSS应用于HTML文档，开发人员可以控制文本的颜色、字体、大小，以及页面的布局、间距和背景等。CSS的作用是将内容和样式分离，使网页更易于维护和修改。

如何使用 CSS？

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

1. 内联样式：直接在HTML元素中使用style属性来定义样式。

示例代码：

<p style="color: red; font-size: 16px;">这是一段红色的文字</p>

1. 内部样式表：在HTML文档的<head>标签内使用<style>标签定义样式。

示例代码：

<head>
    <style>
        p {
            color: blue;
            font-size: 14px;
        }
    </style>
</head>

1. 外部样式表：将CSS代码保存为独立的.css文件，并在HTML文档中通过<link />标签引用。

示例代码：

<head>
    <link rel="stylesheet" href="styles.css">
</head>

CSS 选择器

CSS选择器用于选择要应用样式的HTML元素。常见的选择器包括：

1. 元素选择器：选择指定类型的元素。

示例代码：

p {
    color: red;
}

1. 类选择器：选择具有相同类名的元素。

示例代码：

.text {
    font-size: 16px;
}

1. ID选择器：选择具有唯一ID的元素。

示例代码：

#header {
    background-color: gray;
}

1. 后代选择器：选择元素的后代元素。

示例代码：

div p {
    margin-bottom: 10px;
}

1. 伪类选择器：根据元素的状态选择元素。

示例代码：

a:hover {
    text-decoration: underline;
}

CSS 属性

CSS属性用于控制元素的样式和布局。常用的CSS属性包括：

1. color：控制文本颜色。

2. font-size：控制字体大小。

3. background-color：控制背景颜色。

4. margin：控制元素的外边距。

5. padding：控制元素的内边距。

6. border：控制元素的边框样式。

7. display：控制元素的显示方式。

8. position：控制元素的定位方式。

以上是CSS的基础知识和常用属性，希望通过本章的介绍能够帮助您更好地理解和应用CSS。