1st, [subject: What is CSS? What its can make? ]
CSS is one kind is called the cascading style sheet (stylesheet) technology. Also some people call stack-up cascading style sheet (Cascading Stylesheet).
Manufactures in the main page uses the CSS technology, may effectively realizes a more precise control to other layouts, typefaces, colors, backgrounds and effects page.
So long as makes some simple revisions to the corresponding code, may change the same page's different part, or number of pages different homepage outward appearance and form.
Its function may achieve:
(1) may use on almost all browsers.
(2) before must through the function that picture transformation realizes, so long as now may realize with CSS with ease, thus downloads the page quickly.
(3) causes the typeface of page becomes more attractive, is easier to arrange, makes the page truly pleasant.
(4) you may control the layout of page with ease.
(5) you may also renew many homepages style forms, did not need to renew again page after page. You may in all homepage styles the stand use a CSS document to carry on the control, so long as revises in this CSS document the corresponding line, then all pages of entire stand will have the change along with it.
Thinks that before has not used CSS, how we do control the typeface that the typeface the color and size as well as use? We use the HTML label to realize generally, for example realizes right one simply “HELLO”, its code is:
< b > < font face= " Arial” size= " 3” color= " #FFFF66” > HELLO < /font > < /b >
Very difficult to imagine, if needs to change the typeface in a page frequently the color size, the HTML code's length that finally produces extremely fat cannot certainly withstand.
To be honest, CSS to simplify such work birth, certainly its function definitely is not such simple.
CSS through to page structure thought of style control, control entire page's style.
The type order for samples places in the page, through the explanation execution of browser, is the complete text, any understood that the HTML people may grasp, very easy. The reproduction to very old browser, the page will not have the page chaotic phenomenon.
2nd, [subject: Type order for samples example]
Below is a type order for samples example:
===================================================================================
你好!朋友，欢迎光临chinahtml.com的教学区。
Hello，everybody，welcome in chinahtml.com !
===================================================================================
Has the above effect HTML source code is this:
The following is quotes the fragment:
〈html〉
〈head〉
〈style type="text/css"〉
〈!--
h2 { font-family: "宋体"; font-size: 12pt; font-style: italic; color: #FF0033; background-color: #FFCCCC}
h1 { font-family: "Arial"; font-size: 12pt; color: #66FF66}
--〉
〈/style〉
〈/head〉
〈body〉
〈h2〉你好!朋友，欢迎光临chinahtml.com的教学区。〈/h2〉
〈h1〉Hello，everybody，welcome in chinahtml.com !〈/h1〉
〈/body〉
〈/html〉
The surface gives some simple explanations:
(1) has defined the writing style in yellow CSS syntax rules like this, the label < h2 >…< /h2 > within character is “Song typeface”, “size 12pt”, the character is” incline ", color “#ff0033”, character background color “#ffcccc”. Likewise, label < h1 >…< /h1 > between writing typeface “arial”, size “12pt”, color “#66ff66”.
(2) in the above CSS form, h1 and h2 are called “choice object”, font-size as well as color and so on were called “attribute”, attribute following being called “parameter”.
(3) may control any HTML label's style through css. For example < td >, < p >, < body >, < table >, < tr >, < th > and so on. So long as in HTML < head > in area < style type= " text/css” > and < /style > between assigns to correspond label's style (typeface, color, font size) then, uses " a Song typeface 9 pounds typeface " to be possible very attractive, many stations with is the 9pt typefaces.
(4) some labels' styles that if you need to define are the same, may do this, writes them in the same place, this may reduce the code:
H1, P, TD {font-family: arial; font-size: 12pt}
The above code indicated: All located at < H1 >, < P > and < TD > the character in label will use the Arial typeface, 12pt to demonstrate.
(5) is also effective regarding the javascripts output's result through the CSS establishment's style. You may have a look at the example of some show date and current time script of javascripts script area, to effectively control the output the character size, I have used CSS.
(6) attention: Some quite old browser does not support the model monoglottism law, < style type= " text/css” >…< /style > within text demonstrates, if avoids the occurrence of this situation, is best to join <! -- With -->. This point and javascripts are the same.
(7) in < style type= " text/css” > TYPE= " text/css” the function was the hypothesis uses what MIME type, the browser in carrying out here knew, since like this, has not supported the CSS browser to be possible to neglect the cascading style sheet.
3rd, [subject: Uses the different CSS Mode of writing-css enters step]
The CSS mode of writing may realize with the following several methods:
(1) uses Embed (to insert style list) typesetting style:
Soon CSS code straight insertion each page's HTML < head > area, sees like previous. Use < style >…< /style > label. For example:
The following is quotes the fragment:
< Style type= " text/css” >
<! --
h2 {font-family: “Song typeface”; font-size: 12pt; font-style: italic; color: #FF0033; background-color: #FFCCCC}
h1 {font-family: “Arial”; font-size: 12pt; color: #66FF66}
-->
< /style >
(2) use “link (exterior style list) typesetting style”:
Namely you may control with a style single document many pages' typesetting styles. This exterior style single document (an extension is the css text document) will establish all your homepages the rule. If you change in style Shan Wenjian some line, all page styles will use this css file definition the page along with it change. If your stand document are many, then this function was convenient.
In area uses < LINK > label (to pay attention in < HEAD >: No longer was < style > label):
The following is quotes the fragment:
< HTML >
< HEAD >
< LINK REL=stylesheet HREF= " http://yoursute.com/my.css” TYPE= " text/css” >
< /HEAD >
< Body >
< h2 > hello! The friends, welcome to visit the chinahtml.com teaching area. < /h2 >
< h1 > Hello, everybody, welcome in chinahtml.com! < /h1 >
< /body >
< /html >
★☆★ explained: the way of css document (http://...) expressed or uses the relative way with absolute way (e.g.:. /csscode/my.css) expressed.
Then alone produces a css document, is called my.css (to give a name casually). The document content is as follows:
h2 {font-family: “Song typeface”; font-size: 12pt; font-style: italic; color: #FF0033; background-color: #FFCCCC}
h1 {font-family: “Arial”; font-size: 12pt; color: #66FF66}
So long as passes to this CSS document in the table of contents that the server assigns then.
(3) use “inline (in line style list) typesetting style”:
the inline style uses the HTML label only " style " attribute, its characteristic is “defines some label's type order for samples style”, only has an effect to the label that defines, does not have an effect to the entire page. For example:
< P style= " font-size: 14pt; color: #99ff99; font-family: Song typeface” > stack-up order for samples < /p >
Effect that saw:
Stack-up order for samples
Uses in the line the style list, you must assign the style rule for each line, when the next line of browsers will use the default establishment of page. But: This way is actually sometimes effective.
(4) (exterior type order for samples that use “import inputs)”--Is suitable for the IE browser.
The following is quotes the fragment:
< Html >
< Head >
< Style type= " text/css” >
<! --
@import url(my.css);
-->
< /style >
< /head >
< Body >
< h3 > exterior type order for samples of input < /h3 >
< /body >
< /html >
And the content of my.css style single document is as follows:
h3 {font-family: “Song typeface”; font-size: 12pt color: green}
The execution result is as follows:
Exterior type order for samples of input
4th, [subject: Some questions that needs specifically to explain--CSS enters step]
★☆★CSS succession question:
Looked at the following example to know, if defined
h1 {color:yellow}
Namely, told the browser the writing in label all < B > to demonstrate with the blue color.
But, if uses the following HTML grammar:
< h1 > stack-up < I > formula order for samples < /I > example < /h1 >
Has not established the style regarding < I > label, but because < I > located at < H1 >, therefore it will inherit < H1 > the style of hypothesis, by yellow demonstration.
Stack-up order for samples example
★☆★CSS priority question:
If mixes to use three kinds of type orders for samples, priority: inline > embed > link type order for samples.
The style single priority that ★☆★ assigns specially is bigger than the model that inherits, the example:
The following is quotes the fragment:
BODY {color: green}
P {color: yellow}
The special regulation is: < P > writing demonstrated with the yellow, but it also inherited < BODY > green stipulation. But has assigned specially the model priority is bigger than the model that inherits, therefore < P > within writing demonstrated with the yellow.
Reference Link
CSS层叠样式表最佳入门教程 , Retrieved 16 February 2011.
http://w3c.web600.net/html/XHTMLCSS/XHTMLCSSA/20080602/614.html
No comments:
Post a Comment