We have learned the CSS syntax before, 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>, this tag must be placed in the Copy codeThe Code is as follows: ......
<Link href = "mystyle.css" rel = "stylesheet" type = "text/css" media = "all">
......
</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. Media is a media type. These media types include screen, paper, speech synthesis devices, and Braille reading devices.
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")}/* images file */
2. Internal Style Sheets
The internal style sheets place the style sheets in the Copy codeThe Code is as follows: ......
<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:Copy codeThe Code is as follows: ......
<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 into mystyle.css. 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 earth yellow, 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 the BODY itself), except BASEFONT, PARAM, and SCRIPT.
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
