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

HTML_CSS学习：CSS像素与颜色

news 2026/5/19 23:41:06

一、像素

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>像素</title>
</head><style>.atguigu1{/*单位可以是cm，但不能是m,dm*/width: 1cm;height: 1cm;background-color: #f73131;}.atguigu2{/*单位可以是cm、mm，但不能是m,dm*/width: 1mm;height: 1mm;background-color: #f73131;}.atguigu3{/*单位可以是cm、，但不能是m,dm*/width: 100px;height: 100px;background-color: #f73131;}</style>
<body><div class="atguigu1"></div><br><div class="atguigu2"></div><br><div class="atguigu3"></div></body>
</html>

二、颜色_第一种表示_颜色名

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>颜色名</title><style>.atguigu{color: blue;}</style>
</head>
<body><h2 class="atguigu">尚硅谷</h2></body>
</html>

三、颜色_第二种表示_rgb或rgba

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>rgb和rgba表示</title><style>.atguigu1{color: rgb(255,0,0);}.atguigu2{color: rgb(0,255,0);}.atguigu3{color: rgb(0,0,255);}.atguigu4{color: rgb(133,43,226);}.atguigu5{color: rgb(100%,0%,0%);}.atguigu6{color: rgba(255,0,0,0.5);}.atguigu7{color: rgb(50,50,50);}</style>
</head>
<body><h2 class="atguigu1">尚硅谷1</h2><h2 class="atguigu2">尚硅谷2</h2><h2 class="atguigu3">尚硅谷3</h2><h2 class="atguigu4">尚硅谷4</h2><h2 class="atguigu5">尚硅谷5</h2><h2 class="atguigu6">尚硅谷6</h2><h2 class="atguigu7">尚硅谷7</h2></body>
</html>

四、颜色_第三种表示_HEX或HEXA

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>HEX或HEXA</title>
</head><style>.atguigu1{/*#color: #第一组第二组第三组;没两位一组，16进制*/color: #af17bf;}.atguigu2{/*#color: #第一组第二组第三组;没两位一组，16进制*/color: #7fbf17;}.atguigu3{/*#color: #第一组第二组第三组;没两位一组，16进制*/color: #be9b29;}.atguigu4{/*#color: #第一组第二组第三组;没两位一组，16进制*/color: #c7edcc;}.atguigu5{/*#color: #第一组第二组第三组;没两位一组，16进制*/color: #87ceebff;/*带有透明度*/}/*HEXA是8位最后1两位是透明度*/</style>
<body><h2 class="atguigu1">尚硅谷1</h2><h2 class="atguigu2">尚硅谷2</h2><h2 class="atguigu3">尚硅谷3</h2><h2 class="atguigu4">尚硅谷4</h2><h2 class="atguigu5">尚硅谷5</h2></body>
</html>

五、颜色_第五种表示_HSL或HSAL

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>HSL或HSLA</title><style>.atguigu1{/*color: hsl(色相，饱和度，亮度);*/color:hsl(0, 100%, 50%);}.atguigu2{/*color: hsl(色相，饱和度，亮度);*/color:hsl(60, 100%, 50%);}.atguigu3{/*color: hsl(色相，饱和度，亮度);*/color:hsl(120, 100%, 50%);}.atguigu4{/*color: hsl(色相，饱和度，亮度);*/color:hsl(180, 100%, 50%);}.atguigu5{/*color: hsl(色相，饱和度，亮度);*/color:hsl(240, 100%, 50%);}.atguigu6{/*color: hsl(色相，饱和度，亮度);*/color:hsl(300, 100%, 50%);.atguigu7{/*color: hsl(色相，饱和度，亮度);*/color:rgba(300, 100%, 50%, 0.55);}</style>
</head>
<body><h2 class="atguigu1">尚硅谷1</h2><h2 class="atguigu2">尚硅谷2</h2><h2 class="atguigu3">尚硅谷3</h2><h2 class="atguigu4">尚硅谷4</h2><h2 class="atguigu5">尚硅谷5</h2><h2 class="atguigu6">尚硅谷6</h2><h2 class="atguigu7">尚硅谷7</h2></body>
</html>

相关文章：

HTML_CSS学习：CSS像素与颜色

一、像素 <!DOCTYPE html> <html lang"en"> <head><meta charset"UTF-8"><title>像素</title> </head><style>.atguigu1{/*单位可以是cm&#xff0c;但不能是m,dm*/width: 1cm;height: 1cm;background-c…...

编程日记 2024/5/13 5:43:22

华为交换机配置导出备份python脚本

一、脚本编写思路 &#xff08;一&#xff09;针对设备型号 主要针对华为&#xff08;Huawei&#xff09;和华三&#xff08;H3C&#xff09;交换机设备的配置备份 &#xff08;二&#xff09;导出前预处理 1.在配置导出前&#xff0c;自动打开crt软件或者MobaXterm软件&am…...

编程日记 2024/5/13 5:40:20

DS：时间复杂度和空间复杂度

欢迎各位来到 Harper.Lee 的学习世界&#xff01; 博主主页传送门&#xff1a;Harper.Lee的博客主页 想要一起进步的uu欢迎来后台找我哦&#xff01; 本片博客主要介绍的是数据结构中关于算法的时间复杂度和空间复杂度的概念。 一、算法 1.1 什么是算法&#xff1f; 算法(Alg…...

编程日记 2024/5/13 5:39:19

AI跟踪报道第41期-新加坡内哥谈技术-本周AI新闻：本周Al新闻: 准备好了吗？事情即将変得瘋狂

每周跟踪AI热点新闻动向和震撼发展 想要探索生成式人工智能的前沿进展吗&#xff1f;订阅我们的简报&#xff0c;深入解析最新的技术突破、实际应用案例和未来的趋势。与全球数同行一同&#xff0c;从行业内部的深度分析和实用指南中受益。不要错过这个机会&#xff0c;成为AI领…...

编程日记 2024/5/13 5:37:17

Go 之 interface接口理解

go语言并没有面向对象的相关概念&#xff0c;go语言提到的接口和java、c等语言提到的接口不同&#xff0c;它不会显示的说明实现了接口&#xff0c;没有继承、子类、implements关键词。go语言通过隐性的方式实现了接口功能&#xff0c;相对比较灵活。 interface是go语言的一大…...

编程日记 2024/5/13 5:34:13

简约在线生成短网址系统源码 短链防红域名系统 带后台

简约在线生成短网址系统源码 短链防红域名系统 带后台 安装教程&#xff1a;访问 http://你的域名/install 进行安装 源码免费下载地址抄笔记 (chaobiji.cn)https://chaobiji.cn/...

编程日记 2024/5/13 5:33:12

设置默认表空间和重命名

目录 设置默认表空间 创建的临时表空间 tspace4 修改为默认临时表空间 创建的永久性表空间 tspace3 修改为默认永久表空间 重命名表空间 将表空间 tspace3 修改为 tspace3_1 Oracle从入门到总裁:​​​​​​https://blog.csdn.net/weixin_67859959/article/details/13520…...

编程日记 2024/5/13 5:32:11

Hive大表join大表如何调优

目录 一、调优思路1、SQL优化1.1 大小表join1.2 大大表join 2、insert into替换union all3、排序order by换位sort by4、并行执行5、数据倾斜优化6、小文件优化 二、实战2.1 场景2.2 限制所需的字段&#xff0c;间接mapjoin2.2 解决异常值倾斜&#xff0c;如NULL加随机数打散2.…...

编程日记 2024/5/13 5:31:09

SAF文件选择、谷歌PhotoPicker图片视频选择与真实路径转换

一、构建选择文件与回调方法 //文件选择回调ActivityResultLauncher<String[]> pickFile registerForActivityResult(new ActivityResultContracts.OpenDocument(), uri->{if (uri ! null) {Log.e("cxy", "返回的uri:" uri);Log.e("cxy&q…...

编程日记 2024/5/13 5:29:06

java可变参数

前言 我们虽然能够用重载实现&#xff0c;但多个参数无法弹性匹配 代码 class mycalculator{//下面的四个calculate方法构成了重载//计算2个数的和&#xff0c;3个数的和&#xff0c;4&#xff0c;5&#xff0c;6个数的和// public void calculate(int n1){// System.out.…...

编程日记 2024/5/13 5:28:05

Flutter 中的 Expanded 小部件：全面指南

Flutter 中的 Expanded 小部件&#xff1a;全面指南 在 Flutter 中&#xff0c;Expanded 是一个用于控制子控件占据可用空间的布局小部件&#xff0c;通常与 Row、Column 或 Flex 等父级布局小部件一起使用。Expanded 允许你创建灵活的布局&#xff0c;其中子控件可以按照指定…...

编程日记 2024/5/13 5:27:05

[Kubernetes] KubeKey 部署 K8s v1.28.8

文章目录 1.K8s 部署方式2.操作系统基础配置3.安装部署 K8s4.验证 K8s 集群5.部署测试资源 1.K8s 部署方式 kubeadm: kubekey, sealos, kubespray二进制: kubeaszrancher 2.操作系统基础配置 主机名内网IP外网IPmaster192.168.66.2139.198.9.7node1192.168.66.3139.198.40.17…...

编程日记 2024/5/13 5:25:02

C# 与 Qt 的对比分析

C# 与 Qt 的对比分析 目录 C# 与 Qt 的对比分析 1. 语言特性 2. 开发环境 3. 框架和库 4. 用户界面设计 5. 企业级应用 6. 性能考量 在软件开发领域&#xff0c;C# 和 Qt 是两种常用的技术栈&#xff0c;它们分别在.NET平台和跨平台桌面应用开发中占据重要位置。本文将深…...

编程日记 2024/5/13 5:23:00

MapReduce | 二次排序

1.需求 主播数据--按照观众人数降序排序&#xff0c;如果观众人数相同&#xff0c;按照直播时长降序 # 案例数据 用户id 观众人数 直播时长 团团 300 1000 小黑 200 2000 哦吼 400 7000 卢本伟 100 6000 八戒 250 5000 悟空 100 4000 唐僧 100 3000 # 期望结果 哦吼 4…...

编程日记 2024/5/13 5:21:59

Java后端初始化项目（项目模板）

介绍 emmmm&#xff0c;最近看了一些网络资料&#xff0c;也是心血来潮&#xff0c;想自己手工搭建一个java后端的初始化项目模板来简化一下开发&#xff0c;也就发一个模板的具体制作流程&#xff0c;&#xff08;一步一步搭建&#xff0c;从易到难&#xff09; ok&#xff…...

编程日记 2024/5/13 5:19:57

electron 多窗口 vuex/pinia 数据状态同步简易方案（利用 LocalStorage）

全局 stroe 添加 mutations 状态同步方法 // 用于其他窗口同步 vuex 中的 DeviceTcpDataasyncDeviceTcpData(state: StateType, data: any) {state.deviceTcpData data},App.vue 里 onMounted(() > {console.log("App mounted");/*** vuex 多窗口 store 同步*//…...

编程日记 2024/5/13 5:16:53

自定义数据集图像分类实现

模型训练 要使用自己的图片分类数据集进行训练&#xff0c;这意味着数据集应该包含一个目录&#xff0c;其中每个子目录代表一个类别&#xff0c;子目录中包含该类别的所有图片。以下是一个使用Keras和TensorFlow加载自定义图片数据集进行分类训练的例子。 我们自己创建的数据集…...

编程日记 2024/5/13 5:15:52

【C++】手搓读写ini文件源码

【C】手搓读写ini文件源码 思路需求&#xff1a;ini.hini.cppconfig.confmian.cpp 思路 ini文件是一种系统配置文件&#xff0c;它有特定的格式组成。通常做法&#xff0c;我们读取ini文件并按照ini格式进行解析即可。在c语言中&#xff0c;提供了模板类的功能&#xff0c;所以…...

编程日记 2024/5/13 5:11:46

undolog

undolog回滚段 undolog执行的时间&#xff1a;在执行器操作bufferpool之前。 undolog页...

编程日记 2024/5/13 5:10:45

项目文档分享

Hello , 我是小恒。提前祝福妈妈母亲节快乐 。 本文写一篇初成的项目文档 &#xff08;不是README.md哈&#xff09;&#xff0c;仅供参考 项目名称 脚本存储网页 项目简介 本项目旨在创建一个网页&#xff0c;用于存储和展示各种命令&#xff0c;用户可以通过粘贴复制命令到…...

编程日记 2024/5/13 5:09:43

从CNN到ViT：混合网络架构的设计哲学与PyTorch实战

1. 项目概述&#xff1a;为什么我们需要混合网络&#xff1f;在计算机视觉领域待了十几年&#xff0c;我亲眼见证了模型架构的“风水轮流转”。从早期的LeNet、AlexNet&#xff0c;到后来统治多年的ResNet、DenseNet等纯卷积神经网络&#xff0c;再到这两年Transformer架构&…...

编程新知 2026/5/19 22:51:31

法律检索效率暴跌83%？Perplexity法律文献搜索的3大隐藏功能，律所内部培训刚流出

更多请点击&#xff1a; https://kaifayun.com 第一章&#xff1a;法律检索效率暴跌83%&#xff1f;Perplexity法律文献搜索的3大隐藏功能&#xff0c;律所内部培训刚流出 当某红圈所合伙人发现团队平均单案法律检索耗时从2.1小时飙升至11.4小时&#xff0c;真相竟是——传统关…...

编程新知 2026/5/19 22:30:58

TP-LINK AX300 网卡驱动

TP-LINK AX300无线网卡的驱动一直不更新&#xff0c;只好自己动手 适配&#xff1a;TL-XDN6000H 免驱版 操作系统&#xff1a;Ubuntu 24.04.4 LTS 内核版本&#xff1a;6.17.0-29-generic #29~24.04.1-Ubuntu https://download.csdn.net/download/zzzhy/92882718...

编程新知 2026/5/19 22:26:11

亚马逊英国站儿童挤压玩具

亚马逊英国站儿童挤压玩具&#xff0c;核心定位为3岁以上儿童设计的感官类玩具&#xff0c;主打触觉反馈与手部精细动作锻炼&#xff0c;是平台上受众较广的儿童玩具品类之一&#xff0c;其核心特点与平台合规要求需重点关注。产品核心特征方面&#xff0c;这类玩具多采用热塑性…...

编程新知 2026/5/19 22:14:30

如何用Inkscape实现专业级光学设计？终极免费光线追踪插件完整指南

如何用Inkscape实现专业级光学设计&#xff1f;终极免费光线追踪插件完整指南 【免费下载链接】inkscape-raytracing An extension for Inkscape that makes it easier to draw optical diagrams. 项目地址: https://gitcode.com/gh_mirrors/in/inkscape-raytracing 你…...

编程新知 2026/5/19 22:05:00

W5500 TCP客户端实战：从寄存器配置到网络调试助手，一步步打通你的第一个物联网连接

W5500 TCP客户端实战&#xff1a;从寄存器配置到网络调试助手&#xff0c;一步步打通你的第一个物联网连接 在嵌入式物联网开发中&#xff0c;网络通信模块的选择往往决定了项目的稳定性和开发效率。W5500作为一款全硬件TCP/IP协议栈芯片&#xff0c;以其稳定的性能和简单的开发…...

编程新知 2026/5/19 21:24:31

Ahk2Exe：3步实现AutoHotkey脚本到EXE的专业编译方案

Ahk2Exe&#xff1a;3步实现AutoHotkey脚本到EXE的专业编译方案 【免费下载链接】Ahk2Exe Official AutoHotkey script compiler - written itself in AutoHotkey 项目地址: https://gitcode.com/gh_mirrors/ah/Ahk2Exe Ahk2Exe是AutoHotkey官方推出的脚本编译器&#x…...

编程新知 2026/5/19 21:13:30

Claude Code 实战复盘：工程师能力地图中 3 类新增核心技能解析

1. 工程师能力地图正在被重绘：3 类技能已从“加分项”变成“准入门槛” 上周三下午，我帮团队一位三年经验的后端工程师做 Code Review。他提交了一个用 Spring Boot 实现的订单状态机模块，逻辑清晰、测试覆盖完整——但整个 PR 的 commit message 里反复出现 “Claude sugg…...

编程新知 2026/5/19 19:46:09

Altium Designer 21 规则设置保姆级指南：从新手到老鸟，这些默认值千万别乱动

Altium Designer 21 规则设置实战精要&#xff1a;默认值的智慧与关键调整策略 作为一名从学生时代就开始使用Altium Designer的硬件工程师&#xff0c;我至今记得第一次打开规则设置面板时的眩晕感——密密麻麻的选项像是一道道关卡&#xff0c;让人既想全部征服又担心误操作导…...

编程新知 2026/5/19 18:21:37

告别传统编程：用AI语音命令5倍速开发Godot游戏

告别传统编程&#xff1a;用AI语音命令5倍速开发Godot游戏 【免费下载链接】Godot-MCP An MCP for Godot that lets you create and edit games in the Godot game engine with tools like Claude 项目地址: https://gitcode.com/gh_mirrors/god/Godot-MCP 还在为复杂的…...

编程新知 2026/5/19 18:17:35