Introduction to css style sheets and multiple style priorities-CSS Tutorial-php.cn

Home

Web Front-end

CSS Tutorial

Introduction to css style sheets and multiple style priorities

王林

May 25, 2020 pm 05:41 PM

csspriority

Introduction to css style sheets and multiple style priorities

There are three ways to insert a style sheet, namely:

1. External style sheet;

2. Internal style sheet;

3. Inline style

External style sheet

When using an external style sheet, you can change the appearance of the entire site by changing one file. . Each page links to the style sheet using the tag. tag in the head (of the document):

The example is as follows:

<head><link rel="stylesheet" type="text/css" href="mystyle.css"></head>

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. The following is an example of a style sheet file:

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

Note: Do not leave a space between the attribute value and the unit (such as: "margin-left: 20 px"). The correct way to write it is " margin-left: 20px" .

(Video tutorial recommendation: css video tutorial)

Internal style sheet

When a single document needs special When styling, you should use an internal style sheet. You can define an internal style sheet in the head of the document using the

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

Inline styles

If the style only needs to be applied on one element This method can be used once. (Please use with caution)

To use inline styles, you need to use the style attribute within the relevant tags. The Style property can contain any CSS property.

Here shows how to change the color and left margin of a paragraph:

<p style="color:sienna;margin-left:20px">这是一个段落。</p>

Multiple Styles

If certain properties are specified in different style sheets With the same selector definition, the attribute values will be inherited from the more specific style sheet.

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

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

and the internal style sheet has two properties 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, so the style obtained by h3 is:

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

That is Color properties will be inherited from the external style sheet, while text-alignment and font-size will be replaced by rules in the internal style sheet.

Multiple style priorities

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.

Generally, the priority is as follows:

Inline style) Inline style > (Internal style) Internal style sheet > (External style) External style sheet > Browser default style

Note: If the external style is placed after the internal style, the external style will override the internal style.

Recommended tutorial: CSS basic tutorial

The above is the detailed content of Introduction to css style sheets and multiple style priorities. For more information, please follow other related articles on the PHP Chinese website!

Statement

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn