4. How to insert CSS into a webpage
In the first two chapters, we understand the CSS syntax, but to display the effect in the browser, we need the browser to identify and call it. When the browser reads a style sheet, it must read it in text format. Here we introduce four ways to insert a style sheet into the page: link an external style table, an internal style table, an external style table, and an embedded style.
1. link the external style sheet
To link an external style sheet, save the style sheet as a style sheet file, and then mark it with <link>, the <link> mark must be placed in the <Head>
......
<LINK rel = "stylesheet" type = "text/CSS" href = "mystyle.css">
......
</Head>
In this example, the browser reads the defined style sheet in document format from the mystyle.css file. Rel = "stylesheet" refers to the external style sheet used in the page. Type = "text/CSS" indicates that the file type is style sheet text. Href=”mystyle.css "is the file location.
An external style sheet file can be applied to multiple pages. When you change the style sheet file, the style of all pages changes accordingly. It is very useful when creating a large number of websites with the same style pages, which not only reduces the repetitive workload, but also facilitates later modification and editing, and reduces repeated download code During browsing.
You can use any text editor to edit a style sheet file (for example, the extension name of the general style table file is. CSS. The content of mystyle.css is as follows:
HR {color: Sienna}
P {margin-left: 20px}
Body {background-image: URL ("images/back40.gif ")}
Hosts file)
2. Internal Style Sheets
The internal style sheets place the style sheets in the <Head>
......
<Style type = "text/CSS">
HR {color: Sienna}
P {margin-left: 20px}
Body {background-image: URL ("images/back40.gif ")}
</Style>
......
</Head>
Note: Some earlier browsers do not recognize the STYLE tag, which means that earlier browsers ignore the content in the STYLE tag, and the content in the STYLE tag is directly displayed on the page as text. To avoid this situation, we add HTML annotations (<! -- Note -->) Hide the content without displaying it:
<Head>
......
<Style type = "text/CSS">
<! --
HR {color: Sienna}
P {margin-left: 20px}
Body {background-image: URL ("images/back40.gif ")}
-->
</Style>
......
</Head>
3. Import an external style sheet
To import an external style table is to import an external style table in the internal style table <style>. Use @ import to import the table. See the following example:
<Head>
......
<Style type = "text/CSS">
<! --
@ Import export mystyle.css"
Declaration of other style sheets
-->
</Style>
......
</Head>
In the example, @ import export mystyle.css1_ mystyle.css style sheet. Note the path of the external style sheet when using it. The method is similar to the method used to link a style sheet, but the method used to import an external style sheet is more advantageous. In essence, it is equivalent to exists in the internal style sheet.
Note: importing an external style sheet must be at the beginning of the style sheet and at the top of other internal style sheets.
4. Embedded Style
Embedded styles are mixed in HTML tags. Using this method, you can easily define a style for an element. The embedded style directly adds the style parameter to the HTML Tag. The content of the style parameter is the attributes and values of CSS, as shown in the following example:
<P style = "color: Sienna; margin-left: 20px">
This is a paragraph
</P>
(The color of this section is Adobe, and the left margin is 20 pixels)
The content in the quotation marks behind the style parameter is equivalent to the content in the style sheet braces.
Note: The style parameter can be applied to any body element (including body skills), except basefont, Param, and script.
5. Overlapping multiple Style Sheets
In the previous chapter, we have mentioned the cascade order of style sheets. Here we discuss how to insert these methods into a style sheet. If you use several different style sheets on the same selector, this attribute value will be superimposed on several style sheets. In case of any conflict, the final definition will prevail. For example, we first chain an external style table, which defines the color, text-alig, and font-size attributes of the H3 selector:
H3
{
Color: red;
Text-align: left;
Font-size: 8pt
}
(The text color of Title 3 is red, aligned to the left, and the text size is 8 characters)
The text-align and font-size attributes of the H3 selector are also defined in the internal style sheet:
H3
{
Text-align: right;
Font-size: 20pt
}
(Title 3 text align to the right; Size: 20 characters)
The overlapping style of this page is:
Color: red;
Text-align: right;
Font-size: 20pt
(The text color is red, right-aligned, and the size is 20 characters)
The font color is retained from the external style table. When the alignment and font size are defined, the font color is prioritized according to the subsequent definition.
Note: according to the latter definition, the highest priority is embedded style. The internal style sheet is higher than the imported external style sheet, the link between the external style sheet and the internal style sheet has a higher priority.
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
