🌈个人主页：前端青山
🔥系列专栏：Css篇
🔖人终将被年少不可得之物困其一生
依旧青山,本期给大家带来Css篇专栏内容:CSS基础与应用详解
前言
CSS（层叠样式表）是网页设计中不可或缺的一部分，它使得HTML文档更加美观和功能丰富。本文将详细介绍CSS的基本概念、语法、选择器、伪类、颜色表示法以及图片格式等内容，并通过具体的代码示例进行解析，帮助读者更好地理解和掌握CSS的应用。
目录
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%);
}4.2 透明度
CSS还支持设置颜色的透明度，使用rgba或hsla表示法。例如：
div {
background-color: rgba(122, 196, 159, 0.5);
}5. 图片格式
5.1 常见图片格式
常见的图片格式包括：
JPG：有损压缩，占用空间小。
PNG：支持透明，无损压缩。
GIF：动图，支持256种颜色。
5.1.1 JPG
JPG是一种有损压缩格式，适用于照片等复杂图像。例如：
<img src="img/photo.jpg" alt="照片">5.1.2 PNG
PNG是一种无损压缩格式，支持透明，适用于图标、logo等。例如：
<img src="img/logo.png" alt="Logo">5.1.3 GIF
GIF是一种动图格式，支持256种颜色，适用于简单的动画。例如：
<img src="img/animation.gif" alt="动画">6. 伪类选择器
6.1 伪类选择器概述
伪类选择器用于选择具有特定状态的元素。常见的伪类选择器包括：
:link：未访问的链接。:visited：已访问的链接。:hover：鼠标悬停时的链接。:active：鼠标点击时的链接。
6.2 伪类选择器示例
a:link {
color: red;
}
a:visited {
color: yellow;
}
a:hover {
color: green;
}
a:active {
color: blue;
}7. 实际应用示例
7.1 示例1：基本样式应用
<!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>
div {
width: 300px;
height: 200px;
background-color: rgb(122, 196, 159, 0.5);
}
</style>
</head>
<body>
<div>这是一个div元素。</div>
</body>
</html>7.2 示例2：外部样式表
<!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>
<div class="a" id="a">文字</div>
</body>
</html>7.3 示例3：图片标签
<!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>
</head>
<body>
<img src="img/dabai.jpg" alt="提示文字" title="大白" width="300">
</body>
</html>7.4 示例4：伪类选择器
<!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>
a:link {
color: red;
}
a:visited {
color: yellow;
}
a:hover {
color: green;
}
a:active {
color: blue;
}
</style>
</head>
<body>
<a href="#">点击跳转</a>
</body>
</html>7.5 示例5：复合选择器
<!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>
* {
color: seagreen;
}
p {
color: lightblue;
}
.list {
color: brown;
}
#a {
color: black;
}
.list, #a, p {
color: red;
}
ol li {
color: blueviolet;
}
</style>
</head>
<body>
<ul>
<li>你干嘛呀</li>
<li>你干嘛呀</li>
<li class="list">你干嘛呀</li>
<li id="a">你干嘛呀</li>
<li>你干嘛呀</li>
<li>你干嘛呀</li>
</ul>
<ol>
<li>哎呦</li>
<li>哎呦</li>
<li>哎呦</li>
<li>哎呦</li>
<li>哎呦</li>
</ol>
<p>段落文本</p>
<p>段落文本2</p>
</body>
</html>结尾
本文详细介绍了CSS的基本概念、语法、选择器、伪类、颜色表示法以及图片格式等内容，并通过具体的代码示例进行了解析。希望本文能帮助读者更好地理解和掌握CSS的应用，提高网页设计的技能。在未来的学习和实践中，建议多尝试不同的CSS技巧和效果，不断积累经验，提升自己的技术水平。