CSS Practical Basics Tutorial

As long as you modify the format of the Web site CSS style sheet files can change the style of the entire site, in the number of pages to modify the huge site, it is particularly useful.

CSS (cascading stylesheets, cascading style sheets) is a new technology for making Web pages that is now supported by most browsers and is one of the essential tools for Web design. The use of CSS can simplify the format of the page code, speed up the download display, but also reduce the number of code to upload, greatly reducing the amount of duplication of work. Especially when you are faced with a site with hundreds of pages, CSS is like God's gift to us!

Objective

CSS (cascading stylesheets, cascading style sheets) is a new technology for making Web pages that is now supported by most browsers and is one of the essential tools for Web design.


The World Wide Web Consortium The Dynamic HTML into three parts: scripting languages (including JavaScript, VBScript, and so on), browsers that support dynamic effects, including the Internet Explorer, Netscape Navigator, and so on) and CSS style sheets.
A Features of cascading style sheets
And do not say the past lack of dynamic web pages, that is, the layout of the content of the Web page also has a lot of difficulties, if not professionals or particularly patient people, it is difficult to let the Web page according to their own ideas and ideas to display information. Even those who have mastered the essence of the HTML language will have to pass many tests to master the layout of the information, the process is very long and painful. For the development of the Internet, let more people set foot in this colorful world as soon as possible, new HTML auxiliary tool is ready to be ready.

The style sheet is born under this kind of demand, the first thing to do is to precisely position the elements on the Web page, so that web designers like the director, easy to control by the text, the image of the actors, in the Web site on the stage according to the script requirements to perform well.

Second, it separates the content structure and format control on the Web page. The viewer wants to see the content structure on the Web page, and in order for the viewer to see this information better, it is necessary to help by formatting control. The previous two on the Web page distribution is staggered, see the modification is inconvenient, and now the two separate will greatly facilitate the designer of the Web page. The separation of the content structure from the format control allows the Web page to be composed of content, while the formatting of all pages is controlled to a CSS style sheet file. This is done in two ways:

First, the format code for 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 number of code that needs to be uploaded (because the format of the duplicate settings will be saved only once).


Second, as long as the changes to preserve the Web site format CSS style sheet files can change the style of the entire site, in the number of pages to modify the huge site, it is particularly useful. Avoid a Web page modification, greatly reducing the workload of duplication of work, when you are facing a site with hundreds of pages, CSS is like God's gift to us! ^_^


Two Ways to add cascading style sheets

There are four ways we can add style sheets to a Web page.

[Reprint of the famous: Web page Standards College!]

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 "&GT;CSS Example </p>


Code Description:


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

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

<style type= "Text/css" >
<!--the specific content of the style sheet-->
</style>

Type= "text/css" means that style sheets are MIME types that help browsers that do not support CSS to filter out CSS code, and avoid displaying the style sheets we set directly in front of the browser in the form of a source code. However, in order to ensure that this does not happen, it is necessary to add the annotation identifier "<!--annotation content-->" in the stylesheet.

3. Link Style sheet

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


<link rel= "stylesheet" href= "*.css" type= "text/css" media= "screen" >

*.css is a separately saved style sheet file that cannot contain < style> identifiers and can only be suffixes of CSS.
Media is an optional property that indicates what media output will be used for a Web page that uses a style sheet. Value range:
· Screen (default): Output to computer screens
· Print: Output to printer
· TV: Output to TV
· Projection: Output to projector
· Aural: Output to Speakers
· Braille: Output to Braille tactile sensing devices
· Tty: Output to Fax typewriter
· All: output to all devices above
If you want to output to multiple media, you can separate the values table with commas.

The Rel property indicates how the style sheet will be combined with the HTML document. Value range:
· Stylesheet: Specify an external style sheet
· Alternate stylesheet: Specify to use an interactive style sheet [reprint famous: Web page Standards College]

4. Using style sheets jointly

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


<style type= "Text/css" >
<!--
@import "*.css"
-->
</style>

The combined style sheet input method that starts with @import is similar to the method of linking style sheets, but the combined style sheet input approach has the advantage. Because the Union method can be linked to the external style sheet, as well as the specific situation of the page, to make other pages do not need style rules.

It is to be noted that:
• Union method input style sheet must begin with @import.
• If multiple style sheets are entered at the same time, the page will be formatted according to the first entered style sheet.
• Use an external style sheet when you enter a style sheet that conflicts with style rules in a Web page.