Css:cascading style sheets (cascading style sheets)
css2.0 is now the version we teach (2013.11 months of teaching)css3.0 is the latest version recommend a Web site to learn CSS: Zen Garden (PS: Top excellent website) the
. DTD document type definition: This is a command for some low-level browsers to recognize the latest technology.eg:ie4.0 version, if you identify the latest HTML code, there is this (the HTML code above automatically generated this thing)the browser will automatically download this item to the website. Then you'll be able to identify the latest commands.
charset=utf-8: Writing this is to allow people abroad to see Chinese. and display Chinese,foreign browsers are available in English. So if this is not added, the English version is recognized. There will be garbled .... the role of CSS: (during the interview can also break a few words, so a few of the functions are still very necessary. )1, separating content and format2, very strong control of page layout ability3, do smaller, download faster, more secure pages4, many pages can be updated at the same time, faster and easier5. Allow different browsers to display the same interface with all the benefits of CSS, how does it
work? <style type= "Text/css" >Selector , selector {rule: value, ... .....}</style>
CSS Classification (left side, right is an example)
One, internal style sheet (valid for this page) 1.HTML selector : Features, selectors are HTML elements, benefits: simple. Insufficient: The effect of using this later HTML element will not return to the original. 2. Classselector: Rule:. xd{...} Use: < elements class= "xd" >xxxx</elements > Advantage: Want to use .... 3.ID Selector #xxx {} < elements id= "xxx" >----------------</elements >
and class difference: This can only be used once, but not the use of the same is true, just not standardized Because this is the unspoken rule. It's like we see people throw litter. We despise him. (Can't beat him)
|
1,html Selector <style type= "Text/css" > b {color: "Red"; font-size:50px} </style>
2,class Selector <b class= "XD" >xxxx</b>
3,id Selector <b id= "xxx" > sssssss</b> <p id= "xxx" >ssssss</b> That's not good. Because only one time can be used |
Two, inline style sheets (valid for individual elements) <p style= "rule: value; ..." >xxxxxxxxxxx</p>
|
|
Third, external style sheet (valid for all pages) Write that code in a *.css file. The only thing that's written into the file b {color: "Red"; font-size:50px} Other style type= "Text/css" and others do not add, also can not add How to use: <link rel= "stylesheet" href= "Xx.css"/>
|
<link rel= "stylesheet" href= "Xx.css"/> |
priority issues with style sheets (
nearest principle )
Type |
Size |
Color |
External style sheet |
50 |
Green |
Internal style sheet |
60 |
Red |
Inline style sheet |
20 |
Pink |
element
final size:20, Color:pink priority in-line > Internal > external ( Nearest principle ) =--------============================================================
Scenario selector: p b{size:12px;} This selector is only useful in this case .... <p><b>xxxxxxxxxxxxxxx</b></p><p><a><b>xxxxx</b></a></p> (
<p> contains it will play a role )
if only want to <p> the following level of can be used, but the following level two or multilevel can't use how to do? in fact, just add a
> this symbol can be
p>b{size:12px;} similarly:p. xd{}<p> <b class= "xd" ></b></p>------------------------------------------------------------. xd. xxd{}<p class= "xd" ><b class= "Xxd" ></b></p>------------------------------------------------------------#xd. xdx{}<p id= "xd" ><b class= "XDX" ></b></p> &NBSP;