(A) presentation on CSS
Selector { Attribute 1 : Property Value ; Attribute 2 : Property Value ; ...... } // Example P { text-indent : 2em ; / * first line indent 2 characters * / Line-height : 180 [% ; / * row 180% higher height of the text * / }
(C) selector: "tag selector", "ID Selector", "class selector", "composite Selector", "pseudo-class selector"
3.1: Label Selector - scope: the entire document will spend all the style definition of the label, suitable for use as the underlying basis of style, such as the definition of fonts, background colors, hyperlinks and other styles throughout the document.
3.1.1: single label
1 body { 2 font : 16px / 1 "in the Microsoft YaHei" ; / * the entire document font to 16px, line height for the text 1 times Microsoft elegant black. * / . 3 Color : # 333 ; / * text color * / . 4 background-Color : #eee ; / * background color * / 5 }
3.1.2: multiple labels
. 1 h1 of, H2 { 2 Color : # the F60 ; . 3 text-align = left : Center ; / * centers the text horizontally * / . 4 Letter-spacing : 2px ; / * space between text * / }
3.1.3: a plurality of tags separated by spaces, represents a containment relationship, i.e. nested, nested behind the label in front of the tag.
ps: to note here is to explain the label to the left from the right explanation, such as the following p span, first find the span, to find p inside the span, the selector should be nested as possible.
. 1 P span { 2 Color : # C03 ; . 3 font-size : 1.1em ; / * size of the text within a line of text is 1.1 times. * / }
3.2: ID selector -
id selector, unique. html object id is the name of a unique, id name can not be reused.
id selector to "#" at the beginning. The id name can only be used once.
Any labels have id and class attributes.
Such as adding the id = "main" properties for a div, to make a unique pattern for the div, you can be used #main {} style manner.
#main selector points id = "main" of the html object style applied to the object in the html above. The selector is equivalent to a hook.
1 #main{ 2 样式 3 } 4 5 <div id=”main”>…</div>
3.3, class selector
which represents a class in the program: class. Like attracts like, people in groups, with similar properties.
The syntax is based on the structure of class. "" Beginning, class style can be called by any need for its label, can be used many times, it can also be combined.
For example, several class defines the following styles:
ps:
In fact, the class can be seen as a lot of parts with specific functions, need a html what style can be achieved to maximize the effect of different combinations of class parts. The object is to use all html class style is called.
I feel like a child playing with building blocks game it ^ _ ^
Note: id and class name is your own definition, so be sure to follow the naming rules, can not start with a number, can only begin with a letter, can contain numbers and underscores. You can not use the keyword tag reserved. You can not use such as "# 2", ". Div", "# h1", ". 3a" format.
class is named best combination of attributes and attribute values to take the first letter or letters and numbers.
1 .bg1{ 2 background-color:#ccc; 3 } 4 .bg2{ 5 background-color:#eee; 6 } 7 .color1{ 8 color:#f99; 9 } 10 .color2{ 11 color:#666; 12 } 13 .f18{ 14 font-size:18px; 15 } 16 .f16 { . 17 font-size : 16px ; 18 is } . 19 .p20 { 20 is padding : 20px ; / * Padding * / 21 is } 22 is .m20 { 23 is margin : 20px ; / * margins * / 24 }
1 <h1 class="color1 f18"></h1> 2 <h2 class="color2 f16"></h2> 3 <div class="bg1 p20 m20"></div> 4 <div class="bg2 p20"></div>
3.4, composite selector
The mixture is generally id, class, tag selector.
This is typical, using an id selector style of following all of a label.
<div id="navlist"> <ul> <li><a href="#" id="current">HTML教程</a></li> <li><a href="#" class="css">CSS教程</a></li> <li><a href="#">jQuery教程</a></li> <li><a href="#">SEO教程</a></li> <li><a href="#">关于我</a></li> </ul> </div>
For example, now the id "navlist" li ul below below below a label all use the same style, the selector can be written:
. 1 #navlist A UL Li { 2 pattern 3 }
If you want a a label style is not the same, you can add a thought that an id attribute or class attribute, you can use the following selector:
. 1 #navlist A UL # Current Li { 2 style . 3 } . 4 #navlist UL Li a.css { . 5 pattern 6 }
There must be a space on the lower level nested relationship, and this is a class id and direct property is equivalent id = "current" and there is a class = "css" of a.
3.5, the pseudo-class selector -
Because IE6 which only supports a hyperlink pseudo-classes, which led to the CSS2 pseudo-class selectors to use less, use the most is a: hover pseudo-class selectors this.
What is a pseudo-class? In fact itself does not exist, the object will be triggered under certain conditions.
For example, a hyperlink to a total of four states: before the visit, hover, currently is clicked, the four visited pseudo-class results.
Hyperlinks four states, need to have a specific written order to take effect.
. 1 A: Link {} / * before accessing * / 2 A: visited {} / * visited * / . 3 A: hover {} / * mouseover * / . 4 A: Active {} / * this is clicked * /
Note, a: hover must be in a: After visited, a:: link and a active must be in a: hover after
reliable sequence is: l (link) ov (visited ) eh (hover) a (active) te, i.e. with like (love) and hate (hate) two words to sum up
But we generally do not define the four states, most of the sites need only hover (after) when the style is not the same to the other three states are the same. Therefore, this style can be defined as:
. 1 A { 2 Color : # 333 ; . 3 text-Decoration : none ; / * not underlined * / . 4 } . 5 A: hover { . 6 Color : # F30 ; . 7 text-Decoration : underline ; / * underlined * / 8 }
This blog borrowed - http://www.mrszhao.com/post/30.html