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

相关推荐
前端熊猫3 分钟前
省略内容在句子中间
前端·javascript·typescript
小阳生煎6 分钟前
el-date-picker筛选时间日期选择范围
vue.js·elementui
Welkin_qing35 分钟前
页面无滚动条，里面div各自有滚动条
javascript·css·css3
weixin_3875456439 分钟前
从 MeshConfig 迁移到 Istio Telemetry API：提升网格观测性和灵活性
java·运维·前端·python·istio
莫惊春42 分钟前
CSS 第六章
前端·css
zqwang88844 分钟前
2024年末 前端性能优化总结
前端·性能优化
SoaringHeart1 小时前
Flutter疑难杂症：安卓手机键盘焦点丢失问题解决办法
前端·flutter
别发呆了吧1 小时前
封装上传组件的详细步骤
开发语言·前端·javascript
阿斯卡码1 小时前
服务器运行Vue项目
运维·服务器·vue.js
kikikidult1 小时前
Webpack简单介绍及安装
前端·webpack·node.js
热门推荐
01【机器学习】探索机器学习在旅游业的革新之旅02玄机平台应急响应—webshell查杀03(欧拉)openEuler系统添加网卡文件配置流程、(欧拉)openEuler系统手动配置ipv6地址流程、(欧拉)openEuler系统网络管理说明04SQL 主从数据库实时备份05文心一言最新重磅发布！06Docker 夺命连环 15 问07Rime 如何通过 iCloud 实现词库多端同步，Windows、iOS、macOS08硬件知识积累 USB 接口 type - A type - B type - C 的介绍与功能说明 （简单介绍）0904 - matlab m_map地学绘图工具基础函数 - 设置网格10YOLOv8训练好模型后，追加轮数继续训练、或者提前终止训练，缩减训练轮数