CSS基础与应用详解

前端青山2024-12-20 16:11

​🌈个人主页：前端青山

🔥系列专栏：Css篇

🔖人终将被年少不可得之物困其一生

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

前言

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

目录

前言

[1. CSS概述](#1. CSS概述)

[1.1 什么是CSS](#1.1 什么是CSS)

[1.2 CSS的基本语法](#1.2 CSS的基本语法)

[1.3 CSS的引入方式](#1.3 CSS的引入方式)

[1.3.1 行内样式](#1.3.1 行内样式)

[1.3.2 内部样式表](#1.3.2 内部样式表)

[1.3.3 外部样式表](#1.3.3 外部样式表)

[2. CSS选择器](#2. CSS选择器)

[2.1 基本选择器](#2.1 基本选择器)

[2.1.1 全局选择器](#2.1.1 全局选择器)

[2.1.2 标签选择器](#2.1.2 标签选择器)

[2.1.3 类选择器](#2.1.3 类选择器)

[2.1.4 ID选择器](#2.1.4 ID选择器)

[2.2 复合选择器](#2.2 复合选择器)

[2.2.1 群组选择器](#2.2.1 群组选择器)

[2.2.2 后代选择器](#2.2.2 后代选择器)

[3. CSS优先级](#3. CSS优先级)

[3.1 优先级规则](#3.1 优先级规则)

[3.2 权重值](#3.2 权重值)

[4. CSS颜色表示法](#4. CSS颜色表示法)

[4.1 基本颜色表示法](#4.1 基本颜色表示法)

[4.1.1 英文单词](#4.1.1 英文单词)

[4.1.2 十六进制](#4.1.2 十六进制)

[4.1.3 RGB三原色表示法](#4.1.3 RGB三原色表示法)

[4.1.4 HSB表示法](#4.1.4 HSB表示法)

[4.2 透明度](#4.2 透明度)

[5. 图片格式](#5. 图片格式)

[5.1 常见图片格式](#5.1 常见图片格式)

[5.1.1 JPG](#5.1.1 JPG)

[5.1.2 PNG](#5.1.2 PNG)

[5.1.3 GIF](#5.1.3 GIF)

[6. 伪类选择器](#6. 伪类选择器)

[6.1 伪类选择器概述](#6.1 伪类选择器概述)

[6.2 伪类选择器示例](#6.2 伪类选择器示例)

[7. 实际应用示例](#7. 实际应用示例)

[7.1 示例1：基本样式应用](#7.1 示例1：基本样式应用)

[7.2 示例2：外部样式表](#7.2 示例2：外部样式表)

[7.3 示例3：图片标签](#7.3 示例3：图片标签)

[7.4 示例4：伪类选择器](#7.4 示例4：伪类选择器)

[7.5 示例5：复合选择器](#7.5 示例5：复合选择器)

结尾

1. CSS概述

1.1 什么是CSS

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

1.2 CSS的基本语法

CSS的基本语法结构如下：

css 复制代码 
css选择器 {
    属性名: 属性值;
    属性名: 属性值;
}

  • 选择器：用于指定要应用样式的HTML元素。

  • 属性名：定义要设置的样式属性。

  • 属性值：指定属性的具体值。

1.3 CSS的引入方式

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

  1. 行内样式 ：直接在HTML标签中使用style属性。

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

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

1.3.1 行内样式

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

复制代码 
html
​
<p style="color: red; font-size: 16px;">这是一个段落。</p>
1.3.2 内部样式表

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

html 复制代码 
<!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文件。例如：

html 复制代码 
<!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规则：

html 复制代码 
<!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元素。常见的基本选择器包括：

  1. 全局选择器（通配符选择器） ：*，选择所有元素。

  2. 标签选择器：通过标签名称选择元素。

  3. 类选择器 ：通过class属性选择元素。

  4. ID选择器 ：通过id属性选择元素。

2.1.1 全局选择器

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

css 复制代码 
* {
    color: seagreen;
}
2.1.2 标签选择器

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

css 复制代码 
p {
    color: lightblue;
}
2.1.3 类选择器

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

css 复制代码 
.list {
    color: brown;
}
2.1.4 ID选择器

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

css 复制代码 
#a {
    color: black;
}

2.2 复合选择器

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

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

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

2.2.1 群组选择器

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

css 复制代码 
.list, #a, p {
    color: red;
}
2.2.2 后代选择器

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

css 复制代码 
ol li {
    color: blueviolet;
}

3. CSS优先级

3.1 优先级规则

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

  1. 行内样式 > 内部样式 = 外部样式

  2. 重要性（!important）优先级最高

3.2 权重值

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

  • 全局选择器：0

  • 标签选择器：1

  • 类选择器：10

  • ID选择器：100

  • 重要性（!important）：1000+

例如：

css 复制代码 
* {
    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提供了多种颜色表示法，常用的有：

  1. 英文单词 ：如red、green等。

  2. 十六进制 ：如#000（黑色）、#fff（白色）等。

  3. RGB三原色表示法 ：如rgb(255, 0, 0)（红色）、rgb(0, 255, 0)（绿色）等。

  4. HSB表示法：色调、饱和度、亮度表示颜色。

4.1.1 英文单词

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

css 复制代码 
div {
    background-color: red;
}
4.1.2 十六进制

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

css 复制代码 
div {
    background-color: #f00;
}
4.1.3 RGB三原色表示法

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

css 复制代码 
div {
    background-color: rgb(255, 0, 0);
}
4.1.4 HSB表示法

使用HSB表示颜色。例如：

css 复制代码 
div {
    background-color: hsb(0, 100%, 50%);
}

4.2 透明度

CSS还支持设置颜色的透明度，使用rgba或hsla表示法。例如：

css 复制代码 
div {
    background-color: rgba(122, 196, 159, 0.5);
}

5. 图片格式

5.1 常见图片格式

常见的图片格式包括：

  1. JPG：有损压缩，占用空间小。

  2. PNG：支持透明，无损压缩。

  3. GIF：动图，支持256种颜色。

5.1.1 JPG

JPG是一种有损压缩格式，适用于照片等复杂图像。例如：

html 复制代码 
<img src="img/photo.jpg" alt="照片">
5.1.2 PNG

PNG是一种无损压缩格式，支持透明，适用于图标、logo等。例如：

html 复制代码 
<img src="img/logo.png" alt="Logo">
5.1.3 GIF

GIF是一种动图格式，支持256种颜色，适用于简单的动画。例如：

html 复制代码 
<img src="img/animation.gif" alt="动画">

6. 伪类选择器

6.1 伪类选择器概述

伪类选择器用于选择具有特定状态的元素。常见的伪类选择器包括：

  1. :link：未访问的链接。

  2. :visited：已访问的链接。

  3. :hover：鼠标悬停时的链接。

  4. :active：鼠标点击时的链接。

6.2 伪类选择器示例

css 复制代码 
a:link {
    color: red;
}

a:visited {
    color: yellow;
}

a:hover {
    color: green;
}

a:active {
    color: blue;
}

7. 实际应用示例

7.1 示例1：基本样式应用

html 复制代码 
<!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：外部样式表

html 复制代码 
<!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：图片标签

html 复制代码 
<!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：伪类选择器

html 复制代码 
<!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：复合选择器

html 复制代码 
<!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技巧和效果，不断积累经验，提升自己的技术水平。

相关推荐
Dontla1 小时前
为什么React列表项需要key？（React key）（稳定的唯一标识key有助于React虚拟DOM优化重绘大型列表）
javascript·react.js·ecmascript
EndingCoder2 小时前
React从基础入门到高级实战：React 实战项目 - 项目三：实时聊天应用
前端·react.js·架构·前端框架
阿阳微客3 小时前
Steam 搬砖项目深度拆解：从抵触到真香的转型之路
前端·笔记·学习·游戏
德育处主任Pro4 小时前
『React』Fragment的用法及简写形式
前端·javascript·react.js
CodeBlossom4 小时前
javaweb -html -CSS
前端·javascript·html
CodeCraft Studio4 小时前
【案例分享】如何借助JS UI组件库DHTMLX Suite构建高效物联网IIoT平台
javascript·物联网·ui
打小就很皮...5 小时前
HBuilder 发行Android（apk包）全流程指南
前端·javascript·微信小程序
集成显卡6 小时前
PlayWright | 初识微软出品的 WEB 应用自动化测试框架
前端·chrome·测试工具·microsoft·自动化·edge浏览器
前端小趴菜057 小时前
React - 组件通信
前端·react.js·前端框架
Amy_cx7 小时前
在表单输入框按回车页面刷新的问题
前端·elementui
热门推荐
01神经网络架构KAN确实具有一些独特的特点及底层原理和应用场景02KGG转MP3工具|非KGM文件|解密音频03YOLOv8入门 | 重要性能衡量指标、训练结果评价及分析及影响mAP的因素【发论文关注的指标】04海康Visionmaster-常见问题排查方法-启动阶段05从零安装 LLaMA-Factory 微调 Qwen 大模型成功及所有的坑06【SpeedAI科研小助手】2分钟极速解决知网维普重复率、AIGC率过高，一键全文降！文件格式不变，公式都保留的！07【无人机】无人机通信模块，无人机图数传模块的介绍，数传，图传，图传数传一体电台，08DeepSeek各版本说明与优缺点分析09VMware虚拟机安装Win7专业版保姆级教程（附镜像包）10R-tree详解