HTML and CSS are two different languages that work on a Web page, so you must link CSS with HTML. In HTML, there are 4 main ways to introduce CSS: inline, inline, import, and link-style.
1. In-line
Inline is the CSS style that is set in the tag's style property, which does not inherently reflect the benefits of CSS and is therefore not recommended.
In-line example:
<style= "font-size:12px; text-align:center;" > Inline methods for referencing CSS in HTML </div>
2. Embedded
Embedded in the page of the various elements of the settings set in the
Embedded Example:
<!DOCTYPE HTML><HTML><Head> <Metaname= "Viewport"content= "Width=device-width" /> <title></title> <styletype= "Text/css">Div{font-size:12px;text-align:Center; } </style></Head><Body> <Div>Embedded methods for referencing CSS in HTML</Div></Body></HTML>
3. Import and Link-type
The purpose of importing and linking is to introduce a standalone CSS file into an HTML file, the difference being that the link uses HTML markup to introduce an external CSS file, whereas using an import is a rule that uses CSS to introduce an external CSS file.
Example of introducing an external CSS file using a linked style:
<href= "~/content/base.css" rel= "stylesheet" type = "Text/css" />
Example of introducing a CSS file using an import:
<type= "Text/css"> @import "/content/base.css" </style>
The difference between the two-way display: When you use link, the CSS file is loaded before the body part of the page is loaded, so that the displayed page is styled from the beginning. When using the import, the whole page will load after the completion of the CSS file, for some browsers, in some cases, if the page file is larger, you will see a page with no style, flashing a bit after the effect of setting style. From the user experience, this is a flaw in using an import.
For some of the larger sites, for ease of maintenance, you might want to put all CSS styles in a few CSS files, so if you use the link, you need to import a few statements into the CSS file. If you want to adjust the classification of CSS files, you need to adjust the HTML file at the same time. This is a flaw in maintenance work. If you are using an import, you can introduce only one total CSS file, and then import the other standalone CSS files into this file.
If you only need to introduce a CSS file, the link is used, if you need to introduce more than one CSS file, the first link to the introduction of a "directory" CSS file, the "directory" CSS file used in the introduction of other CSS files.
However, if you want to dynamically decide which CSS file to introduce through JavaScript, you must use the link method to implement it.
CSS series: How to introduce CSS in HTML