当前位置：首页 > news >正文

CSS知识总结

news 文章来源：https://blog.csdn.net/m0_59276096/article/details/145342253 2025/5/19 1:14:00

CSS（层叠样式表，Cascading Style Sheets）是一种用于描述网页内容视觉表现的样式语言，与HTML（结构）和JavaScript（行为）共同构成现代Web开发的三大核心技术。

一、基本概念

定义：
CSS 是一种样式表语言，主要用于定义 HTML 或 XML 等文档的呈现方式，包括文档的布局、颜色、字体、大小等外观属性，使网页内容的展示更加丰富和美观。
作用：
实现了内容与表现的分离，将网页的结构（HTML）与样式（CSS）分开，便于维护和更新网页。同时，通过 CSS 可以轻松地为多个页面应用统一的样式，确保网站风格的一致性。

二、主要组成部分

选择器：
用于选中要应用样式的 HTML 元素。常见的选择器有标签选择器（如p）、类选择器（如.classname）、ID 选择器（如#idname）、属性选择器（如[type="text"]）等。
属性和值：
属性用于指定要设置的样式特性，如color（颜色）、font-size（字体大小）、width（宽度）等；值则是为属性设定的具体内容，例如color: red中，red就是color属性的值。

三、语法规则

基本语法：由选择器和声明块组成，声明块包含在花括号{}中，内部由一个或多个属性值对组成，每个属性值对之间用分号;分隔。例如：

p {color: blue;font-size: 16px;
}

四、特性

继承性：
子元素会继承父元素的某些样式属性，如文本颜色、字体等。但并非所有属性都能继承，例如width、height等布局相关属性通常不会继承。
层叠性：
当多个样式规则应用到同一个元素时，会根据一定的规则进行层叠，最终决定元素的实际样式。这些规则包括选择器的权重、样式的定义顺序等。
优先级：
不同类型的选择器具有不同的优先级，一般来说，内联样式 > ID 选择器 > 类选择器 > 标签选择器。当多个选择器同时选中一个元素时，优先级高的样式会覆盖优先级低的样式。

五、应用方式

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

1 .内联样式

直接在 HTML 元素的style属性中定义样式。

<p style="color: red; font-size: 16px;">这是内联样式的文本。</p>

2.内部样式表

在 HTML 文档的<head>标签内使用<style>标签定义样式。

<head><style>p {color: blue;font-size: 14px;}</style>
</head>
<body><p>这是内部样式表的文本。</p>
</body>

3.外部样式表

创建一个独立的 CSS 文件（如 styles.css），然后在 HTML 文档的<head>标签内使用<link>标签引入。

<head><link rel="stylesheet" href="styles.css">
</head>
<body><p>这是外部样式表的文本。</p>
</body>

六、CSS使用

1. 选择器（Selectors）

1）基础选择器

/* 标签选择器 */ 
p { color: #333; }/* 类选择器 */
.title { font-size: 24px; }/* ID选择器 */
#header { background: #f0f0f0; }

2）组合选择器

/* 后代选择器 */
div p { margin: 10px; }/* 子元素选择器 */
ul > li { list-style: none; }

3）伪类选择器

:nth - child(n)：选中父元素的第 n 个子元素。

li:nth-child(2) {color: green;
}

<ul><li>第一项</li><li>第二项（绿色）</li><li>第三项</li>
</ul>

:hover：当鼠标悬停在元素上时应用样式。

a:hover {text-decoration: underline;
}

<a href="#">链接（悬停时出现下划线）</a>

4）属性选择器

/* 匹配具有特定属性的元素 */
a[target="_blank"] { color: red; }/* 匹配属性值包含指定字符串的元素 */
img[alt~="logo"] { border: 1px solid #ccc; }/* 匹配属性值以指定字符串开头的元素 */
div[class^="col-"] { float: left; }

2. Emmet 语法

Emmet 是一种快速编写 HTML 和 CSS 代码的语法。例如，在 CSS 中，p{text}会自动生成p { text: ; }。在 HTML 中，ul>li*3会生成：

<ul><li></li><li></li><li></li>
</ul>

3.字体、文本、背景详解

1）字体属性

font - family指定字体，font - size指定字号，font - weight指定字体粗细。

body {font - family: Arial, sans - serif;font - size: 16px;font - weight: bold;
}

2)文本属性

text - align设置文本对齐方式，text - decoration设置文本装饰。

p {text - align: center;text - decoration: underline;
}

3)背景属性

background - color设置背景颜色，background - image设置背景图片。

body {background - color: lightblue;background - image: url('bg.jpg');
}

4. CSS 三大特性

1）继承性：

子元素会继承父元素的某些样式，如字体相关样式。

body {font - family: Arial, sans - serif;
}
p {/* 会继承body的字体 */
}

2) 层叠性

当多个样式规则应用到同一个元素时，会根据权重和顺序来决定最终样式。

p {color: red;
}
p.special {color: blue; /* 权重更高，会覆盖上面的红色 */
}

3) 优先级

内联样式 > ID 选择器 > 类选择器 > 标签选择器。

5. 盒子模型（Box Model）

组成：内容(content) + 内边距(padding) + 边框(border) + 外边距(margin)
两种模式：

/* 标准盒模型（默认） */
box-sizing: content-box; /* IE盒模型（总宽度=width） */
box-sizing: border-box;

div {width: 200px;height: 100px;padding: 20px;border: 1px solid black;margin: 10px;
}

6.伪元素

::before和::after用于在元素内容之前或之后插入内容。

p::before {content: "前缀：";
}

<p>这是一段文本。</p>

7. 布局技术

1）浮动

使用float属性使元素脱离文档流，如float: left或float: right。

img {float: left;margin - right: 10px;
}

<img src="image.jpg" alt="">
<p>文字环绕图片。</p>

2）定位

position属性有static（默认）、relative（相对定位）、absolute（绝对定位）、fixed（固定定位）。

div {position: absolute;top: 50px;left: 100px;
}

3） flex 布局

flex 布局：通过display: flex将容器设置为弹性布局，可方便地控制子元素的排列和对齐。

.container {display: flex;justify - content: space - between;
}

<div class="container"><div>项目1</div><div>项目2</div><div>项目3</div>
</div>

flex 布局详解：包括flex - direction（主轴方向）、flex - wrap（换行方式）、align - items（交叉轴对齐方式）等更多属性。

.container {display: flex;flex - direction: column;flex - wrap: wrap;align - items: center;
}

.container {display: flex;justify-content: space-between; /* 主轴对齐 */align-items: center;            /* 交叉轴对齐 */gap: 20px;                      /* 元素间距 */
}.item {flex: 1;  /* 弹性扩展 */
}

4）Flex布局完整属性

容器属性

.flex-container {display: flex;flex-direction: row-reverse;   /* 主轴方向 */flex-wrap: wrap;               /* 换行方式 */justify-content: space-around; /* 主轴对齐 */align-items: stretch;          /* 交叉轴对齐 */align-content: center;         /* 多行对齐 */gap: 10px;                     /* 项目间距 */
}

项目属性

.flex-item {flex: 1 0 200px;  /* flex-grow | flex-shrink | flex-basis */order: 2;         /* 排列顺序 */align-self: flex-end; /* 单独对齐 */
}

8. Grid网格布局

通过display: grid创建网格容器，使用grid - template - columns和grid - template - rows定义网格结构。

.container {display: grid;grid - template - columns: repeat(3, 1fr);grid - template - rows: auto;
}

.grid-container {display: grid;grid-template-columns: 1fr 300px; /* 列宽分配 */grid-template-rows: 100px auto;   /* 行高分配 */grid-template-areas:              /* 区域命名 */"header header""main sidebar";column-gap: 20px;row-gap: 15px;
}.header { grid-area: header; }
.main { grid-area: main; }

9.单位与颜色

1) 相对单位

.container {width: 80%;        /* 相对于父元素 */font-size: 2rem;   /* 相对于根元素字体大小（通常16px → 32px） */padding: 2vw;      /* 视口宽度的2% */line-height: 1.5em;/* 相对于当前元素的字体大小 */
}

2) 颜色表示法

.color-demo {color: #FF5733;          /* 十六进制 */background: rgb(255,87,51); border-color: rgba(255,87,51,0.5); /* 带透明度 */box-shadow: 0 0 10px hsl(12, 100%, 60%); /* HSL色值 */
}

10.动画效果

使用@keyframes定义动画关键帧，通过animation属性应用动画。

@keyframes slide {from {transform: translateX(0);}to {transform: translateX(100px);}
}
div {animation: slide 5s infinite; infinite：表示动画会无限循环播放，元素会持续不断地旋转。
}

@keyframes rotate {from { transform: rotate(0deg); }to { transform: rotate(360deg); }
}.spinner {animation: rotate 2s linear infinite;
}

11.高级视觉特效

1)阴影与渐变

.card {/* 盒子阴影：X偏移 Y偏移 模糊半径 扩散半径 颜色 */box-shadow: 2px 4px 12px 0 rgba(0,0,0,0.2);/* 文字阴影 */text-shadow: 1px 1px 2px black;/* 线性渐变背景 */background: linear-gradient(45deg, #ff6b6b, #4ecdc4);/* 径向渐变 */background: radial-gradient(circle, #fff 20%, #000 80%);
}

2)变形（Transform）

.transform-demo {transform: rotate(15deg) scale(1.2) translateX(20px);transition: transform 0.3s ease; /* 平滑过渡 */
}/* 3D变换 */
.cube {transform: perspective(1000px) rotateY(45deg);
}

3) 复合层与渲染优化

/* 触发GPU加速的属性 */
.optimize {transform: translateZ(0); will-change: transform;backface-visibility: hidden;
}/* 避免重排的实践 */
.box {/* 使用transform替代top/left动画 */transition: transform 0.3s;
}

4)高级渲染特性

/* 混合模式与遮罩 */
.overlay {mix-blend-mode: multiply;mask-image: linear-gradient(to right, black 80%, transparent);
}/* 滤镜效果 */
.image-filter {filter: grayscale(50%) blur(2px);
}/* 剪切路径 */
.clip-path {clip-path: polygon(0 0, 100% 0, 50% 100%);
}

12.现代CSS特性

1) 变量（CSS Variables）

:root {--primary-color: #3498db;
}
.box {background: var(--primary-color);
}

2) 网格布局（Grid）

.grid-container {display: grid;grid-template-columns: repeat(3, 1fr);gap: 10px;
}

4) 响应式设计（Media Queries）

媒体查询：根据不同设备的屏幕尺寸应用不同样式。

@media (max-width: 768px) {.menu { display: none; }
}

@media (max - width: 600px) {body {font - size: 14px;}
}

/* 设备宽度在600px到900px之间，横屏状态 */
@media screen and (min-width: 600px) and (max-width: 900px) and (orientation: landscape) {.content { padding: 10px; }
}/* 高分辨率屏幕 */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) { .logo { background-image: url("logo@2x.png"); }
}

响应式图片

<picture><source media="(min-width: 1200px)" srcset="large.jpg"><source media="(min-width: 768px)" srcset="medium.jpg"><img src="small.jpg" alt="响应式图片">
</picture>

七、发展趋势

响应式和自适应设计：随着移动设备的广泛使用，CSS 越来越注重响应式和自适应设计，通过媒体查询、弹性布局等技术，使网页能够在不同屏幕尺寸的设备上都能完美显示。
CSS 预处理器和后处理器：如 Sass、Less 等预处理器和 PostCSS 等后处理器的使用越来越普遍，它们提供了更多的功能和语法糖，如变量、混合、函数等，提高了 CSS 的编写效率和可维护性。
新特性和功能的不断推出：CSS 不断发展，新的特性和功能如 CSS Grid、CSS 变量、动画和过渡效果等不断涌现，为网页设计带来更多的可能性和创意空间。

CSS知识总结

CSS（层叠样式表，Cascading Style Sheets）是一种用于描述网页内容视觉表现的样式语言，与HTML（结构）和JavaScript（行为）共同构成现代Web开发的三大核心技术。一、基本概念定义&…...

编程日记 2025/2/5 4:09:10

基于Spring Security 6的OAuth2 系列之十 - 授权服务器--刷新token

之所以想写这一系列，是因为之前工作过程中使用Spring Security OAuth2搭建了网关和授权服务器，但当时基于spring-boot 2.3.x，其默认的Spring Security是5.3.x。之后新项目升级到了spring-boot 3.3.0，结果一看Spring Security也升级…...

编程日记 2025/2/5 3:59:59

信息学奥赛一本通 2113：【24CSPJ普及组】小木棍（sticks） | 洛谷 P11229 [CSP-J 2024] 小木棍

【题目链接】 ybt 2113：【24CSPJ普及组】小木棍（sticks） 洛谷 P11229 [CSP-J 2024] 小木棍【题目考点】 1. 思维题，找规律【解题思路】解法1：找规律该题为：求n根木棍组成的无前导0的所有可能的数…...

编程日记 2025/2/5 3:56:54

k3s环境下安装hami提示如下错误： "failed to “StartContainer” for “kube-scheduler” with InvalidImageName: "Failed to apply default image tag “registry.cn-hangzhou.aliyuncs.com/google_containers/kube-scheduler:v1.31.2k3s1”: 没有Inva…...

编程日记 2025/2/5 3:54:51

【区块链】区块链密码学基础

🌈个人主页: 鑫宝Code 🔥热门专栏: 闲话杂谈｜ 炫酷HTML | JavaScript基础 💫个人格言: "如无必要，勿增实体" 文章目录区块链密码学基础引言一、哈希函数1.1 基本概念1.2 数学表达二、非对称加密2.1…...

编程日记 2025/2/5 3:52:49

强化学习笔记（5）——PPO

PPO视频课程来源首先理解采样期望的转换变量x在p(x)分布下，函数f(x)的期望等于f(x)乘以对应出现概率p(x)的累加经过转换后变成 x在q(x)分布下，f(x)*p(x)/q(x) 的期望。起因是：求最大化回报的期望，所以对ceta求梯度具体举例…...

编程日记 2025/2/5 3:43:38

【C语言入门】解锁核心关键字的终极奥秘与实战应用（三）

目录一、auto 1.1. 作用 1.2. 特性 1.3. 代码示例二、register 2.1. 作用 2.2. 特性 2.3. 代码示例三、static 3.1. 修饰局部变量 3.2. 修饰全局变量 3.3. 修饰函数四、extern 4.1. 作用 4.2. 特性 4.3. 代码示例五、volatile 5.1. 作用 5.2. 代码示例…...

编程日记 2025/2/5 3:41:36

寒假day10

第十天：请写出以下几个数据的类型整数 a int a的地址 int* 存放a的数组b …...

编程日记 2025/2/5 3:40:35

本地部署与使用SenseVoice语音大模型简析

前言 SenseVoice 是一种语音基础模型，具有多种语音理解功能，包括自动语音识别 (ASR)、口语识别 (LID)、语音情感识别 (SER) 和音频事件检测 (AED)。本博客将指导您安装和使用 SenseVoice 模型，使其尽可能方便用户使用。 Github 仓库链接: ht…...

编程日记 2025/2/5 3:38:31

Kafka SASL/SCRAM介绍

文章目录 Kafka SASL/SCRAM介绍1. SASL/SCRAM 认证机制2. SASL/SCRAM 认证工作原理2.1 SCRAM 认证原理2.1.1 密码存储和加盐2.1.2 SCRAM 认证流程 2.2 SCRAM 认证的关键算法2.3 SCRAM 密码存储2.4 SCRAM 密码管理 3. 配置和使用 Kafka SASL/SCRAM3.1 Kafka 服务器端配置3.2 创建…...

编程日记 2025/2/5 3:35:27

中间件漏洞之CVE-2024-53677

目录什么是struts？CVE-2024-53677简介影响版本复现环境搭建漏洞利用修复什么是struts？ 在早期的 Java Web 开发中，代码往往混乱不堪，难以维护和扩展。比如，一个简单的用户登录功能，可能在不同的 Java 类…...

编程日记 2025/2/5 3:33:25

pytorch基于 Transformer 预训练模型的方法实现词嵌入（tiansz/bert-base-chinese）

以下是一个完整的词嵌入（Word Embedding）示例代码，使用 modelscope 下载 tiansz/bert-base-chinese 模型，并通过 transformers 加载模型，获取中文句子的词嵌入。 from modelscope.hub.snapshot_download import snaps…...

编程日记 2025/2/5 3:32:24

Windows电脑本地部署运行DeepSeek R1大模型（基于Ollama和Chatbox）

文章目录一、环境准备二、安装Ollama2.1 访问Ollama官方网站2.2 下载适用于Windows的安装包2.3 安装Ollama安装包2.4 指定Ollama安装目录2.5 指定Ollama的大模型的存储目录三、选择DeepSeek R1模型四、下载并运行DeepSeek R1模型五、常见问题解答六、使用Chatbox进行交互6.1 …...

编程日记 2025/2/5 3:30:21

区间覆盖问题

文章目录 1. 题面2. 简单分析3. 代码解答4. TLE的2点可能 1. 题面给定 N N N个区间 [ a i , b i ] [a_i,b_i] [ai,bi] 以及一个区间 [ s , t ] [s,t] [s,t]，请你选择尽量少的区间，将指定区间完全覆盖。输出最少区间数，如果无法完全…...

编程日记 2025/2/5 3:29:18

【LLM-agent】(task2)用llama-index搭建AI Agent

note LlamaIndex 实现 Agent 需要导入 ReActAgent 和 Function Tool，循环执行：推理、行动、观察、优化推理、重复进行。可以在 arize_phoenix 中看到 agent 的具体提示词，工具被装换成了提示词ReActAgent 使得业务自动向代码转换成为可能&am…...

编程日记 2025/2/5 3:28:15

SpringAI 人工智能

随着 AI 技术的不断发展，越来越多的企业开始将 AI 模型集成到其业务系统中，从而提升系统的智能化水平、自动化程度和用户体验。在此背景下，Spring AI 作为一个企业级 AI 框架，提供了丰富的工具和机制，可以帮助开发者将…...

编程日记 2025/2/5 3:23:09

【axios二次封装】

axios二次封装安装封装使用安装 pnpm add axios封装 // 进行axios二次封装：使用请求与响应拦截器 import axios from axios import { ElMessage } from element-plus//创建axios实例 const request axios.create({baseURL: import.meta.env.VITE_APP_BASE_API,…...

编程日记 2025/2/5 3:18:01

P7497 四方喝彩 Solution

Description 给定序列 a ( a 1 , a 2 , ⋯ , a n ) a(a_1,a_2,\cdots,a_n) a(a1,a2,⋯,an)，有 m m m 个操作，分四种： add ⁡ ( l , r , v ) \operatorname{add}(l,r,v) add(l,r,v)：对于所有 i ∈ [ l , r ] i \in [l,r…...

编程日记 2025/2/5 3:17:00

深入剖析 Bitmap 数据结构：原理、应用与优化策略

深入理解 Bitmap 数据结构一、引言在计算机科学领域，数据的高效存储和快速处理一直是核心问题。随着数据量的不断增长，如何用最少的空间和最快的速度来表示和操作数据变得至关重要。Bitmap（位图）作为一种简洁而强大的数据结构…...

编程日记 2025/2/5 3:08:51

bypass hcaptcha、hcaptcha逆向

可以过steam，已支持并发，欢迎询问！ 有事危，ProfessorLuoMing...

编程日记 2025/2/5 3:07:49

WebForms DataList 深入解析

WebForms DataList 深入解析引言在Web开发领域，控件是构建用户界面（UI）的核心组件。ASP.NET WebForms框架提供了丰富的控件，其中DataList控件是一个灵活且强大的数据绑定控件。本文将深入探讨WebForms DataList控件的功能、用法以及在实际开发中的应用。 DataList控件…...

编程日记 2025/2/5 3:03:43

C# List 列表综合运用实例⁓Hypak原始数据处理编程小结

C# List 列表综合运用实例⁓Hypak原始数据处理编程小结 1、一个数组解决很麻烦引出的问题1.1、RAW 文件尾部数据如下:1.2、自定义标头 ADD 或 DEL 的数据结构如下： 2、程序 C# 源代码的编写和剖析2.1、使用 ref 关键字，通过引用将参数传递，以…...

编程日记 2025/2/5 2:59:38

【C++基础】字符串/字符读取函数解析

最近在学C以及STL，打个基础参考： c中的char[] ,char* ,string三种字符串变量转化的兼容原则 c读取字符串和字符的6种函数字符串结构首先明确三种字符串结构的兼容关系：string>char*>char [] string最灵活，内置增删查改…...

编程日记 2025/2/5 2:53:26

大模型-CLIP 详细介绍

CLIP简介 CLIP（Contrastive Language–Image Pre-training）是由OpenAI在2021年提出的一种多模态机器学习模型。它旨在通过大量的文本-图像对进行训练，从而学会理解图像内容，并能将这些内容与相应的自然语言描述相匹配。CLIP的核心…...

编程日记 2025/2/5 2:52:24

1.4 Go 数组

一、数组 1、简介数组是切片的基础数组是一个固定长度、由相同类型元素组成的集合。在 Go 语言中，数组的长度是类型的一部分，因此 [5]int 和 [10]int 是两种不同的类型。数组的大小在声明时确定，且不可更改。简单来说，数组…...

编程日记 2025/2/5 2:50:22

WebSocket——环境搭建与多环境配置

一、前言：为什么要使用多环境配置？ 在开发过程中，我们通常会遇到多个不同的环境，比如开发环境（Dev）、测试环境（Test）、生产环境（Prod）等。每个环境的配置和需…...

编程日记 2025/2/5 2:47:17

三、递推关系与母函数，《组合数学(第4版)》卢开澄卢华明

文章目录一、似函数、非函数1.1 母函数1.2 母函数的简单应用1.3 整数拆分1.4 Ferrers 图像1.5 母函数能做什么1.6 递推关系1.6.1 Hanoi 问题1.6.2 偶数个5怎么算 1.7 Fibonacci 序列1.7.1 Fibonacci 的奇妙性质1.7.2 Fibonacci 恒等式1.7.3 Fibonacci 的直接表达式1.7.4 Fibon…...

编程日记 2025/2/5 2:46:16

线程互斥同步

前言： 简单回顾一下上文所学，上文我们最重要核心的工作就是介绍了我们线程自己的LWP和tid究竟是个什么，总结一句话，就是tid是用户视角下所认为的概念，因为在Linux系统中，从来没有线程这一说法，…...

编程日记 2025/2/5 2:41:10

DeepSeek R1 AI 论文翻译

摘要原文地址： DeepSeek R1 AI 论文翻译我们介绍了我们的第一代推理模型，DeepSeek-R1-Zero 和 DeepSeek-R1。 DeepSeek-R1-Zero 是一个通过大规模强化学习（RL）训练的模型，且在此过程中未使用监督微调（…...

编程日记 2025/2/5 2:33:00

如何计算态势感知率？

态势感知率（Situational Awareness Rate）的计算通常需要结合具体应用场景和定义目标，通常涉及对感知、理解、预测三个层次的量化分析。不同领域（如网络安全、军事、工业控制等）可能有不同的量化方式。通用思路和常见方…...

编程日记 2025/2/5 2:30:57