A brief discussion on the writing method of path when HTML file is introduced into external CSS file

Time:2021-4-8

1、 Introduce the basic style of external CSS file

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

  • The path of the CSS file is indicated by the attribute
  • Rel = “stylesheet” describes the relationship between the current page and the document specified by the document. That is to say, the document connected by the document is a new table

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

2、 Basic rules of path

/Represents the root directory
… /Represents the upper level directory
… /… /Represents the upper two levels of directory
/… Represents the subdirectory
/… /… Represents the next two levels of directory

3、 Examples of common path writing

one index.html and style.css The 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 CSS file are in the same folder

As shown in the figure, there are folder B and folder B2 under folder a, style.css In folder C under folder B, index.html It’s in the B2 folder.

  • At this point, the idea of writing the path is: find the path index.html Documents and style.css The common parent folder of the file, seen from the figure, is folder a.
  • First, from index.html File start, that is, at this time in the B2 folder, first find the a folder (the upper level directory of the B2 folder), that is /
  • Then find it in folder a style.css Document, i.e. B / C/ style.css
  • Put together is: a /b/c/ style.css “

在这里插入图片描述


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

So far, this article about the summary of the writing method of the path when HTML files are introduced into external CSS files is introduced here. For more information about the content of the path when HTML files are introduced into external CSS files, please search the previous articles of developer or continue to browse the following related articles. I hope you can support developer more in the future!