ホームページ > 記事 > ウェブフロントエンド > CSSにスタイルシートを挿入する方法
CSSにスタイルシートを挿入する方法
- (*-*)浩オリジナル
- 2019-11-26 16:05:162431ブラウズ
スタイル シートの挿入方法
スタイル シートが読み取られると、ブラウザはそれに応じて HTML ドキュメントをフォーマットします。スタイル シートを挿入するには、次の 3 つの方法があります。
外部スタイル シート (推奨学習: CSS 入門チュートリアル )
いつスタイルを適用する必要があります 多くのページを操作する場合は、外部スタイル シートが理想的です。外部スタイル シートを使用すると、1 つのファイルを変更するだけでサイト全体の外観を変更できます。各ページは、2cdf5bf648cf2f33323966d7f58a7f3f タグを使用してスタイル シートにリンクします。 (ドキュメントの) ヘッド内の 2cdf5bf648cf2f33323966d7f58a7f3f タグ:
<head> <link rel="stylesheet" type="text/css" href="mystyle.css" /> </head>
ブラウザは、ファイル mystyle.css からスタイル宣言を読み取り、それに応じてドキュメントをフォーマットします。
外部スタイル シートは、任意のテキスト エディタで編集できます。ファイルには HTML タグを含めることはできません。スタイル シートは .css 拡張子を付けて保存する必要があります。スタイルシート ファイルの例を次に示します。
hr {color: sienna;}
p {margin-left: 20px;}
body {background-image: url("images/back40.gif");}属性値と単位の間にスペースを入れないでください。 「margin-left: 20px」の代わりに「margin-left: 20 px」を使用すると、IE 6 でのみ機能し、Mozilla/Firefox または Netscape では機能しません。
内部スタイル シート
単一のドキュメントに特別なスタイルが必要な場合は、内部スタイル シートを使用する必要があります。次のように、c9ccee2e6ea535a969eb3f532ad9fe89 タグを使用してドキュメントの先頭で内部スタイル シートを定義できます:
<head>
<style type="text/css">
hr {color: sienna;}
p {margin-left: 20px;}
body {background-image: url("images/back40.gif");}
</style>
</head>インライン スタイル
コンテンツを含むプレゼンテーション インライン スタイルを併用すると、スタイル シートの利点の多くが失われます。たとえば、スタイルを要素に 1 回だけ適用する必要がある場合など、この方法は注意して使用してください。
インライン スタイルを使用するには、関連するタグ内で style 属性を使用する必要があります。 Style プロパティには、任意の CSS プロパティを含めることができます。この例は、段落の色と左余白を変更する方法を示しています:
<p style="color: sienna; margin-left: 20px"> This is a paragraph </p>
以上がCSSにスタイルシートを挿入する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。