CSS know how much (3)--style source and cascading rules

Original: CSS know how much (3)--style source and cascading rules

The previous section, "CSS know how much (2)-the idea of learning CSS" There are a few people message that the idea is very good, continue to look forward to, and received 9 praise, I am still more gratified. A friend who has not seen it suggests first to look at the previous section.

This section begins to practice the idea of the previous section!

1. The concept of "cascading"

css--Cascading Style sheets, what does "cascade" mean? Cascading is the process by which a browser overlays multiple style sources and ultimately determines the results. To give a simple example:

There are two styles from the source, the first is the referenced css1.css, and the second is the style that you wrote in the style. "Cascade" is an overlay process that can be represented by:

The above uses a simple example to illustrate the cascade process, the image of the experience.

cascading is CSS of the core mechanism , understand it in the most economical way to write the most easily modified CSS, so that the document appearance in the design requirements, but also leave some room for the user, so that they need to change the document display, such as adjusting the font size. --excerpt from the CSS Design guide

2. Style source

As mentioned above, CSS has the concept of "cascading" because there are multiple style sources. In fact, CSS style source has 5, developers can only touch the back of 3.

　　

First, the browser default style sheet

When you do not set any style for HTML, displayed in the browser, the B tag will show bold, p has vertical margin, H1 font size is one times larger than p ... What is this for?

Because the browser comes with a default style, if the HTML does not have a style set for the label, the browser will display it in its own style. However, the default browser style is the lowest, and once the label style has been set elsewhere, the default browser style will be flushed out.

Note that the default styles for different browsers are not the same in some places. For example, when we write CSS, we will first set the * {margin:0; padding:0;}, why is this? This is because of a browser compatibility issue. Altogether, all make 0, so that each browser is unified.

Here we first put the default style code, our next section is dedicated to the default style, there are many interesting places.

1 html, Address,blockquote,body, DD, DIV,DL, DT, fieldset, Form,frame, FRAMESET,H1, H2, H3, H4,h5, H6, Noframes,ol, P, u L, Center,dir, HR, menu, pre{Display:Block}/*The list element above is displayed by default in a block, not displayed in the inline element, which is for the HTML4 version, and some elements are discarded in XHTML1*/2 Li{Display:List-item}/*The default appears as a list*/3 Head{Display:None}/*not displayed by default*/4 Table{Display:Table}/*The default is table display*/5 TR{Display:Table-row}/*Default to table row display*/6 thead{Display:Table-header-group}/*group display by default for table headers*/7 tbody{Display:Table-row-group}/*group display by default for table rows*/8 tfoot{Display:Table-footer-group}/*default to group display at bottom of table*/9 Col{Display:Table-column}/*The default is the table column display*/Ten Colgroup{Display:Table-column-group}/*group display by default for table columns*/ One td, Th{Display:Table-cell; }/*The default is cell display*/ A caption{Display:table-caption}/*default to table header display*/ - th{Font-weight:Bolder;text-align:Center}/*The default is the table title display, rendering bold Center State*/ - caption{text-align:Center}/*The default is the table title display, which renders the center state*/ the Body{margin:8px;Line-height:1.12} - H1{font-size:2em;margin:. 67em 0} - H2{font-size:1.5em;margin:. 75em 0} - H3{font-size:1.17em;margin:. 83em 0} + h4, P, BLOCKQUOTE, UL, fieldset, form, OL, DL, dir, menu{margin:1.12em 0} - h5{font-size:. 83em;margin:1.5em 0} + h6{font-size:. 75em;margin:1.67em 0} A H1, H2, H3, H4, H5, H6, B,strong{Font-weight:Bolder} at blockquote{Margin-left:40px;Margin-right:40px} - I, cite, Em,var, address{Font-style:Italic} - Pre, TT, code, KBD, Samp{font-family:monospace} - Pre{White-space:Pre} - button, textarea, input, object, select{Display:Inline-block; } - Big{font-size:1.17em} in Small, sub, sup{font-size:. 83em} - Sub{vertical-align:Sub}/*define sub Elements default to subscript display*/ to sup{vertical-align:Super}/*define sub elements default to superscript display*/ + Table{border-spacing:2px; } - thead, tbody, TFOOT{vertical-align:Middle}/*define header, principal table, table pin element default to vertical alignment*/ the td, Th{vertical-align:Inherit}/*define cells, column headings default to vertical to Zimmer think inheritance*/ * s, strike, Del{text-decoration:Line-through}/*defining these elements defaults to strikethrough display*/ $ HR{Border:1px inset}/*defines a 3D concave edge effect with a split line default of 1px wide*/Panax Notoginseng OL, UL, dir, menu, DD{Margin-left:40px} - ol{List-style-type:decimal} the ol UL, ul OL, UL ul, ol ol{Margin-top:0;Margin-bottom:0} + u, INS{text-decoration:Underline} A Br:before{content:"A"}/*defines the pseudo-object content style for wrapped elements*/ the : Before,: after{White-space:Pre-line}/*default style for defining pseudo-object space characters*/ + Center{text-align:Center} - ABBR, acronym{font-variant:Small-caps;letter-spacing:0.1em} $ : Link,: Visited{text-decoration:Underline} $ : Focus{Outline:Thin dotted invert} -  /*Begin bidirectionality settings ( don't change)*/ - bdo[dir= "ltr"]{direction:Ltr;Unicode-bidi:Bidi-override}/*defines a BDO element the default text read-write display order when its property is dir= "ltr"*/ the bdo[dir= "RTL"]{direction:RTL;Unicode-bidi:Bidi-override}/*defines a BDO element the default text read-write display order when its property is Dir= "RTL"*/ - *[dir= "ltr"]{direction:Ltr;Unicode-bidi:Embed}/*defines the default text read-write display order for any element when its property is dir= "ltr"*/Wuyi *[dir= "RTL"]{direction:RTL;Unicode-bidi:Embed}/*defines the default text read-write display order for any element when its property is Dir= "RTL"*/ the @media Print{/*define the default plot style for headings and lists*/ - H1 {Page-break-before: always} Wu H1, H2, H3, H4, H5, H6{Page-break-after:Avoid} - UL, OL, DL{Page-break-before:Avoid} About }

Browser Default Style

Second, the user style sheet

In some news sites, you often see a shortcut menu that lets you set the font size, such as the settings in Sohu News.

These are for some visually impaired people to see, anyway I was useless, I also have visual impairment, but I was through the myopia mirror to solve.

In fact, the browser also has such settings, such as the Chrome browser, we can set the font size and font.

After the user has set the font and size, they will overwrite the default browser style.

the third,<link> referenced css file

Reference CSS file, everyone should be more familiar with.

Style code written in the fourth,<style>

<style> writing styles are also familiar.

the style code written in <a style= ' >

The label style property is written in a style, and it's all used.

The following three kinds of programs are more commonly used in our development, there is not much to say, do not know the friends need to fill the basic knowledge.

3. Cascading rules

Because the styles come from different sources, when the browser loads the style, it needs to calculate the final style value in order to show the correct interface effect-the browser will generate the final style values in both overlay and overlay ways.

Here is an example:

For example, two styles from different sources, the first style is set to Font-weight, the second one is not, the browser will overlay it together, that is, the browser will be fragmented into a whole . The first style color:red, the second style color:blue, the browser will let the latter cover the former , the end result is color:blue.

The overriding default rule is that the latter overrides the former, but another special case-!important.

Such as. Although Color:blue was later, it did not reside because the former color:red followed!important. It's like getting a imperial sword, having the highest executive power, other people giving way, or the Buddha blocking the Buddha.

4. Summarize

This article mainly explains the 5 sources of CSS, as well as the browser overlay style of the process and methods, which is the most basic knowledge of learning CSS. The next section will show you what the browser default style looks like, and what can we learn from it? There is a lot of fun stuff, please look forward to!

-------------------------------------------------------------------------------------------------------------

Please follow my tutorials: " from design to model"" deep understanding of JavaScript prototype and closure series " "Microsoft petshop4.0 Source Interpretation Video" "Json2.js Source Interpretation video"

Also welcome to my open source project-Wangeditor, a simple and easy-to-use web Rich Text editor

-------------------------------------------------------------------------------------------------------------

CSS know how much (3)--style source and cascading rules