開発者ドキュメント

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

序章

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

前提条件

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

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

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

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

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

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

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

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

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

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ルールで宣言したスタイルになります。

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

さらなる実践

CSSルールの実験を続けたい場合は、さまざまなHTMLテキスト要素(次のような)用のCSSルールセットを作成してみてください。 <h2>, <h3>、 と <h4>-そしてそれらを使用してあなたのテキストを変更する 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を使用して画像のスタイルを設定する方法の調査を開始します。

モバイルバージョンを終了