Home > Article > Web Front-end > Introduction to css style sheets and multiple style priorities
Introduction to css style sheets and multiple style priorities
- 王林Original
- 2020-05-25 17:41:282854browse
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 2cdf5bf648cf2f33323966d7f58a7f3f tag. 2cdf5bf648cf2f33323966d7f58a7f3f 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 c9ccee2e6ea535a969eb3f532ad9fe89 tag, for example:
<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!