CSS基础与应用详解

🌈个人主页：前端青山
🔥系列专栏：Css篇
🔖人终将被年少不可得之物困其一生

依旧青山,本期给大家带来Css篇专栏内容:CSS基础与应用详解

前言

CSS（层叠样式表）是网页设计中不可或缺的一部分，它使得HTML文档更加美观和功能丰富。本文将详细介绍CSS的基本概念、语法、选择器、伪类、颜色表示法以及图片格式等内容，并通过具体的代码示例进行解析，帮助读者更好地理解和掌握CSS的应用。

前言

1. CSS概述

1.1 什么是CSS

1.2 CSS的基本语法

1.3 CSS的引入方式

1.3.1 行内样式

1.3.2 内部样式表

1.3.3 外部样式表

2. CSS选择器

2.1 基本选择器

2.1.1 全局选择器

2.1.2 标签选择器

2.1.3 类选择器

2.1.4 ID选择器

2.2 复合选择器

2.2.1 群组选择器

2.2.2 后代选择器

3. CSS优先级

3.1 优先级规则

3.2 权重值

4. CSS颜色表示法

4.1 基本颜色表示法

4.1.1 英文单词

4.1.2 十六进制

4.1.3 RGB三原色表示法

4.1.4 HSB表示法

4.2 透明度

5. 图片格式

5.1 常见图片格式

5.1.1 JPG

5.1.2 PNG

5.1.3 GIF

6. 伪类选择器

6.1 伪类选择器概述

6.2 伪类选择器示例

7. 实际应用示例

7.1 示例1：基本样式应用

7.2 示例2：外部样式表

7.3 示例3：图片标签

7.4 示例4：伪类选择器

7.5 示例5：复合选择器

结尾

1. CSS概述

1.1 什么是CSS

CSS（Cascading Style Sheets，层叠样式表）是一种用于控制网页外观的标记性语言。它与HTML配合使用，可以精确地控制网页中的文本、图像、表格等元素的样式。CSS的主要作用是将内容与表现分离，使网页的维护和更新更加方便。

1.2 CSS的基本语法

CSS的基本语法结构如下：

css选择器 {
    属性名: 属性值;
    属性名: 属性值;
}

选择器：用于指定要应用样式的HTML元素。
属性名：定义要设置的样式属性。
属性值：指定属性的具体值。

1.3 CSS的引入方式

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

行内样式：直接在HTML标签中使用style属性。
内部样式表：在HTML文档的<head>部分使用<style>标签。
外部样式表：通过<link>标签或@import规则引入外部CSS文件。

1.3.1 行内样式

行内样式直接在HTML标签中使用style属性来定义样式。例如：

html

<p style="color: red; font-size: 16px;">这是一个段落。</p>

1.3.2 内部样式表

内部样式表在HTML文档的<head>部分使用<style>标签来定义样式。例如：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        p {
            color: lightblue;
        }
    </style>
</head>
<body>
    <p>这是一个段落。</p>
</body>
</html>

1.3.3 外部样式表

外部样式表通过<link>标签或@import规则引入外部CSS文件。例如：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="css/style.css">
</head>
<body>
    <p>这是一个段落。</p>
</body>
</html>

或者使用@import规则：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        @import url("css/style.css");
    </style>
</head>
<body>
    <p>这是一个段落。</p>
</body>
</html>

2. CSS选择器

2.1 基本选择器

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

全局选择器（通配符选择器）：*，选择所有元素。
标签选择器：通过标签名称选择元素。
类选择器：通过class属性选择元素。
ID选择器：通过id属性选择元素。

2.1.1 全局选择器

全局选择器*选择所有元素。例如：

* {
    color: seagreen;
}

2.1.2 标签选择器

标签选择器通过标签名称选择元素。例如：

p {
    color: lightblue;
}

2.1.3 类选择器

类选择器通过class属性选择元素。例如：

.list {
    color: brown;
}

2.1.4 ID选择器

ID选择器通过id属性选择元素。例如：

#a {
    color: black;
}

2.2 复合选择器

复合选择器由多个基本选择器组成，用于更精确地选择元素。常见的复合选择器包括：

群组选择器：同时选中多个标签，用逗号隔开。
后代选择器：选中选择符1的所有后代选择符2，用空格隔开。

2.2.1 群组选择器

群组选择器同时选中多个标签，用逗号隔开。例如：

.list, #a, p {
    color: red;
}

2.2.2 后代选择器

后代选择器选中选择符1的所有后代选择符2，用空格隔开。例如：

ol li {
    color: blueviolet;
}

3. CSS优先级

3.1 优先级规则

CSS优先级决定了当多个样式规则应用于同一个元素时，哪个规则会被应用。优先级规则如下：

行内样式 > 内部样式 = 外部样式
重要性（!important）优先级最高

3.2 权重值

权重值是一个虚拟的概念，用于计算选择器的优先级。权重值的计算规则如下：

全局选择器：0
标签选择器：1
类选择器：10
ID选择器：100
重要性（!important）：1000+

例如：

* {
    color: seagreen;
} /* 权重值：0 */

p {
    color: lightblue;
} /* 权重值：1 */

.list {
    color: brown;
} /* 权重值：10 */

#a {
    color: black;
} /* 权重值：100 */

.list, #a, p {
    color: red;
} /* 权重值：10 + 100 + 1 = 111 */

ol li {
    color: blueviolet;
} /* 权重值：1 + 1 = 2 */

4. CSS颜色表示法

4.1 基本颜色表示法

CSS提供了多种颜色表示法，常用的有：

英文单词：如red、green等。
十六进制：如#000（黑色）、#fff（白色）等。
RGB三原色表示法：如rgb(255, 0, 0)（红色）、rgb(0, 255, 0)（绿色）等。
HSB表示法：色调、饱和度、亮度表示颜色。

4.1.1 英文单词

使用英文单词表示颜色。例如：

div {
    background-color: red;
}

4.1.2 十六进制

使用十六进制表示颜色。例如：

div {
    background-color: #f00;
}

4.1.3 RGB三原色表示法

使用RGB三原色表示颜色。例如：

div {
    background-color: rgb(255, 0, 0);
}

4.1.4 HSB表示法

使用HSB表示颜色。例如：

div {
    background-color: hsb(0, 100%, 50%);
}