css study notes--the use and differences of three style sheets_html/css_WEB-ITnose

How to insert a style sheet

There are three ways to insert a style sheet:

External style sheets

An external style sheet would be ideal when styles need to be applied to many pages. With external style sheets, you can change the look of your entire site by changing one file. Each page links to the style sheet using the tag. tag is in the head (of the document):

The browser will read the style declaration from the file mystyle.css and format the document according to it.

External style sheets can be edited in any text editor. The file cannot contain any html tags. Style sheets should be saved with a .css extension. Here is an example of a stylesheet file:

hr {color:sienna;}
p {margin-left:20px;}
body {background-image:url("/ images/back40.gif");}

Do not leave spaces between attribute values ​​and units. If you use "margin-left: 20 px" instead of "margin-left: 20px" it will only work in IE 6, but not in Mozilla/Firefox or Netscape.

Internal style sheets

When a single document requires special styling, an internal style sheet should be used. You can define an internal style sheet at the head of the document using the

Inline styles

Inline styles lose many of the advantages of style sheets by mixing presentation with content. Use this approach with caution, for example when the style only needs to be applied once to an element.

To use inline styles, you need to use the style attribute within the relevant tag. The Style property can contain any CSS property. This example shows how to change the color and left margin of a paragraph:

This is a paragraph.

Multiple Styles

If certain properties are defined with the same selector in different stylesheets, the property values ​​will be inherited from the more specific stylesheet come over.

For example, the external stylesheet has three properties for the h3 selector:

h3
{
color:red;
text-align:left ;
font-size:8pt;
}

The internal style sheet has two attributes for the h3 selector:

h3
{
text-align:right;
font-size:20pt;
}

If this page with an internal style sheet is linked to an external style sheet at the same time, then h3 gets The style is:

color:red;
text-align:right;
font-size:20pt;

i.e. the color attribute will be inherited For external style sheets, text-alignment and font-size will be replaced by rules in the internal style sheet.

Multiple styles will be cascaded into one

Style sheets allow style information to be specified in multiple ways. Styles can be specified in individual HTML elements, in the header element of an HTML page, or in an external CSS file. You can even reference multiple external stylesheets within the same HTML document.

Cascading order

When the same HTML element is defined by more than one style, which style will be used?

Generally speaking, all styles will be cascaded in a new virtual style sheet according to the following rules, with number 4 having the highest priority.

1. Browser default settings
2. External style sheet
3. Internal style sheet (located inside the tag)
4. Inline styles (inside an HTML element)

Therefore, an inline style (inside an HTML element) has the highest priority, which means it will take precedence over the following style declarations: style declarations in tags, A style declaration in an external style sheet, or a style declaration in the browser (the default).

Tip:If you use the style of an external file and define the style in , the internal style sheet will replace the style of the external file.