Learn the advantages, rules, forms and scope of application of CSS simply

CSS cascading style Sheets (CSS), translated as "cascading style sheet" or "Cascading style sheet", also referred to as "style sheet."

The introduction of CSS is used to extend HTML, not to replace HTML. In other words, CSS is inseparable from HTML, it is just an auxiliary tool, is a supplement to HTML functions.

the advantages of CSS

In the CSS standard, not only redefine the original HTML style, such as the size of text, color, etc., but also add overlapping text, block changes and placement in any position, and many other new attributes. With CSS you can use richer, more flexible styles, and more simply design a more aesthetically pleasing web page. At the same time, also make the design and maintenance of Web pages more efficient.

Reduce the use of image files: Many Web pages for the design effect, and a lot of use of images, so that the download speed of the Web page slow. CSS provides a lot of text style settings, coupled with IE built-in filter effects, so you can easily replace the original image to show the visual effects. Such a design method makes it more convenient to modify the content of the Web page, also greatly improve the download speed;

Centralized management style information: The basic concept of CSS is to be able to display the content of the Web page and its performance of the style set apart, that is, the page's appearance settings information from the content of the Web page independent, and centralized management. In this way, when you want to change the appearance of the page, just change the style set part, the HTML file itself does not need any changes;

Shared style settings: The benefits of Web page styling and content separation, in addition to centralized management, if you further store CSS-style information as separate files, you can also have multiple Web page files to use it together. In this way, you can save in every Web page file to repeat the setting style of trouble;

Use styles in categories: You can apply the same CSS style file to multiple HTML files, or you can apply multiple CSS style files to an HTML Web page file.

rules for CSS

CSS style rules consist of two parts: selectors and declarations.

Selectors are the names of the styles, including custom classes, HTML tags, and CSS selector styles. For example, ". Mycss" is a custom class, "TD" is a standard HTML tag, and "A:link" is a CSS selector style;

A declaration is used to define a STYLE element. Declarations are divided into two parts: attributes (such as font-size) and values (such as 12px). For a selector, you can have multiple declarations. For example, a declaration is a color, a declaration is a representation of the size, and so on.

The following is a CSS-style code fragment:


TD {
font-size:12px;
Color: #666666;
}
. cnbruce {
Background-color: #000033;
}


Where "TD" and ". Cnbruce" All belong to selectors, "font-size", "Color" and "Background-color" belong to the attributes in the declaration, and "12px", "#666666" and "#000033" are the values corresponding to the attributes. Each selector's declaration takes the {...} Contains.

the form of CSS

From the label form of CSS Code, the following 3 kinds of CSS styles are divided:

1, custom CSS style, also known as Class style. can be applied to any label, the name must have a period ".", such as ". Cnbruce";

2,html label style. Although a custom CSS style can be applied to any label, it is cumbersome to choose a custom style each time for HTML-intrinsic labels. So the appearance of HTML tag style is to extend the HTML tag;

3,CSS selector style. This is an advanced option that you can use to define a combination of tags, such as "a" for a hyperlink style selection, "TD" for a cell style selection, and "TD a" if you select a hyperlink style in a cell.

A
Color: #3366CC;
}
TD a{
Color: #FF0000;
}

As the code above defines, the color of the hyperlink for a normal insert, and the color of the hyperlink used in the cell, will be displayed differently.

the scope of application of CSS

CSS is ubiquitous, it can be divided into the following two kinds.

External CSS style sheet: exists as a file with a. css extension, and the content in the file is the selection and declaration of all styles. This file can be used as a shared file, allowing multiple documents to be referenced and applied together to achieve the consistency of the site file style. At the same time, if you modify the stylesheet file, all referenced documents will change their style, to achieve the purpose of rapid Web site revision.

Internal CSS style sheet: A method that exists only in the current document and that is styled for the current page only. Typically exists in the style label in the head section of the document.

External CSS style sheets and internal CSS style sheets can work on one page at a time, but when two style sheets appear to decorate the same selection, the browser applies the style effects as follows:

If the property declared by the two does not conflict, it is displayed as all of the attributes of both styles;
If the properties declared by the two are directly conflicting, the style of the internal style sheet is used.
The so-called "common ground, internal priority".