通過顏色學習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%));}