《個人學習筆記十三》
繼承
- 樣式的繼承，我們為一個元素設定的樣式同時也會應用到后代元素上，
- 繼承是發生在祖先后代之間的，
- 繼承的設計是為了方便我們的開發，
- 利用繼承我們可以將一些通用的樣式統一設定到共同的祖先元素上，這樣只需要設定一次即可，可讓所有的元素都具有該樣式，
- 注意：并不是所有的樣式都會被繼承 如 背景、布局相關的，等這些樣式都不會被繼承，
選擇器的權重
樣式的沖突
當我們通過不同的選擇器，選中相同的元素，并且為相同的樣式設定不同的值時，此時就發生了樣式的沖突，
發生樣式沖突時，應用哪個樣式由選擇器的權重（優先級）決定，
選擇器的權重
| 選擇器 | 優先級 |
|---|---|
| 行內樣式 | 1,0,0,0 |
| id選擇器 | 0,1,0,0 |
| 類和偽類選擇器 | 0,0,1,0 |
| 元素選擇器 | 0,0,0,1 |
| 通配選擇器 | 0,0,0,0 |
| 繼承的樣式 | 沒有優先級 |
- 比較優先級時，需要將所有的選擇器的優先級進行相加計算，最后優先級越高，則越優先顯示（分組選擇器是但不計算的），選擇器的累加不會超過其最大的數量級，類選擇器在高也不會比id選擇器高，
- 如果在某一個樣式的后面添加 !important ，則此時該樣式會獲得最高的優先級，甚至超過行內樣式，（注意：開發中，慎用，不方便修改）
像素和百分比
長度單位：
- 像素
顯示幕其實是由一個一個的小點點構成的
不同螢屏的像素大小是不同的，像素越小的螢屏顯示的效果越清晰
所以同樣的200px在不同的設備上顯示的效果不一樣，
- 百分比
也可以將屬性值設定為相對于其父元素屬性的百分比，
設定百分比可以使子元素追隨父元素的改變而改變，
例子：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.box1 {
height: 200px;
width: 200px;
background-color: blue;
}
.box2 {
height: 50%;
/* 寬和高為box1的一半 */
width: 50%;
background-color: darkseagreen;
}
</style>
</head>
<body>
<div class="box1">
<div class="box2"></div>
</div>
</body>
</html>
顯示結果：
em和rem
這兩個也是長度單位，
- em
em是相對于元素的字體大小來計算的，
1em=1font-size
em會根據字體的大小的改變而改變，
- rem
rem是相對于根元素的字體大小來計算，
例子1：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.box1 {
font-size: 2px;
height: 200em;
width: 200em;
background-color: blue;
}
.box2 {
font-size: 1px;
height: 200em;
width: 200em;
background-color: firebrick;
}
</style>
</head>
<body>
<div class="box1">
<div class="box2"></div>
</div>
</body>
</html>
</html>
顯示結果：
例子2：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
html {
font-size: 1px;
}
.box1 {
height: 200rem;
width: 200rem;
background-color: blue;
}
.box2 {
height: 100rem;
width: 100rem;
background-color: firebrick;
}
</style>
</head>
<body>
<div class="box1">
<div class="box2"></div>
</div>
</body>
</html>
</html>
顯示結果：
RGB值
顏色單位：
- 在CSS中可以直接使用顏色名來設定各種顏色，
- 比如：red、orange、yellow、blue、green、pink、等
- 但是在CSS中直接使用顏色名是非常的不方便，
RGB值：
- RGB是通過三種顏色的不同濃度來調配出不同的顏色 R red，G green，B blue
- 每一種顏色的范圍在 0-255（0%-100%）之間，
- 語法：RGB（紅，綠，藍）
RGBA：
- 就是在RGA值得基礎上增加了一個a表示不透明度，
- 需要四個值，前三個和rgb一樣，第四個表示不透明度，
- 1表示完全不透明 0表示完全透明 0.5表示半透明，
十六進制的RGB值
- 語法:#紅色綠色藍色
- 顏色濃度范圍 00-ff
- 如果顏色兩位重復可以進行簡寫
#aabbcc 簡寫 #abc
例子：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.box1 {
height: 100px;
width: 100px;
background-color: red;
}
.box2 {
height: 100px;
width: 100px;
background-color: rgb(0, 255, 0);
}
.box3 {
height: 50px;
width: 100px;
background-color: rgba(0, 255, 0, .5);
}
.box4 {
height: 100px;
width: 100px;
background-color: #0000ff;
}
</style>
</head>
<body>
<div class="box1"></div>
<div class="box2"></div>
<div class="box3"></div>
<div class="box3"></div>
<div class="box4"></div>
</body>
</html>
結果顯示：
HSL值 HSLA值
- H 色相（0-360）
- S 飽和度，顏色的濃度 0%-100%
- L 亮度，顏色的亮度 0%-100%
代碼：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.box1 {
height: 100px;
width: 100px;
background-color: hsl(88, 40%, 50%);
}
</style>
</head>
<body>
<div class="box1"></div>
</body>
</html>
解釋如下：
轉載請註明出處，本文鏈接：https://www.uj5u.com/yidong/200617.html
標籤：其他