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

相关推荐
无限大.30 分钟前
前端知识速记：节流与防抖
前端
十八朵郁金香33 分钟前
【VUE案例练习】前端vue2+element-ui，后端nodo+express实现‘‘文件上传/删除‘‘功能
前端·javascript·vue.js
学问小小谢36 分钟前
第26节课：内容安全策略（CSP）—构建安全网页的防御盾
运维·服务器·前端·网络·学习·安全
LCG元1 小时前
Vue.js组件开发-实现全屏图片文字缩放切换特效
前端·javascript·vue.js
还是鼠鼠2 小时前
图书管理系统 Axios 源码__新增图书
前端·javascript·vscode·ajax·前端框架·node.js·bootstrap
customer083 小时前
【开源免费】基于SpringBoot+Vue.JS体育馆管理系统（JAVA毕业设计）
java·vue.js·spring boot·后端·开源
还是鼠鼠5 小时前
图书管理系统 Axios 源码 __删除图书功能
前端·javascript·vscode·ajax·前端框架·node.js·bootstrap
轻口味5 小时前
Vue.js `Suspense` 和异步组件加载
前端·javascript·vue.js
m0_zj7 小时前
8.[前端开发-CSS]Day08-图形-字体-字体图标-元素定位
前端·css
还是鼠鼠7 小时前
图书管理系统 Axios 源码__编辑图书
前端·javascript·vscode·ajax·前端框架
热门推荐
01DeepSeek r1本地安装全指南02【deepseek】deepseek-r1本地部署-第一步：下载LM Studio03将DeepSeek接入Word，打造AI办公助手04使用Ollama 在Ubuntu运行deepseek大模型：以DeepSeek-coder为例05DeepSeek学术写作测评第一弹：论文润色，中译英效果如何？06Dell服务器升级ubuntu 22.04失败解决07DeepSeek本地部署详细指南08新鲜速递：DeepSeek-R1开源大模型本地部署实战—Ollama + MaxKB 搭建RAG检索增强生成应用09密码学原理技术-第六章-introduction to pulibc-key cryptography10DeepSeek 云端部署，释放无限 AI 潜力！