进击 of python

Front-end nature of learning --CSS

On the CSS that there are some very important properties: inheritance, as well as stacked particularity

That this section will be expanded ... Based on these three properties ...

Succession

In some versions of CSS is an inheritance, what is it inherited?

The official said, is a kind of inheritance rules, he allowed only applied to a specific style elements of html tags, and apply it to future generations element

If your father is a double-fold, your mother is double-fold, then you are on your eyelid inherited his father's eyelid

That we actually get the code applied?

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>继承性</title>
  <style type="text/css">
    div{
      color: red;
    }
  </style>
</head>
<body>
  <div>
    百因<span>必</span>有果,你的<span>报应</span>就是我！
  </div>
</body>
</html>

You will find not only the color used in a div tag on, also used in a div tag all child elements with text

But not all properties can be inherited, like a common color, font family, text- series can be inherited

And some inheritance, such as border: 1px solid green, can not be inherited

If you give a div set border:1px solid green;you will find that, div strip is solid border line

But the text contains sub-elements span of did not even play a role

The applications are also very common, such as when we go to website design, website unified font color is red, the font size is 16px, then we can make good use of CSS inheritance to achieve this effect:

body{
    color:gray;
    font-size:14px;
}

Laminating properties

Before we learn so much selectors know the club adopted the principle of proximity to handle CSS styles

What if more than one style but also how to determine and divide it?

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title></title>
    <style type="text/css">
        p {
            color: red;
        }

        #wrap {
            color: green;
        }

        .box {
            color: yellow;
        }
    </style>
</head>
<body>
<p class='box' id="wrap">
    猜猜我是什么颜色
</p>
</body>
</html>

what! It is green! Why do? This would explain the weight, the weight of high priority will be displayed

CSS rules right values:

Direct that may not be very clear, we can use an example to study:

<div class='wrap1' id='box1'>
    <div class="wrap2" id="box2">
        <p class='active'>MJJ</p>
    </div>
</div>

p{color:gray;}/*权值为1*/
div div p{color:yellow;}/*权值为1+1+1=3*/
.active{color:red;}/*权值10*/
div .active{color:black;}/*权值为11*/
div div .active{color:blue;}/*权值为12*/
.wrap #box2 .active{color:purple;}/*权值为120*/
#box1 #box2 .active{color:green;}/*权值为210*/

It can be seen, in fact, for which weights are calculated, first of all it does not carry, for the selectors to use nothing more than a few of our number,

Number of Number of selectors (in order, and then a first class id, then an element), for example:

/*权值为 1  1  1*/
#box1 .wrap2 div{
    color:red;
}

Note: inherited properties also have the right value, but its weight is very low, and some documents presented it is only 0.1, it can be understood as the minimum value of the right to inheritance.

Particularity

This part, not a last resort, do not use! Because it destroys the rules of inheritance!

We do website code, some special circumstances require certain style set to the highest authority, how do?

We know that weight is 1000 inline styles, relatively large, then we can use! Important to solve

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>!important的使用</title>
  <style type="text/css">
    div{
      color:green !important;
    }
  </style>
</head>
<body>
  <div id="box" style="color:red;">
    <span>么么哒</span>
  </div>
</body>
</html>

Note:! Important to write in front of the semicolon

You will find the text turned green! but! Yes! Make! use! imporrtant is a bad habit

It should be avoided because it severely damaged the stylesheet inherent weight comparison rules , making debugging becomes more difficult bug

As with the two conflicting! Important rule action with the same label, so it has the maximum priority will be adopted

When using

The first
- On your site has a site-wide design styles css file
- At the same time you or your partner wrote some poor little inline style
The second
```
#box p { color: blue; } 
p.awesome { color: red; }
```
How can I make the text color to red? In this case, if you do not! Important. The first rule is always greater than the second rule

***** *****

Learning the front end (XI): CSS properties