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

Web前端（CSS篇）

article 2026/1/13 12:11:15

什么是CSS？

css(Cascading Style Sheets)是层叠样式表或级联样式表，是一组设置规则，用于控制web页面外观。

为什么使用CSS?

CSS 用于定义网页的样式，包括针对不同设备和屏幕尺寸的设计和布局。

CSS 实例

body {background-color: lightblue;
}h1 {color: white;text-align: center;
}p {font-family: verdana;font-size: 20px;
}

CSS的特点：

css规则是由两部分组成：选择器和一条声明或多条声明。

什么是选择器：

选择器通常指你需要改变的HTML元素的标签名、类名或ID名。

什么是声明？

每一组声明都有一个属性和值组成，属性是你希望改变的样式名。

<head><meta charset="utf-8"><title></title><style type="text/css">/*  *（通配符）选择器选中所有元素 */*{color: #ff4100;width: 100px;}/*  选中#dis下所有的元素 */#dis *{color: blue;width: 100px;}</style>
</head>
<body><div id="dis" class="dec"><p>#dis下的p标签</p><h2>#dis下的h2标签</h2>... ...</div>
</body>

CSS 的引入方式

css常用引入方式：标签内（内联）头部引入外部引入

CSS是和html结合使用
根据定义CSS的位置不同，分为标签内（内联）、头部样式和外部样式。

头部引入

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>css的引入方式</title><!-- 头部引入 --><style type="text/css">h1{color: yellow;}</style></head><body><h1>你好，世界！！！</h1></body>
</html>

内联（标签内）引入

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>css的引入方式</title></head><body><!-- 标签内（内联） --><p style="color: red;">熊大最帅！！！</p></body>
</html>

外部引入

/* index.css */
/* css外部文件 */
li{color: green;
}
.ps{color: pink;
}

@import 引入

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>css的引入方式</title><!-- 外部引入-方法1 --><style type="text/css">@import url("./css/index.css");/*这里不予许在写任何样式*/</style> </head><body><h1 class="ps">你好，世界！！！</h1><ul><li>你好，前端！！！</li></ul></body>
</html>

link引入

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>css的引入方式</title><!-- 外部引入-方法二 --><link rel="stylesheet" type="text/css" href="./css/02cssyinru.css"/></head><body><h1 class="ps">你好，世界！！！</h1><ul><li>你好，前端！！！</li></ul></body>
</html>

引入方式的优先级及语法

优先级（就近原理）

标签内（内联） ==> 头部引入 ==> 外部引入

<!-- 优先级演示 -->
<p class="ps" style="color: red;">最终的效果</p>

语法及优缺点

标签内（内联）

语法：<p style="属性:值;..."></p> 优点：优先级高缺点：冗余代码过多，不利于维护适用场景：个别特殊样式适用。

头部引入

语法：

 <head>
        <style>
            p{
                属性:值;
                属性:值;
                ...
            }
        </style>
    </head>

优点：速度快，没有服务器请求压力。

缺点：不易改版，代码可读性差，不易于前后台沟通。

适用场景：单页面适用。

外部引入

语法：

1、<style>
		@import url("外部css文件");
   </style>2、<link rel="stylesheet" href="外部css文件">

优点：一个文件可以控制多个页面样式，利于维护，利于前后台沟通。

缺点：冗余代码过多，有服务器请求压力。

适用场景：各大企业官网。

link与@import的区别

区别1：

link是XHTML标签，除了加载css外还可以加载RSS等其他事务 @import是属于css范畴，只能加载css 。

区别2：

link是XHTML标签，无兼容性问题 @import是在css2.1提出的，低版本浏览器不支持

区别3：

link引入css时，在页面加载时同时加载css @import需要HTML页面完全载入后再加载css 。

区别4：

link支持使用javascript控制DOM改变样式 @import不支持使用javascript控制DOM改变样式。

Web前端（CSS篇）

什么是CSS？ css(Cascading Style Sheets)是层叠样式表或级联样式表，是一组设置规则，用于控制web页面外观。为什么使用CSS? CSS 用于定义网页的样式，包括针对不同设备和屏幕尺寸的设计和布局。 CSS 实例 body {background-col…...

编程日记 2026/1/13 12:11:15

C 语言联合与枚举：自定义类型的核心解析

目录 1.联合体 1.1联合体的声明与创建 1.2联合体在内存中的存储 1.3相同成员的结构体与内存比较 1.4联合体内存空间大小的计算 1.5联合体的应用 2.枚举类型 2.1枚举变量的声明 2.2枚举变量的优点 2.3枚举的使用上篇博客中，我们通过学习了解了C语言中一种自…...

编程日记 2026/1/12 13:35:10

基于Canal+Spring Boot+Kafka的MySQL数据变更实时监听实战指南

前期知识背景 binlog 什么是binlog 它记录了所有的DDL和DML(除了数据查询语句)语句，以事件形式记录，还包含语句所执行的消耗的时间，MySQL 的二进制日志是事务安全型的。一般来说开启二进制日志大概会有1%的性能损耗。 binlog分类 MySQL Bi…...

编程日记 2026/1/12 23:41:17

MySQL运维三部曲初级篇：从零开始打造稳定高效的数据库环境

文章目录一、服务器选型——给数据库一个舒适的家二、系统调优——打造高性能跑道三、MySQL配置——让数据库火力全开四、监控体系——数据库的体检中心五、备份恢复——数据安全的最后防线六、主从复制——数据同步的艺术七、安全加固——守护数据长城引言：从小白…...

编程日记 2026/1/12 7:19:05

golang context源码

解析 context结构 Deadline：返回 context 的过期时间； Done：返回 context 中的 channel； Err：返回错误； Value：返回 context 中的对应 key 的值. type Context interface {Deadline() (deadl…...

编程日记 2025/12/21 6:08:27

【MySQL】MySQL的基础语法及其语句的介绍

1、基础语法 mysql -h【主机名】 -u【用户名】 -p //登录MySQL exit或quit; //退出MySQL show database; //查看MySQL下的所有数据库 use 【数据库名】; //进入数据库 show tables; //查看数据库下的所有表名 *MySQL的启动和关闭 &am…...

编程日记 2026/1/11 18:15:40

大模型应用开发自学笔记

理论学习地址： https://zh.d2l.ai/chapter_linear-networks/index.html autodl学术加速： source /etc/network_turboconda常见操作: 删除： conda remove --name myenv --all -y导出： conda env export > environment.yml…...

编程日记 2025/12/9 15:48:19

Spring能够有效地解决单例Bean之间的循环依赖问题

在Spring框架中，earlySingletonObjects和singletonObjects是两个与Bean实例化过程密切相关的概念，它们都存储在DefaultSingletonBeanRegistry类中。这两个概念主要用于Spring的依赖注入机制，特别是针对单例Bean的创建过程。 singletonObject…...

编程日记 2025/12/8 17:27:27

【计算机视觉】三维视觉项目 - Colmap二维图像重建三维场景

COLMAP 3D重建项目概述项目功能项目运行方式1. 环境准备2. 编译 COLMAP3. 数据准备4. 运行 COLMAP 常见问题及解决方法1. **编译问题**2. **运行问题**3. **数据问题** 项目实战建议项目参考文献项目概述 COLMAP 是一个开源的三维重建软件，专注于 Structure-from…...

编程日记 2026/1/12 23:25:39

Linux 离线部署 Docker 18.06.3 终极指南（附一键安装卸载脚本）

Linux 离线部署 Docker 18.06.3 终极指南（附一键安装/卸载脚本） 摘要：本文针对无外网环境的 Linux 服务器，提供基于二进制包的 Docker 18.06.3 离线安装全流程指南。包含自动化脚本设计、服务配置优化及安全卸载方案，…...

编程日记 2025/12/7 13:32:12

ALSA架构学习2（驱动MAX98357A）

1 前言和环境之前其实写过两篇，一篇是讲ALSA，一篇是I2S。 ALSA架构学习1（框架）_alsa框架学习-CSDN博客总线学习5--I2S_max98357接喇叭教程-CSDN博客在ALSA那篇的结尾，也提了几个小练习。比如： ### 4…...

编程日记 2026/1/11 23:24:36

数据结构*集合框架顺序表-ArrayList

集合框架常见的集合框架什么是顺序表顺序表是一种线性表数据结构，它借助一组连续的存储单元来依次存储线性表中的数据元素。一般情况下采用数组存储。在数组上完成数据的增删查改。自定义简易版的顺序表代码展示： public interface IArray…...

编程日记 2026/1/12 15:19:52

VMware Workstation 保姆级 Linux(CentOS) 创建教程(附 iso)

文章目录一、下载二、创建一、下载 CentOS-7.9-x86_64-DVD-2009.iso 二、创建 VMware Workstation 保姆级安装教程(附安装包) VMware Workstation 保姆级安装教程(附安装包) VMware Workstation 保姆级安装教程(附安装包)...

编程日记 2026/1/8 11:26:53

51、项⽬中的权限管理怎么实现的

答：权限管理有三个很重要的模块； (1)⽤⼾模块：可以给⽤⼾分配不同的⻆⾊ (2)⻆⾊模块：可以授于⽤⼾不同的⻆⾊，不同的⻆⾊有不同权限 (3)权限模块：⽤于管理系统中的权限接⼝，为⻆⾊提供对…...

编程日记 2026/1/3 11:14:32

软考-信息系统项目管理师-2 信息技术发展

总结思维导图云计算(掌握) (3)多租户和访问控制管理访问控制管理是云计算应用的核心问题之一云计算访问控制的研究主要集中在云计算访问控制模型、基于ABE密码体制的云计算访问控制、云中多租户及虚拟化访问控制研究云中多租户及虚拟化访问控制是云计算的典型特征。大数据(…...

编程日记 2026/1/13 21:11:30

Spring Boot JPA 开发之Not an entity血案

项目状况介绍项目环境 JDK 21Spring Boot 3.4.3Hibernate： 6.6.13.Final项目描述因为是微服务架构，项目层级如下 project-parent project-com project-A … project-X 其中： project-parent定义依赖库的版本project-com 定义了一些公用的方法和配置，包括持久层的配置。…...

编程日记 2026/1/9 3:33:24

HTMLCSS实现轮播图效果

这段代码实现了一个具有自动轮播、手动切换功能的图片轮播图，并且配有指示器（小圆点）来显示当前图片位置。轮播图可通过左右箭头按钮进行手动切换，也能自动定时切换，当鼠标悬停在轮播图上时，自动轮播会暂停…...

编程日记 2026/1/9 20:36:15

嵌入式学习——opencv图像库编程

环境配置 OpenCV（Open Source Computer Vision Library）是一个开源的计算机视觉和图像处理库，广泛用于各种计算机视觉任务，如图像处理、视频分析、人脸识别、物体检测、机器学习等。它提供了丰富的函数和工具，用于处理…...

编程日记 2026/1/8 11:30:25

【每日八股】复习 MySQL Day1：事务

文章目录复习 MySQL Day1：事务MySQL 事务的四大特性？并发事务会出现什么问题？MySQL 事务的隔离级别？不同事务隔离级别下会发生什么问题？MVCC 的实现原理？核心数据结构版本链构建示例可见性判断算法MVCC 可…...

编程日记 2026/1/11 21:44:56

java 设计模式之代理模式

简介代理模式：使用代理类来增强目标类的功能。在代码结构上，代理对象持有目标对象，通过代理对象访问目标对象，这样可以在不改变目标对象的前提下增加额外的功能，如权限校验、缓存等代理模式内部的角色：…...

编程日记 2026/1/3 22:13:53

外接键盘与笔记本命令键键位不同解决方案（MacOS）

文章目录修改键位第一步：打开设置第二步：进入键盘快捷键第三步：修改修饰键设置第四步：调整键位第五步：保存设置tips ikbc c87键盘win键盘没反应的解决亲测的方法这是百度的答案标题常规组合键尝试‌：型号差…...

编程日记 2026/1/5 11:25:30

python爬虫复习

requests模块爬虫的分类通用爬虫：将一整张页面进行数据采集聚焦爬虫：可以将页面中局部或指定的数据进行采集聚焦爬虫是需要建立在通用的基础上来实现功能爬虫：基于selenium实现的浏览器自动化的操作分布式爬虫：使用分布式机群…...

编程日记 2025/12/30 4:14:52

kotlin知识体系(五) :Android 协程全解析，从作用域到异常处理的全面指南

1. 什么是协程协程(Coroutine)是轻量级的线程，支持挂起和恢复，从而避免阻塞线程。 2. 协程的优势协程通过结构化并发和简洁的语法，显著提升了异步编程的效率与代码质量。 2.1 资源占用低（一个线程可运行多个协程）…...

编程日记 2026/1/14 4:28:53

vscode stm32 variable uint32_t is not a type name 问题修复

问题在使用vscodekeil开发stm32程序时，发现有时候vscode的自动补全功能失效，且problem窗口一直在报错。variable “uint32_t” is not a type name uint32_t 定义位置 uint32_t 实际是在D:/Keil_v5/ARM/ARMCC/include/stdint.h中定义的。将D:/Keil_v5…...

编程日记 2026/1/9 3:33:21

相关阅读 Formalityhttps://blog.csdn.net/weixin_45791458/category_12841971.html?spm1001.2014.3001.5482 本文记录博主在使用Synopsys的形式验证工具Formality中遇到的一个Bug。 Bug复现情况一 // 例1 module dff (input clk, input d_in, output d_out …...

编程日记 2026/1/8 11:47:28

在ubuntu20.04+系统部署VUE及Django项目的过程记录——以腾讯云为例

目录 1. 需求2. 项目准备3. VUE CLI项目部署3.1 部署前的准备3.1.1 后端通信路由修改3.1.2 导航修改 3.2 构建项目3.3 配置nginx代理 4. 后端配置4.1 其他依赖项4.2 单次执行测试4.3 创建Systemd 服务文件4.4 配置 Nginx 作为反向代理 5. 其他注意事项 1. 需求近期做一些简单…...

编程日记 2025/12/8 2:26:17