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

【web前端】CSS样式

news 2026/5/12 2:22:32

CSS应用方式

在标签

<h2 style="color: aquamarine">hello world!</h2>

在head标签中写style标签

<head><meta charset="UTF-8"><title>Title</title><style>.c1{height: 100px;}.c2{height: 200px;color: aqua;}</style>
</head>
<body><h1 class="c1">用户列表</h1><h1 class="c2">用户列表</h1></body>

写到文件

  • 文件：
.c1{height: 100px;
}
.c2{height: 200px;color: aqua;
}
  • html:
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><link rel="stylesheet" href="com.css"></head>
<body><h1 class="c1">用户列表</h1><h1 class="c2">用户列表</h1>

选择器

类选择器

.c1{color: pink;
}
<h1 class="c1">乒乓球</h1>

ID选择器

#c2{height: 100px;
}
<h2 ID="c2">羽毛球</h2>

标签选择器

li{color: aquamarine;
}
<ul><li>篮球</li><li>排球球</li>
</ul>

属性选择器

input[type='text']{border: 1px;color: chocolate;
}
<input type="text">
<input type="password">

后代选择器

.yy li{color: blue;
}
<div class="yy"><ul><li>中国</li><li>美食</li></ul>
</div>

多个样式和覆盖

覆盖顺序是按照style中的顺序来的， <div class="c2 c1">中国移动</div>和 <div class="c1 c2">中国移动</div>是一样的效果

<head><meta charset="UTF-8"><title>Title</title><style>.c1{color: blue;border: 1px solid red;}.c2{font-size: 20px;color: aqua;}</style>
</head>
<body><div class="c1 c2">中国移动</div>
</body>

相关文章：

【web前端】CSS样式

CSS应用方式 在标签 <h2 style"color: aquamarine">hello world!</h2> 在head标签中写style标签 <head><meta charset"UTF-8"><title>Title</title><style>.c1{height: 100px;}.c2{height: 200px;color: aqua;…...

编程日记 2024/6/10 19:00:47

【ARM Cache 与 MMU 系列文章 7.7 – ARMv8/v9 MMU Table 表分配原理及其代码实现 1】

请阅读【ARM Cache 及 MMU/MPU 系列文章专栏导读】 及【嵌入式开发学习必备专栏】 文章目录 MMU Table 表分配原理及其代码实现虚拟地址空间 Region的配置系统物理地址位宽获取汇编代码实现MMU Table 表分配原理及其代码实现 假设当前系统中需要映射多个region，其中第一个要映…...

编程日记 2024/6/10 18:59:47

AIGC之MetaHuman：HeyGen(基于AI驱动的视频生成平台+数字人)的简介、安装和使用方法、案例应用之详细攻略

AIGC之MetaHuman&#xff1a;HeyGen(基于AI驱动的视频生成平台数字人)的简介、安装和使用方法、案例应用之详细攻略 目录 HeyGen的简介 1、HeyGen是一款AI视频生成平台&#xff0c;它提供以下关键功能&#xff1a; HeyGen的安装和使用方法 1、使用方法 01创建或选择一个头…...

编程日记 2024/6/10 18:58:45

6.7-6.10作业

1. /*1.使用switch实现银行系统&#xff0c;默认用户为A&#xff0c;密码为1234&#xff0c;余额2000 如果登录失败&#xff0c;则直接结束 如果登录成功&#xff0c;则显示银行页面 1.查询余额 2.取钱 3.存钱 如果是1&#xff0c;则打印余额 如果是2&#xff0c;则输入取钱金…...

编程日记 2024/6/10 18:57:45

【Redis】Redis经典问题：缓存穿透、缓存击穿、缓存雪崩

目录 缓存的处理流程缓存穿透解释产生原因解决方案1.针对不存在的数据也进行缓存2.设置合适的缓存过期时间3. 对缓存访问进行限流和降级4. 接口层增加校验5. 布隆过滤器原理优点缺点关于扩容其他使用场景SpringBoot 整合 布隆过滤器 缓存击穿产生原因解决方案1.设置热点数据永不…...

编程日记 2024/6/10 18:56:43

从GPU到ASIC，博通和Marvell成赢家

ASIC市场上&#xff0c;博通预计今年AI收入将达到110亿美元以上&#xff0c;主要来自与Google和Meta的合作&#xff1b;Marvell预计2028年AI收入将达到70亿至80亿美元&#xff0c;主要来自与Amazon和Google的合作。 随着芯片设计和系统复杂性的增加&#xff0c;科技大厂将更多地…...

编程日记 2024/6/10 18:55:43

【java问答小知识6】一些Java基础的知识，用于想学习Java的小伙伴们建立一些简单的认知以及已经有经验的小伙伴的复习知识点

请解释Java中的双亲委派模型是什么&#xff1f; 回答&#xff1a;双亲委派模型是Java类加载机制的核心原则&#xff0c;它确保所有类加载器在尝试加载一个类之前&#xff0c;都会委托给它的父类加载器。 Java中的类路径&#xff08;Classpath&#xff09;是什么&#xff1f; 回…...

编程日记 2024/6/10 18:54:41

数学建模笔记

数学建模 定义角度 数学模型是针对参照某种事物系统的特征或数量依存关系&#xff0c;采用数学语言&#xff0c;概括地或近似地表述出的一种数学结构&#xff0c;这种数学结构是借助于数学符号刻画出来的某种系统的纯关系结构。从广义理解&#xff0c;数学模型包括数学中的各…...

编程日记 2024/6/10 18:53:41

shell编程（三）—— 控制语句

程序的运行除了顺序运行外&#xff0c;还可以通过控制语句来改变执行顺序。本文介绍bash的控制语句用法。 一、条件语句 Bash 中的条件语句让我们可以决定一个操作是否被执行。结果取决于一个包在[[ ]]里的表达式。 bash中的检测命令由[[]]包起来&#xff0c;用于检测一个条…...

编程日记 2024/6/10 18:52:40

反射学习记

Java 中的反射是什么意思&#xff1f;有哪些应用场景&#xff1f; 每个类都有⼀个 Class 对象&#xff0c;包含了与类有关的信息。当编译⼀个新类时&#xff0c;会产生一个同名的 .class 文件&#xff0c;该⽂件 内容保存着 Class 对象。类加载相当于 Class 对象的加载&a…...

编程日记 2024/6/10 18:51:39

使用Python操作Redis

大家好&#xff0c;在当今的互联网时代&#xff0c;随着数据量和用户量的爆发式增长&#xff0c;对于数据存储和处理的需求也日益增加。Redis作为一种高性能的键值存储数据库&#xff0c;以其快速的读写速度、丰富的数据结构支持和灵活的应用场景而备受青睐。本文将介绍Redis数…...

编程日记 2024/6/10 18:50:37

Vue-CountUp-V2 数字滚动动画库

安装&#xff1a; $ npm install --save countup.js vue-countup-v2示例如下&#xff1a; <template><div class"iCountUp"><ICountUp:delay"delay":endVal"endVal":options"options"ready"onReady"/>&…...

编程日记 2024/6/10 18:49:36

C语言详解（文件操作）1

Hi~&#xff01;这里是奋斗的小羊&#xff0c;很荣幸您能阅读我的文章&#xff0c;诚请评论指点&#xff0c;欢迎欢迎 ~~ &#x1f4a5;&#x1f4a5;个人主页&#xff1a;奋斗的小羊 &#x1f4a5;&#x1f4a5;所属专栏&#xff1a;C语言 &#x1f680;本系列文章为个人学习…...

编程日记 2024/6/10 18:48:35

Python Requests库详解

大家好&#xff0c;在现代网络开发中&#xff0c;与Web服务器进行通信是一项至关重要的任务。Python作为一种多才多艺的编程语言&#xff0c;提供了各种工具和库来简化这一过程。其中&#xff0c;Requests库作为Python中最受欢迎的HTTP库之一&#xff0c;为开发人员提供了简单而…...

编程日记 2024/6/10 18:47:34

Kafka 详解：全面解析分布式流处理平台

Kafka 详解&#xff1a;全面解析分布式流处理平台 Apache Kafka 是一个分布式流处理平台&#xff0c;主要用于构建实时数据管道和流式应用。它具有高吞吐量、低延迟、高可用性和高可靠性的特点&#xff0c;广泛应用于日志收集、数据流处理、消息系统、实时分析等场景。 &…...

编程日记 2024/6/10 18:46:33

RabbitMQ系列-rabbitmq无法重新加入集群，启动失败的问题

当前存在3个节点&#xff1a;rabbitmq5672、rabbitmq5673、rabbitmq5674 当rabbitmq5673节点掉线之后&#xff0c;重启失败 重启的时候5672节点报错如下&#xff1a; 解决方案 在集群中取消失败节点 rabbitmqctl forget_cluster_node rabbitrabbitmq5673删除失败节点5673的…...

编程日记 2024/6/10 18:45:31

postgresql之翻页优化

列表和翻页是所有应用系统里面必不可少的需求&#xff0c;但是当深度翻页的时候&#xff0c;越深越慢。下面是几种常用方式 准备工作 CREATE UNLOGGED TABLE data (id bigint GENERATED ALWAYS AS IDENTITY,value double precision NOT NULL,created timestamp with time zon…...

编程日记 2024/6/10 18:44:30

小白学Linux | 日志排查

一、windows日志分析 在【运行】对话框中输入【eventvwr】命令&#xff0c;打开【事件查看器】窗 口&#xff0c;查看相关的日志 管理员权限进入PowerShell 使用Get-EventLog Security -InstanceId 4625命令&#xff0c;可获取安全性日志下事 件 ID 为 4625&#xff08;失败登…...

编程日记 2024/6/10 18:43:26

Spring6

一 概述 1.1、Spring是什么&#xff1f; Spring 是一款主流的 Java EE 轻量级开源框架 &#xff0c;Spring 由“Spring 之父”Rod Johnson 提出并创立&#xff0c;其目的是用于简化 Java 企业级应用的开发难度和开发周期。Spring的用途不仅限于服务器端的开发。从简单性、可测…...

编程日记 2024/6/10 18:42:25

数字孪生概念、数字孪生技术架构、数字孪生应用场景，深度长文学习

一、数字孪生起源与发展 1.1 数字孪生产生背景 数字孪生的概念最初由Grieves教授于2003年在美国密歇根大学的产品全生命周期管理课程上提出&#xff0c;并被定义为三维模型&#xff0c;包括实体产品、虚拟产品以及二者间的连接&#xff0c;如下图所示&#xff1a; 2011年&…...

编程日记 2024/6/10 18:41:24

告别一堆转换头！一个自研小工具搞定USB、网口、485、232、TTL全互连（附配置软件）

极简主义工程师的终极武器&#xff1a;全协议互连调试工具实战指南 每次出差调试设备&#xff0c;我的背包里总塞满了各种转换头——USB转串口、网口转485、232电平转换器...直到上个月在客户现场&#xff0c;当我蹲在机柜旁手忙脚乱切换第五个转换器时&#xff0c;螺丝刀不小心…...

编程新知 2026/5/12 2:16:09

为 Agent 重新设计的 Git：Cloudflare Artifacts 是什么，怎么工作的

原文&#xff1a;Artifacts: versioned storage that speaks Git 发布时间&#xff1a;2026 年 4 月 16 日 作者&#xff1a;Dillon Mulroy、Matt Carey、Matt Silverlock 一个规模问题 有一个被反复引用的预测&#xff1a;未来 5 年内&#xff0c;人类将写出比过去整个编程历…...

编程新知 2026/5/12 1:35:50

Linux终端美化：cmatrix屏保的安装与个性化配置指南

1. 初识cmatrix&#xff1a;从黑客帝国到你的终端 第一次看到cmatrix运行效果时&#xff0c;我正窝在咖啡馆调试服务器。黑色背景上不断下落的绿色字符&#xff0c;瞬间让我想起《黑客帝国》里尼奥看到的数字雨。这个诞生于2002年的开源项目&#xff0c;最初只是开发者Chris Al…...

编程新知 2026/5/11 23:01:04

NotebookLM深度绑定Google Drive的终极方案（含OAuth2作用域最小化清单+服务账号部署模板）

更多请点击&#xff1a; https://intelliparadigm.com 第一章&#xff1a;NotebookLM深度绑定Google Drive的终极方案&#xff08;含OAuth2作用域最小化清单服务账号部署模板&#xff09; NotebookLM 本地知识增强能力依赖于安全、稳定且权限精确的 Google Drive 数据接入。直…...

编程新知 2026/5/11 23:01:04

35岁程序员的AI转型之路：年薪翻倍，收藏这份从零到架构师的详细指南

本文分享了作者作为35岁Java程序员的AI转型经历&#xff0c;从初期的焦虑与迷茫&#xff0c;到通过学习ChatGPT、Prompt Engineering和大模型技术&#xff0c;最终成功转型为AI架构师的故事。文章详细描述了学习路径、关键决策、遇到的坑以及成功因素&#xff0c;并给其他程序员…...

编程新知 2026/5/11 22:39:09

LeagueAkari英雄联盟自动化工具终极使用指南：本地化智能助手全面解析

LeagueAkari英雄联盟自动化工具终极使用指南&#xff1a;本地化智能助手全面解析 【免费下载链接】League-Toolkit An all-in-one toolkit for LeagueClient. Gathering power &#x1f680;. 项目地址: https://gitcode.com/gh_mirrors/le/League-Toolkit 你是否曾为英…...

编程新知 2026/5/11 21:24:01

从医学到金融：用Python实战Cox比例风险模型进行企业风险预测（附完整代码）

从医学到金融&#xff1a;用Python实战Cox比例风险模型进行企业风险预测 在医疗领域&#xff0c;Cox比例风险模型早已成为生存分析的金标准。但鲜为人知的是&#xff0c;这套强大的统计工具同样适用于金融风险评估——从预测企业破产概率到评估供应链中断风险&#xff0c;生存分…...

编程新知 2026/5/11 20:17:32

如何5分钟搞定GitHub界面中文化：新手必看的浏览器插件终极指南

如何5分钟搞定GitHub界面中文化&#xff1a;新手必看的浏览器插件终极指南 【免费下载链接】github-chinese GitHub 汉化插件&#xff0c;GitHub 中文化界面。 (GitHub Translation To Chinese) 项目地址: https://gitcode.com/gh_mirrors/gi/github-chinese 还在为GitH…...

编程新知 2026/5/11 20:02:20

从单机到集群的基石：手把手配置ZooKeeper 3.5.8单机模式，为分布式应用铺路

从单机到集群的基石&#xff1a;手把手配置ZooKeeper 3.5.8单机模式&#xff0c;为分布式应用铺路 在分布式系统的世界里&#xff0c;协调服务就像交响乐团的指挥&#xff0c;确保每个乐器&#xff08;节点&#xff09;在正确的时间演奏正确的音符。ZooKeeper正是这样一个"…...

编程新知 2026/5/11 19:36:44

从零到上手：用LDAP Browser连接和管理你的OpenLDAP服务器（Windows平台实战）

从零到上手&#xff1a;用LDAP Browser连接和管理你的OpenLDAP服务器&#xff08;Windows平台实战&#xff09; 在企业级身份认证体系中&#xff0c;LDAP&#xff08;轻量级目录访问协议&#xff09;扮演着核心角色。许多技术团队虽然已经部署了OpenLDAP服务端&#xff0c;却苦…...

编程新知 2026/5/11 19:20:31