CSSファイルをHTMLに挿入する方法

ビデオ: CSSファイルをHTMLファイルにリンクする方法[Webチュートリアル]

コンテンツ

ステップ
方法1/2：外部スタイルシートの設定方法
方法2/2：内部スタイルシートを挿入する方法
チップ
警告

ハイパーテキストマークアップ言語（HTML）は、Webページに存在する要素を決定します。カスケードスタイルシート（CSS）プログラミング言語は、これらの要素がどのように見えるかを記述します。CSSファイルは、外部（CSSは別のファイルとして追加されます）または内部スタイルシート（CSSはHTMLファイルに含まれます）としてHTMLに追加できます。 CSSをHTMLファイルに埋め込んでサイトを再設計する方法を学びます。

ステップ

方法1/2：外部スタイルシートの設定方法

1 CSSファイルを作成します。 拡張子が「.css」のCSSファイルを準備して保存します。
2 CSSファイルをサイトにアップロードします。
3 CSSファイルのアドレス（URL）をコピーします。 サイトアドレスは次のようになります。 www.yoursite.com/stylesheet.css.
- URLからプライマリドメイン名を削除することをお勧めします。これに基づいて、アドレスhttp：//myisite.com/css/default.cssは「/css/default.css」に短縮されます。先頭のスラッシュ（ "/"）を含めることを忘れないでください。これは相対パスと呼ばれます。
4 リンクをファイルに挿入します。 HTMLファイルで/ head>タグを見つけて、そのすぐ上に空の行を作成します。その行にLINKrel = stylesheet type = "text / css" href = "www.your_site.com / stylesheet.css">を貼り付け、「www.your ...」をCSSファイル内のリンクに置き換えます。
5 HTMLファイルを保存してサイトにアップロードします。
6 サイト上のすべてが適切に見えることを確認してください。 それ以外の場合は、HTMLファイルを再度開き、エラーを探して変更を加えます。

方法2/2：内部スタイルシートを挿入する方法

1 ラベルスタイルを作成します>。 HTMLファイルを開き、/ head>タグを見つけます。その上にいくつかの空白行を追加し、次のように入力します。

STYLE type = "text / css"> / STYLE>

1 これら2つのラベルの間にすべてのCSSを貼り付けます。
2 HTMLファイルを保存します（拡張子は.html）。
3 サイト上のすべてが適切に見えることを確認してください。 それ以外の場合は、必要な変更を加えます。

チップ

さまざまなブラウザやさまざまなオペレーティングシステムでサイトの外観を常に確認してください。一部のブラウザは、わずかに異なる方法でCSSに接続します。同じブラウザでも発生する可能性がありますが、MacとWindowsのバージョンが異なります。サイトが別のブラウザで異なって見える場合（たとえば、リストなどの一部のオブジェクト間の間隔が異なるサイズである場合）、問題はそのブラウザの設定にあります。マスタースタイルシートを見つけてCSSファイルの先頭に貼り付け、デフォルトのブラウザー設定を変更します。これは、設定がブラウザ自体で何も変更しないようにするために行われます。
可能であれば、外部スタイルシートを挿入します。これにより、ソースファイルのコードを変更して、サイトの外観を変更できます。このようにして、サイトのすべてのページでCSSを変更する必要はありません。
サイトが期待どおりにCSSに応答しない場合は、エンコーディング全体を再確認して、スペルが正しいことを確認してください。特に、セミコロン（ ";"）と閉じ括弧（ "}"）には特に注意してください。 CSSファイルでこれらの文字の1つを省略するのはかなり簡単です。
HTMLファイルをコンピューターに保存して、後でさまざまなWebブラウザーで開き、さらにダウンロードする前に外観を再確認できるようにします。ただし、ロードするには、CSSファイルを外部スタイルシートとしてHTMLに挿入する必要があります。
スタイルシートが矛盾する場合（たとえば、最初にテキストが青になり、次に赤になる）、最後の条件が常に満たされます。一方のコマンドが外部スタイルシートで、もう一方が内部スタイルシートの場合、内部スタイルシートがアクティブになります。