スタイリングをさらに進化させる

こんにちは、コードを学習しながら学ぶ: HTML と CSS へようこそ!今日は、スタイリングの世界をさらに深く掘り下げていきます。これまで、要素を直接スタイリングしてきました。しかし、

が 2 つある場合はどうなるでしょうか。要素があり、それぞれを異なる外観にしたいですか? CSS セレクターを入力してください!

要素セレクター

これらについてはすでによく知っていますが、もう一度要約してみましょう:

h1 {
  font-size: 32px;
  font-family: Arial;
  font-weight: 500;
}

このルールセットはすべての

を対象としています。要素のフォント サイズ、ファミリー、ウェイトを設定します。要素セレクターは、ページ全体のスタイル ガイドの設定など、幅広いストロークに最適です。しかし、正直に言って、すべてがすべてではないわけではありません。タグは同じように見えるはずです。より具体的なスタイルについては、さらに努力する必要があります!

クラスセレクター

クラスが助けになります! 2 つ欲しい

タグを変更すると見えますか？クラスを追加します:

<p class="big red">This text is BIG and red.</p>
<p class="small blue">This text is small and blue.</p>

各

タグには 2 つのクラスがあります。 CSS で、これらのクラスを .:
でターゲットにします。

.big {
  font-size: 100px;
}

.small {
  font-size: 9px;
}

.red {
  color: red;
}

.blue {
  color: blue;
}

ドーン！スタイルが適用されました。 「なぜスタイルを組み合わせてより少ないクラスにしないのですか?」と疑問に思うかもしれません。良い質問です！私はクラスを柔軟に保ちたいと思っています。青のない小さいサイズをいつ再利用したくなるかわかりません。

ID セレクター

一意の要素には ID を使用します。これをチェックしてください:

<p id="name">My Name is Nolan!</p>

ID は慎重に使用し、ページごとに 1 回のみ使用してください。 #:
を使用して CSS でターゲットを指定します。

#name {
  text-decoration: underline;
}

簡単ですね?

相反するスタイル

では、要素にクラスと ID の両方がある場合はどうなるでしょうか?このように:

<p id="red" class="blue">Will I be red or blue?</p>

赤くなるよ！なぜ？ ID はクラスよりも具体的であるためです。簡単な例を次に示します:

<p id="red" class="underline">I’m styled by three rulesets!</p>

p {
  font-size: 12px;
  color: black;
  text-decoration: none;
}

.underline {
  text-decoration: underline;
}

#red {
  color: red;
}

テキストが赤くなり、下線が付き、フォント サイズは 12 ピクセルになります。 ID はクラスよりも優先され、クラスは要素セレクターをオーバーライドします。このスタイルのカスケードにより、コードを繰り返すことなくページが洗練された外観になります。

チャレンジ

自己紹介ページをレベルアップしましょう!あなたの使命は次のとおりです:

• 、

  、

  のデフォルトのスタイルを設定します。要素セレクターを使用します。

• あなたの名前の下に

  を使ってキャッチフレーズを追加します。タグを付け、ID を使用してスタイルを設定します。

• クラスセレクターを使用して他のテキストを飾り付けます。

矛盾するスタイルを試して、どのルールが勝つかを確認してください。理由が分かりますか?

読んでいただきありがとうございます!このシリーズで他にも取り上げてほしいトピックがあれば、コメント欄でお知らせください。または、このシリーズをどのように楽しんでいるかを教えてください。

以上がスタイリングをさらに進化させるの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。