From Basics to Mastery: A practical tutorial on CSS (i)

CSS (cascading stylesheets, cascading style sheets) is a new technology for making Web pages, which is now supported by most browsers and is an essential tool for web design. Using CSS can simplify the format code of the Web page, speed up the download display, and reduce the number of code that needs to be uploaded, greatly reducing the workload of repetitive work. Especially when you're dealing 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, which is now supported by most browsers and is an essential tool for web design.

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.

A 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. For the development of the Internet, so that more people early into this colorful world, the new HTML helper tools to be.

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. Avoid a modification of a Web page, greatly reducing the workload of repetitive 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 to add style sheets to a Web page.

1. The simplest way 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:

< head>

< style type= "Text/css" >

<!--the specifics of the style sheet--

</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>:

< 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. Federated use of style sheets

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

< head>

< style type= "Text/css" >

<!--

@import "*.css"

Declarations for other style sheets

-

</style>

The [email protected] method is similar, but the Federated style sheet input method 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.

Three Formatting of cascading Style sheets

In general, the declaration of a style sheet is divided into selectors (selector) and block {} (block), the block contains the attribute (properties) and the value of the property (value), the basic format is as follows:

Selector {property: value}

Other formats 1:

Selector 1, selector 2, selector 3 {attribute 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 one time, and add "," between the multiple selectors to separate them.

When there are multiple attributes, the ";" must be used to separate the two attributes.

Other formats 2:

Selector 1 Selector 2 {attribute 1: value 1; Property 2: Value 2; property 3: Value 3}

Very similar to format 1, but with fewer "," between selectors, the effect is quite different. Indicates that the style rule that is set will only work if the content included in the selector 2 is included in the selector 1.

Four Classification of cascading Style sheets

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

The selector. Category name {property: value}

The category name can be referenced in the HTML identity character:

< identifier class= category name > 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, but also generated the concept of pseudo-class. What is the difference between a class and a pseudo-class?

Generally, selectors can be set in bundles with multiple classes, so that although you can create many different styles for the same selector, the bundled form also restricts the set class to be used for other selectors. The generation of pseudo-classes is to solve this problem, each of the pre-declared 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}

Pseudo-classes can be referenced in HTML by any identifier.

< identifier class= pseudo-class name > Web content

Six Control the style of the font

Styles that control fonts include four sections that control font type, font size, font style, and font weight.

1. Font type

Usually when using word processing software, such as words, often need to adjust the font display, such as "Arial", "Impact", "Verdana" and other fonts are the author used more.

The basic format is as follows:

Font-family: Font Name

If the name of a variety of fonts after the font-family, the browser back in the order of the font name in the user's computer to find the installed fonts, once encountered with the required matching font, in this font to display the page content, and stop the search, if not match to continue the search, until found, In the event that all the fonts in the stylesheet are not installed, the browser uses its default font instead of displaying the contents of the page.

Attention:

• Separate each font name with "," when multiple fonts are specified.

• When the font name contains more than two separate words, use "" to enclose the font name.

• Use ' instead ' when there is already "" in the style rule.

2. Font size

The basic format is as follows:

Font-size: Font Size parameter

The range of values for the font size:

• Point units: Points are available on all browsers and operating platforms

• In EM: The size of the letter element, and the same distance from point

• In pixes: pixels can be used for all operating platforms, but may cause differences in display performance due to different screen resolutions of the browser

• In (inch) units

• In cm (cm) units

• in mm (mm) units

• In PC (printer font size)

• In EX (x-height) units

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 a variety of italic words.

The basic format is as follows:

Font-style: Name of italic word

4. Font weight

Font weight Control the display of bold words, the value range from the number 100~900, the 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

The above is from the basic to proficient: CSS practical tutorial (a) content, more relevant content please pay attention to topic.alibabacloud.com (www.php.cn)!

