如何從 HTML 文件鏈接 .css 文件？

Question

我一直在學習 HTML5 和 CSS，直到現在我一直在 HTML <head> <style> </style> <head>部分進行<head> <style> </style> <head> 。 當我第一次嘗試將樣式從 HTML 文件移動到 CSS 文件時，我的link無法正常工作。

我想要的是？ 我正在嘗試將我的樣式移動到 .css 文件中。

我嘗試了什么？

我創建了一個新文件夾，在這個文件夾中存在一個新的 .HTML 文件和一個新的 .CSS 文件。 我正在使用 VScode。

我嘗試將我的 HTML 和 CSS 粘貼到 codepen 中並呈現它，所以我不確定我的<link>有什么問題。

我的 html 文件如下所示：

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title> Try this again</title>

        <link rel="Hope this works" href="newcssstyle.css" type="text/css">
    </head>

    <body>

        <h1> Here we go </h1>
    </body>
</html>

我的 .css 文件看起來像：

h1{ 
    font-family: Arial, Helvetica, sans-serif; 
    color: blue;
}

Answer 1

為什么鏈接 CSS 文件不起作用？

在您的示例中，您只需將rel="Hope this works"更改為rel="stylesheet"即可將其識別為樣式表，如下所示：

<link rel="stylesheet" href="newcssstyle.css" type="text/css">

這只是為了區分stylesheet鏈接和icon圖像鏈接之間的區別。 這個指向 w3 Schools 頁面的鏈接描述了屬性rel的可能值。

此外，如果它仍然不起作用，請確保文件“newcssstyle.css”與引用的 HTML 文件位於同一目錄中。 如果將它放在諸如“樣式表”之類的文件夾中，請確保將相對文件夾路徑添加到 HTML 文件中。

例如，如果您有一個這樣的目錄：

父目錄名稱：
- 索引.html
- 樣式表：
  - 新的cssstyle.css

然后你會將“newcssstyle.css”（相對於“index.css”）引用為href='Stylesheets/newcssstyle.css'

而在這樣的目錄中：

父目錄名稱：
- html_files:
  - 索引.html
- 樣式表：
  - 新的cssstyle.css

然后，您可以將“newcssstyle.css”改為href='../Stylesheets/newcssstyle.css' （其中..表示“返回到父目錄的級別”）。

如果問題仍然存在，則可能是您的瀏覽器與您的特定 HTML 或 CSS 版本不兼容。 例如，Internet Explorer，它被認為是一個糟糕的瀏覽器。 如果您使用它，只需獲取 Chrome。

Answer 2

元素創建當前和外部文檔之間的關系。

關於 i 代表關系的屬性的重點。 此屬性定義鏈接文檔如何與當前文檔相關。 怎么讀..

另外請確保您的 .css 文件與您的 href 具有相同的名稱。

您可以在此處閱讀更多相關信息 -> https://developer.mozilla.org/en-US/docs/Web/HTML/Element/link

如何從 HTML 文件鏈接 .css 文件？

問題描述

2 個解決方案

解決方案1
1 2018-08-02 20:39:12

為什么鏈接 CSS 文件不起作用？

解決方案2
0 2018-08-02 20:44:50

如何從 HTML 文件鏈接 .css 文件？

問題描述

2 個解決方案

解決方案1 1 2018-08-02 20:39:12

為什么鏈接 CSS 文件不起作用？

解決方案2 0 2018-08-02 20:44:50

解決方案1
1 2018-08-02 20:39:12

解決方案2
0 2018-08-02 20:44:50