著者は、 Diversity in Tech Fund を選択して、 Write forDOnationsプログラムの一環として寄付を受け取りました。

序章

CSSのコア機能は、カスケード特異性の2つの機能によって実行されます。 カスケードは、CSSプロパティがどのように読み取られて要素に適用されるかを扱います。 特異性は、ブラウザに正しい要素を見つけてスタイルを適用するように指示します。 特異性の出発点はセレクターで、これはブラウザーに検索する要素を指示します。 スタイリングに関しては、WebページまたはWebサイトが大きいほど、より具体的な、またはより高い特異性のセレクターの必要性が高まります。

適切な要素を選択し、適切な視覚スタイルを提供することが、CSSコードを作成するための基本です。 Webページの要素の外観を調整する必要がある場合は常に、セレクターを使用することが重要です。

このチュートリアルでは、スキルセットを構築し、特定のシナリオで適切な要素を選択する方法を示すことで、視覚的に豊かなWebサイトを開発するのに役立ちます。 まず、タイプセレクターを使用して、スタイルを設定するHTML要素を選択します。 次に、セレクターを組み合わせて、スタイルをより正確に識別して適用します。 最後に、いくつかのセレクターをグループ化して、同じスタイルを異なる要素に適用します。

前提条件

  • CSSに適用されるカスケードと特異性の概念に精通していること。

  • ローカルマシンにindex.htmlとして保存された空のHTMLファイルで、選択したテキストエディタとWebブラウザからアクセスできます。 開始するには、 HTMLプロジェクトの設定方法チュートリアルを確認し、HTML要素の使用方法と理解方法に従ってブラウザでHTMLを表示する方法を確認してください。 HTMLを初めて使用する場合は、HTMLシリーズでWebサイトを構築する方法全体を試してください。

  • ローカルマシンのindex.htmlと同じディレクトリに保存されているstyles.cssという空のCSSファイル。

HTMLの設定

この最初のステップでは、チュートリアルの残りの部分でスタイルを設定するHTMLを設定します。 このチュートリアルのHTMLの目的は、スタイルを設定するためのさまざまな要素と状況を提供することです。

エディタでindex.htmlファイルを開き、次のボイラープレートHTMLを追加して、ファイルに必要なベースラインコードを指定します。

index.html
<!doctype html>
<html>
  <head>
    <link href="styles.css" rel="stylesheet" />
  </head>
  <body>
  </body>
</html>

<link />要素はすでにstyles.cssファイルにロードされているので、そのファイルも準備しておいてください。

今、あなたはいくつかのコンテンツが必要です。 <body>要素内に<header>および<article>要素を追加することから始めます。 次のコードブロックでは、強調表示されたセクションが、何が新しく、何が変更されたかを識別するのに役立ちます。

index.html
<!doctype html>
<html>
  ...
  <body>
    <header></header>
    <article></article>
  </body>
</html>

<body>要素と<header>要素の関係は、<header>要素が[ <body>タグ内にX151X]nested