CSSルールで複数のプロパティの値を宣言する方法

序章

このチュートリアルでは、CSSルールで複数のプロパティの値を宣言する方法を学習します。 1つのルールで複数のプロパティを宣言すると、サイズ、色、配置など、多くのスタイルの指示を要素に一度に適用できます。また、単一のHTMLドキュメント内のさまざまなコンテンツにさまざまなスタイルを適用できるようにするさまざまなCSSルールの作成についても説明します。

前提条件

このチュートリアルに従うには、このシリーズの前のチュートリアルCSSおよびHTML練習プロジェクトのセットアップ方法の指示に従って必要なファイルとフォルダーをセットアップしたことを確認してください。

複数の宣言を含むCSSルールの作成

CSSルールに複数の宣言を追加するには、styles.cssファイルの<h1>ルールを変更してみてください（または、チュートリアルシリーズに従わなかった場合はコードスニペット全体を追加してください）。追加の強調表示された宣言が含まれています。

h1 {
  color: blue;
  font-size: 100px;
  font-family: Courier;
  text-align: center;
}

ファイルを保存し、ブラウザにHTMLドキュメントをリロードします。（HTMLファイルをロードする手順については、チュートリアルステップブラウザでオフラインHTMLファイルを表示する方法を参照してください）。これで、テキストがページの中央に配置され、サイズが100ピクセルになり、Courierフォントでレンダリングされます。

次のセクションでは、CSSルールを追加して、Webページのコンテンツのスタイル設定の可能性を拡張します。

HTMLコンテンツのスタイルを設定するための複数のCSSルールの作成

このセクションでは、HTML <p>要素を使用して、index.htmlファイルにテキストを追加します。 <p>タグにのみ適用される新しいCSSルールセットを使用してプロパティを変更してみます。

index.htmlファイルで、CSSルールの理解と作成のチュートリアルで追加した既存の<h1>A sample title<h1>行の下に<p>Some paragraph text</p>を含む行を追加します。

index.html

<h1>A sample title</h1>
<p>Some paragraph text</p>

index.htmlファイルを保存し、ブラウザウィンドウにリロードして、ファイルがどのように表示されるかを確認します。ブラウザは、次の例のように、「サンプルタイトル」という青い見出しと、その下に「いくつかの段落テキスト」というスタイルのない段落をレンダリングする必要があります。

次に、CSSルールを追加して<p>要素のスタイルを設定しましょう。 styles.cssファイルに戻り、ファイルの最後に次のルールセットを追加します。

styles.css

. . .
p {
  color: green;
  font-size: 20px;
  font-family: Arial, Helvetica, sans-serif;
  text-align: center;
}

ファイルを保存してブラウザウィンドウにリロードし、ファイルがどのように表示されるかを確認します。これで、<p>テキストは、作成したCSSルールで宣言したスタイルになります。

<h1>および<p>要素のCSSルールができたので、HTMLドキュメントでこれらのタグでマークアップしたテキストは、[でこれらの要素に対して宣言したスタイルルールを採用します。 X203X]ファイル。

さらなる実践

CSSルールの実験を続けたい場合は、<h2>、<h3>、<h4>などのさまざまなHTMLテキスト要素のCSSルールセットを作成し、それらを使用してテキストを変更してみてくださいindex.htmlファイル内。行き詰まっている場合は、次の例のCSSルールをコピーして、styles.cssファイルに追加できます。

styles.css

. . .
h2 {
  color: red;
  font-size: 40px;
}

h3 {
  color: purple;
  font-size: 50px;
}

h4 {
  color: green;
  font-size: 60px;
}

ファイルを保存してから、次のHTMLコンテンツをindex.htmlファイルに追加します。

index.html

<h2> This is red text with a size of 40 pixels. </h2>
<h3> This is purple text with a size of 50 pixels. </h3>
<h4> This is green text with a size 60 pixels. </h4>

ファイルを保存し、ブラウザにindex.htmlをロードします。次の結果が表示されます。

結論

このチュートリアルでは、CSSを使用して複数のプロパティの値を指定する実験を行いました。また、HTMLドキュメントのテキストコンテンツをスタイル設定するための複数のCSSルールを作成しました。チュートリアルシリーズの後半でデモンストレーションWebサイトの構築を開始するときに、これらの両方のスキルを拡張します。次のチュートリアルでは、CSSを使用して画像のスタイルを設定する方法の調査を開始します。