How to import css files

Methods to introduce css files: 1. Inline method introduction, set the CSS style in the style attribute of the tag; 2. Embedded method introduction, write the CSS style in the style tag of the web page; 3 , Use link to reference external CSS files; 4. Use @import to reference external CSS files.

The operating environment of this article: Windows7 system, HTML5&&CSS3 version, Dell G3 computer.

How to import css files? Several methods of introducing CSS files into HTML

Generally speaking, there are four types:

1. Inline style: also called inline style, set in the style attribute of the mark Define CSS styles. This method does not reflect the advantages of CSS;

2. Embedded: Concentrate the CSS styles on the 93f0f5c25f18dab9d176bd4f6de5d30e9c3bca370b5104690d9ef395f2c5f8d1 tag pair of the web page's c9ccee2e6ea535a969eb3f532ad9fe89531ac245ce3e4fe3d50054a55f265927 Tags are aligned;

3. Link type: The fourth import type is called external type or external link type, use link to refer to external CSS files;

4. Import type: use @import refers to external CSS files;

---------------------------------------- ----------------A

Inline style is the easiest and most comfortable way to start writing, but this way of writing does not reflect the advantages of CSS at all. As follows:

70eab11193908078307f75b525fdd4460e639e3b610bd7e2866749e566397d9bI write inline8d2811da8f403069bc202825deb188f5

If there are many tags on a page, this writing method will look bad and cumbersome, and it will be too repetitive, so it is not recommended!

-------------------------------------------------- ---------B

Embedded is also a good choice if there are relatively few pages, but if there are many pages corresponding to a project, this will undoubtedly be a bit disastrous. You need to modify the style. It may be a large number of similar pages

, but they have to be modified one by one, as follows:

<span style="font-size:14px;"><style type="text/css"></span>
<span style="font-size:14px;">#demo{
position:absoulte;
left: 20px;
top:50px;
width:300px;
height: 50px;
border: solid 1px red;
padding-left: 20px;
color:gray;
font-size: 20px;
line-height: 50px;
text-align: center;</span>
<span style="font-size:14px;">}
</style></span>

This writing method avoids the "no style" phenomenon of the page to a certain extent. Render the page after the css is loaded...

--------------------------------- --------------------CD

External css style is to write the css code in a separate external file. This css style file ends with ". css" as the extension, use the 2cdf5bf648cf2f33323966d7f58a7f3f tag within the 93f0f5c25f18dab9d176bd4f6de5d30e tag (not within the c9ccee2e6ea535a969eb3f532ad9fe89 tag) to link the css style file to the HTML file, thus maximizing the advantages of css. Of course, the name of the ".css" file must have a certain meaning to facilitate subsequent modifications or enhance its readability, such as "main.css"...

<link href="main.css" rel="stylesheet" style="text/css"/>

The rel="stylesheet" type ="text/css" is a fixed writing method that cannot be modified.

The format introduced through @import is as follows:

<style type="text/css">
@import url(demo.css);
</style>

This method will only introduce the css file after the entire page is loaded. Obviously The problem is the phenomenon of "streaking" on the page, which is of course absolutely unacceptable from the perspective of interaction and experience.

The difference in grammatical structure of the above two external introduction methods can be seen visually:

<span style="font-size:14px;"><link href="CSS路径" rel="stylesheet" type="text/css" /></span>
<span style="font-size:14px;">@import + 空格+ url(CSS文件路径地址);</span>

@import This method should also pay attention to the difference in downloading HTML and CSS files. In HTML, you need to add 080b747a20f9163200dd0a7d304ba388531ac245ce3e4fe3d50054a55f265927, but in css files, you can directly @import

is used to add the path. This brings up a point: for projects with many style files, we can choose to render the main styles first, and some secondary ones. Import it in the css file

, which can also alleviate the pressure on the server to a certain extent. Although the file is not large, it is still good to optimize it. In essence, there is not much difference between these two external introduction methods, but sometimes for the convenience of editing the style of the site in the project, the link method is often used.

Of course there are some introduction methods that use XML as editing requirements, but they are not commonly used....

Recommended learning: "

css Video Tutorial

"

The above is the detailed content of How to import css files. For more information, please follow other related articles on the PHP Chinese website!