How to load css file

How to load css files: 1. Use the "" statement to load; 2. Use "@ import url("css file path");" statement is loaded.

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

Method 1: Loading through the link tag

The tag defines the relationship between the document and external resources. The most common use of the tag is link style. surface.

Use the tag in the tag pair of the web page to call the external CSS file.

Grammar format:

<link rel="stylesheet" type="text/css" href="css文件路径" />

Description of each attribute:

• href attribute sets the address of the external style sheet file, which can be a relative address or Can be an absolute address.

• The rel attribute defines the associated document, which here indicates that the associated document is a style sheet.

• The type attribute defines the type of imported file. Like the style element, text/css indicates a CSS text file.

Note:

This method will load the CSS file before loading the main body of the web page file, so the displayed web page will have a style effect from the beginning. Unlike the import method, the unstyled web page will be displayed first and then the styled web page will be displayed.

Method 2: Loading via @import

@import rules are used to import style rules from other style sheets. These rules must precede all other types of rules. .

Use the @import command to import external style sheet information into the page. It exists in the tags.

<style type="text/css">
@import url("css文件路径");
</style>

Note:

Using @import to introduce CSS can easily introduce CSS code from external files, making maintenance and planning easier. 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.

Using the @import method to load will cause the CSS file to be loaded only after the HTML page is loaded. That is to say, before the CSS file is loaded, the page will run naked, but the response speed will be faster when entering the website. !

(Learning video sharing: css video tutorial)

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