7

我有一个 HTML 页面在我的 github 上引用了一个样式表。

这是：

<html>
<head>
    <title>Basic JavaScript Quiz</title>
    <link rel="stylesheet" type="text/css" href="https://raw.github.com/dublintech/JavaScript_Examples/master/jsquiz/css/jquiz.css" /> 
</head>
<body>
    <h1 id="title">Please be styled</h1>
</body>
</html>

我的期望是Please be styled将按照样式表进行样式设置。但事实并非如此。

有任何想法吗？

谢谢。

4

5 回答 5

8

Firefox 在控制台中记录错误：

样式表https://raw.github.com/dublintech/JavaScript_Examples/master/jsquiz/css/jquiz.css未加载，因为它的 MIME 类型“text/plain”不是“text/css”。@http ://jsbin.com/oyiceq/1/edit

不要使用来自 github 的资源——它不是 CDN。保存文件并从您自己的服务器上提供它。

有关于这种行为的讨论。相关位是来自 github 的响应：

“这是一个功能，有点。请不要像那样滥用原始 URL，它们对我们的服务器来说是一项非常昂贵的操作。你应该在 pages.github.com 上托管这样的文件。”

于 2012-12-27T22:02:44.443 回答
3

服务器正在发送带有Content-Typeof的文件text/plain，这可能会阻止它被用作 CSS。

于 2012-12-27T22:03:06.330 回答
-1

从您的 h1 标记中删除属性 id 即可工作。您的 CSS 文件中没有 #title 选择器。

于 2012-12-27T21:58:57.607 回答
-1

使用相对路径，您使用的链接指向显示CSS 的页面，但实际上并未将数据作为 CSS 提供。

于 2012-12-27T22:00:34.863 回答
-2

我检查了css文件，你没有任何标题ID。您已经在h1元素上设置了样式。因此，为了查看样式，您可以选择像这样修改 HTML：

<html>
<head>
    <title>Basic JavaScript Quiz</title>
    <link rel="stylesheet" type="text/css" href="https://raw.github.com/dublintech/JavaScript_Examples/master/jsquiz/css/jquiz.css" /> 
</head>
<body>
    <h1>Please be styled</h1>
</body>
</html>

或者像这样修改css：

#resultsTable {
   width:100%;
   border-collapse:collapse;
}
#resultsTable td, #resultsTable th 
{
font-size:1em;
border:1px solid #0066CC;
padding:3px 7px 2px 7px;
}
#resultsTable th 
{
font-size:1.1em;
text-align:left;
padding-top:5px;
padding-bottom:4px;
background-color:#A7C942;
color:#ffffff;
}
#resultsTable tr.alt td 
{
background-color:#e7f4c3;
}


body{
    margin: 0px;
    padding: 0px;
    background: #669966;
    cursor: default;
    font-size: 12px;
    font-family: Arial, Tahoma;
}
.questionContainer {
    width: 800px;
    border: 3px double #003366;
    padding: 3px;
    margin: 10px;
}
ul {
    margin: 0px;
    padding: 5px;
}
ul li {
    list-style: none;
}
a {
    border: 1px solid #000;
    padding: 2px 5px;
    font-weight: bold;
    font-size: 10px;
    background: #FFF;
    cursor: pointer;
}
a:hover {
    background: none;
}
.btnContainer {
    width: 96%;
    margin: 10px 0px 10px 2%;
}
#progressKeeper {
    width: 800px;
    height: 25px;
    border: 3px double #003366;
    margin: 0px 10px;
    padding: 3px;
}
#txtStatusBar {
    margin: 5px 10px;
    font-weight: bold;
}
#progress {
    background: green;
    width: 0;
    height: 25px;
}
.radius {
    border-radius: 6px;
    -moz-border-radius: 6px;
    -webkit-border-radius: 6px;
    -o-border-radius: 6px;
}
#resultKeeper {
    width: 800px;
    margin: 10px;
    padding: 3px;
    border: 3px double #003366;
    background:#66CC66;
}
#resultKeeper div {
    line-height: 20px;
}
.totalScore {
    font-weight: bold;
    padding:10px;
}
input {
    position: relative;
    top: 2px;
}
#title {
    border-bottom: 1px solid #003366;
    font-size: 16px;
    height: 22px;
    margin: 10px;
    text-indent: 5px;
}
.prev { float: left; }  /** elements after a float will flow around it **/
.next, .btnShowResult { float: right; }
.clear { clear: both; }    /** no floats allowed left or right **/
.hide { display: none; } 
.resultlist  li.altli{background:#CCFFAA;}
.resultlist li {background: #BBEEAA;}
#resultsTable td.fail{color:red;}
于 2012-12-27T22:01:37.063 回答