1 progressive enhancement and graceful degradation
Progressive enhancement: build pages for the low version of the browser to ensure that the most basic functions, and achieve results in a better user experience, interaction and other improvements and best functionality for advanced browser.
Graceful degradation: beginning to build fully functional, then be compatible for low version of the browser.
Graceful degradation is complex from the beginning of the status quo and trying to reduce the supply of the user experience, and progressive enhancement is from a very basic, capable of functioning version, and continue to expand to meet the future needs of the environment. Downgrade (graceful degradation) means looking back; and progressive enhancement means looking ahead, my colleagues to ensure that the foundation is in the safe zone.
2 CSS3 selectors
2.1 Attribute selectors
a [title]
a [title = baidu] selected title property baidu
a [the href * = sina] the href comprising sina element
begins value (http) a [href ^ = http] href attribute value of a label
a [the href $ = com] href attribute of a tag at the end of the com
Note: If the selected value comprising, ".", ":" And other special characters, marks need comprising
2.2 the pseudo-class selector
2.2.1 Pseudo-based structure (pseudo-class position)
: Link,: visited,: hover,: Active;
UL: First select the first Child-ul ul: last-child check the last UL
Li: Child-Nth (. 3) Conditions: a third child of its parent element element and must be a label li
li: nth-last-child ( 3): antepenultimate element
2.2.2 empty pseudo-class
E: empty element does not select any child nodes, child nodes do not have any content (including spaces)
2.2.3 target pseudo-class
E: target binding anchor for use, in the current anchor elements will be selected
2.2.4 exclude pseudo-classes
E: not (selector) elements other than selector selector
2.2.5 UI state pseudo class selector
: enble
: disable
: the checked
:: Selection Set the style when the mouse is selected, to set the background and text color, you can not set other properties
2.3 the pseudo-element selector
E :: first-letter of the first word of the first line of
E :: first-line first line of text
E :: selection can change the selected text style
E :: befor and E :: after
":" And "::" pseudo-class distinction and difference is that the dummy elements
2.4 level selector
2.4.1 descendant selectors
(Offspring) descendant selectors (also called contains a selector) div p
(son) sub-element selectors div> the p-
(brothers) adjacent selectors div + p selected immediately after the div p tag EG: li + li
( brothers) universal selector div ~ p to select all the brothers behind the div tag p
2.5 Other selectors
p: only-child is an element of the parent element and only only one child
p: first-of-type is selected the same level in the same type of the first label
: last-of-type selected in the same level the same type of last label
: nth-of-type (n ) to select the same level of the same type in the n-th tag
: nth-last-of-type (n) to select the inverse of the same level of the same type in the n-th tag
: only-of-type select the type of the parent element only one label
: root select the document root element refers to the element at the top level in the document tree structure
3 private property
Private property prefix browser CSS3 is one way a browser manufacturers often use. It implies that the CSS property or rules have not yet become part of the W3C standards.
-wekit- Google -moz- Firefox -ms- IE browser European friends -o-
4 CSS3 new property
4.1 text shadow
Shadow-text: Red 10px 10px 10px 10px;
/ * horizontal offset vertical offset shadow color sharpness of the shadow size * /
Use commas to separate multiple shadows
Note: ambiguity can not be negative
4.2 Shadow Box
Shadow-Box: Pink the inset from 10px 10px 10px; / * the inset from the shadow set * /
4.3 English wrap
word-break: break-all (rough punctuation) / keep-all (the default value, the text will not wrap);
4.4 fillet
RADIUS-border / * . 1 values of the four corners of two values of the top left and bottom right, bottom right and bottom left three values of the top left, bottom right and bottom left, bottom right four values of the upper left, upper right, lower right, lower left (clockwise) single set border- (vertical) - (about) -radius * /
4.5 CSS3 color characteristics
rbga (255,255,255,0.1) a transparency in the range 0 to 1