CSS 基础（选择器、属性、值）

概述

CSS（层叠样式表）是用于描述HTML文档外观的语言。通过CSS，我们可以控制网页的布局、颜色、字体等视觉元素。本教程将详细介绍CSS的基础知识，包括选择器、属性和值的使用。

1. CSS 选择器

选择器是CSS的基础，用于指定我们想要样式化的HTML元素。

1.1 元素选择器

元素选择器通过HTML标签名来选择元素。例如，如果你想为所有的段落（<p>）设置样式，可以使用以下代码：

p {
    color: blue;
    font-size: 16px;
}

1.2 类选择器

类选择器通过HTML元素的class属性来选择元素。类选择器以.开头。例如：

<p class="highlight">这是一个高亮段落。</p>

.highlight {
    background-color: yellow;
}

1.3 ID选择器

ID选择器通过HTML元素的id属性来选择元素。ID选择器以#开头。例如：

<div id="header">这是页眉</div>

#header {
    background-color: gray;
    padding: 10px;
}

1.4 属性选择器

属性选择器通过HTML元素的属性来选择元素。例如，选择所有带有title属性的元素：

[title] {
    color: red;
}

1.5 伪类选择器

伪类选择器用于选择处于特定状态的元素。例如，:hover伪类用于选择鼠标悬停的元素：

a:hover {
    text-decoration: underline;
}

2. CSS 属性

CSS属性用于定义元素的样式。每个属性都有一个特定的值。

2.1 颜色属性

颜色属性用于设置文本或背景的颜色。例如：

body {
    color: #333; /* 文本颜色 */
    background-color: #f0f0f0; /* 背景颜色 */
}

2.2 字体属性

字体属性用于设置文本的字体、大小和样式。例如：

p {
    font-family: Arial, sans-serif; /* 字体 */
    font-size: 16px; /* 字体大小 */
    font-weight: bold; /* 字体粗细 */
}

2.3 布局属性

布局属性用于控制元素的布局。例如：

div {
    width: 50%; /* 宽度 */
    margin: 10px; /* 外边距 */
    padding: 20px; /* 内边距 */
}

3. CSS 值

CSS值是属性的具体设置。值可以是颜色、长度、百分比等。

3.1 颜色值

颜色值可以是十六进制、RGB、RGBA、HSL等。例如：

p {
    color: #ff0000; /* 红色 */
    color: rgb(255, 0, 0); /* 红色 */
    color: rgba(255, 0, 0, 0.5); /* 半透明红色 */
}

3.2 长度值

长度值可以是像素、百分比、em等。例如：

div {
    width: 500px; /* 像素 */
    width: 50%; /* 百分比 */
    font-size: 1.2em; /* em */
}

3.3 其他值

其他值包括auto、inherit、none等。例如：

img {
    display: none; /* 隐藏图片 */
}

4. 实践练习

4.1 练习1：设置页面背景颜色

创建一个HTML文件，并使用CSS设置页面的背景颜色为浅灰色。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>背景颜色练习</title>
    <style>
        body {
            background-color: #f0f0f0;
        }
    </style>
</head>
<body>
    <h1>这是一个标题</h1>
    <p>这是一个段落。</p>
</body>
</html>

4.2 练习2：设置文本样式

创建一个HTML文件，并使用CSS设置段落的字体、颜色和大小。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>文本样式练习</title>
    <style>
        p {
            font-family: Arial, sans-serif;
            color: #333;
            font-size: 18px;
        }
    </style>
</head>
<body>
    <h1>这是一个标题</h1>
    <p>这是一个段落。</p>
</body>
</html>

4.3 练习3：使用类选择器

创建一个HTML文件，并使用类选择器为特定的段落设置样式。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>类选择器练习</title>
    <style>
        .highlight {
            background-color: yellow;
            font-weight: bold;
        }
    </style>
</head>
<body>
    <h1>这是一个标题</h1>
    <p>这是一个普通段落。</p>
    <p class="highlight">这是一个高亮段落。</p>
</body>
</html>

5. 总结

通过本教程，你已经学习了CSS的基础知识，包括选择器、属性和值的使用。这些知识是掌握CSS的关键，能够帮助你创建美观且功能强大的网页。继续练习和探索，你将能够掌握更多高级的CSS技巧。

6. 下一步

接下来，你可以学习如何使用CSS创建响应式设计，或者探索CSS框架如Bootstrap和Tailwind，以加速你的网页开发过程。