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

CSS学习记录02

CSS颜色

指定颜色是通过使用预定义的颜色名称,或RGB,HEX,HSL,RGBA,HSLA值。

CSS颜色名

在CSS中,可以使用颜色名称来指定颜色:

CSS背景色

您可以为HTML元素设置背景色:

<h1 style="background-color:DodgerBlue;">China</h1>
<p style="background-color:Tomato;">China is a great country!</p>

CSS文本颜色 

您可以设置文本的颜色:

<h1 style="color:Tomato;">China</h1>
<p style="color:DodgerBlue;">China is a great country!</p>
<p style="color:MediumSeaGreen;">China, officially the People's Republic of China...</p>

 CSS边框颜色

您现在设置边框的颜色:

<h1 style="border:2px solid Tomato;">Hello World</h1>
<h1 style="border:2px solid DodgerBlue;">Hello World</h1>
<h1 style="border:2px solid Violet;">Hello World</h1>

CSS颜色值 

在CSS中,还可以使用RGB值、HEX值、HSL值、RGBA值或者HSLA值来指定颜色:
与颜色名“Tomato"等效:

<h1 style="background-color:rgb(255, 99, 71);">...</h1>
<h1 style="background-color:#ff6347;">...</h1>
<h1 style="background-color:hsl(9, 100%, 64%);">...</h1>

与颜色名”Tomato" 等效,但是透明度为50%:

<h1 style="background-color:rgba(255, 99, 71, 0.5);">...</h1>
<h1 style="background-color:hsla(9, 100%, 64%, 0.5);">...</h1>

CSSRGB颜色

RGB值

在CSS中,可以使用下面的公式将颜色指定为RGB值:

rgb(red,green, blue)

每个参数(red、green和 blue)定义了0到255之间的颜色强度。

例如,rgb(255, 0, 0)显示为红色,因为红色设置为最大值(255),其他设置为 0。

要显示黑色,可以将所有颜色参数设置为0,rgb(0, 0, 0)。

要显示白色, 可以将所有颜色参数设置为255, rgb(255, 255, 255)。

通常为所有3个光源使用相等的值来定义灰色阴影:

 

RGBA值 

RGBA颜色值是具有alpha通道的RGB颜色值的扩展-它指定了颜色的不透明度。

RGBA颜色指定为:

rgba(red, green, blue, alpha)

alpha参数是介于0.0(完全透明)和1.0(完全不透明)之间的数字:

 

CSS HEX颜色

HEX值

在CSS中,可以使用十六进制值指定颜色:

#rrggbb

其中rr(红色)、gg(绿色)和bb(蓝色)是介于00和ff之间的十六进制(与十进制0-255相同)。例如,#ff0000显示为红色,因为红色设置为最大值(ff),其他设置为最小值(00)。

 通常为所有3个光源使用相等的值来定义灰色阴影:

CSS HSL颜色 

HSL值

在CSS中,可以使用色相、饱和度和明度(HSL)来指定颜色,格式如下:

hsl(hue, saturation, lightness)

色相(hue)是色轮上从0到360的度数,0是红色,120是绿色,240是蓝色。

饱和度(saturation)是一个百分比值,0%表示灰色阴影,而100%是全色。

亮度(lightness) 也是百分比, 0%是黑色, 50%是既不明也不暗,100%是白色。

饱和度 

饱和度可以描述为颜色的强度。

100%是纯色,没有灰色阴影。       50%是50%灰色,但是仍然可以看到颜色。        0%是完全灰色,无法再看到颜色。

 亮度

颜色的明暗度可以描述为要赋予颜色多少光,其中0%表示不亮(黑色),50%表示50%亮,100%表示全明(白)。

通常通过将色调和饱和度设置为0来定义灰色阴影,并将亮度从0%到100%进行调整可以得到更深/更浅的阴影:

 HSLA值

HSLA颜色值是带有Alpha通道的HSL颜色值的扩展,它指定了颜色的不透明度。

HSLA颜色指定为:

hsla(hue, saturation, lightness, alpha)

alpha参数是介于0.0(完全透明)和1.0(完全不透明)之间的数字:

相关文章:

CSS学习记录02

CSS颜色 指定颜色是通过使用预定义的颜色名称&#xff0c;或RGB&#xff0c;HEX&#xff0c;HSL&#xff0c;RGBA&#xff0c;HSLA值。 CSS颜色名 在CSS中&#xff0c;可以使用颜色名称来指定颜色&#xff1a; CSS背景色 您可以为HTML元素设置背景色&#xff1a; <h1 s…...

6.1 innoDb逻辑存储结构和架构-简介

InnoDB 是 MySQL 默认的存储引擎&#xff0c;以其强大的事务支持、崩溃恢复能力和高效的数据处理能力广受欢迎。本文从逻辑存储结构、内存架构、磁盘结构到后台线程&#xff0c;逐步剖析 InnoDB 的关键概念&#xff0c;帮助您更好地理解和应用。 1. 逻辑存储结构 InnoDB 的数据…...

C++看懂并使用-----回调函数

一&#xff09;回调函数的定义 在 C 中&#xff0c;回调函数是一段作为参数传递给其他函数的可执行代码。它允许在一个函数内部的特定点调用外部定义的函数&#xff0c;以实现更灵活的功能。 回调函数&#xff08;Callback Function&#xff09;是一种通过函数指针或函数对象&a…...

构建短视频矩阵生态体系开发分享

短视频矩阵系统模型的技术开发是一个综合性强、复杂度高的工程项目&#xff0c;它涵盖了广泛的技术选择与架构规划。以下是该项目开发过程中的关键步骤和核心考虑因素&#xff1a; 需求分析阶段&#xff1a; 明确目标用户群体及其需求&#xff0c;以确保系统设计的针对性和实…...

qt QGraphicsScale详解

1、概述 QGraphicsScale是Qt框架中提供的一个类&#xff0c;它提供了一种简单而灵活的方式在QGraphicsView框架中实现缩放变换。通过设置水平和垂直缩放因子、缩放中心点&#xff0c;可以创建各种缩放效果&#xff0c;提升用户界面的交互性和视觉吸引力。结合QPropertyAnimati…...

CAD 文件 批量转为PDF或批量打印

CAD 文件 批量转为PDF或批量打印&#xff0c;还是比较稳定的 1.需要本地安装CAD软件 2.通过 Everything 搜索工具搜索&#xff0c;DWG To PDF.pc3 &#xff0c;获取到文件目录 &#xff0c;替换到代码中&#xff0c; originalValue ACADPref.PrinterConfigPath \ r"C:…...

Java基础面试题16:简述Servlet的体系结构

Servlet 是 JavaEE 技术中的一大核心组件&#xff0c;它运行在服务器端&#xff0c;用于处理客户端的请求并生成响应。如果你想深入了解它的体系结构&#xff0c;下面会用通俗的语言带你一步步搞懂。 1. Servlet API&#xff1a;开发者和容器沟通的桥梁 Servlet API 是开发 S…...

Web开发基础学习——理解React组件中的根节点

Web开发基础学习系列文章目录 第一章 基础知识学习之理解React组件中的根节点 文章目录 Web开发基础学习系列文章目录前言一、根节点的概念二、示例解释总结 前言 在 React 应用中&#xff0c;根节点&#xff08;Root Node&#xff09;是指 React 组件树的起始点&#xff0c;…...

【人工智能】探索自然语言生成(NLG):用GPT生成文本

《Python OpenCV从菜鸟到高手》带你进入图像处理与计算机视觉的大门! 自然语言生成(Natural Language Generation, NLG)是自然语言处理(NLP)领域的重要分支,旨在生成符合语法和语义的自然语言文本。近年来,基于深度学习的生成式预训练模型(GPT)在NLG任务中取得了巨大…...

挑战用React封装100个组件【004】

项目地址 https://github.com/hismeyy/react-component-100 组件描述 组件适用于展示图片的地方&#xff0c;提供了small&#xff0c;medium&#xff0c;large三种大小。可以删除图片&#xff0c;也可以全屏预览图片。 样式展示 前置依赖 今天我们的这个挑战需要用用到了…...

vue elementui layout布局组件实现规则的弹性布局

背景&#xff1a;遇到在一个容器里&#xff0c;采用弹性盒布局的时候&#xff0c;如果元素个数改变&#xff0c;元素的排列会错乱。 解决方式 方式一&#xff1a;之前遇到的时候&#xff0c;是采用计算元素个数的方式&#xff0c;采用透明元素补齐的方式&#xff08;比如一个有…...

SpringBoot Web 开发请求参数

SpringBoot Web 开发请求参数 简单的 web 请求: @RestController public class HelloController {@RequestMapping("sayHello")public String sayHello(){System.out.println("Hello World");return "hello world";} }获取请求参数 简单参数…...

python7学习笔记-循环、迭代、pass

九九乘法表-while循环 right 1 while right < 9:left 1while left < right:print(f{left}x{right}{left * right},end\t)left 1print()right 1 # #效果&#xff1a; #1x11 #1x22 2x24 #1x33 2x36 3x39 #1x44 2x48 3x412 4x416 #1x55 2x510 3x515 4x520 5x525 #…...

LeetCode78:子集

链接&#xff1a;78. 子集 假设我们要求[1, 2, 3]的子集&#xff1a; 我们知道[1, 2]的子集是A&#xff1a; 而[1, 2, 3]就是比[1, 2]多了一个元素3&#xff1b;所以将3加入到上述A中的每个集合中&#xff0c;得到一个新集合B&#xff1a; 结论&#xff1a;[1, 2, 3]的子集就…...

Linux 安装scala

文章目录 Linux 安装scala下载环境变量配置 Linux 安装scala 前提linux需要已经安装好JDK&#xff08;JDK安装&#xff09;&#xff0c;Scala对JDK版本有明确的要求。通常&#xff0c;Scala的稳定版本要求JDK版本不低于1.8。例如&#xff0c;Scala 2.11.8和2.12.7版本都要求JD…...

重生之我在异世界学编程之C语言:深入指针篇(上)

大家好&#xff0c;这里是小编的博客频道 小编的博客&#xff1a;就爱学编程 很高兴在CSDN这个大家庭与大家相识&#xff0c;希望能在这里与大家共同进步&#xff0c;共同收获更好的自己&#xff01;&#xff01;&#xff01; 本文目录 引言正文&#xff08;1&#xff09;内置数…...

linux centos7 yum命令失效

linux centos7 yum命令失效 Centos7使用yum命令失效&#xff0c;报错&#xff1a;Could not retrieve mirrorlist http://mirrorlist.centos.org/?release7&archx86_64&repoos&infrastock error was 14: curl#6 - “Could not resolve host: mirrorlist.centos.or…...

mac访达打开终端

选择文件夹打开 选中文件夹&#xff0c;然后右键即可&#xff1a; 在当前文件夹打开 在访达的当前文件夹长按option键 左下角出现当前文件夹路径 右键即可打开终端...

【MySQL 进阶之路】索引的使用

5.索引的使用规则 在数据库管理系统&#xff08;DBMS&#xff09;中&#xff0c;索引是提高查询效率的关键机制之一。MySQL索引优化是指通过设计、调整和选择合适的索引策略&#xff0c;以提高数据库的查询性能和降低资源消耗。以下是一些关键的索引使用规则&#xff1a; 1. …...

网络编程相关 API 学习

目录 1. 网络编程中的基本概念 2. UDP 的 socket api 的使用 (1) DatagramSocket API (2) DatagramPacket API (3) InetSocketAddress API (4) 使用 UDP 的 socket api 3. TCP 的 socket api 的使用 (1) ServerSocket API (2) Socket API 1. 网络编程中的基本概念 客…...

变量 varablie 声明- Rust 变量 let mut 声明与 C/C++ 变量声明对比分析

一、变量声明设计&#xff1a;let 与 mut 的哲学解析 Rust 采用 let 声明变量并通过 mut 显式标记可变性&#xff0c;这种设计体现了语言的核心哲学。以下是深度解析&#xff1a; 1.1 设计理念剖析 安全优先原则&#xff1a;默认不可变强制开发者明确声明意图 let x 5; …...

springboot 百货中心供应链管理系统小程序

一、前言 随着我国经济迅速发展&#xff0c;人们对手机的需求越来越大&#xff0c;各种手机软件也都在被广泛应用&#xff0c;但是对于手机进行数据信息管理&#xff0c;对于手机的各种软件也是备受用户的喜爱&#xff0c;百货中心供应链管理系统被用户普遍使用&#xff0c;为方…...

逻辑回归:给不确定性划界的分类大师

想象你是一名医生。面对患者的检查报告&#xff08;肿瘤大小、血液指标&#xff09;&#xff0c;你需要做出一个**决定性判断**&#xff1a;恶性还是良性&#xff1f;这种“非黑即白”的抉择&#xff0c;正是**逻辑回归&#xff08;Logistic Regression&#xff09;** 的战场&a…...

Cesium1.95中高性能加载1500个点

一、基本方式&#xff1a; 图标使用.png比.svg性能要好 <template><div id"cesiumContainer"></div><div class"toolbar"><button id"resetButton">重新生成点</button><span id"countDisplay&qu…...

SCAU期末笔记 - 数据分析与数据挖掘题库解析

这门怎么题库答案不全啊日 来简单学一下子来 一、选择题&#xff08;可多选&#xff09; 将原始数据进行集成、变换、维度规约、数值规约是在以下哪个步骤的任务?(C) A. 频繁模式挖掘 B.分类和预测 C.数据预处理 D.数据流挖掘 A. 频繁模式挖掘&#xff1a;专注于发现数据中…...

DAY 47

三、通道注意力 3.1 通道注意力的定义 # 新增&#xff1a;通道注意力模块&#xff08;SE模块&#xff09; class ChannelAttention(nn.Module):"""通道注意力模块(Squeeze-and-Excitation)"""def __init__(self, in_channels, reduction_rat…...

Spring AI 入门:Java 开发者的生成式 AI 实践之路

一、Spring AI 简介 在人工智能技术快速迭代的今天&#xff0c;Spring AI 作为 Spring 生态系统的新生力量&#xff0c;正在成为 Java 开发者拥抱生成式 AI 的最佳选择。该框架通过模块化设计实现了与主流 AI 服务&#xff08;如 OpenAI、Anthropic&#xff09;的无缝对接&…...

LeetCode - 199. 二叉树的右视图

题目 199. 二叉树的右视图 - 力扣&#xff08;LeetCode&#xff09; 思路 右视图是指从树的右侧看&#xff0c;对于每一层&#xff0c;只能看到该层最右边的节点。实现思路是&#xff1a; 使用深度优先搜索(DFS)按照"根-右-左"的顺序遍历树记录每个节点的深度对于…...

基于 TAPD 进行项目管理

起因 自己写了个小工具&#xff0c;仓库用的Github。之前在用markdown进行需求管理&#xff0c;现在随着功能的增加&#xff0c;感觉有点难以管理了&#xff0c;所以用TAPD这个工具进行需求、Bug管理。 操作流程 注册 TAPD&#xff0c;需要提供一个企业名新建一个项目&#…...

【Go语言基础【13】】函数、闭包、方法

文章目录 零、概述一、函数基础1、函数基础概念2、参数传递机制3、返回值特性3.1. 多返回值3.2. 命名返回值3.3. 错误处理 二、函数类型与高阶函数1. 函数类型定义2. 高阶函数&#xff08;函数作为参数、返回值&#xff09; 三、匿名函数与闭包1. 匿名函数&#xff08;Lambda函…...