如何在GitHub托管站点中将CSS链接到HTML

时间:2019-01-09 17:50:00

标签: html css github hosting github-pages

我的问题是,我试图托管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;
}

链接存储库:legoman8304.github.io

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

3 个答案:

答案 0 :(得分:0)

您需要将HTML链接到呈现为style.css的github页面,而不是链接到仓库中的文件本身。

更改此:

<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>标记内。

答案 1 :(得分:0)

您可以使用以下方式:

  • 推荐:<link type="text/css" rel="stylesheet" href="style.css" />

  • 使用原始的CSS和href:https://raw.githubusercontent.com/legoman8304/legoman8304.github.io/master/style.css

答案 2 :(得分:0)

我有同样的问题 但是我解决了 伙计们, 将您的代码更改为

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

实际上问题出在time上,在提交之后,您必须稍微wait才能将其传播到github

还经常检查page source是否在您的浏览器中更新了 实际上,虽然我们离线编辑时不会花时间,但是在在线世界中却是相反的,所以请等待10到20秒,并经常通过重新加载页面源代码或网站来确定您的网站是否可以正常工作