How to reference css files

Methods to reference css files: 1. Use the link tag, the syntax ""; 2. Use " @import" rule, syntax "@import url(file path);".

The operating environment of this tutorial: Windows 7 system, CSS3 version, Dell G3 computer.

1. Use the link tag (link style)

Write the css code in a separate file, and use the link tag to directly introduce the file to the page middle. A page can use the LINK tag multiple times to introduce multiple external CSS files. Pay attention to the mutual influence of these CSS codes. Usually, the CSS files introduced later will overwrite the same effects of the CSS files introduced earlier. This method of introducing CSS is currently the most popular. CSS codes can be planned within the scope of each website to facilitate reuse and maintenance. However, this highly centralizes the code, and the amount of code may be too large, and it is easy to cause problems if it is not properly maintained. confusion.

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

2. Use @import (import)

There are two ways to use @import to introduce CSS files, one can be placed in the page

@import url(index2.css);

It can also be used in a CSS file, the usage is as follows:

@import "sub.css";

It is very convenient to use @import to introduce CSS Introduce CSS code from external files to facilitate maintenance and planning. However, every time an additional CSS file is introduced, a connection request will be added to the server. When the number of visits is large, a trade-off needs to be made between maintainability and performance.

The difference between link (link) and import (@import)

link is an XHTML tag. In addition to loading CSS, it can also define other transactions such as RSS; @import belongs to the category of CSS and can only load CSS; when

link references CSS, it is loaded at the same time when the page is loaded; and @import requires the page to be fully loaded before loading.

link is an XHTML tag and has no compatibility issues; while @import was proposed in CSS2.1 and is not supported by lower version browsers.

ink supports using Javascript to control the DOM to change the style; @import does not support it.

@import can introduce other style sheets into the CSS file; link does not support it.

(Learning video sharing: css video tutorial)

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