通过颜色学习css

、十一、2024-05-11 16:03

文章目录

1.生成html

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链接

html 复制代码 
<!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标签

html 复制代码 
<!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标签

html 复制代码 
<!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;
  }

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

html 复制代码 
<!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;
  }

4.6、组合css中的颜色属性

html 复制代码 
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中的颜色属性（复色橙色）

css 复制代码 
 .one {
    background-color: rgb(255, 127, 0);
  }

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

html 复制代码 
.two {
    background-color: rgb(0,255,127);
  }

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

注：色轮是一个圆圈，其中相似的颜色或色调彼此靠近，而不同的颜色相距较远。 例如，纯红色介于玫瑰色和橙色之间。
注：色轮上相互对立的两种颜色称为补色。 如果将两种互补色组合在一起，它们会产生灰色。 但当它们并排放置时，这些颜色会产生强烈的视觉对比，显得更亮。

5.1、组合css中的颜色属性

纯红色与青色

html 复制代码 
 .one {
    background-color: rgb(255, 0, 0);
  }
  
  .two {
    background-color: rgb(0, 255, 255);
  }
  
  .three {
    background-color: rgb(0, 0, 0);
  }

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

html 复制代码 
h1 {
    text-align:center;
    background-color:rgb(0,255,255);
  }

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

html 复制代码 
  .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 来降低绿色强度

html 复制代码 
.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中添加百分比

html 复制代码 
.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添加十六进制

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

6.4、传入hsl参数

css 复制代码 
.blue {
  background:linear-gradient(hsl(186, 76%, 16%));
}

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

html 复制代码 
<!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

html 复制代码 
<!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.最后代码

html 复制代码 
<!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%));
  }
相关推荐
懒惰的bit2 小时前
基础网络安全知识
学习·web安全·1024程序员节
Natural_yz4 小时前
大数据学习09之Hive基础
大数据·hive·学习
龙中舞王4 小时前
Unity学习笔记(2):场景绘制
笔记·学习·unity
Natural_yz4 小时前
大数据学习10之Hive高级
大数据·hive·学习
love_and_hope5 小时前
Pytorch学习--神经网络--完整的模型训练套路
人工智能·pytorch·python·深度学习·神经网络·学习
夜雨星辰4876 小时前
Android Studio 学习——整体框架和概念
android·学习·android studio
奔跑的花短裤6 小时前
少儿编程启蒙学习
学习·青少年编程·机器人·ai编程
VertexGeek6 小时前
Rust学习（一）：初识Rust和Rust环境配置
开发语言·学习·rust
chusheng18406 小时前
Java基于小程序公考学习平台的设计与实现（附源码，文档）
java·学习·小程序·公考小程序·公考学习小程序
虾球xz7 小时前
游戏引擎学习第五天
学习·算法·游戏引擎
热门推荐
01聊聊 Python 中的同步原语，为什么有了 GIL 还需要同步原语02【HarmonyOS】HUAWEI DevEco Studio 下载地址汇总03Windows10安装PCL1.14.0及点云配准04C++——超强级病毒代码05全面解析：构建基于深度学习的安全帽检测系统（UI界面+YOLO代码+数据集）06组基轨迹建模 GBTM的介绍与实现（Stata 或 R）07硬件预取之空间预取08Ubuntu 20.04使用Livox mid 360 测试 FAST_LIO09Coze扣子平台完整体验和实践（附国内和国际版对比）10【SCS-CN】SCS-CN模型中CN值的确定