一般に CSS として知られるカスケード スタイル シートは、Web 開発者が好みに応じて Web ページのスタイルを設定する手段を提供します。 CSS でスタイル形式が定義されていない単純な HTML ページは、エンド ユーザーにとって非常に醜くて退屈に見えます。したがって、CSS は、現代の Web サイトに美しく、魅力的で魅力的な外観を与えるための重要なコンポーネントです。従来、CSS は Web サイトの外観を制御することのみを担当していました。それでも、継続的なアップグレードと新しい CSS により、Web 開発者やデザイナーは Web ページの応答性を制御して、ラップトップ、タブレット、モバイル画面向けに優れた UI を実現できます。
CSS はあらゆる Web サイトに必要であるため、デザイナーの要件に合わせて柔軟かつ簡単に定義できる必要があります。また、CSS 定義は非常に細かくできるため、同じスタイル形式を複数のコンポーネントに一緒に適用するには再利用可能である必要があります。幸いなことに、CSS の機能はこれらの要件を満たしています。
次のオプションの 1 つまたはすべてを使用して、CSS を Web ページに追加できます。ここで、これら 3 つの方法を詳しく見てみましょう。
インライン CSS を使用すると、HTML デザイナーは「style」属性を使用して HTML 要素のタグ内にスタイル情報を定義できます。これにはいくつかの長所と短所がありますが、それについては後でいくつかの例を使って説明します。インライン CSS は、CSS を適用する最も基本的な方法です。このメソッドを使用すると、一度に 1 つの HTML 要素だけをスタイル設定できます。スタイリングの再利用性は提供されません。スタイル情報は HTML 要素の開始タグで定義され、「style」属性の値として指定されます。
以下の例では、インライン CSS を使用して h1、h6、p 要素のフォントの色を変更しています。
コード:
<!DOCTYPE html> <html> <body> <h1 style="color:blue;">I am a Blue H1 heading</h1> <h1 style="color:blue;">I am a Blue H6 heading</h1> <p style="color:blue;">I am a Blue Paragraph</p> </body> </html>
出力:
上記の例では、H1、H6、および P タグのフォントの色を青に変更するだけでした。同じスタイル情報を適用したいにもかかわらず、それを再利用することができず、要素ごとに個別に 3 回定義する必要がありました。インライン CSS は再利用性に欠け、時間がかかるため、Web デザイナーは複数のページがある Web サイトのスタイルを設定するときにインライン CSS を使用することを好みません。また、インライン スタイル定義では、モバイル対応の Web サイトを作成することはほとんど不可能です。
内部 CSS では、HTML デザイナーは
