" statement to load; 2. Use "@import url("css file path" );" statement is loaded."/> " statement to load; 2. Use "@import url("css file path" );" statement is loaded.">

Home >Web Front-end >CSS Tutorial >How to load css file

How to load css file

青灯夜游
青灯夜游Original
2021-07-22 14:12:393240browse

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

How to load css file

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

Method 1: Loading through the link tag

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

Use the 2cdf5bf648cf2f33323966d7f58a7f3f tag in the 93f0f5c25f18dab9d176bd4f6de5d30e9c3bca370b5104690d9ef395f2c5f8d1 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 c9ccee2e6ea535a969eb3f532ad9fe89 and 531ac245ce3e4fe3d50054a55f265927 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!

Statement:
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn