フロントエンド学校css-9/29

7997 ワード
テキストリンク

MDNサイトをより多く利用


✅ CSS(Cascading Style Sheets)


▲ルールベースの言語
▲cssはモジュールごとにそれぞれのバージョン管理を行う
▲カスケード=上から下へ->上から定義された要素も下から伝播
▲子どもが親を継ぐ要因
▲ルール:要素(セレクタ)を選択し、カッコ{}でスタイルを宣言する
はこのように発表した.
▲開発css外部スタイルを採用->cssとhtmlファイルを単独で作成し、htmlの<head> で<link>を使用してhtmlファイルとcsssファイルを接続する
<!DOCTYPE html>  
<html>  
  <head>
  	<link rel="stylesheet" href="style/main.css"/>
  </head>
  <body>
  </body>
<html>
<スタイル優先度>
💫同じスタイルでも、宣言の場所によって優先順位が決まります.
ブラウザで定義されたスタイル<開発者が宣言したスタイル<ユーザー構成のスタイル>
💫適用範囲が小さいほど優先されます.
tagスタイル*ソースコードの順序が後の場合は上書きします.
<スタイル継承>
💫親要素のスタイル属性が子要素に渡されます.
-サブエレメントで再定義すると、親エレメントのスタイルが上書きされます.
💫継承しない属性もあります.(例えば、背景画像、背景色等)

cssでのコメント

h1{
 color:red;
 /* font-size:9px; */
}
▲/* 스타일 */を使用してコメントを処理
▲説明だけでなく、一時的にスタイルを適用したくない

セレクタタイプ


▲完全なWebページで、要素を一貫して適用する必要がある場合に使用
▲通常スタイル上部
▲タイプセレクタは特定の要素を選択できません
h1{
  color:red;
}

選択者IDセレクタ


▲グローバル属性としてすべての要素で使用可能
▲固有名称/ユニーク/ユニーク
▲構文:#+id{}
#hello{
  color:red;
}

プログラムクラスセレクタの選択


▲グローバル属性としてすべての要素で使用可能
▲繰り返し可能
▲1つの要素に複数のclass(スペースで区切る)を付けることができます.
▲構文:.+class{}
.hi{
  color:red;
}

属性セレクタ属性セレクタ


▲属性ラベル以外の要素部分
▲[attr]:要素が持つ属性を選択
	a[target]{
	  color:red;
  }
▲[attr=value]:属性に特定の値があることを選択
	input[type="submit"]{
	  color:red;
  }
▲[attr^="value"):CARAT(^)文字がある場合は、attrのvalueをvalueで始まる要素を選択します.
	a[href^="http"]{
	  color:red;
  }
▲[attr$="value"):ドル($)文字がある場合は、attrのvalueがvalueで終わる要素を選択します.
	a[href$=".com"]{
	  color:red;
  }
▲[attr*="value"):別名(*)文字がある場合は、attrのvalueにvalueを持つすべての要素を選択します.
	a[href*="btn"]{
	  color:red;
  }

「仮想クラスセレクタ」Pseudo-「クラスセレクタ」


▲クラス選択者の範囲を絞る方法(サブアイテム、順序など)
▲:first-child:同じ要素から最初の要素を選択
	li:first-child{
	  color:red;
        }
  .movie:first-child{
	  color:blue;
       }
classでfirst-childを選ぶときは、classで選んだ最初ではなく、classに選ばれたそのグループの親の子供の中で最初の子供です.だからclassを選ぶときは、すべてのスタイルが適用されるわけではありません.last-childもそうです
▲:last-child:同じ要素から最後の要素を選択
	li:last-child{
	  color:red;
        }
  .movie:last-child{
	  color:blue;
        }
▲:nth-child():直接選択可能な指定を選択
	li:nth-child(3){ 
	  /*세번째 자식들 선택됨*/
	  color:red;
        }
奇数(奇数)、偶数(偶数)を使用することもできます
▲:first-of-type:特定のタイプのデータのみを収集し、そこから最初の要素を選択->:first-schildの補足
▲:last-of-type:特定のタイプのみを統計し、最後の要素を選択->:last-childの補足
▲:not(セレクタ):選択した要素のうち、()の要素以外は、
	input:not(.pw){ 
	  /*input들 중 class명이 pw인 요소를 뺀 나머지들만 스타일 적용됨*/
	  color:red;
  }
	input:not([type=password]){ 
	  /*input들 중 type이 password인 요소를 뺀 나머지들만 스타일 적용됨*/
	  color:red;
  }
▲:link:リンクにアクセスしていない場合はスタイルを適用
	a:link{ 
	  color:red;
  }
▲:アクセス済み:リンクにアクセスした場合、スタイルを適用
	a:visited{ 
	  color:red;
  }
▲:hover:要素にマウスを置くとスタイルが適用されます
	input[type=button]:hover{ 
	  color:red;
  }
▲:active:要素をマウスでクリックしたときにスタイルを適用
▲:link,:hover,:アクセス宣言がactiveの後にある場合、activeは適用されません.Activeはlink-overse-hover-active順に配置することを推奨します
	input[type=button]:active{ 
	  color:red;
  }
▲:focus:Tabキーを使用して要素をフォーカスする場合、inputラベルを押して入力するとスタイルが適用されます
	input[type=button]:focus{ 
	  color:red;
  }
▲:enabled:スタイルはアクティブな要素にのみ適用
	input[type=text]:enabled{ 
	  color:red;
  }
▲:disabled:無効な要素にのみスタイルを適用
	input[type=text]:disabled{ 
	  color:red;
  }
▲:checked:スタイルは選択した要素にのみ適用されます
	input[type=radio]:checked{ 
	  color:red;
  }
	input[type=checkbox]:checked{ 
	  color:red;
  }

仮想要素セレクタ


▲配合css 3文法::使用
▲::before:htmlには存在しませんが、スタイルはcss仮想作成要素の前に適用されます(バッジまたはメニュー間の使用/内容を区切って修飾するために使用されます).
	.favorite::before{ 
	  content:'🎨';
  }
▲::aft:htmlには存在しませんが、スタイルはcssが作成した仮想要素に適用された後
	.favorite::after{ 
	  content:'🎨';
  }
▲::first-letter:選択した要素にスタイルを適用する最初の文字
	.hi::first-letter{ 
	  color:red;
  }
▲::first-line:スタイルは選択した要素の最初の行に適用されます(ただし、スタイルはブラウザサイズの最初の行にのみ適用されます).
	.hi::first-line{ 
	  color:red;
  }
▲::selection:スタイルは選択した要素のドラッグ部分にのみ適用されます
	.hi::selection{ 
	  color:red;
  }

[連結セレクタ](Merge Selection)(連結セレクタ)


▲連結子選択者():2つの選択者を外観に結合し、選択した要素にスタイルを適用
	ul li:last-of-type{ 
	  color:red;
  }
▲結合子選択者(>):前の選択者の直接の子に条件を満たす要素にスタイルを適用します.">"は、前の選択者の直接サブアイテムを表します.
	ul > li:last-of-type{ 
	  color:red;
  }
▲普通兄弟選択者結合(~):codeの兄弟たちの中で、codeより後に声明されたpにのみ適用される.
	code ~ p{ 
	  color:red;
  }
▲隣接兄弟選択者(+):codeの後ろにpが続くと、それらの要素のスタイルにのみ適しています(隣にいなければなりません)
	code + p{ 
	  color:red;
  }
▲組み合わせ:2つ以上の要素の同じスタイルの場合に使用
	p, span, code{ 
	  color:red;
  }

Universal Selector(すべて選択)


▲html内のすべての要素を選択する(すべての要素を表す)
▲cssファイル上部で宣言
	*{ 
	  color:red;
  }

継承制御


▲initial:継承解除
	.child{ 
	  color:initial; /*속성의 기본값으로 돌려짐*/
  }
▲継承:無条件継承
	.parent *{ 
	  color:inherit; /*주변의 어떤 css값도 다 무시하고 부모의 css를 따르겠다*/
 }
▲unset:親から受け継いだ価値がある場合は引き継ぎ、親から受け継いだ価値がない場合は初期
[スプリングコア原理]単トンコンテナ
21.4.1/R/トレーニングと実践