0

これの何が問題なのかわかりません。2 つの HTML シートと 1 つの CSS シートがあります。

最初の HTML シート ( index.html) は次のようになります。

<html>
<head>
    <link rel="stylesheet" type="text/css" href="style.css">
    <link href='http://fonts.googleapis.com/css?family=Cedarville+Cursive' rel='stylesheet' type='text/css'>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
    <script type="text/javascript" src="script.js"></script>
</head>

<body>

    <h1>Olive</h1>
    <a href="page1.html">Enter</a>

</body>
</html>

2 番目の HTML シート ( page1.html) は次のとおりです。

<!DOCTYPE>
<html>

<head>
    <link rel="stylesheet" type="text/css" href="style.css">
    <link href='http://fonts.googleapis.com/css?family=Cedarville+Cursive' rel='stylesheet' type='text/css'>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
    <script type="text/javascript" src="script.js"></script>
</head>

<body>
    <div>
        <p id="prenav">Olive</p>
    </div>
</body>

</html>

そして CSS 外部シート:

body {
background-color: olive;
}

h1 {
font-family: 'Cedarville Cursive', cursive;
font-size: 230px;
text-align: center;
padding: 0px;
}

a {
display: block;
text-align: center;
font-family: 'Cedarville Cursive', cursive;
color: white;
font-size: 100px;
padding: 0px;
text-decoration: none;
}

#prenav {
font-family: 'Cedarville Cursive', cursive;
font-size: 50px;
color: white;
}

問題はid、2 番目の HTML シート ( page1.html) が機能しないことです。どうしてか分かりません。それが構文なのか何なのかわかりません。

本体の属性は で機能していますpage1.htmlが、id属性は機能していません。<p>要素は、任意のスタイルでのみ表示されます。誰かがこれの何が問題なのか教えてもらえますか?

4

3 に答える 3

3

デバッグのためのいくつかのヒント... css スタイルを (chrome と windows: で) 変更したときにキャッシュを数回更新してみてください。ctrl+shift+rうまくいかない場合は、以下のコードを使用して再度キャッシュを更新してください。

#prenav {
font-family: 'Cedarville Cursive', cursive !important;
font-size: 50px !important;
color: white !important;
}

この!importantルールは、CSS をカスケードする方法ですが、最も重要と思われるルールを常に適用する方法でもあります。

コード：

<!DOCTYPE html>
<html>

<head>
    <link href='http://fonts.googleapis.com/css?family=Cedarville+Cursive' rel='stylesheet' type='text/css'>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
    <style type="text/css">
        body {
background-color: olive;
}

h1 {
font-family: 'Cedarville Cursive', cursive;
font-size: 230px;
text-align: center;
padding: 0px;
}

a {
display: block;
text-align: center;
font-family: 'Cedarville Cursive', cursive;
color: white;
font-size: 100px;
padding: 0px;
text-decoration: none;
}

#prenav {
font-family: 'Cedarville Cursive', cursive;
font-size: 50px;
color: white;
}

</style>
</head>

<body>
    <div>
        <p id="prenav">Olive</p>
    </div>
</body>

</html>

編集：

解決策は、.css スタイルシートを正しいフォルダーに配置することでした。乾杯。

于 2013-03-15T23:08:48.230 に答える
0

構文は正しいですが、スクリプトはこの ID のスタイルを変更するコマンドである可能性があります。

于 2013-03-15T22:55:47.997 に答える