Three major characteristics of CSS
1. Cascading
1. Style conflicts, follow the principle of proximity
2. Styles do not conflict, they will not overlap, they will overlap
1.1. Style conflicts, follow the principle of proximity Examples:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>我的第一个页面</title>
<style>
div {
padding: 0;
}
.div2 {
width: 50px;
padding: 10px;
}
.div2 {
width: 100px;
border: 2px solid red;
}
</style>
</head>
<body>
<div class="div2">我是内容</div>
</body>
</html>
The final display effect of the page
Conflict of styles, follow the principle of proximity, so the value of width is 100px; the value of padding is 10px
1.2. Styles do not conflict, will not be stacked, and examples will be stacked
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>我的第一个页面</title>
<style>
div {
color: pink;
}
.div2 {
padding: 10px;
}
.div2 {
width: 100px;
border: 2px solid red;
}
</style>
</head>
<body>
<div class="div2">我是内容</div>
</body>
</html>
Styles do not overlap. All styles for this element will be superimposed and added to this element. If there is a style that overlaps, it will also be replaced according to the style conflict and follow the principle of proximity .
2. Inheritance – child elements will inherit the style of the parent element
1. The a tag will not inherit the text color of the parent element, and the h1-h6 title tag will not inherit the font size of the parent element.
2. The font family attribute
font-family font family attribute
font-size font size attribute
font-weight text bold attribute
Font -style Text style attribute
Line-height Line height attribute
3. Text series attribute
text-indent Text indent attribute
text-align Text horizontal alignment attribute
text-decoration Text decoration line attribute
color Text color attribute
4. List-beginning in the list Attributes
3. Priority
The greater the weight of the selector, the higher the priority. When the weight is the same, who will be displayed later.
Basic selector weight:
wildcard selector 0, label selector 1, class selector 10, id selector 100
composite selection Calculation method of the weight of the selector: the weight accumulation of all single accounts that make up the composite selector
.box div{} 10+1 =11
#box .box p{} 100+10+1=111
1. The priority of the interline style is higher than that of the id selector;
2. The weight of inheriting CCTV is 0; the style set in the child element will override the inherited style;
3. Define it in the style! Important, with priority over inline styles;