[2022.04.01今日の学習]CSSを上書きする方法

🎨 CSSを上書きして、私はどれを使うべきですか？

CSSを直接作成すると上書きが必要になる場合があります.
ガイドバーなどのライブラリを使用しても、必要なスタイリングを追加したい場合は、
いろいろな方法の中でどれが一番適当かを知ることにします.
まず、既存のCSSファイルを上書きする方法は3가지である.

を上書きする方法は、既存のクラス名、id名、ラベル名、スタイルなどよりも下位に記述されます.

CSSを使用するアプリケーションの優先度.

のスペックスコアを上げます.

1.既存のスタイルよりも低い位置で作成

この方法は먼저 작성한 것보다 밑에 있을 수록 우선적으로 적용を利用している.css mediaqueryはこのように動作します.

2.css優先度の使用

cssは属性別に높은 점수를 가진 스타일이 적용得点した.
優先度宣言方式スコア1!important 100002 style="(html要素にスタイルを直接入れる)10003#id 1004.classまたはpseudoクラス(仮想クラスセレクタ)105 htmlタグ名1
点数をつける宣言の仕方は上の表と同じです.
それ以外にも、すべての選択者(*)と継承者(*)がいますが、点数がないため、表には入っていません.

!important

/* CSS */

p {
	color: aliceblue; !important
}

!重要ラベルを貼るスタイルは、緊急適用が必要な場合にのみ使用し、できるだけ使用しないことが望ましい.点数が高すぎて最優先で適用される属性なので、なるべく避けましょう.
本人がcssに触れて間もない頃によく知らないうちに同じ学部生が使っているものを見ました.書いているうちに失敗した経験があります.😥😥😥

インラインスタイル

<div style="color: aliceblue">
</div>

!得点は重要に次ぐ.html要素自体に直接スタイル属性を付与すると、htmlが乱雑になるだけでなく、優先度も高くなりますので、使用しないほうがいいです.
もちろん、面倒な時にも一度使ったことがあります.

#id

#reason {
	color: aliceblue;
}

idセレクタを使用してスタイルを与える方法.idの点数は100点で,10個のclassを用いた点数と同じである.
最近ではid属性を直接使用してスタイルを追加しないことが多いそうです.(JavaScriptなどで使用)

.classまたはpseudoクラス

.reason{
	color: aliceblue;
}

.reason:hover{
	color: blue;
}

classにスタイルを入れる方法が最も一般的な方法かもしれません.やっぱり一番簡単なのは最高!

ラベルセレクタ

p {

}

css resetファイルではよく見られます.
スタイルを指定するときにclassと混用することもあります.スコアが低いため、単独で使用する場合は、オーバーラップスタイルがあるかどうかを確認する必要があります.

3.規格点数を上げる

これは優先点数のスタイルでカバーする方法です。

2번で見られる優先度スコアを用いてcssを上書きする方法を指す.すなわち,複数のセレクタを用いることでスコアを上げることができる.
例:

.test.reason {
	color : red;
	/* 20점 */
}

p.reason {
	color : blue;
	/*이것은 11점*/
}

reasonという名前のclassは、青ではなく赤が適用されます.cssの記述順序では、以下の記述がより優先的に適用されるべきであるが、優先度スコアが高い(10+10=20)ため、color : redが用いられる.
以上の方法でCSSファイルを上書きすればよい.
しかし、いくつか注意が必要です.1번の場合、底で書き続けるとコードの長さが長くなるだけでなく、乱雑になる.(下部で同じコレクタを繰り返し作成する必要があるため)2번実際には、非常に特殊な状況でなければ、主にclassまたはhtmlタグ名でスタイルを適用するため、他の点数の高い宣言方式を使用する場合にのみ、使用に注意する必要があります.3번で表示される特殊点数を上げる場合、セレクタを多く使用すると、どの要素にスタイルを提供するかがわかりにくいため、class、htmlラベル名を1～3個使用するのが望ましい.
再利用性、拡張性、メンテナンスを考慮したコードの作成は、正しいコード作成方法です.