A brief summary of how to write paths when HTML files introduce external CSS files

1. Import the basic style of external CSS files

Use the <link> tag to introduce an external style sheet, which usually has two attributes:

• The href attribute indicates the path of the CSS file
• rel="stylesheet" describes the relationship between the current page and the document specified by href. That is, the document connected by href is a new style sheet.

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

2. Basic rules of the path

/ represents the root directory, use with caution
…/ represents the previous directory
…/…/ represents the two levels above the directory
/… represents the lower level directory
/…/… represents the next two levels of directories

3. Examples of common path writing

1. index.html and style.css files are in the same folder

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

2. The css file is in the same folder as the html file

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

3. The parent folder of html and the parent folder of css files are in the same folder

As shown in the figure: there are folders b and b2 under folder a, style.css is in folder c under folder b, and index.html is in folder b2.

• The idea of ​​writing the path at this time is: find the common parent folder of the index.html file and the style.css file. From the figure, it is folder a.
• First, starting from the index.html file, that is, in the b2 folder at this time, first find the a folder (the parent directory of the b2 folder), that is: .../
• Then find the style.css file from folder a, that is: b/c/style.css
• Combined together: href="…/b/c/style.css"

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

This concludes this article on how to write paths when HTML files import external CSS files. For more information about how to import external CSS paths from HTML, please search previous articles on 123WORDPRESS.COM or continue to browse the related articles below. We hope that everyone will support 123WORDPRESS.COM in the future!