【FreeCodeCamp】 ResponsiveWebDesign网页设计 测试3学习笔记

Learn CSS Color by Building a Set of Colored Markers

https://www.freecodecamp.org/learn/2022/responsive-web-design/learn-css-colors-by-building-a-set-of-colored-markers/step-1

Selecting the correct colors for your webpage can greatly improve the aesthetic appeal to your readers.

In this course, you'll build a set of colored markers. You'll learn different ways to set color values and how to pair colors with each other.

知识点记录：

1. in the class attribute and separating them with a space

   <div class="animal dog">
   

2. color    三级颜色好好看！

   There are three more tertiary colors: chartreuse green (green + yellow), azure (blue + cyan), and rose (red + magenta).

   .one {
     background-color: rgb(255, 127, 0);
   }
   
   .two {
     background-color: rgb(0, 255, 127);
   }
   
   .three {
     background-color: rgb(127, 0, 255);
   }
   
   /*另外三级颜色也很好看*/
   .one {
     background-color: rgb(127, 255, 0);
   }
   
   .two {
     background-color: rgb(0, 127, 255);
   }
   
   .three {
     background-color: rgb(255, 0, 127);
   

3. hexadecimal or hex values

   [ˌheksəˈdesɪml]

   What Is Hexadecimal?

4. hsl

   element{
           color : hsl(hue,saturation,lightness);
   				color: hsl(0, 100%, 30%);
       }
   

   css 中hsl颜色的意义_hsl（）函数以及CSS中的示例_cumubi7453的博客-CSDN博客

   • HUE: Hue is a container that lets you set the color from a color wheel.

     **HUE：**色调是一个容器，可以让您设置一个色轮的色彩。

   • SATURATION: Saturation, as the name suggests, specifies the saturation of the color. It is determined within a percent.

     饱和度 ：饱和度，顾名思义，指定颜色的饱和度。 确定在一个百分比之内。

   • LIGHTNESS: Lightness is not that tough to understand, it is used to set the lightness of the color. It is also determined within a percent.

     亮度 ：亮度不是很难理解的，它用于设置颜色的亮度。 也确定在一个百分比之内。

     css 中hsl(),CSS hsl() Function_人生没有续集的博客-CSDN博客

5. 渐变

   One thing to remember is that the linear-gradientfunction actually creates an imageelement, and is usually paired with the backgroundproperty which can accept an image as a value.创建一个表示两种或多种颜色线性渐变的图片

   linear-gradient(gradientDirection, color1, color2, ...);
   
   /* 从上到下，蓝色渐变到红色 */
   linear-gradient(blue, red);
    
   /* 渐变轴为45度，从蓝色渐变到红色 */
   linear-gradient(45deg, blue, red);
    
   /* 从右下到左上、从蓝色渐变到红色 */
   linear-gradient(to left top, blue, red);
    
   /* 从下到上，从蓝色开始渐变、到高度40%位置是绿色渐变开始、最后以红色结束 */
   linear-gradient(0deg, blue, green 40%, red);
   
   /* 使用rgb进行颜色表示 */
   .red {
     background: linear-gradient(90deg, rgb(255, 0, 0), rgb(0,255,0));
   }
   

   创建一个线性渐变，需要指定两种颜色，还可以实现不同方向（指定为一个角度）的渐变效果，如果不指定方向，默认从上到下渐变。

   CSS linear-gradient() 函数

   color-stops 中间颜色点在颜色后面加百分比

   CSS3 - color-stops

   linear-gradient(180deg, rgb(255, 0, 0) 0%, rgb(0, 255, 0) 50%, rgb(0, 0, 255) 100%)
   

   Colors and stops tell the browser which colors to use in the gradients, and where they should stop.

6. 透明度

   /* way 01*/
   opacity: 0.5;
   
   /* way 02 use alpha*/
   rgba(redValue, greenValue, blueValue, alphaValue);
   

7. when two block elements are next to each other, they stack like actual blocks.

   <div class="marker red">
       <div class="cap"></div>
       <div class="sleeve"></div>
   </div>
   

   当新添加一个没有设置颜色的cap在sleeve上面时，就看不见sleeve了（外联元素换行了）

   .cap,.sleeve{
     display:inline-block;
   }
   

   当设置了内联就出现了

8. border

   	border-left-width: 10px;
     border-left-style: solid;
     border-left-color: black;
   
   /* the content before can simplify use the format bellow*/
   	border-left:10px solid black;
   

9. box-shadow