Question

我的github上有一个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 id="title">Please be styled</h1>
</body>
</html>

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

有什么想法吗？

感谢。

Answer 1

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。保存文件并从您自己的服务器上提供。

此行为有discussion。相关位是来自github的响应：

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

Answer 2

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

Answer 3

从h1标记中删除属性ID即可。你的CSS文件中没有#title选择器。

Answer 4

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

Answer 5

我查看了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;}

无法将CSS文件从Web拉入我的html页面

5 个答案: