I. Overview
1.CSS stands for Cascading Style Sheets, translated into Chinese is "Cascading Style Sheets."
The so-called "cascade", by definition, style can accumulate layers,
For example page elements inherit the size of 12 pixels, a title can be set to 14 pixels overlay.
2.CSS birth of the world is to display graphic information services.
3. "document flow": "Flow" is actually a basic CSS layout and positioning mechanism in the world,
The so-called "flow", CSS is an invisible world "water" element arrangement guidance and positioning.
II. Terminology and concepts
1. properties: Property corresponds to the time we usually talk or written Chinese title for CSS.
For example, in the above schematic CSS code is the height and color properties.
.vocabulary { height: 99px; color: transparent; }
2. value: "value" mostly linked to digital. Here are some common types
• integer, such z-index: 1 1 belongs also belongs
• values, such as line-height: 1.5 of 1.5, it belongs.
• percentage, such as padding: 50% in 50% belong.
• length values, such as 99px.
• color value, such as # 999.
In addition, the type of a string value, the value of the position and the like. In CSS3 New World, also the angle value, the frequency value, time value, and other types
3. Keyword: keyword refers to the CSS which is very critical of the word, the word here refers specifically to the English word
CSS code example above is a typical keyword transparent,
And the usual solid, inherit are all keywords
Which inherit also called "Pan-key", the so-called pan-key, can be understood as "bus key" is "keyword all CSS properties can be used" means.
4. Variables: CSS variables can be called in the current relatively limited, CSS3 in currentColor is variable, very useful.
5. Length units:
CSS unit of time units (e.g., s, ms),
There angular units (e.g. deg, rad, etc.),
But the most common natural or length units (such as px, em, etc.).
Note that such Percent% 2% not later unit of length.
Again,% is not a unit of length!
Because 2% is a complete value, that is, as a whole, I think you must think 0.02 is the value, yes, 2% equally value.
6. Function symbols: the specified value (that is to be enclosed in brackets) as a function of
Primarily used to represent colors (RGBA and HSLA), the background picture address (URL), element attribute values, calculating (Calc) and transition effects,
The rgba (0,0,0, .5), url ( 'css-world.png'), attr ( 'href') and the scale (-1).
7. Property Value: All content attribute after the colon called unified property value.
For example, 1px solid rgb (0,0,0) can be referred to as a property value, which is the "value + + Function key character" composed of.
Attribute values can be made of a single content. For example, z-index: 1
8. Disclaimer: attribute name with the property value is declared
For example: color: transparent;
9. Declaration block: the block is declared curly braces ({}) wrapped in a series of statements
{ height: 99px; color: transparent; }
10. Rule or set of rules: a selector occurred, but also followed later declaration block,
Examples such as the beginning of this section, is a set of rules:
.vocabulary { height: 99px; color: transparent; }
11. Selector: Selects targeting element is used to something, for example, the above .vocabulary is a selector.
• Class selector: this selector refers to the beginning of the dot. "." Many elements can be applied with a class selector. "Class", born to be a public life.
• ID selector: "#" starts, the weight is quite high. General points to a unique element ID. However, in CSS, ID style does not appear to render only the first in a number of different elements, but the rain descends. But clearly this is not recommended.
• attribute selector: refers to a selector containing [] and the form [title] {}, [title = "css-world"] {}, [title ~ = "css-world"] {}, [title ^ = "cssworld"] {} and [title $ = "cssworld"] {} and the like.
• pseudo class selector: generally refers to the front of a colon (:) selector, such as: first-child or: lastChild like.
• pseudo-element selectors: There is a choice of two consecutive colons, such as :: first-line :: firstletter, :: before and :: after.
12. Selector relationship: Relationship selector means to select the selector element based on the relationship with other elements,
Common symbol spaces,>, -, +, etc. as well, these are very common selector.
• descendant selector: Select all in line with the rules of the descendant elements. Whitespace connection.
• neighboring descendant selectors: select only son of the elements in line with the rules, grandchildren, great-grandchildren elements ignored, also known as "child selector." > Connect. Apply to IE7 or later.
• Brothers Select: Select all in line with the current rules of the elements behind the siblings. ~ Connection. Apply to IE7 or later.
• adjacent sibling selector: just select the current element adjacent rules in line with that of siblings. + Connection. Apply to IE7 or later.
13. @ Rule: @ rules are defined by rules that start with the characters @,
Like @ media, @ font-face, @ page or @support, and so on.
14. Learn CSS world "undefined behavior"
When there is a browser and other browsers are not the same style of behavior or performance, the performance differences are not met browser bug,
The term describes a computer professional field should be "undefined behavior" (undefined behavior).
Taking into account the specification to achieve less than the minutiae, called "undefined behavior."
