"CSS Mastery" Reading notes

I also turned over the previous reading notes, and then relive the forgotten details. The work of the last year, because there is the reconstruction of the post of the students responsible for the preparation of CSS, although still contact, but after all, do not write for a long time, some things still forget, such as the weight of the selection of the calculation details. This note is only part of the story, the latter part of the quick browsing, not to write notes.

1. Element naming rules

• The class name or ID is named by what the element is, not by the appearance of the element.
• The class name or ID is all lowercase, separated by a hyphen symbol or perhaps an underscore. (. Add-class)

2. Pseudo-Class

• Link pseudo-Class:: Link and: Visited
• Dynamic For example:: Hover:active:focus
• • Settings: Fouces and: Hover the same style, so that using the keyboard to access the element (more often a tag), the performance is the same as moving the mouse over the element effect
  • Use:
  • • <a></a> use: Link,:visited,:hover,:active,:focus makes the link more effective;: Link refers to the non-access <a> label before
    • • Note that the pseudo-class is used in:<a>, you must pay attention to the order of pseudo-class styles, otherwise it will cause the following pseudo-class to overwrite the case of the preceding pseudo-class
      • Order: a:link,a:visited,a:hover,a:focus,a:active (Memory: LVHFA)
      • Habits: LV generally set together, HFA set together
      • Eg:a:link,a:visited{text-decoration:none;} a:hover,a:focus,a:active{text-decoration:underline;}
    • Table row <tr></tr> use: hover pseudo-class, hover the line color of the whole row
    • The Submit button is used on: active
    • Use in the input box: Focus to get rich results when you enter
• Note: IE7 and the following versions do not support the use of pseudo-class selectors on elements other than links!

3. Selector

• Common selectors:
• • Type (element, simple) Selector
  • ID Selector
  • Class Selector
  • Pseudo class
• Universal selector: * (wildcard)
• Advanced selector:
• • Sub-selector, neighboring sibling selector
  • • Sub-selection (IE7 above): #nav >li Select the Direct (first) Li child element under #nav, and note the difference from the Universal selector (#nav Li)
    • Note the difference between this selector and the descendant selector, which is the child selector (children selector) refers only to its immediate descendants , or you can understand the first descendant that acts on the child element. The descendant selector is an element that acts on all child descendants. The descendant selector is selected by a space, and the child selector is selected by >
    • Neighboring sibling selection (locates an element after an element under the same parent element): H2+p Select a P element immediately following the H2
  • Property selector (IE6 not supported)
  • • eg: [id= "header"]{color:red;} (refers to all elements that have the Id=header attribute or div[title]{} (refers to a DIV element that has the title attribute selected)
• Pseudo element selector:
• • First-letter, First-line, before, after
  • Eg:p: first-letter{color:red;} div:after{content: "A";}

4. Stacking and particularity

1. Cascade: Processing the same element may have one or more style rules, cascading to each rule to assign an important degree.
2. Particularity: The order of the special decision rules of selectors.
   1. The rule is to assign a numeric value to each selector, and then add the value of each selector to the rule to calculate the value to apply the style according to the rule of the highest value
   2. The rule specificity of a style inline attribute is always higher than the other selector (because its specificity is 1,0,0,0)
   3. Two rules are the same, and the rules that define them first
   4. Selector particularity is divided into 4 grades A,b,c,d (particularity: a,b,c,d)
      1. Style inline, a=1;
      2. b equals the total number of ID selectors
      3. C equals the number of classes, pseudo-classes, and attribute selectors
      4. D equals the number of type selectors and pseudo-element selectors
         • Eg:style= "" Particularity: 1,0,0,0 if the cardinality is 10, then the specificity is 1000
         • Eg: #wrapper #content particularity: 0,2,0,0 If the cardinality is 10, then the specificity is 200
      5. In the final calculation of the specificity of the rule, the cardinality is not specified by default to a specific value, if the number of selectors is not many, you can specify the cardinality is for 10来 calculation

5. Inheritance

1. Concept: Descendants of an element that applies a style inherit some of the properties of the style. such as font size and color
2. Note and Cascade apart
3. At the same time, inherited style particularity is empty! Styles that apply directly to an element always override inherited styles.