なぜこの問題が発生したのですか?

ネットが登場したばかりの頃、言語はhtmlという言語しかありませんでした.htmlという言語を使って電子ドキュメントを作ることができます.当時htmlという言語で情報をパソコンで表現し、インターネットを通じて世界中の誰にも情報を共有することは大きな問題でしたが、時間が経つにつれて、他の機能をもっと追加したいと思っています.
最初は、html自体に色や大きさを指定したフォントなどのデザインラベルを個別に作成していましたが、そうなると、コードに情報がないデザインを特定するラベルが増え、htmlの本来の目的の情報を伝える意味が色あせ、デザインラベルが加わってコードが長くなり、修正しにくい現象が発生しました.
そこで、w 3 cはhtmlから設計要素を分離する案を考え出し、このようにして生まれた言語がcssである.

どうしてCSSを勉強しますか。

htmlはウェブページの基本構造を記述する言語であり、htmlで設計すればウェブページが実現するが、重複するコードが多いため、コードの可読性が低下し、置き換えが必要なコードが多くなると、その修正作業が非常に面倒になる.
以前のように、情報を伝えるためだけに設計する必要はありませんでしたが、今の社会では、ウェブページの設計は欠かせない要素なので、htmlと一緒にcssを学ぶことが基本だと思います.

CSSの基本構造

セレクタ

選択したHtmlドキュメントで、cssとして適用するタグを指定します.選択者の決定
どの部分で設計するかを決めます.

プロパティ(property)

プロパティは、選択者が指定したタグに何を変更するかを決定します.属性は({})で作成され、選択者の後ろに中価で書かれます.

値(value)

値によって、アトリビュートで指定した効果がどの程度変更されるかが決まります.
値は、指定したプロパティに基づいて異なる内容を記述できることに注意してください.指定値、最後にセミコロン(;)で終了します.

例

 h1{
  color: red;
 }

この例では、H 1は選択者色であり、属性redは値である.

バーチャルクラスセレクタ

選択者とはタグやid classのようにhtmlドキュメントに存在するものを指定し、仮想クラス選択者はある状態を指定する.すなわちhtmlドキュメントにないクラスであるため,仮想選択者と呼ぶ.

:hover:マウスカーソルがロックされている

:ink-アクセスしたことのないリンク

:アクセスしたリンク

:active-マウスクリック時

:第1要素

:nth-child(n)-n元素

例

(1)  a:hover{          (2) li:nth-child(2){
       color: red;            color: blue;
       }                       }

(1)例のように、aラベルにhover仮想クラスセレクタを使用すると、htmlはすべてのaラベルのマウスカーソルが「押下」状態であり、マウスの下部にcolor属性とred値がある場合は赤色で表示される.
(2)liというタグにnth-child(2)という仮想クラスセレクタがある場合、liタグは括弧内の要素から数値要素を選択する機能を有する.したがって、中のcolor属性とblue値のため、liラベルの2番目の要素だけが青になります.
仮想クラスセレクタの利点は、要素を設計したい場合、htmlで単独で変更せずにcssのみを使用して作成することができ、htmlドキュメントに不要なタグを追加することなく、コードの読み取り性を向上させることです.

CSSの体得を学ぶ

符号化するとhtml以外で勉強しなければならない言語はcssですが、確かにhtmlで設計するとコードが長くなり、同じラベルでも属性を付けて欲しいデザインを入れる必要があります.これは符号が長くなったり汚くなったりするような感じがします.cssを書いたら、同じラベルのデザインを入れやすくなり、デザインコードも入りやすくなります.すべてcssに移行し、コードが以前より簡単になったので毒性がよくなりました.
cssには多くの異なる属性があり、その中で最も注目すべきはgrid属性とflex属性である.どちらもレイアウトを区別する共通の特徴がある.gridは複数のコンテンツを並べやすく,flex属性はコンテンツを1行に並べやすく,gridとflexの正確な違いはこれまで不明であった.この2つの使い方が多いので、もっと勉強する必要があるかもしれません.