このレッスンは、カスケードスタイルシート（CSS）を使用してHTMLビジュアルを強化することを妨げます。 CSSセレクター（特定のHTML要素をターゲットにするためのツール）から始めます。

カスケードスタイルシート（css）

CSSは、色、間隔、サイズなどのHTMLコンポーネントの外観を決定します。インラインスタイル属性（

/* style.css */
p {
  color: red;
  text-decoration: underline;
}

これは、すべての

HTML要素の選択

p in p {color：red; } すべての

要素を選択します。 より複雑な構造の場合、 id および class

クラスおよびIDセレクター

各要素には、一意の id を持つことができます。 id selectors（＃idname ）ターゲット要素 id 。 ただし、 id

クラスはより大きな汎用性を提供します。 複数の要素が同じクラスを共有できます。クラスセレクター（。className ）ターゲット要素がそのクラスを使用します。 要素には複数のクラスを持つことができます（例：

）。 。red-text {color：red; } は、すべての要素を red-text classでスタイリングします。 p.red-text 具体的には

要素のみを red-text

組み合わせセレクター

• div p ：

  要素を

  elements（descendants）。
• div> p ：直接の子供のみを選択します
  要素
  要素。
• p span ： を

  。の直後に選択します。

• p〜span ：すべての 兄弟を選択します。
過度に複雑な組み合わせの組み合わせは落胆します。 それらをクラスセレクターと結合することができます（例：。イントロP ）。。

pseudo-selectors

擬似クラスセレクターは、その状態に基づいたスタイル要素（例： a：hover 、

a：active

、 a：visited ）。 擬似エレメントセレクターは、要素の部分をターゲットにします（例： :: first-letter ）。） その他のセレクター

*

：すべての要素を選択するユニバーサルセレクター。
• グループセレクター（例： H1、H2、P ）：複数の要素タイプを選択します。
• 属性セレクター（例： p [lang] 、
p [lang = "en"]
• ）：属性に基づく要素を選択します。 さらに読む：

レスポンシブデザイン

レスポンシブ画像
• CSSアニメーション
この投稿はもともとThedevspaceに掲載されていました。