0

だから私は CodeAcademy のコースをたどってきました (私は不自由ですが、それはステップです)、今では自分の HTML/CSS を書くことに抵抗がありません。しかし、そうし始めたとき（私はsublimetext 3を使用しています）、htmlファイルを開くと、cssが適用されていないことがわかりました。機能するcodeacademyのコードを使用して再試行しましたが、Chromeはプレーンなhtmlを表示しました。ここにファイルからの私のコードがあります

template.html

<!DOCTYPE html>
<html>
    <head>
        <link type="text/css" rel="stylesheet" href="stylesheet.css"/>
        <title>Strut Your Stuff!</title>
    </head>
    <body>
        <p>I'm about to become a lovely shade of teal.</p>
        <p>Me, too!</p>
        <p>I think I'll do the same.</p>
        <div>
            <p>We're going to become a truly striking scarlet!</p>
            <p>I was thinking more vermillion.</p>
            <p>No, crimson!</p>
        </div>
    </body>
</html>

および stylesheet.css

p{
    color:#00E5EE;
}
div p{
    color:#CC0000;
}
*{
    border:1px dashed #3A5FCD;
}

両方のファイルは同じディレクトリにあります。何が起こっているのかについての洞察を共有していただければ、私は大いに助かります。前もって感謝します。

更新: ページをリロードするだけでは機能しないことがわかりました。新しいタブを開いてディレクトリを再度入力する必要がありました。

4

3 に答える 3

0

初心者として、このような問題をデバッグするときは「開発者ツール」が親友であることを学ぶ必要があります。

Chrome で F12 キーを押すと、開発者ツールが開きます。これは、Web の問題をデバッグするためにさまざまな方法で役立ちます。

開発者ツールの [ネットワーク] タブをクリックして画面を更新すると、ページが行っているすべてのリクエストと返されたものが表示されます。問題の説明から - .css ファイルのステータスの下に "404" が表示される可能性が非常に高く、ファイル名が間違っているか、パスが間違っている可能性が高いため、.css ファイルが見つからなかったことを意味します。

要素タブをクリックすると、ページ上の要素の階層ビューが表示されます。それらの 1 つを選択すると、それに適用されたスタイルが右側に表示されます。これにより、特定の要素に適用されている CSS ルール (存在する場合) を確認できます。

于 2013-08-14T01:41:47.840 に答える
0

問題は、ページのリロードが機能しないことでした。スタイルシートを作成してから、リロード ボタンを押します。私がする必要があったのは、新しいタブを開いて、html ファイルのディレクトリを再度貼り付けることでした。すべての洞察に感謝します

于 2013-08-14T01:35:12.103 に答える
-1

head セクションの html ファイルにスタイルシートを埋め込んでみてください

<style TYPE="text/css">
<!--
p{
    color:#00E5EE;
}
div p{
    color:#CC0000;
}
*{
    border:1px dashed #3A5FCD;
}
-->
</style>

これが機能する場合 (これは機能します...)、html ファイルと css ファイルの両方のパスを確認する必要があります。ブラウザで html を実行し、URL を確認します。次に、template.html を stylesheet.css に置き換えて、スタイルシートが表示されるかどうかを確認します。そうでない場合は、ファイルパスの問題になります。これがどうなったか教えてください

于 2013-08-14T01:28:15.197 に答える