编程笔记 html5cssjs 042 CSS颜色

编程笔记 html5&css&js 042 CSS颜色

  • 一、CSS 颜色名
  • 二、CSS 背景色
  • 三、CSS 文本颜色
  • 四、CSS 边框颜色
  • 五、用颜色值指定颜色
  • 六、练习
  • 小结

在《编程笔记 html5&css&js 018 HTML颜色》中已经述及颜色。但颜色应当由CSS处理,再次列出。

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

一、CSS 颜色名

在 CSS 中,可以使用颜色名称来指定颜色。CSS/HTML 支持 140 种标准颜色名。

二、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 中,还可以使用 RGB 值、HEX 值、HSL 值、RGBA 值或者 HSLA 值来指定颜色:

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

六、练习

<!DOCTYPE html>
<html lang="zh-cn"><title>CSS颜色 编程笔记 html5&css&js</title><meta charset="utf-8" /><style>body {display: flex;justify-content: center; /* 水平居中 */align-items: center; /* 垂直居中(如果需要的话) */color: cyan;background: teal;}h1.Tomato {background-color: Tomato;}h1.Orange {background-color: Orange;}h1.DodgerBlue {background-color: DodgerBlue;}h1.MediumSeaGreen {background-color: MediumSeaGreen;}h1.Gray {background-color: Gray;}h1.SlateBlue {background-color: SlateBlue;}h1.Violet {background-color: Violet;}h1.LightGray {background-color: LightGray;}div {width: 900px;align-self: center;}</style><body><div><p>用颜色名称、RGB、HEX、HSL、RGBA、HSLA颜色值指定颜色。</p><h1 class="Tomato">Tomato番茄色</h1><h1 class="Orange">Orange橙色</h1><h1 class="DodgerBlue">DodgerBlue道奇蓝</h1><h1 class="MediumSeaGreen">MediumSeaGreen中海绿色</h1><h1 class="Gray">Gray灰色</h1><h1 class="SlateBlue">SlateBlue板岩蓝</h1><h1 class="Violet">Violet紫色</h1><h1 class="LightGray">LightGray浅灰</h1><h1 style="background-color: rgb(255, 99, 71)">rgb(255, 99, 71)</h1><h1 style="background-color: #ff6347">#ff6347</h1><h1 style="background-color: hsl(9, 100%, 64%)">hsl(9, 100%, 64%)</h1><h1 style="background-color: rgba(255, 99, 71, 0.5)">rgba(255, 99, 71, 0.5)</h1><h1 style="background-color: hsla(9, 100%, 64%, 0.5)">hsla(9, 100%, 64%, 0.5)</h1></div></body>
</html>

小结

参考《编程笔记 html5&css&js 018 HTML颜色》。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/629233.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

linux-部署Samba文件共享服务

linux-部署Samba文件共享服务 1、使用命令安装samba服务和samba客户端 dnf install samba samba-client # 或者 yum install samba samba-client2、配置文件的设置(可提前备份smb.conf) vim /etc/samba/smb.conf [global]workgroup SAMBAsecurity userpassdb backend tdbsam…

在EasyBoss ERP上查Shopee产品表现,数据更全、处理更高效!

在运营Shopee本土店的过程中&#xff0c;卖家需要及时了解产品数据来进行产品的调整和优化。不过&#xff0c;调整和优化需要基于数据&#xff0c;而非仅凭直觉。 但是&#xff0c;如何全面地查看产品表现数据、快速处理表现不佳的产品&#xff0c;成为诸多卖家头痛的问题&…

python中常见的异常和解决办法

在Python中&#xff0c;常见的异常及其解决办法如下&#xff1a; 语法错误(SyntaxError)&#xff1a;程序在解析阶段发现了语法错误&#xff0c;通常是由于缺少括号、引号或其他语法错误引起的。解决办法是仔细检查代码&#xff0c;确保语法正确。 解析错误(ParseError)&#…

CMake入门教程【高级篇】创建自定义目标add_custom_target

1.概述信息 add_custom_target命令在CMake中用于创建一个不生成任何输出文件的自定义目标。这个命令非常有用,尤其是当你需要执行非构建任务时,比如清理操作、生成文档或运行一些自定义的脚本。 #mermaid-svg-iI1z5xwwKtzTM0ub {font-family:"trebuchet ms",verda…

java的运行机制以及整体流程

背景&#xff1a;学习了这么多年的Java&#xff0c;把自己的理解写成JVM系列&#xff0c;以便于后面的温习&#xff0c;以及帮助更多的java开发人员。 开篇先梳理下&#xff0c;我们之前写的第一个Hello World&#xff01;&#xff0c;当我们运行出来后&#xff0c;在控制台打印…

史上最全的数据科学与艺术

1.背景介绍 数据分析是一种将数据转化为价值的艺术和科学。它涉及到大量的数学、统计、编程、数据库、机器学习等多个领域的知识。数据分析的目的是从数据中提取有用的信息&#xff0c;以便做出明智的决策。 数据分析的艺术体现在数据分析师需要具备丰富的经验和洞察力&#…

『C++成长记』内存管理

&#x1f525;博客主页&#xff1a;小王又困了 &#x1f4da;系列专栏&#xff1a;C &#x1f31f;人之为学&#xff0c;不日近则日退 ❤️感谢大家点赞&#x1f44d;收藏⭐评论✍️ 目录 一、C/C内存分布 二、内存管理方式 &#x1f4d2;2.1C语言内存管理方式 &#x…

【OpenAI】自定义GPTs应用(GPT助手应用)及外部API接口请求

11月10日&#xff0c;OpenAI正式宣布向所有ChatGPT Plus用户开放GPTs功能 简而言之&#xff1a;GPT应用市场(简称GPTs, 全称GPT Store) Ps&#xff1a; 上图为首次进入时的页面&#xff0c;第一部分是自己创建的GPTs应用&#xff0c;下面是公开可以使用的GPTs应用 一、创建GPTs…

振弦采集仪在桥梁结构健康监测中的应用探索

振弦采集仪在桥梁结构健康监测中的应用探索 振弦采集仪是一种用于测量结构振动特性的仪器&#xff0c;通过采集结构上的振弦信号&#xff0c;可以评估结构的健康状况。在桥梁结构健康监测中&#xff0c;振弦采集仪可以发挥重要的作用。 首先&#xff0c;振弦采集仪能够实时监测…

上传文件:413 Request Entity Too Large Maximum upload size exceeded 解决方案

文章目录 前言一、原因分析二、解决方案1.nginx配置文件2.application.yml配置文件 总结 前言 在上传文件时&#xff0c;如果没有做一些配置的话&#xff0c;会导致上传失败&#xff1a;413 Request Entity Too Large 或者 Maximum upload size exceeded。 提示&#xff1a;以…

geemap学习笔记049:下载Landsat数据时遇到的一个问题

前言 最近在下载Landsat 8 地面反射率数据&#xff08;Surface Reflectance&#xff09;时&#xff0c;遇到了一个问题&#xff0c;无论是使用geemap.ee_export_image_to_drive() 函数还是geemap.download_ee_image() 函数下载的数据&#xff0c;易康都打不开&#xff0c;显示…

linux下,PC机串口通信开发

1、查看电脑的串口 ~/share/bin/PC$ dmesg | grep tty [ 0.083244] printk: console [tty0] enabled [ 0.329145] 00:02: ttyS0 at I/O 0x3f8 (irq 4, base_baud 115200) is a 16550A [ 0.351177] 00:03: ttyS1 at I/O 0x2f8 (irq 3, base_baud 115200) is a 165…

【Java】面向对象 OOP

文章目录 面向对象OOP概述一、对象内存相关二、类的成员之一&#xff1a;成员变量&#xff08;Field&#xff09;2.1 如何声明成员变量2.2 成员变量 与 局部变量 三、类的成员之一&#xff1a;成员方法&#xff08;Method&#xff09;3.1 方法调用内存分析3.2 方法的重载3.3 可…

vue 导出el-table表格数据

1.先安装 file-saver 、xlsx 组件 npm install file-saver -Snpm intsall xlsx -S 2.html 代码 <el-table :data"elTable" ref"" id"table-content"><el-table-column label"其他" align"center"></el-…

NAS入门(学习笔记)

文章目录 AutoMLNAS初期NAS当前NAS框架One-Shot NAS权重共享策略 Zero-Shot NASZen-NASNASWOTEPENAS 参考资料 AutoML 深度学习使特征学习自动化 AutoML 使深度学习自动化 自动化机器学习 (automated machine learning) 是一种自动化的数据驱动方法, 并做出一系列决策。 按…

第2、3次作业

题目1&#xff1a; 基于域名[www.openlab.com](http://www.openlab.com)可以访问网站内容为 welcome to openlab!!! 题目2&#xff1a; 给该公司创建三个子界面分别显示学生信息&#xff0c;教学资料和缴费网站&#xff0c;基于[www.openlab.com/student](http://www.openlab.c…

泛微OA获取明细表单附件

明细表一个附件对应一个唯一标识,主要是需要sql查询出对应的imagefileid,代码如下: package weaver.interfaces.workflow.action;import weaver.conn.RecordSet; import weaver.file.ImageFileManager; import weaver.general.BaseBean; import weaver.soa.workflow.reques…

PyTorch 还提供的几种连接张量的方法

1. torch.stack() 方法&#xff1a; 行为&#xff1a; 创建一个新的维度&#xff0c;并在该维度上堆叠张量。结果张量的维度比原始张量多一维。适用场景&#xff1a; 当需要在新的维度上堆叠张量时&#xff0c;特别是在创建新批次或样本时。 import torchtensor1 torch.tens…

RIP【新华三与华为区别】

【介绍】 rip分为rip 1 与 rip 2 &#xff0c;rip 2 是对 rip 1 的一种升级&#xff0c;rip 2 可以进行认证等功能 【命令】 新华三&#xff1a; [HC3-R1] rip #启用rip [HC3-R1-rip] version 2 #告知rip 版本号 [HC3-R1-rip] network 192.168.1.0 #宣告其网段 [HC3-R1-rip] …

【python】py-spy 实时显示python进程内的线程堆栈CPU消耗 python CPU消耗分析

安装 pip install py-spy AI调用源码&#xff0c;红色调用时&#xff0c;python进程CPU 100% 启动程序&#xff0c;输入问题&#xff0c;观察CPU top sudo .local/bin/py-spy top --pid 7150 可以看到&#xff0c;此时与显卡交互占用了绝大部分CPU&#xff0c;有点死循环检测…