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

CSS知识总结

news 2026/2/10 13:04:08

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

线程同步：确保多线程程序的安全与高效！

全文目录： 开篇语前序前言第一部分：线程同步的概念与问题1.1 线程同步的概念1.2 线程同步的问题1.3 线程同步的解决方案第二部分：synchronized关键字的使用2.1 使用 synchronized修饰方法2.2 使用 synchronized修饰代码块第三部分&#xff…...

编程新知 2025/9/24 16:02:40

java 实现excel文件转pdf | 无水印 | 无限制

文章目录目录文章目录前言 1.项目远程仓库配置 2.pom文件引入相关依赖 3.代码破解二、Excel转PDF 1.代码实现 2.Aspose.License.xml 授权文件总结前言 java处理excel转pdf一直没找到什么好用的免费jar包工具，自己手写的难度，恐怕高级程序员花费一年的事件，也…...

编程新知 2025/11/5 4:10:42