Handwriting style sheet: CSS Grammar full Raiders (1)

css| Strategy | style Sheet | grammar

Discard the visual editor to write CSS

If you have an example of CSS, you might ask, what am I going to do in DW to have CSS like the following?
. test1,.test2 {color:purple!important;color:blue;}

Handwriting, in the DW also has code area, and is intelligent hint, equal to half manual write, I have been using TopStyle, in addition to Chinese support is not very good outside, all aspects are good. In C # of that time, found Vs.net write CSS is also very good, is a bit big.

Why can't I use a visual editor to write CSS? The reason is very simple, handwritten css can write a lot of visual editor cannot write style, just start handwriting may not be accustomed to, but with smart tips, write is not more slowly than the visual editor point.

Want to learn CSS to learn to accept the abuse of various browsers (of course, to do some specific as long as only for IE users of the site exception), the first step in the abuse of the browser is to discard the visual editor. If you can't give up, you can only see a lot of things back.

Various types of selectors
Why is there a different selector? The individual believes that the master is modular and reusable.
The following element represents elements.

Wildcard Selector
*
Like a lot of languages * represent all, generally start I will do the following at the beginning of a CSS: This definition is to define the margin and padding of all elements as 0. Example
* {margin:0; padding:0;}

* can also be used as follows: all the elements under the DIV element are defined.
div * {color: #94439F;}

This definition should be applied with care, as the following definition is used. Example
UL * {font-size:120%;}
So be careful when you use the wildcard selector to define a percentage.

Type selector
Element
This is the most commonly used bar, said element may not know, see below. Example
p {color:blue;}

Of course sometimes HTML is also a special, custom element is one of them, example
ROTUI\:AOAO {color: #123456;}

Include selector also someone called derivation selector
Element1 Element2
Just like the salient div * is, of course, it can be as follows. Example
P Strong {Color:blue}

Child Object Selector
element > element
What's the difference between this and the inclusion selector? He is only valid for his child-level elements (IE6 is not yet supported). Example
p > span {color:red;}

adjacent selector
Element + Element
The definition of the next element, only the adjacent element (IE6 is not yet supported). Example
P + p {border:1px red solid;}

ID Selector
#IDName
Element#idname
The ID name of the HTML directly defined. Example
#csser {border:1px #000 solid}

class Selector
. className
Element.classname
What is the difference between the two, the previous one is to define all class= "ClassName". Example
. rotui {border:1px #000 solid;}

Property Selector
ELEMENT[ATTR]
Element[attr=value]
Element[attr~=value]
Element[attr|=value]
ELEMENT[ATTR] Select a E1 example with a attr attribute
Input[value] {border:1px #000 solid;}

Element[attr=value] Select an example of an element with a attr property and an attribute value equal to value
Input[type=password] {border:1px red solid;}

Element[attr~=value] Selects a list of words with a attr property and a space-delimited value, one of which equals the element of value. The value here cannot contain a space example
Input[value~= "Aoao"] {color:red;}

Element[attr|=value] Selects a list of words with the attr attribute and the property value as a hyphen (-) and must be an element starting with value. Example
Input[value|= "Rotui"] {color:blue;}

PS: The above IE browser can not see.

Selector grouping
Element1,element2
By applying the same definition to multiple selectors, you can separate the selectors by a comma and be a group. More than just elements, the eight-class selector mentioned above can be applied to the following. Example
TH,TD {color::1px red solid;}

Pseudo class Selector
Element:link
element:visited
Element:hover
Element:active
Element:focus
Element:first-child
Element:lang
Of course there is also a definition of print: First:left:right, which is only introduced on the screen. Example : link,:visited,:hover,:active These four classes are common, because IE's a element supports him. Example : The Focus object appears (ie does not support) when it becomes input focused (the object's onfocus event occurs). Example

Input:focus {color:blue;}
: First-child contains the definition of the first element inside the selector. Example Div p:first-child {background-color: #ccc;}
: lang () defines the elements of the language that are already specified. Example P:lang (en) {color:blue;}

Pseudo Object
Element:first-letter
Element:first-line
Element:before
Element:after
: first-letter first word definition, very good understanding, is the first word. Example
. letter:first-letter {font-size:300%}

: First-line first line definition, first row has effect, line break (<br/>) can also split the first row. Example. Letter:first-line {color:red}

: Before and: After before the element (before) with the content attribute added. Example
Em:before {content: "I come from CSS";}
Em:after {content: "I also come out of CSS";}

Priority of selectors
So many selectors, how do I know which priority is high? The previous article only talked about important raise priority, now say the priority of the selector, old9 Brother's blog has an article about, here to quote, or steal the lazy first is the CSS rules of the specificity (particularity), CSS2.1 a set of specificity calculation, with a four-digit string (CSS2 is three-bit) to indicate that the final specificity higher rules the more special, in the priority to determine the more advantages. The figures for the specific calculations of specificity in various cases are added to the following general rules:

Each ID selector (#someid), plus 0,1,0,0. Each class selector (. SomeClass), each property selector (shaped like [attr= "], and so on), each pseudo class (like: hover) plus 0,0,1,0
Each element or pseudo element (: firstchild), plus 0,0,0,1 Other selectors include the global selector *, plus 0,0,0,0. The equivalent of no, but this is also a kind of specificity, later will explain. Let's give some examples:

h1 {color:red;}
/* Only one ordinary element is added, the result is 0,0,0,1 */
Body h1 {Color:green}
/* Two ordinary element addition, the result is 0,0,0,2 */
--the latter wins
 
H2.grape {color:purple;}
/* A normal element, a class selector, and the result is 0,0,1,1*/
H2 {color:silver;}
/* A common element, the result is 0,0,0,1 */
-The former WINS
&NBSP
HTML > Body table tr[id= "totals"] td ul > li {color:maroon;}
/* 7 Common Elements, one property selector, two other selectors, resulting in 0,0,1,7 */
Li#answer {Color:navy}
/* An ID selector, a normal selector, and the result is 0,1,0,1 */
--the latter wins
There are some other rules besides specificity

The style priority within the text is 1,0,0,0, so it is always higher than the external definition. In this case the style refers to the style as <div style= "color:red" >blah</div>, while the external definition refers to the rules defined by <link> or <style> tags.
There are rules of!important declarations above all.
If the!important declares a conflict, the precedence is compared.
If priority is the same, it is determined in the order in which they appear in the source code, later on.
The style obtained by inheritance has no specificity calculation, and it is lower than all other rules (such as the rules defined by the global selector *).
With regard to external styles that are loaded via @import, because @import must appear before all other rule definitions (if not, browsers should ignore them), the general precedence conflict is downwind in accordance with the catch-up principle.
Here it is necessary to mention that Ie,ie is a @import that can identify location errors, but wherever @import is considered to be located before all other rule definitions, this may cause some misunderstanding.
It seems that an article is not finished, the attribute to stay in the next chapter (this year more mixed page traffic is not easy)!