1, CSS introduced three kinds of ways how to use?
CSS is a way to introduce three kinds:
1: inline styles, but also called inline style, the line between style, inline styles. It is set by the style element in the style attribute tag
< Div > < the p- style = "Color: Green" > I am a paragraph </ the p- > </ div >
2: inscribed style, also known as embedded, is focused on the CSS code written in the head of the head tag of the HTML document, and is defined by style label
< Style type = "text / css" > / * write our css code * / span { Color : Yellow ; } </ style >
3: External style, external style two types, one is the link type, the second category is introduced into the formula (see the second specific codes). Chain is all-in style in one or more of the external style sheet file as .CSS extension by an external style sheet file link tag linked to the HTML document, and the formula is introduced by all styles in one or more external style sheet file with the extension .CSS, the external style sheet file is linked to the HTML document via CSS in import;
<link rel="stylesheet" href="./index.css">
<style type="text/css"> @import url('./index.css'); </style>
2, CSS @import and link the difference between the way of introduction?
the difference:
1. affiliation difference
@import is provided by CSS grammar rules, only the role of import style sheets; Link is provided by HTML tags can not only load CSS files, you can also define RSS, rel connection attributes.
2. The loading sequence difference
page is loaded, Link label is simultaneously incorporated CSS loaded; @import introduced CSS loaded after the page is loaded.
3. Compatibility difference is only CSS2.1 syntax, it can only be identified in + IE5; Link tag as an HTML element, there are no compatibility problems. @import
4.DOM difference controllability
can be operated by the JS DOM, inserted link tag change the style; Since the DOM document is based on the method can not be used @import way insertion style.
The weight difference between the link style introduced significant weight in @import introduced style
3, explanation reflux redraw and rearrange?
Recirculation / rearrangement: a part of the render tree must be updated and the size of the node has changed, it will trigger the rearrangement operation. Each page will have at least once during the initialization rearrangement of operation;
Redraw: some of the nodes need to be updated, but does not change its shape, it will trigger redraw operation;
4, priority basis selector?
CSS basis has selected class selector, id selector, the selector tab. The priority is: id selector> class selector> tag selector; on the basis on the basis of selectors, each page has a default style, and inheritance and wildcards will be used in exceptional circumstances, it is a specific priority : id selector> class selector> tag selector> wildcard> inheritance> default style; (special attention is: the highest priority if the latter selector if written on the highest priority important is the selector, and can not be! modify;)
）
5, level selector to use?
Descendant selector: Use spaces indicate descendant selectors. As the name suggests, the offspring of the parent element (including the son, grandson, great-grandson)
.container p{
color: red;
}
.container .item p{
color: yellow;
}
Progeny Selector: Use > represents progeny selector. For example div> p, merely represents the current div element selected progeny (does not include grandchildren ....) element p.
.container>p{
color: yellowgreen;
}
Adjacent sibling selector: to find that next class property to the following c1 label tag
.c1+p{
color:green;
}
General sibling selectors: looking for a class attribute to the following labels c1 label
.c1~p{
color: green;
}
6, select the weights calculated?
Since the CSS has two main features: inheritance and laminating properties;
Inherited: set some properties to the parent, the child inherits the parent's property, which is inherited;
Layered: the major labels right to overwrite the weight of a small label, whose weight is greater, the browser will show who attributes; so in order to prioritize certain style you must use weights to display the attributes:
Inline style 1000> id selector 100> class selector 10> tag selector 1> 0 Inherited Styles