We have explained the css syntax before, but to display the effect in the browser, the browser must 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 the external style sheet, internal style sheet, import external style sheet, and embedded style.
1. Link the external style sheet
To link to an external style sheet, save the style sheet as a style sheet file, and then mark it with link> on the page to link to the style sheet file, this link> mark must be placed in the head> area of the page, as shown below:
| The code is as follows: | Copy code |
| <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 on 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:
| The code is as follows: | Copy code |
| Hr {color: sienna} P {margin-left: 20px} Body {background-image: url ("images/back40.gif ")} |
|
Hosts file)
2. Internal style sheets
Internal style sheets place style sheets in the head> area of the page. These defined styles are applied to the page. style sheets are inserted with style> labels, the following example shows how to use style> tag:
| The code is as follows: | Copy code |
| <Head> ...... <Style type = "text/css"> Hr {color: sienna} P {margin-left: 20px} Body {background-image: url ("images/back40.gif ")} </Style> ...... </Head> |
|
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
