In HTML, CSS method of introducing mainly inline type, embedded, and introduced into type link type
inline formula: i.e. set CSS style style attribute of the tag, it does not reflect the essence of this embodiment of CSS, so not recommended
cases:
Copy the code
code show as below:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Text Demo</title>
</head>
<body>
<h1 style=color:white;background-color=blue;>
This is a line of Text.
</h1>
</body>
</html>
Embedded: Embedded settings page will be concentrated in various elements written between the <head> and </ head>, for a single page, this method is very convenient. But for a site that contains many pages, each page if inline set their own style, they lost the great advantage of CSS brings, so a website is usually written in a separate CSS style sheet file, use the following two one kinds of ways, the introduction of an HTML document.
example:
Copy the code
code show as below:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Text Demo</title>
<style type="text/css">
h1{
color:white;
background-color:boue;
}
</style>
</head>
<body>
<h1>This is a line of Text.</h1>
<h1>This is another line of Text.</h1>
</body>
</html>
Links introducing Formula Formula: Import link type and the type of object is introduced into a separate HTML file CSS file, there is a corresponding difference between the two.
In fact, the biggest difference between the two is that the use of HTML style tags link the introduction of external CSS files, and use the Import type is to use CSS rules to import external CSS file. Therefore, their syntax is different.
If a link type, use the following statement to import external CSS file.
<link href = "mystyle.css" rel = "stylesheet" type = "text / css" />
If a lead-in type, the following statement is required.
Create a front-end learning qun438905713, most in the group are zero-based learners, we help each other, answer each other, and also to prepare a lot of learning materials, welcomed the zero-based junior partner to the exchange.
Copy the code
code show as below:
<style type="text/css">
@import"mystyle.css";
</style>
In addition, the display effect after using these two methods are slightly different. Web page using the link mode, loads the CSS file before the device is the main part of the page, so show up with effect from the beginning of the style, and the use of lead-in type, loads the CSS file and then load the entire page is completed, for Some browsers, in some cases, the page file if the volume is relatively large, it will first display unstyled page, one flash after effects after style settings appear again. From the viewer's experience, this is the use of lead-in type of a defect. For some of the larger sites, in order to facilitate maintenance, might want to put all CSS styles into several sub-categories CSS file, so if you use a chained introduced several statements on the need to import the CSS file separately. If you want to adjust the classification of the CSS file, you need to adjust the HTML file. This maintenance work, it is a defect. If a lead-in type, it is possible to introduce only a general CSS file, then other independent CSS file imported in this document; formula are linked not have this feature.
So here's a suggestion to you is that if the need to introduce a CSS file, use the link mode; if you need to introduce multiple CSS files, the first to introduce a "directory" CSS file link mode, the "directory" CSS file again use the import-style introduction of other CSS files.
If you want through JavaScript to dynamically determine which introduced CSS file, you must use the link mode can be achieved.
