如何在 github 托管站点中 link 我的 CSS 到我的 HTML

Question

我的问题是，我尝试使用 Github 页面托管的网站无法读取我链接到它的 CSS。

我的 HTML 看起来像这样：

<!DOCTYPE html>
<link rel="stylesheet" type="text/css" href="https://github.com/legoman8304/legoman8304.github.io/blob/master/style.css">
<html>
    <body>
        <h1>Hello World</h1>
        <p>I'm under construction!</p>
        <h6>Copyright MIT Licence 2018</h6>
    </body>
</html>

我的 CSS 看起来像这样：

body {
  background-color: lightblue;
}

h6 {
  color: navy;
  margin-left: 20px;
}

Link 存储库：legoman8304.github.io

我猜我把 CSS 链接错了，因为当我在网站本身上使用 inspect 元素时，它确实显示 style.css，但打开后它是空的。有帮助吗？

Answer 1

您需要 link 您的 HTML 到呈现的 github 页面 style.css 而不是存储库中的文件本身。

改变这个：

<link rel="stylesheet" type="text/css" href="https://github.com/legoman8304/legoman8304.github.io/blob/master/style.css">

为此：

<link rel="stylesheet" type="text/css" href="https://legoman8304.github.io/style.css">

并将该样式表引用移动到您的 <head> 标记中。

Answer 2

你可以使用一些方法：

推荐：<link type="text/css" rel="stylesheet" href="style.css" />
使用原始 css 和 href：https://raw.githubusercontent.com/legoman8304/legoman8304.github.io/master/style.css

如何在 github 托管站点中 link 我的 CSS 到我的 HTML

How to link my CSS to my HTML in a github hosted site

html

css

hosting

github

github-pages