CSS Best start tutorials

It is hard to imagine that the resulting HTML code must be bloated in length if the color of the font is frequently replaced on a page. To tell the truth, CSS is to simplify the birth of such a job, of course, its function is not so simple.

1, the theme: What is CSS? What can it do?
CSS is a technique called style sheet (stylesheet). Some people call it cascading style sheets (cascading Stylesheet).
CSS technology is used on the homepage to effectively control the layout, font, color, background and other effects of the page.
As long as you make some simple changes to the corresponding code, you can change the different parts of the same page, or the appearance and format of pages with different pages. Its function can be achieved by:
(1) can be used in almost all browsers.
(2) Some of the previous features must be implemented through the image conversion, now as long as the use of CSS can be easily implemented, so faster to download the page.
(3) Make the font of the page become more beautiful, easier to arrange, so that the page really pleasing.
(4) You can easily control the layout of the page.
(5) You can update the style of many web pages at the same time without having to update one page after another. You can use a CSS file to control all of the page styles on the site, as long as you modify the corresponding line in the CSS file, then all pages of the entire site will change. Think about how we control the color and size of the font and the font used before using CSS? We typically use HTML tags to implement, such as implementing a simple "HELLO" on the right, and its code is:
〈b〉〈font face= "Arial" size= "3" color= "#FFFF66" 〉hello〈/font〉〈/b〉
It is hard to imagine that the resulting HTML code must be bloated in length if the color of the font is frequently replaced on a page.
To tell the truth, CSS is to simplify the birth of such a job, of course, its function is not so simple.
CSS is to control the style of the whole page through the idea of the style control of the page structure.
Model sheets on the page, through the interpretation of the browser to execute, is complete text, anyone who knows HTML can master, very easy. Reproduction on some very old browsers, the page does not create a page clutter phenomenon.
2. Theme: Example of Model list
Here is an example of a model list:
===================================================================================
Hello, friends, welcome to Arisisi.
Hello,everybody,welcome in alixixi.com!
=================================================================================== the HTML source code that produces the above effect is this:
The following is a reference fragment:
〈html〉
〈head〉
〈style type= "Text/css"
〈!--
H2 {font-family: "Song body"; font-size:12pt font-style:italic; color: #FF0033; Background-color: #FFCCCC}
H1 {font-family: "Arial"; font-size:12pt; color: #66FF66}
--〉
〈/style〉
〈/head〉
〈body〉
〈h2〉 Hello, friends, welcome to Arisisi. 〈/h2〉
〈h1〉hello,everybody,welcome in alixixi.com!〈/h1〉
〈/body〉
〈/html〉
Here are some simple instructions:
(1) in the yellow CSS grammar rules that define the style of the text, the label 〈h2〉...〈/h2〉 between the characters "song", "Size 12pt", the character is "tilt", The Color "#ff0033", character background color "#ffcccc". Similarly, the label 〈h1〉...〈/h1〉 between the text font "Arial", the Size "12pt", The Color "#66ff66".
(2) in the CSS format above, H1 and H2 are called "Select Objects", font-size and color are called "attributes", which are called "parameters" after the properties.
(3) Through CSS can control the style of any HTML tag. such as 〈td〉,〈p〉,〈body〉,〈table〉,〈tr〉,〈th〉 and so on. As long as in the HTML 〈head〉 area of the 〈style type= "Text/css" and 〈/style〉 between the corresponding label style (font, color, font size) can be used, "Arial 9-pound font" can be very good-looking ah, many stations are used 9pt fonts.
(4) If you need to define some of the same style of tags, you can do so, write them together, so that you can reduce the code:
H1, P, td{font-family:arial; font-size:12pt}
The code above indicates that all characters located within the 〈h1〉, 〈p〉, and 〈td〉 tags will be displayed in Arial font, 12pt.
(5) The style that is set through CSS is also effective for the result of javascripts output. You can look at some examples of the JavaScripts script area showing dates and current time scripts, and I use CSS to effectively control the character size of the output.
(6) Note: Some older browsers do not support model single syntax, will be 〈style type= "Text/css" 〉...〈/style〉 between the text display, to avoid this situation, it is best to join the "!--and--〉." This is the same thing as javascripts.
(7) in 〈style type= "Text/css" in the role of Type= "Text/css" is to set what type of mime, the browser is executed here to know, so that browsers do not support CSS can ignore style sheets.
3, the theme: the use of different CSS writing-css advanced
CSS can be written in the following ways:
(1) Use embed (embedded style sheet) layout style:
The CSS code will be inserted directly into the 〈head〉 area of the HTML of each page, as seen in the previous section. Use the 〈style〉...〈/style〉 label. For example:
The following is a reference fragment:
〈style type= "Text/css"
〈!--
H2 {font-family: "Song body"; font-size:12pt font-style:italic; color: #FF0033; Background-color: #FFCCCC}
H1 {font-family: "Arial"; font-size:12pt; color: #66FF66}
--〉
〈/style〉
(2) Use "link (external style sheet) layout style":
That is, you can control the layout style of multiple pages with a single style document. This external style sheet file (a text file with an extension of CSS) will set the rules for all your pages. If you change a line in a style sheet file, all page styles that are defined with this CSS file will change. If you have a lot of site files, this feature is very convenient.
Use the 〈link〉 label in the 〈head〉 area (note: No longer the 〈style〉 tag):
The following is a reference fragment:
〈html〉
〈head〉
〈link rel=stylesheet href= "http://yoursute.com/my.css" type= "Text/css"
〈/head〉
〈body〉
〈h2〉 Hello! friends, Welcome to Chinahtml.com's teaching area. 〈/h2〉
〈h1〉hello,everybody,welcome in chinahtml.com!〈/h1〉
〈/body〉
〈/html〉
★☆★ Description: CSS file path with absolute path (http://...) Represents or uses a relative path (for example:.. /CSSCODE/MY.CSS) means all can.
Then create a separate CSS file, called MY.CSS (random name). The contents of the document are as follows:
H2 {font-family: "Song body"; font-size:12pt font-style:italic; color: #FF0033; Background-color: #FFCCCC}
H1 {font-family: "Arial"; font-size:12pt; color: #66FF66}
Just upload the CSS file to the server-specified directory.
(3) Use "Inline (inline style sheet) layout style":
The inline style sheet uses the HTML tag's "style" attribute, which is characterized by "defining the style of a label", which works only on the defined label, not on the entire page. For example:
〈p style= "FONT-SIZE:14PT; Color: #99ff99; Font-family: Song body "" Cascade style sheet 〈/p〉
See the effect:
Cascading Style Sheets
With inline style sheets, you must specify a style rule for each line, or the browser will use the default settings for the page on the next line. But: sometimes this is a very effective way.
(4) Use "Import (input external model sheet)"--for IE browser.
The following is a reference fragment:
〈html〉
〈head〉
〈style type= "Text/css"
〈!--
@import URL (my.css);
--〉
〈/style〉
〈/head〉
〈body〉
〈h3〉 input external style sheet 〈/h3〉
〈/body〉
〈/html〉
The contents of the MY.CSS style sheet file are as follows:
h3 {font-family: "Song body"; font-size:12pt Color:green}
The results of the implementation are as follows:
External style sheet for input
4. Topics: Some issues that need to be specifically explained--css advanced
★☆★css Question of inheritance:
Look at the example below to see if the definition
h1 {Color:yellow}
That is, tell the browser to display the text in all 〈b〉 labels in blue.
However, if you use the following HTML syntax:
〈h1〉 cascading 〈i〉 Model Sheet 〈/i〉 Example 〈/h1〉
The 〈i〉 tag does not have a style set, but because 〈i〉 is in 〈h1〉, it inherits the 〈h1〉 set style and is also displayed in yellow.
Examples of cascading model sheets
Priority issues for ★☆★CSS:
If three types of model sheets are mixed, priority: Inline〉embed〉link model sheets.
★☆★ specially specified style sheets have precedence greater than the inherited style, for example:
The following is a reference fragment:
Body {Color:green}
P {Color:yellow}