Home > Developer > Web Develop
There are four main ways to introduce CSS in HTML, which are inline, inline, linked, and imported. 1 inline inline is a CSS style that is set in the tag's style property. This approach does not reflect the advantages of CSS, is not recommended to use. 2. Embedded embedded is the CSS style set in the Web page<Head></Head>Tag pair.<style></style>The label pair. The format is as follows:<Head> <styletype= "Text/css"> ... Write CSS style here</style> </Head>The downside is that for a site that contains many pages, using embedded in each page makes it cumbersome to modify the style. A single page can consider using embedded. 3. Import a standalone. css file into an HTML file, imported using CSS rules to introduce an external CSS file,<style>the tag is also written in the </style>The import will load the entire Web page after loading the CSS file, so this leads to a problem, if the page is larger then appear in the first page without style, flashing a bit, then appear the page style. This is a flaw inherent in the import. 4. The link is also a. css file introduced into the HTML file, but it is different from the import is linked to the use of HTML rules to introduce external CSS files, which in the Web page<Head></Head>Use in label pairs<Link>tags to introduce external style sheet files, using the following syntax:<Linkhref= "Mystyle.css"rel= "stylesheet"type= "Text/css"/>The use of the link is different from the import is that it will be loaded with the Web page file body before loading CSS files, so the displayed page from the beginning is a style of effect, it does not appear as imported as the first page without style, and then display the style of the page, which is the advantage of linking. Summary: In general, do the site when the style is written in more than one style sheet file, so we first use the link to introduce a total CSS file, and then in this CSS file using the import to introduce other CSS files. However, if you introduce CSS files dynamically through Javascrip, you can only use the linked style.
There are four main ways to introduce CSS in HTML, which are inline, inline, linked, and imported.
1. In-line
Inline is a CSS style that is set in the Style property of the tag. This approach does not reflect the advantages of CSS, is not recommended to use.
2. Embedded
Embedded is a set of CSS styles that are written in the
<style type= "Text/css" >
... Write CSS style here
</style>
The downside is that for a site that contains many pages, using embedded in each page makes it cumbersome to modify the style. A single page can consider using embedded.
3. Import type
Introduce a standalone. css file into an HTML file, import using CSS rules to introduce external CSS files,<style> tags are also written in the
<style type= "Text/css" >
@import "Mystyle.css"; Note the path to the. css file here
</style>
The import will load the entire Web page after loading the CSS file, so this leads to a problem, if the page is larger then appear in the first page without style, flashing a bit, then appear the page style. This is a flaw inherent in the import.
4. Link-type
It also introduces a. css file into an HTML file, but it is different from importing it by using HTML rules to introduce an external CSS file, which is used in the
<link href= "Mystyle.css" rel= "stylesheet" type= "Text/css"/>
The use of the link is different from the import is that it will be loaded with the Web page file body before loading CSS files, so the displayed page from the beginning is a style of effect, it does not appear as imported as the first page without style, and then display the style of the page, which is the advantage of linking.
Summary: In general, do the site when the style is written in more than one style sheet file, so we first use the link to introduce a total CSS file, and then in this CSS file using the import to introduce other CSS files. However, if you introduce CSS files dynamically through Javascrip, you can only use the linked style.
How to introduce CSS in HTML
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
