Mastering CSS: Advanced Web Standard Solutions (second Edition) first reading notes

2.1 Commonly used selectors

1. Type selector p {color:black;}

2. Descendant selector blockquote p {padding-left:2em;}

3. ID Selector #intro {font-weight:bold;}

4. Class selector . date-posted {color: #cccccc;}

5. Pseudo-Class a: link {color:blue;}

6. Universal Selector * {padding:0;}

7. Sub-selector #nav>li {padding-left:20px;}

8. Neighboring sibling selector h1+p{Font-size:1.4em;}

An adjacent sibling selector can be used to locate an element after an element under the same parent element;

9. Property selector

You can find elements based on whether a property exists: Arconym[title] {border-bottom:1px dotted #999;}

You can also find the element based on the value of the property: A[rel= "nofollow"] {padding-right:20px;}

If there are multiple property values, you can do this: a[rel~= "co-worker"] {padding-left:20px;}

2.3.3 Cascade and Particularity

(1) Order of importance of stacking

• The user style marked with!important.
• The author style marked with!important.
• Author style.
• User style.
• The style applied by the browser/user agent.

(2) The particularity of the rule is calculated.

The particularity of the selector is divided into 4 constituent classes: A, B, C and D;

• If the style is inline, then a=1.
• b equals the total number of ID selectors.
• C equals the number of classes, pseudo-classes, and attribute selectors.
• D equals the number of type selectors and pseudo-element selectors.

If the specificity of the two rules is the same, then the rule after the definition takes precedence.

2.3.4 Inheritance

Any style that is applied directly to an element overrides the inherited style. This is because the nature of the inherited style is empty.

Firebug is a handy Firefox add-on that you can use to examine individual elements to find out where their style originated.

2.4.1 Applying styles to code

1. Structure of the design code

• Generic Style (@group general styles)
• Auxiliary styles (@group helper styles)
• Page structure (@group page structure)
• Page component (@group page components)
• Overlay (@group Overrides)

2. Self-prompting

Gotcha: use @todo to indicate that something needs to be modified, repaired, or reviewed later. Use @bugfix to indicate a problem with your code or a specific browser. Use @workaround to express the imperfect expedient.

3.1 Box Model Overview

1. When an element is contained within another element (assuming that there are no padding or borders separating the margins), their top and/or bottom margins also overlap.

2. Suppose there is an empty element, he has an outer margin, but no border or inner margin. In this case, the top margin and the bottom margin come together and they overlap.

3. The importance of margin overlays: Take a typical text page consisting of several paragraphs as an example. The space above the first paragraph is equal to the top margin of the paragraph. If there is no margin overlay, the space between the paragraphs is twice times the top of the page. If an outer margin overlay occurs, the top and bottom margins between the paragraphs are superimposed, so that the distances are consistent.

4. Margin overlays occur only in the vertical margins of the block box in the normal document stream. The margin between the inline box, the float box, or the absolute position box does not overlap.

Mastering CSS: Advanced Web Standard Solutions (second Edition) first reading notes