directory

  • Three features of the CSS
    • Cascading sex
      • Features that
      • The principle of
      • DEMO
    • inheritance
      • The advantages and disadvantages
      • Which styles can be inherited?
      • DEMO
        • The HTML code
        • CSS code
    • priority
      • CSS Specificity (Weight Specificity)
      • Calculation rules
      • conclusion
      • The interview bible
      • DEMO
        • The style of a particular tag needs to be overridden with styles
        • The interview questions a
        • The interview questions 2
        • Interview question 3 (The same weight, cascade is useful)
        • Max cover width – the width
        • Min-width overwrites max-width. If the maximum value is smaller than the minimum value, which value should prevail?

Three features of the CSS

Cascading sex

CSS(Cascading Style Sheets) is also known as a Cascading Style sheet, so this first feature is Cascading.

One definition of cascading is style conflict. Because that’s what cascading is all about.

Style conflict: refers to a situation where a label specifies the same style and value. In general, if there is a style conflict, the last one in the writing order will prevail.

The principle of

The principle behind this feature is related to how browsers render:

When you open a web page, you download the document content, load the header style resources, and then render the DOM content from top to bottom and from outside to inside.

So at run time, the style above is executed first, and the style elements below will stack the style above.

DEMO

Here’s a small example:

A div to add this style to the head tag

<style>
  div{
    width: 300px;
    height: 150px;
    background-color: red;
    background-color: blueviolet;
    color:pink;
    color:#fff;
    font-size: 30px;
    font-size: 20px;
    text-align: center;
    text-align: right;
  }
  div{
    color:yellow;
  }
</style>
Copy the code

And then what’s going to be displayed?

If what is shown here is not very clear, then the F12 review element has a look:

Conclusion: Both within the same div and within different div, later styles overlay previous ones, so this is how CSS is layered.

inheritance

Inheritance means that when you write a CSS style sheet, the child tag inherits some styles from the parent tag. Some styles are inheritable. To set an inheritable property, you simply apply it to the parent element.

The advantages and disadvantages

advantages disadvantages
Inheritance simplifies code and reduces itcssStyle complexity. If inherited styles are heavily used for all elements of a web page, it can be difficult to determine where they came from.

Which styles can be inherited?

Not all CSS properties can be inherited. You can use inheritance for styles common to web pages, such as fonts and text properties. For example, font, size, color, line spacing, and so on can be set uniformly in the body element and then affect all text in the document through inheritance. Some attributes are not inheritable: borders, margins, inner margins, backgrounds, positioning, element height attributes.

Inheritable (fonts, text attributes, etc.) uninheritable
Color, font-start, text-start, line-start, white-space Border, margin, inside margin, background, positioning, height
floating

Let’s try it out. Let’s make the first line a big pot:

DEMO

The HTML code
<div class="father">Ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha ha<p>Ha ha</p>
  <span>Hee hee</span>
  <div class="son">Hey hey hey hey hey hey hey hey hey hey hey black hey hey<p>Oh ~</p></div>
</div>
Copy the code
CSS code
.father{
  width: 300px;
  height: 200px;
  font-size: 20px;
  font-weight: 700;
  text-align: right;
  text-decoration: underline;
  line-height: 20px;
  background-color: green;
  color:greenyellow;
  margin: 5px;
  padding: 5px;
  position: relative;
}
.son{
  width: 90%;
  background-color: darkorange;
  position: absolute;
  bottom: 0;
  left: 0;
  color:#fff;
}
Copy the code

What is the effect?

Analysis:

Use F12 to look at the innermost

element, where the

color attribute is inherited from the father.son

Font size\font-weight\text-align\line-height\white-space

You can see that the following inherited elements are darker in color, and the uninherited elements are grayed out

priority

When defining CSS styles, it is common for two or more rules to be applied to the same element, and priority issues arise.

CSS Specificity (Weight Specificity)

About CSS weights, we need a set of calculation formula to calculate, this is the CSS feature.

The element Contribution value
Inheritance, *, 0，0，0，0
Each tag 0，0，0，1
Class, pseudo class 0，0，1，0
ID 0，1，0，0
Inline style 1，0，0，0
! important infinity
Height, max-width Overwrite width, height Greater than infinity
Min – height, min – width Greater than max-height, max-width

Calculation rules

  1. We’ll do it if we find something that contributescumulative, such as:
    • Div ul li --> 0,0,0,3
    • Nav ul li --> 0,0,1,2
    • A: hover - > 0,0,1,1
    • The nav - > 0,0,1,1 a
    • #nav p ---> 0,1,0,1
  2. The carry of the digits is 256, and there is no carry unless:

    0,0,5 + 0,0,0,5 = 0,0,0,10Rather than0,0,1,0, sono10adivCan catch up with a class selector, but256adivNot necessarily.
  3. Weights do not inherit, so it does not matter how high the parent’s weight is
  4. If you have! importantSo whatever you add up doesn’t work no matter how high
  5. If you havemax-height/max-widththen! importantIt doesn’t work. If you have bothmin-height/min-widthandmax-height/max-width, thenmax-height/max-widthIt doesn’t work.

conclusion

Height /min-width > max-height/max-width >! Important > Inline Style > ID selector > Class selector, property selector, Pseudo-element and pseudo-class selector > Element selector > General selector > Inherited Style

  1. Use! Important declare the rule;

  2. A declaration embedded in the style attribute of an HTML element;

  3. The ID selector rule is used

  4. Rules for class selectors, attribute selectors, pseudo-elements, and pseudo-class selectors are used

  5. Rules for element selectors have been used

  6. A rule that contains only one generic selector

  7. Styles inherited from the parent element have the lowest priority

The interview bible

  1. First find the innermost box that affects the text
  2. And then calculate the weights
  3. If the weights are the same, look at the cascade

DEMO

The style of a particular tag needs to be overridden with styles
  1. tobodySpecify the style,aThe labels andhThe label doesn’t change
<! -- -- > CSS code
<style>
  body{
    font-size: 20px;
  }
</style>

<! - HTML code - >
<body>
  <div>Normal text</div>
  <div>Normal text</div>
  <div>Normal text</div>
  <p>Normal text</p>
  <p>Normal text</p>
  <p>Normal text</p>
  <p>Normal text</p>
  <a href="#">Connect the text</a>
  <a href="#">Connect the text</a>
  <a href="#">Connect the text</a>
  <h1>The name of the title</h1>
  <h1>The name of the title</h1>
  <h1>The name of the title</h1>
</body>
Copy the code

Effect:

Because the A tag and the H tag are special tags, each has its own style, to change, should be defined in their element to layer the style of the element.

body{
  font-size: 20px;
}
a{
  color: # 000;
  text-decoration: none;
  font-size: 20px;
}
h1{
  font-size: 20px;
  font-weight: 400;
}
Copy the code

Effect:

The interview questions a
<div id="father" class="c1">
  <p id="son" class="c2">What color is this line of text?</p>
</div>

<style type="text/css">
  #father #son{  / * 0,2,0,0 * /
    color:blue;
  }
  
  #father p.c2{  / * 0,1,1,1 * /
    color:black;
  }
  
  div.c1 p.c2{  / * 0,0,2,2 * /
    color:red;
  } 
  
  #father{  / * 0,0,0,0 * /
    color:green! important;
  }
</style>

<! -- Font color is blue -->
Copy the code
The interview questions 2
<style type="text/css">
  #father{  / * 0,1,0,0 * /
    color:red;
  }
  
  p{  / * 0,0,0,0 * /
    color:blue;
  }
</style>

<div id="father">
  <p>What is the font color?</p>
</div>

<! -- Font color is blue -->
Copy the code
Interview question 3 (The same weight, cascade is useful)
<div id="box1" class="c1">
  <div id="box2" class="c2">
    <div id="box3" class="c3">The text</div>
  </div>
</div>

<style type="text/css">
  .c1 .c2 div{  / * 0,0,2,1 * /
    color:blue;
  }
  
  div #box3{  / * 0,1,0,1 * /
    color:green;
  }
  
  #box1 div{  / * 0,1,0,1 * /
    color:yellow;
  }
</style>

<! -- Font color is yellow -->
Copy the code
Max cover width – the width
div{
  width: 480px! important;
  height: 300px;
  background-color: blueviolet;
  max-width: 200px;
}

<div></div>
Copy the code

Min-width overwrites max-width. If the maximum value is smaller than the minimum value, which value should prevail?
div{
  max-width: 300px! important;
  height: 300px;
  background-color: blueviolet;
  min-width: 500px;
}

<div></div>
Copy the code

Version1.0 — 2018/5/15, summary of the three major features of CSS for the first time

© burning_ rhyme groups