"Personal Study Notes 13"
inherit
- Style inheritance, the style we set for an element will also be applied to the descendant elements.
- Inheritance occurs between successive generations of ancestors.
- The inherited design is to facilitate our development.
- Using inheritance, we can uniformly set some common styles to common ancestor elements. This only needs to be set once, so that all elements have this style.
- Note: Not all styles will be inherited, such as background and layout related, etc. These styles will not be inherited.
Selector weight
Style conflicts
When we select the same element through different selectors, and set different values for the same style, a style conflict occurs.
When a style conflict occurs, which style is applied is determined by the weight (priority) of the selector.
Selector weight
| Selector | priority |
|---|---|
| Inline style | 1,0,0,0 |
| id selector | 0,1,0,0 |
| Class and pseudo-class selector | 0,0,1,0 |
| Element selector | 0,0,0,1 |
| Wildcard selector | 0,0,0,0 |
| Inherited style | No priority |
- When comparing priorities, you need to add up the priorities of all selectors. Finally, the higher the priority, the more priority it will be displayed (group selector is but not calculated), and the accumulation of selectors will not exceed its maximum Order of magnitude, the class selector will not be higher than the id selector.
- If you add !important after a style, this style will get the highest priority, even surpassing the inline style. (Note: During development, use it with caution, it is not convenient to modify)
Pixels and percentages
Length unit:
- Pixel
The display is actually composed of small dots. The
pixel size of different screens is different. The smaller the pixel, the clearer the screen display effect.
Therefore, the same 200px display effect is different on different devices.
- percentage
You can also set the attribute value as a percentage relative to the attribute of its parent element.
Setting the percentage can make the child element follow the change of the parent element.
example:
<!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>
show result:
em and rem
These two are also units of length.
- in
The em is calculated relative to the font size of the element.
1em=1font-size
em will change according to the font size.
- rem
Rem is calculated relative to the font size of the root element.
Example 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>
Display the result:
Example 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>
show result:
RGB value
Color unit:
- You can directly use the color name to set various colors in CSS.
- For example: red, orange, yellow, blue, green, pink, etc.
- But it is very inconvenient to use color names directly in CSS.
RGB value:
- RGB is to mix different colors R red, G green, B blue through different concentrations of three colors
- The range of each color is between 0-255 (0%-100%).
- Syntax: RGB (red, green, blue)
RGBA ：
- It is to add an a to indicate opacity on the basis of RGA value.
- Four values are required, the first three are the same as rgb, and the fourth represents opacity.
- 1 means completely opaque 0 means completely transparent 0.5 means semi-transparent.
RGB value in hexadecimal
- Syntax: #red green blue
- Color density range 00-ff
- If the color is repeated with two
digits, it can be abbreviated #aabbcc abbreviated #abc
example:
<!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>
The results show that:
HSL value HSLA value
- H hue (0-360)
- S saturation, the density of the color 0%-100%
- L brightness, color brightness 0%-100%
Code:
<!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>
The explanation is as follows:
