Shulou(Shulou.com)05/31 Report--

This article mainly introduces the relevant knowledge of "how to introduce css files". The editor shows you the operation process through actual cases. The operation method is simple, fast and practical. I hope this article "how to introduce css files" can help you solve the problem.

The method of introducing css file: 1, the inline method is introduced, and the CSS style is set in the style attribute of the tag; 2, the embedded method is introduced, and the CSS style is written centrally in the style tag of the web page; 3, the external CSS file is referenced by link; 4, the external CSS file is referenced by @ import.

This article operating environment: windows7 system, HTML5&&CSS3 version, Dell G3 computer.

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

Generally speaking, there are the following four categories:

1. Inline style: also known as inline style, sets the CSS style in the style attribute of the tag. This approach does not reflect the advantages of CSS.

two。 Embedded: centrally write the CSS style in the tag pair of the web page

3. Linked type: the import type with the fourth is called external or external, using link to reference external CSS files.

4. Import: use @ import to reference external CSS files

-A

For inline style, it is the easiest and most accustomed way to write at the beginning, but this way of writing does not show the advantages of css at all, as follows:

I write it in an industry style.

If there are a lot of tags on a page, this way of writing looks bad and cumbersome, and it is too repetitive and is not recommended!

-B

Embedded if the number of pages is relatively small, it is also a good choice, but if there are many pages corresponding to a project, this is undoubtedly a bit disastrous, to change a style, perhaps a large length of similar pages

Noodles, but all have to be modified one by one, as follows:

# demo {position:absoulte;left: 20pxscape 50pxscape widthdisplay 300pxashing height: 50pxashing border: solid 1px red;padding-left: 20pxcolormistress graypolitic fontlysize: 20pxpolitical lineheight: 50pxmittextAfter: center;}

This way of writing avoids the "no style" phenomenon of the page to some extent, and the page renders the page after loading css.

-CD

External css style is to write the css code into a separate external file. The css style file has the extension ".css" and links the css style file to the HTML file using tags within the tag (not within the tag). This maximizes the advantages of css. Of course, the naming of the ".css" file should have a certain meaning to facilitate subsequent modifications or enhance its readability, such as "main.css".

The rel= "stylesheet" type= "text/css" is fixed and cannot be modified.

The format introduced through @ import is as follows:

@ import url (demo.css)

This method will not introduce the css file until the whole page is loaded, and the obvious problem is the "streaking" phenomenon of the page, which is absolutely unacceptable from the point of view of interaction and experience.

The above two external introduction ways look directly at the difference of the grammatical structure:

@ import + spaces + url (CSS file path address)

@ import should also pay attention to the differences in downloading HTML and CSS files, which need to be added in HTML, while you can directly @ import in css files.

To add the path to use, there is a point: corresponding to more style files of the project, we can choose to first primary and secondary, the main style rendered first, some secondary can be put in the css file for import, this can also alleviate the pressure on the server to a certain extent, although the file is not large, but can be optimized is still good. In essence, there is not much difference between the two external introduction methods, but sometimes for the convenience of editing the site style in the project, more link is used.

This is the end of the introduction of "how to introduce css files". Thank you for your reading. If you want to know more about the industry, you can follow the industry information channel. The editor will update different knowledge points for you every day.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.