Beginner's Introduction: A Practical tutorial from Basic Learning Web page CSS

css| Tutorials | Web page

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!

Preface

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.

one. 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.

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: Specifies the use of an interactive style sheet

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.

Three Format of cascading style sheets

In general, the Declaration of a stylesheet is divided into selectors (selector) and blocks {} (block), which contain attributes (properties) and the value of the property (value), and the basic format is as follows:

Selector {property: value}
Other format 1:
Selector 1, selector 2, selector 3 {Property 1: Value 1; Property 2: Value 2; property 3: Value 3}

Sometimes multiple selectors will use the same settings, in order to simplify the code, we can set the style for them, and add "," between multiple selectors to separate them.

When you have more than one attribute, you must separate the two attributes with ";".

Other Format 2:
Selector 1 Selector 2 {Property 1: Value 1; Property 2: Value 2; property 3: Value 3}

and format 1 are very similar, but only less between the selector ",", but the effect is very different. Represents a style rule that is set when the selection character 2 includes content that is included in the selector 1.

Four Classification of cascading Style sheets

In order to make the format of the Web page not excessively monotonous, it is necessary to have the same selector to be categorized and to design different styles according to different categories. The basic format is as follows:

Selector. Category name {property: value}
A category name can be referenced in an character of an HTML ID:
< identifier class= category name > Web page content

Five Pseudo class for Cascading style sheets

In addition to the above classification methods, in order to make the use of classification more flexible and diverse, but also produced the concept of Pseudo-class. What is the difference between a class and a pseudo class?

Generally speaking, a selector can be set in bundles with multiple classes, so that although it can create many different styles for the same selector, the form of bundling also restricts the set class to be used by other selectors. Pseudo class is created to solve this problem, each of the predefined pseudo class can be referenced by all HTML identifiers, of course, some block-level content, except the settings. The basic format is as follows:

. Pseudo class Name {property: value}
A pseudo class can be referenced in HTML by any identifier.
< identifier class= pseudo class name > Web page content

Six Control the style of a font

Control font styles include four parts that control font type, font size, font style, and font weight.

1. Font type

Usually in the use of Word and other word processing software, often need to adjust the display of fonts, such as "Arial", "Impact", "Verdana" and other fonts are the author used more.

The basic format is as follows:

Font-family: Font Name

If you add a variety of font names after font-family, browser back to the order of the font name in the user's computer to find the installed fonts, once encountered with the required matching font, the font to display the content of the page, and stop the search; If all the fonts in the stylesheet are not installed, the browser will use its default font instead of displaying the contents of the page.

Attention:
• Use "," to separate each font name when you specify more than one font.
• When the font name contains more than two separate words, enclose the font name with "".
• When there is already "" in the style rule, use ' instead of '.

2. Font size

The basic format is as follows:

Font-size: Font Size parameters

Value range of font size:
• Point unit: DOT units are available on all browsers and operating platforms
• In EM: The size of the letter element, the same distance as point
• In pixes: pixels can be used for all operating platforms, but may result in differences in display results due to the different screen resolution of the viewer
• In (inches)
• In cm (cm)
• in mm (mm) as the unit
• PC (printer font size)
• In EX (x-height)
smaller: Smaller than the default size of the current text
larger: Smaller than the default size of the current text
• Use proportional relationships
Xx-small
X-small
Small
Medium
Large
X-large
Xx-large

3. Font style

Font style can only control the display of various italic characters.

The basic format is as follows:

Font-style: Name of italic word

4. Font weight

Font weight controls the display of bold characters, ranging from digital 100~900 to a browser default font weight of 400. In addition, the lighter and bolder can be used to make the font appear thinner or thicker on the original basis.

The basic format is as follows:

Font-weight: Font weight