通过颜色学习css

server/2024/12/22 18:45:00/

文章目录

  • 1.生成html
  • 2.添加css链接
  • 3.将h1标签text-align元素
  • 4.添加div标签
    • 4.1、为类marker添加元素
    • 4.2、添加两个新的div标签
    • 4.3、修改div标签的类型并修改css元素
    • 4.4、为类container添加元素
    • 4.5、以数字形式添加颜色
    • 4.5、container添加padding属性
    • 4.6、组合css中的颜色属性
    • 4.7、组合css中的颜色属性（复色橙色）
    • 4.8、组合css中的颜色属性（复色亮绿色）
    • 4.9、组合css中的颜色属性（复色蓝紫色）
  • 5.将颜色调为黑色
    • 5.1、组合css中的颜色属性
    • 5.2、给h1标签添加背景颜色
    • 5.3、使用十六进制显示颜色
    • 5.4、通过将十六进制颜色的绿色值设置为 7F 来降低绿色强度
    • 5.5、HSL 颜色模型
    • 5.6、hsl值的使用
  • 6.生成渐变色
    • 6.1、linear-gradient中添加百分比
    • 6.2、修改linear-gradient属性值
    • 6.3、在linear-gradient添加十六进制
    • 6.4、传入hsl参数
  • 7.在类为red的div中嵌入div
    • 7.1、使用 rgba 函数将 background-color 属性设置为具有 50% 不透明度的纯白色
    • 7.2、同时定位两个class
    • 7.3、组合使用
    • 7.4、颜色阴影
  • 8.最后代码

1.生成html

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body></body>
</html>

css_21">2.添加css链接

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Colored Markers</title><link rel="stylesheet" href="styles.css">
</head>
<body><h1>CSS Color Markers</h1>
</body>
</html>

3.将h1标签text-align元素

css">h1 {text-align:center}

4.添加div标签

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Colored Markers</title><link rel="stylesheet" href="styles.css">
</head>
<body><h1>CSS Color Markers</h1><div class="container"><div class="marker"></div></div>
</body>
</html>

4.1、为类marker添加元素

css">h1 {text-align:center}.marker{background-color:red;height:25px;width:200px;margin:auto;}

4.2、添加两个新的div标签

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Colored Markers</title><link rel="stylesheet" href="styles.css">
</head>
<body><h1>CSS Color Markers</h1><div class="container"><div class="marker"></div><div class="marker"></div><div class="marker"></div></div>
</body>
</html>

css">h1 {text-align:center}.marker{background-color:red;height:25px;width:200px;margin:10px auto;}

css_111">4.3、修改div标签的类型并修改css元素

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Colored Markers</title><link rel="stylesheet" href="styles.css">
</head>
<body><h1>CSS Color Markers</h1><div class="container"><div class="marker one"></div><div class="marker two"></div><div class="marker three"></div></div>
</body>
</html>

css">h1 {text-align:center}.marker{height:25px;width:200px;margin:10px auto;}.one {background-color: red;}.two{background-color:green;}.three{background-color:blue;}

在这里插入图片描述

4.4、为类container添加元素

css">h1 {	text-align:center}.marker{height:25px;width:200px;margin:10px auto;}.one {background-color: red;}.two{background-color:green;}.three{background-color:blue;}.container {background-color:rgb(0,0,0);}

4.5、以数字形式添加颜色

css">h1 {text-align:center}.marker{height:25px;width:200px;margin:10px auto;}.one {background-color: rgb(255, 0, 0);}.two {background-color: rgb(0,127,0);}.three {background-color: rgb(0,0,255);}.container {background-color:rgb(0,0,0);}

在这里插入图片描述

4.5、container添加padding属性

css">h1 {text-align:center}.marker{height:25px;width:200px;margin:10px auto;}.one {background-color: rgb(255, 0, 0);}.two {background-color: rgb(0,127,0);}.three {background-color: rgb(0,0,255);}.container {background-color:rgb(0,0,0);padding:10px 0;}

css_245">4.6、组合css中的颜色属性

h1 {text-align:center}.marker{height:25px;width:200px;margin:10px auto;}.one {background-color: rgb(255, 255, 0);}.two {background-color: rgb(0,127,0);}.three {background-color: rgb(0,0,255);}.container {background-color:rgb(255,255,255);padding:10px 0;}

在这里插入图片描述

css_276">4.7、组合css中的颜色属性（复色橙色）

css"> .one {background-color: rgb(255, 127, 0);}

css_284">4.8、组合css中的颜色属性（复色亮绿色）

.two {background-color: rgb(0,255,127);}

css_292">4.9、组合css中的颜色属性（复色蓝紫色）

css">  .three {background-color: rgb(127,0,255);}

在这里插入图片描述

注：在 CSS 规则 .one、.two 和 .three 中，调整 rgb 函数中的值，将每个元素的 background-color 设置为纯黑色；rgb 函数使用加成色模型，颜色起始为黑色，随红色、绿色和蓝色的值增加而变化。

5.将颜色调为黑色

css">h1 {text-align:center}.marker{height:25px;width:200px;margin:10px auto;}.one {background-color: rgb(0, 0, 0);}.two {background-color: rgb(0, 0, 0);}.three {background-color: rgb(0, 0, 0);}.container {background-color:rgb(255,255,255);padding:10px 0;}

在这里插入图片描述

注：色轮是一个圆圈，其中相似的颜色或色调彼此靠近，而不同的颜色相距较远。 例如，纯红色介于玫瑰色和橙色之间。

注：色轮上相互对立的两种颜色称为补色。 如果将两种互补色组合在一起，它们会产生灰色。 但当它们并排放置时，这些颜色会产生强烈的视觉对比，显得更亮。

css_336">5.1、组合css中的颜色属性

纯红色与青色

 .one {background-color: rgb(255, 0, 0);}.two {background-color: rgb(0, 255, 255);}.three {background-color: rgb(0, 0, 0);}

在这里插入图片描述

5.2、给h1标签添加背景颜色

h1 {text-align:center;background-color:rgb(0,255,255);}

在这里插入图片描述

5.3、使用十六进制显示颜色

  .green {background-color: #00FF00;}

在这里插入图片描述

注：CSS 将颜色应用于元素的一种非常常见的方法是使用十六进制或 hex 值。 虽然十六进制值听起来很复杂，但它们实际上只是 RGB 值的另一种形式。

十六进制颜色值以 # 字符开头，从 0-9 和 A-F 取六个字符。 第一对字符代表红色，第二对代表绿色，第三对代表蓝色

对于十六进制颜色，00 是该颜色的 0%，FF 是 100%。 所以 #00FF00 转换为 0% 红色、100% 绿色和 0% 蓝色，与 rgb(0, 255, 0) 相同

5.4、通过将十六进制颜色的绿色值设置为 7F 来降低绿色强度

.green {background-color: #007F00;
}

在这里插入图片描述

5.5、HSL 颜色模型

HSL 颜色模型或色调、饱和度和亮度是表示颜色的另一种方式。

CSS hsl 函数接受 3 个值：0 到 360 的数字表示色调，0 到 100 的百分比表示饱和度，0 到 100 的百分比表示亮度。

饱和度指纯色的颜色强度从 0% 或灰色到 100%。 你必须给饱和度和亮度值添加百分比标志 %。

亮度是颜色出现的亮度，从 0% 或全黑到 100% 或全白，其中 50% 为中性。

5.6、hsl值的使用

css">.blue {background-color:hsl(240,100%,50%);
}

在这里插入图片描述

6.生成渐变色

css">.red {background: linear-gradient(90deg, rgb(255, 0, 0),rgb(0,255,0));
}

在这里插入图片描述

6.1、linear-gradient中添加百分比

.red {background: linear-gradient(90deg, rgb(255, 0, 0)75%, rgb(0, 255, 0), rgb(0, 0, 255));
}

在这里插入图片描述

6.2、修改linear-gradient属性值

css">.red {background: linear-gradient(180deg, rgb(255, 0, 0) 0%, rgb(0, 255, 0)50%, rgb(0, 0, 255)100%);
}

在这里插入图片描述

6.3、在linear-gradient添加十六进制

.green {background: linear-gradient(180deg, #55680D, #71F53E,#116C31);
}

在这里插入图片描述

6.4、传入hsl参数

css">.blue {background:linear-gradient(hsl(186, 76%, 16%));
}

7.在类为red的div中嵌入div

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Colored Markers</title><link rel="stylesheet" href="styles.css">
</head>
<body><h1>CSS Color Markers</h1><div class="container"><div class="marker red"><div class="sleeve"></div></div><div class="marker green"></div><div class="marker blue"></div></div>
</body>
</html>

css">h1 {text-align:center;background-color:rgb(0,255,255);}.marker{height:25px;width:200px;margin:10px auto;}.red {background: linear-gradient(180deg, rgb(255, 0, 0) 0%, rgb(0, 255, 0)50%, rgb(0, 0, 255)100%);}.green {background: linear-gradient(180deg, #55680D, #71F53E,#116C31);}.blue {background: linear-gradient(hsl(186, 76%, 16%), hsl(223, 90%, 60%),hsl(240,56%,42%));}.container {background-color:rgb(255,255,255);padding:10px 0;}.sleeve{width:110px;height:25px;background-color:white;opacity:0.5;}

在这里插入图片描述

7.1、使用 rgba 函数将 background-color 属性设置为具有 50% 不透明度的纯白色

css">  .sleeve{width:110px;height:25px;background-color: rgba(255,255,255,0.5)}

在这里插入图片描述

7.2、同时定位两个class

<!DOCTYPE html>
<html lang="en"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Colored Markers</title><link rel="stylesheet" href="styles.css"></head><body><h1>CSS Color Markers</h1><div class="container"><div class="marker red"><div class="cap"></div><div class="sleeve"></div></div><div class="marker green"></div><div class="marker blue"></div></div></body>
</html>

css">h1 {text-align: center;}.container {background-color: rgb(255, 255, 255);padding: 10px 0;}.marker {width: 200px;height: 25px;margin: 10px auto;}.cap {width: 60px;height: 25px;}.sleeve {width: 110px;height: 25px;background-color: rgba(255, 255, 255, 0.5);}.cap,.sleeve{display:inline-block;}.red {background: linear-gradient(rgb(122, 74, 14), rgb(245, 62, 113), rgb(162, 27, 27));}.green {background: linear-gradient(#55680D, #71F53E, #116C31);}.blue {background: linear-gradient(hsl(186, 76%, 16%), hsl(223, 90%, 60%), hsl(240, 56%, 42%));}

在这里插入图片描述

7.3、组合使用

css">.sleeve {width: 110px;height: 25px;background-color: rgba(255, 255, 255, 0.5);border-left: 10px double rgba(0, 0, 0, 0.75);
}

在这里插入图片描述

7.4、颜色阴影

css">  .red {background: linear-gradient(rgb(122, 74, 14), rgb(245, 62, 113), rgb(162, 27, 27));box-shadow: 5px 5px red;
}

在这里插入图片描述

8.最后代码

<!DOCTYPE html>
<html lang="en"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Colored Markers</title><link rel="stylesheet" href="styles.css"></head><body><h1>CSS Color Markers</h1><div class="container"><div class="marker red"><div class="cap"></div><div class="sleeve"></div></div><div class="marker green"><div class="cap"></div><div class="sleeve"></div></div><div class="marker blue"><div class="cap"></div><div class="sleeve"></div></div></div></body>
</html>

css">h1 {text-align: center;}.container {background-color: rgb(255, 255, 255);padding: 10px 0;}.marker {width: 200px;height: 25px;margin: 10px auto;}.cap {width: 60px;height: 25px;}.sleeve {width: 110px;height: 25px;background-color: rgba(255, 255, 255, 0.5);border-left: 10px double rgba(0, 0, 0, 0.75);}h1 {text-align: center;}.container {background-color: rgb(255, 255, 255);padding: 10px 0;}.marker {width: 200px;height: 25px;margin: 10px auto;}.cap {width: 60px;height: 25px;}.sleeve {width: 110px;height: 25px;background-color: rgba(255, 255, 255, 0.5);border-left: 10px double rgba(0, 0, 0, 0.75);}.cap, .sleeve {display: inline-block;}.red {background: linear-gradient(rgb(122, 74, 14), rgb(245, 62, 113), rgb(162, 27, 27));box-shadow: 0 0 20px 0 rgba(83, 14, 14, 0.8);}.green {background: linear-gradient(#55680D, #71F53E, #116C31);box-shadow: 0 0 20px 0 #3B7E20CC;}.blue {background: linear-gradient(hsl(186, 76%, 16%), hsl(223, 90%, 60%), hsl(240, 56%, 42%));box-shadow: 0 0 20px 0 hsla(223,59%,31%, 0.8);}.cap, .sleeve {display: inline-block;}.red {background: linear-gradient(rgb(122, 74, 14), rgb(245, 62, 113), rgb(162, 27, 27));box-shadow: 5px 5px red;
}.green {background: linear-gradient(#55680D, #71F53E, #116C31);}.blue {background: linear-gradient(hsl(186, 76%, 16%), hsl(223, 90%, 60%), hsl(240, 56%, 42%));}

在这里插入图片描述


http://www.ppmy.cn/server/36802.html

相关文章

CMakeLists.txt语法规则：条件判断中表达式说明一

CMakeLists.txt语法规则：条件判断中表达式说明一

一. 简介 前面学习了 CMakeLists.txt语法中的 部分常用命令&#xff0c;常量变量&#xff0c;双引号的使用。 前面一篇文章也简单了解了 CMakeLists.txt语法中的条件判断&#xff0c;文章如下&#xff1a; CMakeLists.txt语法规则&#xff1a;条件判断说明一-CSDN博客 本文…
阅读更多...
【MySQL】数据分组（关键字：GROUP BY）过滤分组（关键字：HAVING）

【MySQL】数据分组（关键字：GROUP BY）过滤分组（关键字：HAVING）

文章目录 数据分组&#xff0c;关键字&#xff1a;GROUP BY过滤分组&#xff0c;关键字&#xff1a;HAVING常见 SELECT 子句顺序 我是一名立志把细节说清楚的博主&#xff0c;欢迎【关注】&#x1f389; ~ 原创不易&#xff0c; 如果有帮助 &#xff0c;记得【点赞】【收藏】 …
阅读更多...
MYSQL自联结

MYSQL自联结

文章目录 查找&#xff1a;生产ID为DTNTR物品的供应商&#xff0c;生产的其他物品。子查询自联结比较 查找&#xff1a;生产ID为DTNTR物品的供应商&#xff0c;生产的其他物品。 子查询 SELECTprod_id,prod_name FROMproducts WHEREvend_id ( SELECT vend_id FROM product…
阅读更多...
临时邮箱API发送邮件的安全性？如何保障？

临时邮箱API发送邮件的安全性？如何保障？

临时邮箱API发送邮件的步骤有哪些&#xff1f;设置邮箱API方法&#xff1f; 电子邮件作为一种重要的通信方式&#xff0c;而临时邮箱API作为一种新兴的邮件发送技术&#xff0c;其安全性更是成为大家关注的焦点。那么&#xff0c;临时邮箱API发送邮件的安全性究竟如何呢&#…
阅读更多...
RFC 791 （2） - Overview

RFC 791 （2） - Overview

目录 总览 操作 Addressing 与 Fragmentation Addressing Fragmentation 总览 RFC791文档的第二部分就是对IP进行总浏览&#xff1a;可以看到&#xff0c;我们的五层划分是这样的&#xff1a; ------ ----- ----- ----- |Telnet| | FTP | | TFTP| ... | ... | -----…
阅读更多...
自动化图像识别：提高效率和准确性的新途径

自动化图像识别：提高效率和准确性的新途径

自动化图像识别是人工智能领域中的一项关键技术&#xff0c;它通过算法自动解析图像内容&#xff0c;为各种应用提供准确的信息。随着技术的不断发展&#xff0c;自动化图像识别在提高效率和准确性方面展现出新的途径。 一、深度学习技术的应用 深度学习是自动化图像识别领域…
阅读更多...
go Gin项目实战

go Gin项目实战

Gin项目实战 Gin博客项目-项目架构Gin博客项目-集成gormGin博客项目-集成Bootstrap创建用户表单Gin 博客项目-实现控制器和路由Gin 博客项目-设计静态页面Gin 博客项目-用户注册Gin 博客项目-用户登录Gin 博客项目-集成markdown编辑器Gin 博客项目-创建博客模型和DAOGin 博客项…
阅读更多...
安装nginx-1.25.5与ngx_http_headers_more_filter_module模块

安装nginx-1.25.5与ngx_http_headers_more_filter_module模块

#下载nginx的代码 curl -O http://nginx.org/download/nginx-1.25.5.tar.gz #下载headers-more-nginx-module代码 git clone https://github.com/openresty/headers-more-nginx-module#解压 tar -xzf nginx-1.25.5.tar.gzcd nginx-1.25.5#--add-dynamic-module 下载下来的目录 …
阅读更多...
最新文章

Copyright @ 2022~2023