通过颜色学习css

文章目录

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>

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元素

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添加元素

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>

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

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>

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添加元素

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、以数字形式添加颜色

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属性

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;}

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;}

在这里插入图片描述

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

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

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

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

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

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

在这里插入图片描述

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

5.将颜色调为黑色

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;}

在这里插入图片描述

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

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

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值的使用

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

在这里插入图片描述

6.生成渐变色

.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属性值

.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参数

.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>

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% 不透明度的纯白色

  .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>

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、组合使用

.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、颜色阴影

  .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>

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%));}