Css core basics and css core summaries

Css core basics and css core summaries

Today, this article integrates the previous css supplementary knowledge.

I think the previous knowledge about css is a bit messy. Sort it out today.

Stacked Style Sheets

What does stack mean? Why is this word so important that it appears in its name.

Stack can be easily resolved as a conflict solution.

What is conflict?

That is, the same style is added after the same element is selected using different selectors.

Priority rules can be expressed

Intra-row style> ID style> category style> markup style

In complex pages, a certain element may obtain styles from many places, such as a website's

The overall level title is set to green, and blue is required for a special column, so you need

Overwrite general style settings. On a very simple page, it is not difficult to implement such special requirements,

However, if the website structure is complex, the Code may become very messy and cannot be found.

Which rule does the style of an element come from. Therefore, we must fully understand the "cascade" principle in css.

 

Calculating the priority of a conflicting style is a complicated process, not just the preceding simple priority rule.

It can be fully described. However, the reader can consider the principle that "the more special the style is, the higher the priority ".

 

And how to locate this is special and more special, please refer to the following content.

Special features:

Each selector has a special attribute. If an element has two or more conflicting attribute declarations, the special attribute prevails.

The particularity of a selector is determined by its component. The special value is expressed as four parts, for example, 0, 0, 0.

The specific particularity of a selector is determined as follows:

For each ID attribute value given in the selector, add one: 0, 0, 0 in the second part.

For each class attribute value, attribute selection, or pseudo-class given in the selector, add:, to the third part.

For each element and pseudo element given in the selector, add one: 0, 0, 0, and 1 in the fourth part.

The combination operator and the wildcard selector have no contribution to the particularity.

However, the wildcard selector features zero Specificity: 0, 0, 0.

None are connected to zero.

Example:

H1 {color: red;} is 0, 0, 1

P em {color: purple} is 0, 0, 0, 2

. Grape {color: purple} is 0, 0, 1, 0

P. B e. a {color: red;} 0, 2, 2

# Aa {color: red;} 0, 0, 0

Div # aa * [href] {color: red;} 0, 1, 1

The first 0 is for the in-row style, because the higher the front, the higher the priority. If the positions of non-zero numbers are the same, compare the size of the preceding number first,

Then compare the values to the values until the numbers are not relative. The priority is higher when the values are big.

So the above general priority rule is:

Intra-row style> ID style> category style> markup style

They can just represent each part, and they are also four.

 

Important statement! Important indicates the voice you need. It has the highest priority, but it must be placed at the end of the declared value.

Inheritance:

The uniqueness of inheritance does not even exist, that is, there is no particularity;

This zero specificity is very different from zero specificity, that is, the selector with zero specificity can add styles for future generations,

Although inheritance also adds styles to future generations, there are limitations that only inherited elements can be added to descendant elements, such as color, the attributes of margin, padding, and border are not added to future generations.

If the weight is the same, it is compared in order. The higher the order, the higher the priority.

Higher particularity is stronger than lower particularity

So the pseudo-class Declaration Order: link-visited-hover-active

LVHA)

When: visited is behind them, because of the same weight, it will look at their order, and: visited will win after them.

This problem does not occur if you do not write unified attributes. So pay attention to the same attribute !!!!

 

The above is the core foundation of css.

 

Expand this knowledge:

Contained block:

The block width is the parent width of the contained element, and the parent width is

Margin-left + border-left + padding-left + width + padding-right + border-right + margin-right = horizontal width of included Blocks

 

You can set auto for width, margin-left, and margin-right;

When both margin-left and margin-right are set to auto, they are centered, but this is conditional:

1. This element must be a block-level element and is not out of the Document Stream.

2. This element has a set width.

If you set margin-top and margin-bottom to auto, auto is not vertically centered. If you set them to auto, they will only be equal to zero.

The seven attributes of the total horizontal length are the attributes of the formula above. Their sum cannot be greater than the total horizontal length, and the margin can be negative. This rule is not violated in calculation.

Note: Only margin can be negative.

When the value of margin is negative, you can try it yourself. This attribute seems foul.