How to introduce external css style sheet

Methods to introduce external css style sheets: 1. Use the "" statement to introduce it; 2. In the style tag pair, use the "@import url("css file path");" statement to introduce it.

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

Methods to introduce external css style sheets

##1. Use the tag## The # tag defines the relationship between the document and external resources. The most common use of the tag is to link to external CSS style sheets.

Syntax:

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

2. Use @import rules

@import rules allow you to import a style sheet into another style sheet.

Syntax:

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

The difference between the @import method

##link belongs to the HTML tag , and @import is provided by CSS.

• When the page is loaded, the link will be loaded at the same time, and the CSS referenced by @import will wait until the page is loaded before loading.

• @import can only be recognized by IE 5 or above, and link is an HTML tag, so there is no compatibility issue.

• #link style styles have a higher weight than @import weights.

Description: Path

Relative Path

As the name suggests: it is the position of the css file relative to a certain reference object.

When taking physics classes, the teacher will always mention relative motion: it refers to the relative motion of an object to another object relative to a fixed reference object. When we walk and look at a car, we feel that the car is going backwards. When the car looks at us, it is going forward, so the relative path also looks like this. The directory where the web page is located is our reference object.

The introduction of the css code like the following is a relative path address. The style.css file is in the same directory level as the web page file.

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

Absolute Path

Since it is absolute, it means that this address is unique and independent. Relative to the local area, the absolute address of the site test just now is F:\test. Relative to the server, it should be an IP address like 127.0.0.1/test.

Example:

<link rel="stylesheet" href="http://xxx.com/test/css/style.css" />

About path introduction

Whether it is a relative path or an absolute path to introduce the css file. I personally think that you can choose the relative path when previewing locally. , when the project went online, it was changed to an absolute path to import. Why? There are the following points:

1. Reduce indexing. The uniqueness of the absolute address can ensure that when the user enters the web page, the browser directly indexes the IP address, which is a fatal blow without any delay. The relative path requires indexing the directory step by step. This is like meeting a girl you like on the road. We are too shy to talk to her face to face, so we create countless chance encounters before we have the courage to go up and ask for her contact information, only to find out in the end. The girl has already been famous for a long time. If I had known this, why did I do it in the first place~

2. Increase external links. For those who do SEO, we all know that external links can bring about a good increase in weight, even if Someone else comes to capture our content. If it has not been changed to its own server address, it means that the reference address of this website is still our URL. The crawler will crawl back through this image reference address, but the relative path reference will be because the address has changed. , so the crawler cannot find the corresponding file after crawling back, so the crawler's work is about to stop.

3. Improve the ranking. If you are working on the front end, you will encounter an animation effect that you like. You have downloaded the HTML, but you don’t want to download the CSS directly, so you will Locally call the network address directly. When you accidentally click on the import address when previewing this page, it will jump to the corresponding website css. Even if you do not visit its homepage, you still visit its domain name, which inadvertently increases its visits.

(Learning video sharing:

css video tutorial

)

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