How to use CSS in web design and its characteristics

Introduce CSS features to beginners and how to use CSS already set up in Web pages.

the world Wide Web Consortium divides Dynamic HTML into three parts: scripting languages (including JavaScript, VBScript, etc.), browsers that support dynamic effects ( including Internet Explorer, Netscape Navigator, etc.) and CSS style sheets.

　　Features of cascading style sheets

And do not say that the past the lack of dynamic Web pages, is the layout of the content of the page is also a lot of difficulties, if not professional or particularly patient, it is difficult for the Web page according to their own ideas and ideas to display information. Even those who have mastered the essence of HTML will have to pass multiple tests to control the typesetting of these messages, which is a long and painful process.

Style sheet is born in this demand, it is first to do is for the elements of the page precisely positioned, can make the Web page designers like the director, easy to control by the text, the image of the actors, in the web on the stage according to the script requirements to perform well.

Second, it separates the content structure and the format control of the Web page. What the browser wants to see is the structure of the content on the page, and in order for the browser to see the information better, it is necessary to help by formatting control. Before the two on the Web page distribution is staggered, it is inconvenient to view the changes, and now separate the two will greatly facilitate the design of the Web page. The content structure and the format control are separated, so that the Web page can be composed of content, and the format control of all the pages to a CSS style sheet file. This is a good performance in two ways:

First, the format code of the Web page is simplified, and the external stylesheet is saved in the cache by the browser, speeding up the download display and reducing the amount of code that needs to be uploaded (because the formatting of the repeating settings will be saved only once).

Second, as long as the modification of the Web site format of the CSS style sheet file can change the style of the entire site features, in the revision of the page a large number of sites, it is particularly useful. Avoids the modification of a Web page, greatly reducing the workload of repetitive work

　　Ways to add cascading style sheets

There are four ways to add style sheets to a Web page:

　　1. The simplest method is to add directly to the HTML identifier (TAG):

< Tag style= "Properties" > Web content </tag>

As an example:

< P style= "color:blue; Font-size:10pt ">css Instances </p>

Code Description: a "CSS instance" with a font size of 10pt is shown in blue. Although simple to use and intuitive to display, this approach is less common because it adds the advantage of not being able to fully play the style sheet "content structure and formatting controls are saved separately."

　　2. Add the header information identifier < head> in HTML:

The following is a reference fragment:　　 < head> < style type= "Text/css" > <!--style sheet content-</style>

Type= "Text/css" indicates that the stylesheet is MIME-type, helps browsers that do not support CSS to filter out CSS code, and avoids displaying the style sheet we set up directly in front of the browser in the form of source code. However, in order to ensure that this must not happen, it is necessary to add a comment identifier "<!--annotation Content--" in the style table.

　　3. Link Style sheet

The same is added in the HTML header information Identifier < head>:

The following is a reference fragment:　　 < head> < link rel= "stylesheet" href= "*.css" type= "text/css" media= "screen" >

*.css is a separately saved stylesheet file that cannot contain the < style> identifier and can only be suffixed with CSS.

Media is an optional property that indicates what media output will be used for Web pages that use style sheets. Range of values:

· Screen (default): Output to PC screens

· Print: Output to printer

· TV: Output to TV

· Projection: Output to Projector

· Aural: Output to Speaker

· Braille: Output to Braille tactile sensing device

· Tty: Output to telex typewriter

· All: output to all devices above

If you are exporting to multiple media, you can separate the table of values with commas.

The Rel attribute indicates how the style sheet will be combined with an HTML document. Range of values:

· Stylesheet: Specify an external style sheet

· Alternate stylesheet: Specifies that an interactive style sheet is used

　4. Using style sheets together

The same is added in the HTML header information Identifier < head>:

The following is a reference fragment:　　 < head> < style type= "Text/css" > <!--@import "*.css" other style sheet declarations--</style> </ Head>

A federated style sheet input method that starts with @import is similar to the method for linking style sheets, but the federated style sheet input approach is more advantageous. Because the Union method can be linked to the external style sheet at the same time, for the specific situation of the page, other Web pages do not need the style rules.

It is important to note that:

• Union method The input style sheet must start with @import.

• If more than one style sheet is entered in conflict, the page will be formatted according to the first input style sheet.

• Use an external style sheet when you enter a style sheet that conflicts with a style rule in a Web page.