Questions and answers: CSS cascading style sheet best start tutorial

css| Tutorials | Getting Started | style sheets

1, [topic: 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. [Subject: Example of Model list]

Here is an example of a model list:

==================================================================================================

Hello, friends, Welcome to the web Teaching network.

Hello,everybody,welcome in webjx.com!

==================================================================================================

The HTML source code that produces the above effect is this:

〈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 the web Teaching network. 〈/h2〉
〈h1〉hello,everybody,welcome in webjx.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, [theme: Using 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:

〈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):

〈html〉
〈head〉
〈link rel=stylesheet href= "http://yoursute.com/my.css" type= "Text/css"
〈/head〉
〈body〉
〈h2〉 Hello! Friends, Welcome to the web Teaching network. 〈/h2〉
〈h1〉hello,everybody,welcome in webjx.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.

〈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. [topic: Some problems needing special explanation--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:

Body {Color:green}
P {Color:yellow}

The special rule is: The text in the 〈p〉 is shown in yellow, but it also inherits the green regulation of 〈body〉. But the specially specified style has precedence over the inherited pattern, so the text within the 〈p〉 is shown in yellow.

★☆★netscape Communicator and IE 4.0 are not exactly the same understanding of CSS.

This means that not all CSS can be executed in two browsers with the same result. Therefore, it is best to use two kinds of browsers to detect.

5, [topic: About CSS in the class-class]

★☆★ first Look at a simple example: The following is a common button, the use of the "class" control of the font button is not a lot of beautiful? The font of a button that doesn't make a quot class "looks a little distorted?" This example uses a 9pt sized italicized word control.

This is a use of "class".

The mystery is this:

Define a class---classes first:

〈style type= "Text/css"
〈!--
. pt9 {font-family: "XXFarEastFont-Arial"; font-size:9pt}
--〉
〈/style〉

The name "class" Here is called "Pt9", preceded by a ".".

Then add class= "PT9" to the HTML, as follows:

〈form method= "POST" action= "..."
〈input type= "Submit" name= "submit" value= "Use the button of the class" class= "Pt9"
〈/form〉

Is it very simple?

★☆★ take a closer look--a label can define several "classes."

P.green {Color:green}
P.yellow {Color:yellow}
p.red {color:red}

In HTML, do this (as long as you reference the appropriate class):

〈p class= "Green" shows the character 〈/p〉
〈p class= "Yellow" yellow characters displayed 〈/p〉
〈p class= "Red" the characters shown in red 〈/p〉

The results shown are as follows:

Characters that are displayed in green and yellow

Characters displayed in yellow

Characters displayed in red

6, [theme: CSS font, font control]

★☆★ use CSS You can control the font of the page arbitrarily, compared to the HTML is simply easy to know how much.

CSS uses the "Font-size" property to control the font size.

CSS can be used in the units: points, pixels and other units.

★ Use points (point):

td {FONT-SIZE:9PT}

Tell the browser to display the 〈td〉 label characters in 9 points, this page uses 9pt font, I think "XXFarEastFont-+9pt" is a very beautiful choice. Points is a unit that determines the size of the text, and it works on all browsers and operating platforms.

★ Use pixels (pixel):

td {FONT-SIZE:9PX}

The disadvantage of using "pixel" is that the page display is unstable, the font is large and small, and the use of points is not the problem.

In addition, you can use the following units:

In (inches)

CM (cm)

MM (mm)

★☆★ Font Control

{font-family:arial} You can set only one font.

{Font-family:arial,helvetica,sans-serif} You can also set a variety of fonts, which will find the display in font order.

{font-family: the "Courier New"} font name includes more than 2 words, use quotes.

★☆★ Font Weight Control

{Font-weight:bold} font bold, you can also use: Extra-light,light,demi-light,medium,demi-bold,bold,extra-bold and other parameters.

★☆★ Font Style control

{font-style:italic} to set font skew, you can use Normal,italic.

7, [Theme: The special effects of CSS]

Often have a friend asked: How to make a hyperlink text does not appear underline, how to make the mouse move to the hyperlink on the effect of discoloration? In fact, these traditional methods can not be done. The use of CSS control can be very easy to do, and the page code is not bloated.

★ First Look at the hyperlinks without underlining the example:

Example 1: This connection can go to the bottom of the page, but there is no underline.

How did this happen? Add the following CSS syntax control between 〈head〉 and 〈/head〉:

〈style type= "Text/css"
〈!--
a:link {Text-decoration:none}
a:active {Text-decoration:none}
a:visited {Text-decoration:none}
--〉
〈/style〉

This way, when the browser is executing, it knows:

A:link refers to a normal, not visited link

A:active refers to the link being clicked

A:visited refers to a link that has been visited

Where text-decoration is the meaning of the text decoration effect, the None parameter indicates that the text with the hyperlink does not appear underlined. If the word "none" is replaced with underline, it is underlined, instead of overline, the hyperlink text is underlined, replaced by Line-through to the hyperlink text, and blink to make the text blink.

★. Similar control: make bold text plus strikethrough.

Example 2: The code used for flashing bold text is: B {Text-decoration:line-through}

★ A similar control: all uppercase letters in bold text.

Using code: B {Text-transform:uppercase}

Example 3: produces both uppercase and color, with strikethrough effects Hello welcome and enjoy them!

The code above is: b {text-decoration:line-through; text-transform:uppercase; color: #66FFFF}

Similarly, use lowercase to display all the letters in lowercase, capitalize to capitalize the first letter of each word.

★ The following is the content that produces the connection discoloration effect:

In Example 1 above, if you make a little modification, you can make a connection with the Link,active,visited property display a different color, but it does not produce a mouse overlay color effect. First look at the following code, so that the connection text display green, the connection is clicked to display yellow, has repeatedly asked the connection to display red. Review the previous content (Don't forget!) ：

〈style type= "Text/css"
〈!--
a:link {text-decoration:none; Color:green}
a:active {text-decoration:none; Color:yellow}
a:visited {text-decoration:none; color:red}
--〉
〈/style〉

If you want to create a discoloration effect, you need to use another property, this is hover, look at the following code.

a:hover {Text-decoration:none Color:yellow} indicates that the text decoration style is "none" (that is, no underline) when the mouse is moved to the connected text, and yellow is displayed.

a:hover {Text-decoration:underline Color:green} indicates that the text decoration style is "underline" (that is, underlining) while the mouse is moving to the connected text, and green is displayed.

★ Extension: If we use the following 2 attributes at the same time, what effect will it have?

a:link {text-decoration:none; color:yelloe; font-size:9pt}

a:hover {text-decoration:underline; color:green; font-size:12pt}

The connection text is not underlined, the yellow display, the 9pt size. The mouse moves to the connection when the underline, the color is green, character size 12pt. Is it discolored? and the font due to the size of the change, there is a dynamic, it seems to expand all of a sudden.

In a word, all the methods mentioned above should be used synthetically.

★ Note: Not all of the browsers support all the option attributes. 　 Test yourself on multiple browsers. (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.

〈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