CSSのインラインスタイルの利点と欠点

CSS、またはCascading Style Sheetsは、ページに視覚的な外観を適用するために現代のウェブサイトデザインで使用されているものです。 HTMLはページの構造を作成し、Javascriptは動作を処理できますが、Webサイトのルック＆フィールはCSSのドメインです。 これらのスタイルは、外部スタイルシートを使用して適用されることが最も多いですが、インラインスタイルと呼ばれるものを使用して、特定の単一の要素にCSSスタイルを適用することもできます。

インラインスタイルは、ページのHTMLに直接適用されるCSSスタイルです。 このアプローチには長所と短所の両方があります。 まず、これらのスタイルがどのように記述されているかを見てみましょう。

インラインスタイルを書き込む方法

インラインCSSスタイルを作成するには、まずスタイルシートと同じようなスタイルプロパティを記述しますが、すべて1行にする必要があります。 スタイルシートと同じように、複数のプロパティをセミコロンで区切ります。

背景：#ccc; 色：#fff; 国境：黒1ピクト黒;

スタイルを設定したい要素のstyle属性の中に、そのスタイルの行を置きます。 たとえば、このスタイルをHTMLの段落に適用する場合、その要素は次のようになります。

この例では、この特定の段落は、淡い灰色の背景（#cccがレンダリングするもの）、黒のテキスト（＃000の色）、および段落の4つの辺の周りの1ピクセルの黒い境界線で表示されます。

インラインスタイルの利点

カスケーディングスタイルシートのカスケードのおかげで、インラインスタイルはドキュメント内で最も高い優先順位または特異性を持っています。 これは、外部スタイルシートに何が記述されていても適用されることを意味します（1つの例外として、シートには重要な宣言が与えられていますが、これは生産現場で行うべきことではありません回避することができます）。

インラインスタイルよりも優先順位が高い唯一のスタイルは、読者自身によって適用されるユーザースタイルです 。 変更を適用するのに問題がある場合は、要素にインラインスタイルを設定してみてください。 スタイルがまだインラインスタイルを使用して表示されない場合、あなたは何か他のことが起こっていることを知っています。

インラインスタイルは簡単に追加できますし、変更したい要素にスタイルを直接追加しているので、適切なCSSセレクタを書くことについて心配する必要はありません（その要素は、外部スタイルシートに書き込むセレクタを置き換えます）。 新しい文書全体を（外部スタイルシートと同様に）作成したり、文書の先頭に新しい要素を編集する必要はありません（内部スタイルシートなど）。 ほぼすべてのHTML要素で有効なstyle属性を追加するだけです。 これらは、インラインスタイルを使用するように誘惑される理由はすべてありますが、このアプローチのいくつかの非常に重大な欠点も認識している必要があります。

インラインスタイルの短所

インラインスタイルはカスケードの中で最も特化されているので、意図しないものを上書きすることができます。 また、CSSの最も強力な側面の1つを否定します。これは、1つの中央CSSファイルから多くのWebページを作成し、将来の更新やスタイルの変更をより簡単に管理できるようにする機能です。

インラインスタイルのみを使用する必要がある場合、文書はすぐに膨れ上がり、維持管理が非常に難しくなります。 インラインスタイルは、必要なすべての要素に適用する必要があるためです。 したがって、すべての段落にフォントファミリ 「Arial」が必要な場合は、ドキュメントの各

タグにインラインスタイルを追加する必要があります。 これにより、フォントファミリを変更するためにサイト内のすべてのページでこれを変更する必要があるため、デザイナーのメンテナンス作業と読者のダウンロード作業の両方が追加されます。 また、別のスタイルシートを使用する場合は、1つの場所でそれを変更し、すべてのページにその更新を受け取らせることができます。

正直なところ、これはウェブデザインの一歩です - タグの時代を遡ります！