This is the third day of my participation in the November Gwen Challenge. Check out the details: the last Gwen Challenge 2021

Three features of the CSS 🎨

Three features of CSS are required for front-end development

The concepts and rules of the three features are explained below

The lamination of the pull frame

CSS’s full name is cascading style sheets, so you can see the importance of cascading.

  1. Features: Layering is primarily used to resolve style conflicts, i.e., drawdowns.

Style conflict: an element with the same attribute added by multiple selectors will be rendered with the attribute value at the bottom

  1. How it works: This is related to how browsers render

When opening a web page, the browser will first download the document (i.e., our document), and the head resources that load the document will load the DOM and style in turn, so the styles below will overwrite the styles above in the same weight case. Case Time:

<div>cascading</div>
<style>
    div{
      width: 300px;
      height: 150px;
      background-color: red;
      background-color: rgb(43.159.226);
      color:pink;
      color:#fff;
    }
    div{
      color:rgb(236.240.236);
    }
  </style>
Copy the code

The background color of div is RGB (43, 159, 226). Color: RGB (236, 240, 236);

The weight of fame and fortune

Since cascade is a rule for equal weights, the appearance of weights directly breaks the cascade rule that whoever has the most weight will be rendered

  1. Concept: CSS weight refers to the priority of styles. If two or more styles are applied to an element, the style with the highest weight will apply to the element. If the weight is the same, the style written later will override the style written earlier

  2. Rules:

    Name 0，0，0，0
    The element 0，0，0，1
    Class/pseudo class 0，0，1，0
    ID 0，1，0，0
    The inline type 1，0，0，0
    ! import infinity

  3. Case Time:

<p id="txt" class="txt">The weight of CSS</p>
<style>
    #txt{
        color: black;
    }
    p .txt{
        color: blue;
    }
</style>
Copy the code

As shown in the image, the color of the paragraph is black at the end, whereas the color should be blue by cascading. This is because the ID selector is heavily weighted, so it is rendered black.

The inheritance of his father’s business

HTML tags have parent-child relationships, so there are rules for inheriting their elements from their fathers

  1. Concept: Child tags inherit styles that parent tags can inherit
  2. Inheritable properties: fonts, text, element visibility, and so on
  3. Non-inheritable properties: Box model properties, Beijing properties, location properties, Outline, display
  4. Case of time
    <div class="father">father<p class="son">son</p>
    </div>
    <style>
        .father {
            width: 300px;
            height: 200px;
            font-size: 20px;
            font-weight: 700;
            text-align: right;
            background-color: rgb(0.98.128);
            color: rgb(241.243.239);
            position: relative;
        }

        .son {
            width: 50%;
            height: 90%;
            background-color: rgb(0.183.255);
            position: absolute;
            bottom: 0;
            left: 0;
            color: #fff;
        }
    </style>
Copy the code

The child tag inherits the font color, text, and location of the parent element.

PS:

  1. According to literature, the weight of the element inherited from the child tag is 0.1, that is, we can overwrite the inherited attribute with the element selector
  2. Why inheritance? Inheritance reduces code redundancy and CSS complexity
  3. The proper use of CSS three features, in the development of a large number of style bugs, reduce bald.