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

Web前端（CSS篇）

news 来源：原创 2025/8/23 0:26:32

什么是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…...

编程日记 2025/8/23 0:26:32

回归测试中常见的问题：如何避免“越改越错“的陷阱

修复一个Bug，引入三个新Bug "我们只是改了个小功能，为什么整个系统都出问题了？"——这是回归测试失败的典型症状。据IBM研究显示，约40%的线上缺陷源自不充分的回归测试。本文将深入剖析回归测试中的常见陷阱&#xff0…...

编程日记 2025/8/21 5:32:07

红宝书第四十六讲：Node.js基础与API设计解析

红宝书第四十六讲：Node.js基础与API设计解析资料取自《JavaScript高级程序设计（第5版）》。查看总目录：红宝书学习大纲一、Node.js基础概念 1. 流（Streams）的核心地位 12 Node.js的文件读写和网络通信依…...

编程日记 2025/8/21 19:22:42

IT运维常用的软件工具有哪些

IT运维常用的软件工具主要包括：监控工具、自动化运维工具、日志管理工具、网络管理工具、资产管理工具、服务台工具。这些工具分别用于保障IT系统稳定运行、提升运维效率、快速响应故障。其中，监控工具至关重要，它能实时监测系统运行状态、资…...

编程日记 2025/8/17 8:52:52

eplan许可证迁移到其他计算机

随着电气设计项目的不断扩大和变更，您可能需要将EPLAN许可证从一台计算机迁移到另一台计算机上。然而，在迁移过程中，确保您的软件始终保持最佳状态至关重要。本文将为您提供一份详尽的EPLAN许可证迁移指南，帮助您轻松完成这一操作…...

编程日记 2025/8/19 21:57:32

服务器部署静态页面

前言需要先下载nginx，然后上传你的静态网页文件，最后设置nginx展示静态页面安装nginx 第一步：在服务器上下载nginx服务 sudo dnf install nginx 第二步：启动nginx sudo systemctl start nginx 第三步：验证ngin…...

编程日记 2025/8/16 19:10:23

Spring boot 知识整理

一、SpringBoot 背景内容梳理 SpringBoot是一个基于Spring框架的开源框架，用于简化Spring应用程序的初始搭建和开发过程。它通过提供约定优于配置的方式，尽可能减少开发者的工作量，使得开发Spring应用变得更加快速、便捷和高效。 SpringBoot…...

编程日记 2025/8/22 5:07:10

软件测试面试题汇总---实时更新

1. java垃圾回收机制 2. 类为什么不能多继承，而接口可以参考为什么类之间只能单继承不能多继承，接口之间可以多继承，类与接口之间可以多实现_内部可以多继承而接口可以多实现-CSDN博客 3. java面向对象的三大特性继承、封装、多态 4. …...

编程日记 2025/8/21 21:29:43

2025海外代理IP测评：Bright Data，ipfoxy，smartproxy，ipipgo，kookeey，ipidea哪个值得推荐？

近年来，随着全球化和跨境业务需求的不断扩大“海外代理IP”逐渐成为企业和个人在多样化场景中的重要工具。无论是进行数据采集、广告验证、社交媒体管理，还是跨境电商平台运营，选择合适的代理IP服务商都显得尤为重要。然而，市场上…...

编程日记 2025/8/19 17:04:33

蓝桥杯 8. 分巧克力

分巧克力原题目链接问题描述儿童节那天有 K 位小朋友到小明家做客。小明拿出了珍藏的巧克力招待小朋友们。小明一共有 N 块巧克力，其中第 i 块是 Hᵢ Wᵢ 的长方形。为了公平起见，小明需要从这 N 块巧克力中切出 K 块巧克力分给小朋友们。要求…...

编程日记 2025/8/17 18:28:45

计算机组成原理—————计算机运算方法精讲＜3＞反码及移码的表示

第一部分：反码表示法这里我们直接给出整数反码的计算公式我们实际计算中其实不用死记硬背公式，小编在这里介绍一下求反码的秒杀技反码秒杀技：定号取反第一步：确定符号位是0还是1 第二步：符号位不变&#xff0c…...

编程日记 2025/8/21 2:13:52

关于STM32创建工程文件启动文件选择

注意启动文件只要选择这几个而不是要把所有都选上...

编程日记 2025/8/21 16:09:22

FC-4 mapping映射协议VI、hippi、fhcp、scma表示啥意思

FC-4 mapping映射协议VI、hippi、fhcp、scma表示啥意思 1.FC-4 Upper layer protocol协议映射层，定义了光纤通道和上层应用，包括FPGA/ARM 或者其他上层应用之间的接口。上层应用协议包括：串行scsi协议，fcp-scsi协议， f…...

编程日记 2025/8/20 16:59:06

15、stack、queue、deque的模拟实现

一、stack 1、stack的使用请看这篇文章 2、stack的原理这篇文章的栈原理讲的不错，并且有链式栈和顺序栈的创建，还有栈常使用的场景，没有数据结构基础的可以看，并且实现一下他的2种栈。 3、stack的实现 3.1、成员变量这里…...

编程日记 2025/8/19 2:47:07

GR00T N1：面向通用类人机器人的开放基础模型

摘要通用型机器人需要具备多功能的身体和智能的大脑。近年来，类人机器人的发展在构建人类世界中的通用自主性硬件平台方面展现出巨大潜力。一个经过大量多样化数据源训练的机器人基础模型，对于使机器人能够推理新情况、稳健处理现实世界的多变性以及快…...

编程日记 2025/8/19 9:39:30

保姆级教程：RK3588部署yolo目标检测模型

本文用到的板卡设备为鲁班猫4（LubanCat-4），瑞芯微rk3588系列处理器。官方文档写的挺详细了，但是版本太多不统一，而且涉及了多个代码仓库，稍显杂乱。本着最少代码原则，仅需下载一个代码仓库&am…...

编程日记 2025/8/22 8:04:46

【含文档+PPT+源码】物联网车辆GPS定位管理系统【

项目视频介绍： 毕业作品物联台云平台的设计与实现课程简介： 本课程演示的是一款物联网车辆GPS定位管理系统，主要针对计算机相关专业的正在做毕设的学生与需要项目实战练习的 Java 学习者。 1.包含：项目源码、项目文档、数据库脚…...

编程日记 2025/8/21 4:32:03

热烈祝贺“中芯机械”选择使用订单日记

感谢潍坊中芯机械制造有限公司选择使用订单日记！ 潍坊中芯机械制造有限公司，成立于2023年，位于山东省潍坊市，是一家以从事生产、销售农业机械、汽车配件、机械电气设备等业务为主的企业。在业务不断壮大的过程中，想…...

编程日记 2025/8/19 23:18:47

2025年保安员考试题库及答案

一、单选题 81、保安员张某和李某在火车站巡逻时，发现一男青年神色慌张，行为诡秘，这两名保安员识别这一可疑情况使用的方法是（）。 A.查问法 B.直接观察法 C.判断法 D.视觉判断法答案：B 82、某天&…...

编程日记 2025/8/19 16:17:48

ADB的安装及抓取日志（1）

一、简介 ADB（Android Debug Bridge）是一个通用命令行工具，允许你与 Android 设备进行通信。它主要用于开发和调试目的，但也可用于其他多种功能，如安装应用、运行 shell 命令、查看日志等。ADB 是 Android SDK 的一部…...

编程日记 2025/8/20 22:23:57

用 Iris数据做决策树分析

文章目录 Iris数据的准备1.直接从sklearn.datasets 加载或转化成文件已备本地使用2.可以在https://archive.ics.uci.edu/dataset/53/iris下载过程示例代码如下生成的决策树如下：生成的分析报告如下： 决策树模型分析报告1. 模型性能2. 特征重要性3. 决策…...

编程日记 2025/8/18 13:56:45

【Bluedroid】A2DP Sink播放流程源码分析(三)

AVCTP消息处理 avrc_msg_cback /packages/modules/Bluetooth/system/stack/avrc/avrc_api.cc /******************************************************************************** Function avrc_msg_cback** Description This is the callback function used…...

编程日记 2025/8/19 19:08:59

概念实践极速入门 - 常用的设计模式 - 简单生活例子

概念实践极速入门 - 常用的设计模式 - 简单生活例子 SOLID 五大设计原则的首字母缩写单一职责原则和开闭原则就省略啦, 这两个概念很简单, 为了写而写反而容易误导人~* 鼓励大家字面理解！ // 哎呀还是解释吧单一(S): 单干一件事; 开闭(O): 拓展开放, 修改关…...

编程日记 2025/8/17 19:51:32

postgres 数据库信息解读与 sqlshell常用指令介绍

数据库信息： sqlshell Server [localhost]: 192.168.30.101 Database [postgres]: Port [5432]: 5432 Username [postgres]: 用户 postgres 的口令： psql (15.12, 服务器 16.8 (Debian 16.8-1.pgdg1201)) 警告：psql 主版本15,服务器主版本为…...

编程日记 2025/8/19 1:22:10

映射网络路路径和ftp路径原理是什么，如何使用，有什么区别

文章目录一、原理1. 映射网络路径2. FTP路径二、使用方法1. 映射网络路径2. FTP路径三、主要区别1. 协议与功能2. 安全性与权限3. 适用场景四、如何选择？五、注意事项映射网络路径（如SMB/CIFS或NFS）和FTP路径（FTP/FTPS/SFTP&…...

编程日记 2025/8/19 4:36:44

微服务3--服务容错

前言：本篇主要介绍服务容错与Sentinel进行限流。高并发带来的问题在微服务架构中，我们将业务拆分为一个个的服务，服务与服务之间都可以相互调用，但是由于网络或者说服务器本身的问题，服务不能保证100%可用&#xff…...

编程日记 2025/8/20 3:57:02

4.15redis点评项目下

--->接redis点评项目上 Redis优化秒杀方案下单流程为：用户请求nginx--->访问tomcat--->查询优惠券--->判断秒杀库存是否足够--->查询订单--->校验是否是一人一单--->扣减库存--->创建订单以上流程如果要串行执行耗时会很多&#xff0c…...

编程日记 2025/8/21 9:01:14

Web开发-JavaEE应用原生和FastJson反序列化URLDNS链JDBC链Gadget手搓

知识点： 1、安全开发-JavaEE-原生序列化-URLDNS链分析 2、安全开发-JavaEE-FastJson-JdbcRowSetImpl链分析利用链也叫"gadget chains"，我们通常称为gadget： 1、共同条件：实现Serializable或者Externalizable接口&…...

编程日记 2025/8/19 6:00:28

坚持每日Codeforces三题挑战：Day 3 - 题目详解（2024-04-16，难度：900, 1200, 1200）

每天坚持写三道题第三天 （今天写点简单的，剩下去刷力扣了） 今日题目: Problem - B - Codeforces 900 Problem - B - Codeforces 1300 Problem - D - Codeforces 1400 题目一: Problem - B - Codeforces 题目大意: 给你一个数组,每次操…...

编程日记 2025/8/20 13:06:47

MySQL5.7递归查询

向下递归查询 SELECT ID,NAME,PARENT_ID,LEVEL_FROM(SELECT ID AS _IDS,(SELECT ID : GROUP_CONCAT(ID)FROM TREE_TABLE WHERE FIND_IN_SET(PARENT_ID,ID) > 0AND REMOVE N) T1,L : L 1 AS LEVEL_FROM TREE_TABLE,(SELECT ID : start, L: 0) T2WHERE ID IS NOT NULL) T3,…...

编程日记 2025/8/17 18:29:06

半导体设备通信标准—secsgem v0.3.0版本使用说明文档(2)之GEM(SEMI 30)

文章目录 1、处理器1.1、事件 2、GEM 合规性2.1、状态模型2.2、设备加工状态2.3、文档2.4、控制 （作员启动）2.5、动态事件报告配置2.6、跟踪数据收集2.7、报警管理2.8、远程控制2.9、设备常量2.10、工艺配方管理2.11、物料移动2.12、设备终端…...

编程日记 2025/8/17 21:32:38

C++异步编程从入门到精通实战：全面指南与实战案例

C异步编程从入门到精通实战：全面指南与实战案例在当今多核处理器普及的时代，异步编程成为了提升程序性能和响应能力的关键技术。无论是在高频交易系统、实时游戏引擎，还是网络服务器和大型数据处理平台，异步编程都发挥着至关重要…...

编程日记 2025/8/17 18:29:27

驱动开发硬核特训 · Day 13：从 device_create 到 sysfs，设备文件是如何生成的？

🔍 B站相应的视屏教程： 📌 内核：博文视频 - 备树深度解析：理论实践全指南（含 of 函数与 i.MX8MP 实例） 敬请关注，记得标为原始粉丝。 🔧 📌 本文目标&#…...

编程日记 2025/8/16 20:38:37

肾脏系统触发 “数据包泄漏“ (血尿)与 “元数据校验异常“(蛋白尿)

肾脏系统触发 "数据包泄漏" (血尿)与 "元数据校验异常"(蛋白尿) 用计算机术语来类比。在之前的对话中，肾小球被比作防火墙或过滤器，肾小管则是回收系统。红细胞泄漏通常是因为肾小球的过滤屏障受损，而蛋白尿则可能与肾小…...

编程日记 2025/8/22 2:22:33

密码学（二）流密码

2.1流密码的基本概念流密码的基本思想是利用密钥 k 产生一个密钥流...，并使用如下规则对明文串 ... 加密：。密钥流由密钥流发生器产生： ，这里是加密器中的记忆元件（存储器）在时刻 i 的状态&#xff0c…...

编程日记 2025/8/22 9:49:55

Python 趣味学习 -数据类型脱口秀速记公式 [特殊字符]

🎤 Python数据类型脱口秀速记公式 🐍 1️⃣ 四大金刚登场 "Set叔(无序洁癖)、Tuple爷(顽固老头)、List姐(百变女王)、Dict哥(万能钥匙)"2️⃣ 特性对比RAP 🎶 内存/作用域： 全局变量 → 函数内修改 → 可变(mutable)会…...

编程日记 2025/8/17 10:25:27

嵌入式Linux设备使用Go语言快速构建Web服务，实现设备参数配置管理方案探究

本文探讨，利用Go语言及gin框架在嵌入式Linux设备上高效搭建Web服务器，以实现设备参数的网页配置。通过gin框架，我们可以在几分钟内创建一个功能完善的管理界面，方便对诸如集中器，集线器等没有界面的嵌入式设备的管理。…...

编程日记 2025/8/20 4:10:00

波束形成（BF）从算法仿真到工程源码实现-第十二节-总结

一、总结 （1）基于webrtc的非线性波束形成效果较好，复杂度较低，但是波束形成后引入了非线性，导致噪声估计不准确，降噪效果变差。 （2）MVDR使用噪声协方差矩阵对平稳噪声降噪效果比较…...

编程日记 2025/8/17 6:33:13

【AI】IDEA 集成 AI 工具的背景与意义

一、IDEA 集成 AI 工具的背景与意义随着人工智能技术的迅猛发展，尤其是大语言模型的不断演进，软件开发行业也迎来了智能化变革的浪潮。对于开发者而言，日常工作中面临着诸多挑战，如代码编写的重复性劳动、复杂逻辑的实现、代码质…...

编程日记 2025/8/17 8:52:54

解释原型链的概念，并说明`Object.prototype.proto`的值是什么？

原型链是 JavaScript 中实现继承的核心机制。每个对象都有一个指向其原型对象的私有链接（通过 [[Prototype]] 内部属性），而原型对象自身也可能拥有原型，这种链式结构被称为原型链。当访问对象的属性时，若对象自身不存在…...

编程日记 2025/8/17 21:31:45

prototype`和`proto`有什么区别？如何手动修改一个对象的原型？

在 JavaScript 中，prototype 和 __proto__ 都与原型链相关，但它们的角色和用途有本质区别： 1. prototype 和 __proto__ 的区别特性prototype__proto__归属对象仅函数对象拥有（如构造函数）所有对象默认拥有&#xff0…...

编程日记 2025/8/20 1:51:21

数据挖掘案例-电力负荷预测

今日课程时间序列预测介绍电力负荷预测项目开发（开发一个基于时间以及历史负荷信息，预测未来负荷的模型） 一、时间序列预测简介 1.什么是时序预测时间序列预测是一种根据历史时间序列数据来预测未来值的方法。任务比较好理解&#…...

编程日记 2025/8/17 20:30:46

SQL Server中OPENJSON + WITH 来解析JSON

一、概念 OPENJSON 是 SQL Server（2016 及更高版本） 中引入的一个表值函数，它将 JSON 文本转换为行和列的关系型数据结构。通过添加 WITH 子句，可以明确指定返回数据的结构和类型，实现 JSON 数据到表格数据的精确映射…...

编程日记 2025/8/17 21:41:20

在 Linux 中判断当前网络类型与网卡类型的实用方法（内外网判断 + 网卡分类）

在日常使用 Linux（例如 Jetson、树莓派、服务器）过程中，我们经常会遇到以下几个问题： 如何知道系统当前是走有线网络还是无线网络？如何判断是连接了公网还是内网？169.254.x.x 是什么？为什么我…...

编程日记 2025/8/17 21:17:29

Docker compose入门

目录 Docker Compose简介安装docker compose局限一适合单机部署，不适合生产环境1. 架构设计目标不同2. 关键功能对比3. 生产环境的核心需求4. 适用场景总结5. 为什么 Compose 不适合生产？ Docker Compose 简介 Docker Compose 是一个用于简化多容器Do…...

编程日记 2025/8/17 18:29:22

Docker Search 和 Docker Pull 失效解决

目录 1. Docker Search 1.1 问题描述 1.2 解决方案 1.2.1 方案1 命令行方式 1.2.2 方案2 非命令行方式 2. Docker Pull 2.1 问题描述 2.2 解决方案 2.2.1 替换镜像源 2.2.1.1 编辑镜像源（linux）版 2.2.1.2 编辑镜像源（windows版本…...

编程日记 2025/8/22 17:26:29

Langchain Agent封装的工具

LangChain Agent Tools 参考文档本文档详细介绍了LangChain框架中可用的Agent工具及其使用方法。这些工具可以赋予AI智能体与外部系统和服务交互的能力，从而构建功能更强大的应用程序。目录工具加载方法基础工具文件和系统工具搜索和信息检索工具语言模型增强…...

编程日记 2025/8/17 7:33:04

Windows11删除文件时弹出提示“没有管理员权限”，怎么办？

Windows11删除文件时弹出提示“没有管理员权限”，怎么办？ 原因：文件没有读取到完全控制的权限。解决方法：点击开始-设置-账户，检查Windows是否登录管理员账户，必须登录管理员账户。然后回到电脑桌面&…...

编程日记 2025/8/20 19:32:58

使用HTML + CSS + JS，编写一个台球追分计分器

目录一.代码二.效果展示三.该计分器的优点一.代码 <!DOCTYPE html> <html lang"zh-CN"><head><meta charset"UTF-8"><meta name"viewport" content"widthdevice-width, initial-scale1.0"><…...

编程日记 2025/8/20 22:00:14

CS5346 - CHARTS: Chart with Point / Bar / Line / Box

文章目录 Chart with Point（点图）Scatter Chart（散点图）Pictogram（图标）Connected Scatter PlotConnected Dot plot（连接点图）Bubble Chart（气泡图） Chart wi…...

编程日记 2025/8/17 21:24:39

CSS 实例

CSS 的引入方式

头部引入

内联（标签内）引入

外部引入

@import 引入

link引入

引入方式的优先级及语法

优先级（就近原理）

头部引入

外部引入

link与@import的区别

相关文章：