Summary of CSS Core Foundation

Today this is the integration of the previous CSS complementary knowledge.

I think the previous knowledge about CSS to add a bit messy, today tidy up.

Cascading Style Sheets

What do you mean by cascading? Why the word is so important that it appears in its name.

Cascading can be simply understood as conflicting solutions.

What is a conflict?

It is the same element that adds the same style after using a different selector selection.

Priority rules can be expressed as

Inline styles >id styles > Category styles > Marker styles

In complex pages, it is possible for an element to get a style from many places, such as a site's

Level headings are set to use green, and blue is required for a particular column, which is required in the column

To override a common style setting. In a very simple page, such a special requirement will not be difficult to implement.

But if the structure of the site is complex, it is entirely possible that the code becomes very confusing and may not be found

The case where the style of an element comes from which rule. Therefore, it is necessary to fully understand the "cascade" principle in CSS.

Calculating the precedence of conflicting styles is a complex process, not just the simple precedence rule above

can be fully described. But the reader can put a big principle, that is, "the more special the style, the higher the priority."

And how this is special and the more special how to position, please continue to look at the following content.

Particularity:

Each selector has a particularity, and if an element has two or more conflicting attribute declarations, the specificity of the high wins.

The specificity of the selector is determined by the components of the selector itself. The specific value is expressed as 4 parts, such as: 0,0,0,0.

The specific particularity of a selector is determined as follows:

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

For each class property value, attribute selection, or pseudo-class given in the selector, add one to the third section: 0,0,1,0.

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

The binding and the wildcard selector have no contribution to the particularity.

But the special of the wildcard selector is zero: that is 0,0,0,0.

The binding is not even 0.

Example:

h1{color:red;} for 0,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,0,2,2

#aa {color:red;} 0,1,0,0

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

The first 0 is prepared for the inline style, because the higher the precedence, the higher the priority, and the size of the previous number if it is not the 0 digit position.

And then down the comparison, until the number is not relative, take the number of the higher priority.

That's why the above-mentioned approximate precedence rule is:

Inline styles >id styles > Category styles > Marker styles

They are just as good as each part of the representative, is also four, a seat.

The important statement!important that the declaration you want is the highest priority, but it is placed at the end of the declared value.

Inherited:

The particularity of inheritance has not even 0, that is, there is no particularity;

This 0 particularity has 0 with no particularity has very big difference, is 0 special selector can add the style for the descendant,

Although inheritance also has a style for the descendants, but there are restrictions, only the ability to inherit the descendants of the elements, such as color, and margin, padding and border these attributes are not added to the descendants.

The same weight, in order to compare, the lower the order of his priority is highest.

Higher specificity is stronger than lower particularity

So the pseudo-class declaration order: link-visited-hover-active

LVHA (abbreviated)

When: visited after them, because of the same weight, so will look at their order, and: visited after they will win.

This problem does not occur when the unified attribute is not written. So when writing the same attribute, be careful!!!!

The above is the core base of CSS.

In addition to expanding this knowledge:

Include Block:

A width of the containing block is the width of the parent of the contained element, and the parent is the width of the individual elements contained within it.

Margin-left + border-left + padding-left + width + padding-right + border-right + margin-right= contains block horizontal width

width, margin-left, margin-right can set auto;

While Margin-left and margin-right set auto at the same time, they will be centered, but this is conditional:

1. This element must be a block-level element and not out of the document flow

2, this element has a set width

Margin-top, Margin-bottom Set auto is not centered vertically, set to auto, they will only equal zero.

The seven properties of the total horizontal length, these seven properties are the properties of the formula above, their sum cannot be greater than the total length of the horizontal, and the margin can be negative, in the calculation also does not violate this rule.

Note: Only margin can be negative.

As for the negative margin of what kind of, to experience, this property looks quite foul.

Above this CSS core basic summary (recommended) is a small part of the whole content to share to everyone, hope to give you a reference, but also hope that we support topic.alibabacloud.com.