[HP]CSS復習

4330 ワード
テキストリンク

CSS(Cascading Style Sheet)

  • 挿入方法
    1)styleタグを
    <style> ... </style>
    2)外部ファイルに入れ、リンク保留
    <link rel="stylesheet" href="#">
    3)タグの
    <h1 style="background: dodgerblue"> ... </h1>
    • に直接挿入する.
  • 形式
    :selcetor(プロパティ:値;プロパティ:値;プロパティ:値;プロパティ:値;プロパティ:値;プロパティ:値;プロパティ:値;
    • h1 { background: dodgerblue; }
    上記のコード例:h 1はタグであり、backgroundは属性であり、dodgerblueは値である.
  • selector
    :ラベル、クラス、ID
  • class
    :発表の時.class名、適用時class=class
  • id
    :宣言時は#id名、適用時はid=“id名”
    classは複数回適用できますが、idは1つのファイルで1回しか使用できません.(名前は重複できません)

    • 箱型


  • ブロックモデル
    :レイアウトを下にします.
    ex) div, p, h1~h6...

  • インラインモデル
    :レイアウトは横を向いています.
    ex) a, span

  • inline-blockモデル
    :inlineとblockのすべてのプロパティがあります.
    • block->インラインモデルに変更するには、次の手順に従います.
    display: inline;
or
display: inline-block;
// inline: width, height, padding-top 줄 수 없음
// inline-block: width, height 줄 수 있음
    inline->blockモデルに変更するには、次の手順に従います.
    display: block;

    selector

  • サブアイテム選択者(>)
    :私の真下の子供だけを選んでください.
    • div > ul
//div 밑에 있는 첫번째 자식에게만 스타일을 적용한다.

section > p {
	color: blue;
}
//section 밑에 있는 첫번째 p에서 파란색을 적용한다.
  • 子選択者(:)
    :私の下のすべての子供を選んでください.
    • div ul :
//div 밑에 있는 모든 ul에 스타일을 적용한다.

section : p {
	background: gray;
}
//section 밑에 있는 모든 p에 회색 배경을 적용한다.
  • 兄弟選択者
    :同じ親を持つ兄弟の間に適用されます.
    • div + h1
//div 태그의 형제중 첫번째 h1에게만 스타일을 적용한다.

div ~ h1
//div 태그의 형제중 모든 h1에게 스타일을 적용한다.
  • プロパティセレクタ
    :指定した属性を持つタグに適用されます.
    • a[href] {
	color: red;
}
//a 태그에 href 속성을 가진 태그에 빨간색을 적용한다.

    仮想クラスと要素

  • の動作に応答するクラス
  • a : link { }
    :ハイパーリンク時
  • a : visited { }
    :
    • をクリックします.
  • a : hover { }
    :マウスの停止時
  • a : active { }
    :マウスをクリックしたとき
    フォーカス:フォーカス時にスタイルを適用(主にinput...)
  • input使用
  • : enabled
  • : disabled
  • :checked(radioおよびチェックボックスで選択するスタイルを指定)

    • nth-child

  • nth-child(n)
    :前からn番目のサブタイプにスタイルを適用します.
  • nth-last-child(n)
    :後から、n番目のサブにスタイルを適用します.
  • first-child
    :スタイルを最初のサブアイテムに適用します.
  • last-child
    :スタイルを最後のサブアイテムに適用します.
    • div p : nth-child(3)
//div의 자손 중 p에서 3번째 자식에 스타일을 적용한다.

div p : nth-child(odd)
//div의 자손 중 p에서 홀수번째 자식에 스타일을 적용한다.

div p : nth-child(even)
or
div p : nth-child(2n)
//div의 자손 중 p에서 짝수번째 자식에 스타일을 적용한다.
    [白俊]10026号:赤い薬の答え
    イメージの導入