目次:
ビデオ: cssとは？font-familyについて｜【カタハリ】の女性に優しいhtml講座】 2024
スタイルはHTML5本体で直接定義できます。次に、このタイプのコードの例を示します。ローカルスタイルは、ページ上の要素の特定のインスタンスを変更するため、 要素レベルの スタイルと呼ばれることもあります。
localStyles。 htmlローカルスタイル
この段落は、ローカルで定義されたボーダー
<！ - 1 - >この段落には、一連のフォントおよびテキスト規則が適用されています。
このコードを見ると、いくつかのことが明らかになります。
-
No 要素がヘッダーにあります。 通常は、ページヘッダーのセクションを使用して、すべてのスタイルを定義します。このページにはそのようなセグメントはありません。
-
段落には独自のスタイル属性があります。 HTML本体の各段落にスタイル属性が追加されました。すべてのHTML要素がスタイル属性をサポートしています。
<！ - 2 - > -
スタイルコード全体が一重引用符で囲まれています。 スタイル付き要素ごとに、スタイルは1つのHTML属性であるため、スタイル全体が引用符のペアになります。インデントと空白を使用すると、わかりやすくなります。
ローカルスタイルを使用する場合
ローカルスタイルを最初に選択すべきではありませんが、状況によっては便利かもしれません。
ワープロや他のツールから翻訳するプログラムを作成する場合は、ローカルスタイルが翻訳作業を行う最も簡単な方法です。ワードプロセッサを使用してページを作成し、そのページにHTMLとして保存するように指示すると、ワードプロセッサはしばしば独自の独自形式でこのテクニックを使用するため、ローカルスタイルを使用します。
<！ - 3 - >通常、多くのローカルスタイルのHTMLページが表示されるのは、自動翻訳ツールがそのページを作ったからです。
コードサンプルで使用されるローカルスタイルが表示されることがあります。たとえば、次のコードを使用して異なる境界線スタイルを示すことができます：
localBorders。 htmlインラインボーダー
この段落には黒いボーダーがあります。
この段落には黒色の2重のボーダーがあります。
例のように、エレメントのすぐ隣にスタイルを表示すると便利です。このコードはデモンストレーションやテストの目的では問題ありませんが（いくつかの境界線スタイルを見たいだけなら）、プロダクションコードにはあまり適していません。
ローカルスタイルの優先度は非常に高いので、ローカルスタイルで適用するものは他のスタイルルールよりも優先されます。状況が期待どおりに機能しない場合、これは便利な回避策になる可能性がありますが、回避策に頼るよりもスタイルが正しく機能するようにする方がよいでしょう。
ローカルスタイルの欠点
ローカルスタイルを適用するのはかなり簡単ですが、ほとんどの場合、テクニックは、
-
非効率： style属性で要素レベルでスタイルを定義すると、特定のインスタンスだけが定義されます。このようにページ全体の段落の色を設定したい場合は、多くのスタイルルールを書くことになります。
-
読みやすさ： スタイル情報がページ全体に散在している場合、ヘッダー（または外部ドキュメント）の中央に配置されているスタイル情報よりも、検索と変更がはるかに難しくなります。
-
分離の欠如： 要素レベルでスタイルを配置することは、コンテンツをスタイルから分離するという目標を打ち消す。変更を加えるのがはるかに難しくなります。スタイルとコンテンツを混在させると、コードの読み込みや変更が難しくなります。
-
ぎこちなさ： CSS規則のバッチ全体を、一組の引用符で1つのHTML属性に詰め込む必要があります。 CSSのHTMLフローに直接組み込まれているため、読みにくい場合があります。
-
引用の問題： HTML属性には引用符が必要であり、一部のCSS要素にも引用符（たとえば、スペースを含むフォントファミリ）が必要です。 1つの要素に複数のレベルの引用符を付けることは、トラブルのレシピです。
