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

web前端3--css

news 来源：原创 2025/5/25 15:37:43

注意（本文一切代码一律是在vscode中书写）

1、书写位置

1、行内样式

//<标签名 style="样式声明">
<p style="color: red;">666</p>

2、内嵌样式

1、style标签里面写css代码 css与html之间分离

2、css属性:值（控制书写显示的效果）

    <style>p{color: red;}</style>

3、外联样式表

新建css文件通过link引用
<link rel="stylesheet" href="1.css">
解释：rel 引入文件资源类型 href 引入资源的路径

2、css选择器

1、标签选择器

通过具体的标签名称来匹配文档内所有同名的标签

    <style>p{color: red;}</style>

2、类选择器

根据标签class属性找到具体的html标签
类选择器的定义需要用到一个英文的句号. 后面跟着class属性的值

命名规范：
1. 类名应该反映元素的用途或内容，而不仅仅是样式。这有助于提高代码的可读性。
2. 推荐使用连字符而不是驼峰命名法来分隔单词，因为连字符在HTML和CSS中更为普遍。
3. 类名不应以数字开头。

一个标签可以同时有多个类名，类名之间以空格隔开。

使用场景：将一些标签相同的样式放在一个类里面，从而节省css代码的书写

```css.text-bule{color: aqua;font-size: 30px;}.text-box{font-size: 30px;/* 字体大小 */}
```<div class="text-bule text-box">666</div>

3、ID选择器

1、用来找到HTML文档中具有指定ID属性的标签

2、ID选择器的定义需要用到井号`#`，后面紧跟ID属性的值。

注：

1、 ID选择器的使用方式和类选择器的使用方式类似，但ID选择器的主要作用是结合js用于确定页面上的唯一元素。

2、单个标签不允许拥有多个id名，同页面中不存出现重复的id名(id重名会影响js代码获取标签)。

#text-red{color: red;
}
<div id="text-red">red</div>

4、通配符选择器

通配符选择器用星号`*`表示，不匹配某个特定的HTML元素，而是匹配 HTML文档中的每个元素。

<!-- 我们通常使用通用选择器来清除HTML元素中默认的内外边距。 -->*{color: red;}<p>这是p</p>
<a href="">这是a</a>
<div>这是div</div>

5、组合选择器

组合选择器: 两个或两个以上的选择器配合使用

1、后代选择器

- 结构：`选择器1 选择器2 {css属性名:属性值;}`
- 在选择器1所找到标签的后代（后代包括：儿子、孙子、重孙子……）中，找到满足选择器2的标签，设置样式

```cssdiv p{color: red;/* 找到div里面的p标签 */}
```

2、子代选择器

- 结构：`选择器1 > 选择器2 {css属性名:属性值;}`
- 在选择器1所找到标签的子代（子代只包括：儿子）中，找到满足选择器2的标签，设置样式

```cssdiv > p{color: red;}```

3、相邻兄弟选择器

- 相邻兄弟选择器用于匹配某个元素之后紧邻的另一个元素，这两个元素拥有同一个父级元素并且不存在嵌套关系。

- 相邻兄弟选择器的定义需要用到加号`+`，加号两边为相邻的两个元素，选择器会!!!匹配加号后面的元素!!!

 <style>h1 + p{color: red;}<style>

4、通用兄弟选择器

- 通用兄弟选择器同样会匹配同一父级元素下的兄弟元素，但兄弟元素之间无需紧邻。

- 定义通用兄弟选择器需要用到波浪号`~`，波浪号两边为同一父级元素下的两个元素，选择器会匹配波浪号后面的元素

<style>p ~ a{color: aqua;}<style>

5、分组选择器

- 结构：`选择器1,选择器2 {css属性名:属性值;} `

- 同时选择多组标签，设置相同的样式

- 通过 , 分隔

- 通常一行写一个，提高代码的可读性

默认样式是指浏览器为HTML元素自动应用的预定义样式，以确保页面在没有显式样式表的情况下具有基本的可读性和结构。不同的浏览器对于默认样式的实现可能存在差异，这可能导致在不同浏览器中显示的效果不同。为了确保页面的一致性，通常会使用CSS样式表来覆盖或重置默认样式，并以一致的方式定义页面的外观和布局。[初始化样式文件 ](https://meyerweb.com/eric/tools/css/reset/)。

```css
div,
p{color: red;}
```

6、交集选择器

- 结构：`选择器1选择器2{css属性名:属性值;} `

- 找到页面中既能被选择器1选中，又能被选择器2选中的标签，设置样式

- 交集选择器中的选择器之间是紧挨着的，没有东西分隔

<style>p.box{color: red;}</style>

7、层叠性与优先级

1、层叠性：所谓的层叠即叠加的意思，表示样式可以一层一层的层叠覆盖。多个选择器给同一个标签设置不同的样式，会共同作用在标签上。

2、优先级：如果同一个标签被多个选择器赋予了相同的属性且值不一样时，会按照选择器的优先级来决定以哪个样式为准，比如：

- !important > 行内 > id选择器 > 类选择器 > 标签 > 继承

组合选择器权重叠加
两个选择器权重一样以最后出现的为准

web前端3--css

注意（本文一切代码一律是在vscode中书写） 1、书写位置 1、行内样式 //<标签名 style"样式声明"> <p style"color: red;">666</p> 2、内嵌样式 1、style标签里面写css代码 css与html之间分离 2、css属性:值…...

编程日记 2025/5/25 15:37:43

一文大白话讲清楚webpack基本使用——5——babel的配置和使用

文章目录一文大白话讲清楚webpack基本使用——5——babel的配置和使用1. 建议按文章顺序从头看，一看到底，豁然开朗2. babel-loader的配置和使用2.1 针对ES6的babel-loader2.2 针对typescript的babel-loader2.3 babel配置文件一文大白话讲清楚webpack基…...

编程日记 2025/5/20 11:08:22

Python自动化运维：一键掌控服务器的高效之道

《Python OpenCV从菜鸟到高手》带你进入图像处理与计算机视觉的大门！解锁Python编程的无限可能：《奇妙的Python》带你漫游代码世界在互联网和云计算高速发展的今天，服务器数量的指数增长使得手动运维和管理变得异常繁琐。Python凭借其强大的可读性和丰富的生态系统，成为…...

编程日记 2025/5/25 1:50:59

基于quartz，刷新定时器的cron表达式

文章目录前言基于quartz，刷新定时器的cron表达式1. 先看一下测试效果2. 实现代码前言如果您觉得有用的话，记得给博主点个赞，评论，收藏一键三连啊，写作不易啊^ _ ^。而且听说点赞的人每天的运气都不会太差&…...

编程日记 2025/5/22 16:37:09

HTML常用属性

HTML标签的常见属性包括许多不同的功能，可以为元素提供附加信息或控制元素的行为。以下是一些常见的属性及其解释： 1. src 描述：src（source）属性指定一个资源的路径，通常用于图像、音频、视频等标签。常见…...

编程日记 2025/5/17 23:27:50

在 Babylon.js 中使用 Gizmo：交互式 3D 操作工具

在 3D 应用程序中，交互式操作对象（如平移、旋转、缩放）是一个常见的需求。Babylon.js 提供了一个强大的工具——Gizmo，用于在 3D 场景中实现这些功能。本文将介绍如何在 Babylon.js 中使用 Gizmo，并展示如何通过代码实…...

编程日记 2025/5/25 14:05:00

蓝桥杯练习日常|递归-进制转换

蓝桥云课760数的计算一、递归题目： 我的解题代码： #include <iostream> using namespace std; int sum0; int main() {// 请在此输入您的代码int n;cin>>n;int fun(int n);fun(n); cout<<sum<<\n;return 0; } // void fu…...

编程日记 2025/5/25 15:16:42

LabVIEW滤波器选择与参数设置

在信号处理应用中，滤波器是去除噪声、提取目标信号的重要工具。LabVIEW 提供多种类型的滤波器（如低通、高通、带通、带阻），用户需要根据采样频率、信号特性和应用需求合理选择滤波器类型及参数设置。本文以采样率 100kHz&#xf…...

编程日记 2025/5/25 14:58:13

【c语言日寄】Vs调试——新手向

【作者主页】siy2333 【专栏介绍】⌈c语言日寄⌋：这是一个专注于C语言刷题的专栏，精选题目，搭配详细题解、拓展算法。从基础语法到复杂算法，题目涉及的知识点全面覆盖，助力你系统提升。无论你是初学者，还是…...

编程日记 2025/5/25 15:06:35

C#中的Timers.Timer使用用法及常见报错

System.Timers.Timer 是一个基于服务器的计时器，它可以在应用程序中定期触发事件。这个计时器特别适合用于多线程环境，并且不应该与用户界面(UI)直接交互。在 ASP.NET 中，通常使用 System.Timers.Timer 来处理周期性的任务。主要使用步骤&am…...

编程日记 2025/5/25 14:12:59

chrome小插件：长图片等分切割

前置条件： 安装有chrome谷歌浏览器的电脑使用步骤： 1.打开chrome扩展插件 2.点击管理扩展程序 3.加载已解压的扩展程序 4.选择对应文件夹 5.成功后会出现一个扩展小程序 6.点击对应小程序 7.选择图片进行切割，切割完成后会自动保存代码…...

编程日记 2025/5/25 14:09:52

mysql数据被误删的恢复方案

文章目录一、使用备份恢复二、使用二进制日志（Binary Log）三、使用InnoDB表空间恢复四、使用第三方工具预防措施数据误删是一个严重的数据库管理问题，但通过合理的备份策略和使用适当的恢复工具，可以有效地减少数据丢失的风险…...

编程日记 2025/5/25 3:27:03

K8S-Pod资源清单的编写，资源的增删改查，镜像的下载策略

1. Pod资源清单的编写 1.1 Pod运行单个容器的资源清单 ##创建工作目录 mkdir -p /root/manifests/pods && cd /root/manifests/pods vim 01-nginx.yaml ##指定api版本 apiVersion: v1 ##指定资源类型 kind: Pod ##指定元数据 metadata:##指定名称name: myweb ##用户…...

编程日记 2025/5/25 15:33:55

Unity Line Renderer Component入门

Overview Line Renderer 组件是 Unity 中用于绘制连续线段的工具。它通过在三维空间中的两个或两个以上的点的数组，并在每个点之间绘制一条直线。可以绘制从简单的直线到复杂的螺旋线等各种图形。 1. 连续性和独立线条连续性：Line Renderer 绘制的线条…...

编程日记 2025/5/23 10:36:07

计算机工程：解锁未来科技之门！

计算机工程与应用是一个充满无限可能性的领域。随着科技的迅猛发展，计算机技术已经深深渗透到我们生活的方方面面，从医疗、金融到教育，无一不在彰显着计算机工程的巨大魅力和潜力。在医疗行业，计算机技术的应用尤为突出。比如&a…...

编程日记 2025/5/25 14:39:08

翻译：How do I reset my FPGA?

文章目录背景翻译：How do I reset my FPGA?1、Understanding the flip-flop reset behavior2、Reset methodology3、Use appropriate resets to maximize utilization4、Many options5、About the author 背景在写博客《复位信号的同步与释放（同步复…...

编程日记 2025/5/18 2:10:35

在Unity中使用大模型进行离线语音识别

文章目录 1、Vosk下载下载vosk-untiy-asr下载模型在项目中使用语音转文字音频转文字2、whisper下载下载unity项目下载模型在unity中使用1、Vosk 下载下载vosk-untiy-asr Github链接：https://github.com/alphacep/vosk-unity-asr 进不去Github的可以用网盘夸克网盘链接：h…...

编程日记 2025/5/20 14:39:45

SpringBoot+Vue使用Echarts

前言在vue项目中使用echarts，本次演示是使用vue2 1 前端准备 echarts官网： https://echarts.apache.org/zh/index.html 官网提供了基本的使用说明和大量的图表 1.1 下载echarts 执行命令 npm install echarts 直接这样执行很可能会失败，…...

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

【QT】-explicit关键字

explicit explicit 是一个 C 关键字，用于修饰构造函数。它的作用是防止构造函数进行隐式转换。为什么需要 explicit？ 在没有 explicit 的情况下，构造函数可以用于隐式类型转换。这意味着，如果你有一个接受某种类型的参数的构造…...

编程日记 2025/5/24 23:59:23

docker: Device or resource busy

(base) [rootbddx-vr-gpu-bcc2 /]#rm -rf /ssd1/docker/overlay2/8d96a51e3fb78e434fcf2b085e952adcc82bfe37485d427e1e017361a277326d/ rm: cannot remove ‘/ssd1/docker/overlay2/8d96a51e3fb78e434fcf2b085e952adcc82bfe37485d427e1e017361a277326d/merged’: Device or re…...

编程日记 2025/5/25 2:18:24

Vue - toRefs() 和 toRef() 的使用

一、toRefs() 在 Vue 3 中,toRefs()可以将响应式对象的属性转换为可响应的 refs。主要用于在解构响应式对象时，保持属性的响应性。 1. 导入 toRefs 函数 import { toRefs } from vue;2. 将响应式对象的属性转换为 ref const state reactive({count: 0,message:…...

编程日记 2025/5/21 8:01:08

（2024，MLLM，Healthcare，综述）多模态学习是否已在医疗保健领域实现通用智能？

Has Multimodal Learning Delivered Universal Intelligence in Healthcare? A Comprehensive Survey 目录 0. 摘要 1. 简介 5. MLLM 5.1 模态编码器与跨模态适配器 5.1.1 图像编码器 (Image Encoder) 5.1.2 语言模型 (Language Model) 5.1.3 跨模态适配器 (Cross-moda…...

编程日记 2025/5/23 5:50:11

css命名规范——BEM

目录引言 BEM是什么？块Block 元素Element 修饰语Modifier BEM解决了哪些问题？在流行框架的组件中使用 BEM 格式实战认识设计图如何使用当前的css规范正确命名？引言 css样式类命名难、太难了，难于上青天，这个和js变量命名还不一样。看看项目中五花八门的样…...

编程日记 2025/5/25 7:43:06

使用PHP函数 “is_object“ 检查变量是否为对象类型

在PHP中，变量可以保存不同类型的值，包括整数、字符串、数组、布尔值等等。其中，对象是一种特殊的数据类型，用于封装数据和方法。在处理PHP代码中，我们经常需要检查一个变量是否为对象类型，以便进行相应的处…...

编程日记 2025/5/20 22:30:29

Golang：使用DuckDB查询Parquet文件数据

本文介绍DuckDB查询Parquet文件的典型应用场景，掌握DuckDB会让你的产品分析能力更强，相反系统运营成本相对较低。为了示例完整，我也提供了如何使用Python导出MongoDB数据。 Apache Parquet文件格式在存储和传输大型数据集方面变得非常流行。最…...

编程日记 2025/5/22 13:36:10

Moretl FileSync增量文件采集工具

永久免费: <下载> <使用说明> 我们希望Moretl FileSync是一款通用性很好的文件日志采集工具,解决工厂环境下,通过共享目录采集文件,SMB协议存在的安全性,兼容性的问题. 同时,我们发现工厂设备日志一般为增量,为方便MES,QMS等后端系统直接使用数据,我们推出了增量采…...

编程日记 2025/5/23 10:26:54

消息队列篇--原理篇--Pulsar（Namespace，BookKeeper，类似Kafka甚至更好的消息队列）

Apache Pulusar是一个分布式、多租户、高性能的发布/订阅（Pub/Sub）消息系统，最初由Yahoo开发并开源。它结合了Kafka和传统消息队列的优点，提供高吞吐量、低延迟、强一致性和可扩展的消息传递能力，适用于大规模分布式系…...

编程日记 2025/5/23 10:17:12

linux 扩容

tmpfs tmpfs 82M 0 82M 0% /run/user/1002 tmpfs tmpfs 82M 0 82M 0% /run/user/0 [输入命令]# fdisk -lu Disk /dev/vda: 40 GiB, 42949672960 bytes, 83886080 sectors Units: sectors of 1 * 512 512 bytes Sector size (logi…...

编程日记 2025/5/20 22:00:56

数据表中的数据查询

文章目录一、概述二、简单查询1.列出表中所有字段2.“*”符号表示所有字段3.查询指定字段数据4.DISTINCT查询三、IN查询四、BETWEEN ADN查询1.符合范围的数据记录查询2.不符合范围的数据记录查询五、LIKE模糊查询六、对查询结果排序七、简单分组查询1.统计数量2.统计计算平均…...

编程日记 2025/5/25 1:45:38

深入了解 Java split() 方法：分割字符串的利器

Java 提供的 split() 方法是 String 类中一个常用的工具，它可以将一个字符串根据指定的分隔符切割成多个子字符串，并以字符串数组的形式返回。这个方法常用于字符串的处理、数据解析等场景。本文将详细介绍 Java 中 split() 方法的使用方式，并…...

编程日记 2025/5/23 6:01:36

Ubuntu 安装 docker 配置环境及其常用命令

Docker 安装与配置指南本文介绍如何在 Ubuntu 系统上安装 Docker，解决权限问题，配置 Docker Compose，代理端口转发，容器内部代理问题等并进行相关的优化设置。参考官方文档：Docker 官方安装指南一、安装 Docker 1…...

编程日记 2025/5/20 5:45:49

Android Studio安装配置

一、注意事项想做安卓app和开发板通信，踩了大坑，Android 开发不是下载了就能直接开发的，对于新手需要注意的如下： 1、Android Studio版本，根据自己的Android Studio版本对应决定了你所兼容的AGP（Android…...

编程日记 2025/5/23 4:38:48

leetcode 面试经典 150 题：有效的括号

链接有效的括号题序号20题型字符串解法栈难度简单熟练度✅✅✅ 题目给定一个只包括 ‘(’，‘)’，‘{’，‘}’，‘[’，‘]’ 的字符串 s ，判断字符串是否有效。有效字符串需满足： 左括号必须…...

编程日记 2025/5/25 11:58:20

C语言指针_野指针指针运算

野指针： 概念：野指针就是指针指向的位置是不可知的（随机的、不正确的、没有明确限制的） 指针非法访问： int main() {int* p;//p没有初始化，就意味着没有明确的指向//一个局部变量不初始化，放…...

编程日记 2025/5/21 6:13:05

【HarmonyOS之旅】基于ArkTS开发(二) -＞ UI开发之常见布局

目录 1 -> 自适应布局 1.1 -> 线性布局 1.1.1 -> 线性布局的排列 1.1.2 -> 自适应拉伸 1.1.3 -> 自适应缩放 1.1.4 -> 定位能力 1.1.5 -> 自适应延伸 1.2 -> 层叠布局 1.2.1 -> 对齐方式 1.2.2 -> Z序控制 1.3 -> 弹性布局 1.3.1…...

编程日记 2025/5/25 10:11:15

java基础学习——jdbc基础知识详细介绍

引言数据的存储我们在开发 java 程序时，数据都是存储在内存中的，属于临时存储，当程序停止或重启时，内存中的数据就会丢失，我们为了解决数据的长期存储问题，有以下解决方案： 通过 IO流书记&…...

编程日记 2025/5/23 20:40:17

第十五届蓝桥杯大赛软件赛省赛C/C++ 大学 B 组

第十五届的题目在规定时间内做出了前5道，还有2道找时间再磨一磨。现在把做的一些思路总结如下： 题1：握手问题问题描述小蓝组织了一场算法交流会议，总共有 50人参加了本次会议。在会议上，大家进行了握手交流。按照惯例…...

编程日记 2025/5/25 11:37:26

基于JAVA的微信点餐小程序设计与实现（LW+源码+讲解）

专注于大学生项目实战开发,讲解,毕业答疑辅导，欢迎高校老师/同行前辈交流合作✌。技术范围：SpringBoot、Vue、SSM、HLMT、小程序、Jsp、PHP、Nodejs、Python、爬虫、数据可视化、安卓app、大数据、物联网、机器学习等设计与开发。主要内容：…...

编程日记 2025/5/21 1:37:18

2K320Hz显示器哪个好？

2K320Hz显示器哪个好？320Hz这种高刷新率的显示器确实很少见，那究竟哪个牌子哪个型号更适合你呢？ 1.HKC G27H4Pro - 2K320Hz显示器哪个好外观设计 - HKC G27H4Pro 2K320Hz显示器三面微边框超震撼：采用三面微边框设计&#xff0…...

编程日记 2025/5/25 3:22:28

八股学习微服务篇

微服务篇常见面试内容Spring Cloud 常见组件注册中心Ribbon负载均衡策略服务雪崩常见面试内容 Spring Cloud 常见组件 Spring Cloud有5个常见组件： Eureka/Nacos:注册中心；Ribbon:负载均衡；Feign:远程调用；Hystrix/Sentinel:服…...

编程日记 2025/5/21 6:13:48

C# 中 readonly 与 const 的使用

总目录前言在C#编程中，readonly 和 const 是两个用于定义不可变数据的关键字。它们都旨在创建那些一旦赋值后就不能再改变的字段或变量。尽管这两个关键字看起来相似，但它们有着不同的特性和适用场景。本文将深入探讨 readonly 和 const 的区别&#…...

编程日记 2025/5/25 14:55:56

Spring Boot Starter介绍

前言大概10来年以前，当时springboot刚刚出现并没有流行，当时的Java开发者们开发Web应用主要是使用spring整合springmvc或者struts、iBatis、hibernate等开发框架来进行开发。项目里一般有许多xml文件配置，其中配置了很多项目中需要用到的Be…...

编程日记 2025/5/22 20:41:26

Kafak 单例生产者实现-C#操作

前面写了一篇入门操作的文章，因为工作需要，简单修改了下如何实现单例生产者。 Kafka入门-C#操作_c# kafka-CSDN博客文章浏览阅读1.6k次，点赞20次，收藏9次。2）.报错：“kafka.zookeeper.ZooKeeperClientTimeoutException: Timed out waiting for connection while in state…...

编程日记 2025/5/22 21:55:12

软件开发学习路线——roadmap

推荐软件学习路线网站：https://roadmap.sh/get-started 有有关前端后端开发的学习路径，也有AI，移动开发，管理相关的学习路径会有相应的词条路径，深入学习右上角可以设置学习任务的完成情况...

编程日记 2025/5/3 15:15:07

移动端VR处理器和传统显卡的不同

骁龙 XR 系列芯片更多地依赖 AI 技术来优化渲染过程，而传统的 GPU 渲染则倾向于在低画质下运行以减少负载。这种设计是为了在有限的硬件资源下（如移动端 XR 设备）实现高性能和低功耗的平衡。以下是具体的分析： 1. AI 驱动的渲染…...

编程日记 2025/5/22 11:09:32

Jenkins下载 Maven、Allure 插件并且配置环境

文章目录 Jenkins在插件中心下载 maven、allure插件maven插件下载allure插件下载配置maven、allure 往期推荐： 最新! 在 Linux上搭建Jenkins环境! Jenkins邮件通知的详细配置含邮件通知模板！ Jenkin配置企业微信通知 Jenkins在插件中心下载 maven、…...

编程日记 2025/5/22 6:03:09

C# OpenCV机器视觉:连通域分割

在一个阳光明媚得有些 “嚣张” 的午后，阿强像只好奇的小松鼠，一头扎进了他那乱得像被打劫过的实验室。这实验室里，各种电路板、奇形怪状的传感器和缠成一团的电线肆意横陈，仿佛在诉说着主人平日里为科研疯狂的 “战斗” 痕迹。阿…...

编程日记 2025/5/21 9:02:22

【嵌入式】总结——Linux驱动开发（三）

鸽了半年，几乎全忘了，幸亏前面还有两篇总结。出于快速体验嵌入式linux的目的，本篇与前两篇一样，重点在于使用、快速体验，uboot、linux、根文件系统不作深入理解，能用就行。重新梳理一下脉络，本…...

编程日记 2025/5/18 15:17:25

python操作mysql

前言在 Python3 中，我们可以使用mysqlclient或者pymysql三方库来接入 MySQL 数据库并实现数据持久化操作。二者的用法完全相同，只是导入的模块名不一样。我们推荐大家使用纯 Python 的三方库pymysql，因为它更容易安装成功。下面我们仍然以之…...

编程日记 2025/5/21 18:11:54

OpenCV：高通滤波之索贝尔、沙尔和拉普拉斯

目录简述什么是高通滤波？ 高通滤波的概念应用场景索贝尔算子算子公式实现代码特点沙尔算子算子公式实现代码特点拉普拉斯算子算子公式实现代码特点高通滤波器的对比与应用场景相关阅读 OpenCV：图像滤波、卷积与卷积核…...

编程日记 2025/5/21 5:08:30