ホームページ > 記事 > ウェブフロントエンド > css_html/css_WEB-ITnose を使用する
css_html/css_WEB-ITnose を使用する
- WBOYオリジナル
- 2016-06-24 11:55:03987ブラウズ
スタイルシートの挿入方法
スタイルシートが読み取られると、ブラウザはそれに応じてHTMLドキュメントをフォーマットします。スタイル シートを挿入するには 3 つの方法があります:
外部スタイル シート
外部スタイル シートは、多くのページにスタイルを適用する必要がある場合に最適です。外部スタイル シートを使用すると、1 つのファイルを変更するだけでサイト全体の外観を変更できます。各ページは、2cdf5bf648cf2f33323966d7f58a7f3f タグを使用してスタイル シートにリンクします。 (ドキュメントの) head 内の 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>
複数のスタイル
いくつかのプロパティが異なるスタイル シートの同じセレクターによって定義されている場合、プロパティ値はより具体的なスタイル シートから定義されます。スタイルシートは継承されます。
たとえば、外部スタイル シートには h3 セレクターの 3 つの属性があります:
h3 { color: red; text-align: left; font-size: 8pt; } そして、内部スタイル シートには h3 セレクターの 2 つの属性があります:
h3 { text-align: right; font-size: 20pt; } 内部スタイル シートを含むこのページに外部スタイル シートがある場合、同時にリンクした場合、h3 によって取得されるスタイルは次のようになります:
color: red; text-align: right; font-size: 20pt;
つまり、色の属性は外部スタイル シートから継承され、テキストの配置 (text-alignment) とフォント サイズ (font-size) は次のようになります。内部スタイルシートのルールに置き換えられます。