上記の例は、ブラウザが mystyle.css ファイルからドキュメント形式で定義されたスタイル シートを読み取ることを示しています。 rel="stylesheet" は、ページ内でこの外部スタイル シートを使用することを指します。 type="text/css" は、ファイルの種類がスタイル シート テキストであることを意味します。 href="mystyle.css" がファイルの場所です。 「メディア」では、メディアの種類を選択します。これらのメディアには、スクリーン、紙、音声合成装置、点字読み取り装置などが含まれます。
外部スタイル シート ファイルは複数のページに適用できます。このスタイル シート ファイルを変更すると、それに応じてすべてのページのスタイルが変更されます。同じスタイルのページを大量に作成する場合に大変便利で、複製の手間が軽減されるだけでなく、後からの修正や編集が容易になり、閲覧時に繰り返しコードをダウンロードする手間も軽減されます。
スタイル シート ファイルは、任意のテキスト エディタ (メモ帳など) で開いて編集できます。通常、スタイル シート ファイルの拡張子は .css です。コンテンツは定義されたスタイル シートであり、HTML タグは含まれません。mystyle.css ファイルのコンテンツは次のとおりです:
body {background-image: url("images/back40.gif")} /*水平線の色を土っぽい黄色に定義します。段落の左側の余白は 20 ピクセルです。ページの背景画像は、images ディレクトリにある back40.gif ファイルです*/
2. 内部スタイル シート
内部スタイル シートは、ページの 領域にスタイル シートを配置します。これらの定義されたスタイルがページに適用されます。スタイル シートは、 タグを使用して挿入されます。 タグの使用方法は、次の例で確認できます:
……
……
注: 一部の下位バージョンのブラウザはスタイル タグを認識できません。つまり、下位バージョンのブラウザはスタイル タグのコンテンツを無視し、スタイル タグのコンテンツをページ上にテキストとして直接表示します。この状況を回避するために、HTML コメント () を使用してコンテンツを表示せずに非表示にします。
……
3. 外部スタイル シートのインポート
外部スタイル シートのインポートとは、外部スタイル シートをインポートすることを意味します。インポート時に @import を使用します。次の例を参照してください:
....
……
この例では、@import "mystyle.css" は import mystyle.css を意味しますスタイルシートを使用する場合は、外部スタイルシートのパスに注意してください。この方法は、スタイル シートにリンクする方法とよく似ていますが、外部スタイル シートをインポートする入力方法には、より多くの利点があります。基本的に、これは内部スタイル シートに保存されるのと同じです。
注: 外部スタイル シートのインポートは、スタイル シートの先頭、他の内部スタイル シートの上に行う必要があります。
4. インライン スタイル
インライン スタイルは HTML タグに混在しているため、要素に対して個別のスタイルを簡単に定義できます。インライン スタイルの使用は、スタイル パラメーターを HTML タグに直接追加することです。 style パラメータの内容は、次の例のような CSS プロパティと値です:
これは段落です
スタイル パラメータの後の引用符内の内容は、スタイル パラメータの中括弧内の内容と同等です。スタイルシート。
注: style パラメータは、BASEFONT、PARAM、SCRIPT を除く、BODY 内の任意の要素 (BODY 自体を含む) に適用できます。
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
