7

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スタイルシートに従ってスタイルが設定されることです。そうではありません。

何か案は？

ありがとう。

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 に答える