[公費教育]Day 34

6905 ワード
宿題を整理する. テキストリンク
前回は構造化データのHTMLを勉強しました.難しくはありませんが、最終的な目標は静的ドキュメントで設計と動的機能を実現することです.
そこで、今日から、ビジュアル要素を実現するCSSについて学びましょう.
HTML:単純要素の構造化リスト
CSS:リストされた要素のLayOutと設計

CSS


: Cascading Style Sheet


HTMLの内部で属性、値を使って設計するのは、本当に必要な場合ではなく、線を使わない方法です.
現在はCSSによって設計され、「積層」の意味で、CSSはページ設定に従ってすべての要素を連続的に行う.

1.使用方法


CSSを使う方法は大体3種類あります.

1)行内スタイルシート:プロパティ

  • HTML要素内部の属性style行内
  • すべての方法で最も優先度が高い.
    • <div style="border: 1px; border-color: black; border-style: solid;">
        
</div>

    2）内部スタイルシート：要素

  • <head>内部に<style>領域を作成することによりスタイル
    • を適用
    <head>
        #div1 {
            border: 1px solid coral;
        }
</head>

    3）外部スタイルシート：ファイル

  • styleは専用CSSファイルを生成し、それをHTMLからインポートします.
  • 規模が大きいほど、使用が複雑になり、可読性が悪くなる.

    • 2.識別子


    :選択に使用する要素


    HTML要素からドキュメントの構造を作成します.このように形成された構造は骨格そのものとして存在するだけで,美を分配する要素や体系はない.そこで,CSSにより要素設計を付与する.
    この場合、多くの要素の中から、デザインを付与するオブジェクトを選択し、例えば表装する壁を選択するのが「セレクタ」である.難しい概念ではありませんが、選択者の種類が非常に多いことに注意しましょう.

    [タイプ]


    (1) Tag

  • デザインは、ラベル付きのすべての要素に適用されます.
    • div { border: 10px, solid, red; } div태그에 모두 적용

    (2) #ID

  • id=“name”プロパティは、識別する要素に使用されます.
  • idの名前は繰り返さないほうがいいです.
  • 設計時、IDによって区域を区分し、クラスによって一括設計
  • idは「#」で始まる.
    • #div1 { border: 1px solid coral; }
#div2 { border: 1px dotted darkgoldenrod; }

    (3) .Class

  • class属性は識別子概念ではなく、繰り返すことができる
  • このオプションを使用すると、同じカテゴリの要素にスタンが適用されます.
  • IDは影響を受けません.
  • .클래스명.
    • 1. 기본
.fruits{ background-color: pink; }

2. 같은 클래스, 다른 요소들에 사용할 때 
div.test {} "div 태그를 가진, test 클래스에게"


3. 전혀 다른 요소에 같은 스타일을 줄 때
div.test, button.test2{
         color: green;
     }

    (4)子孫選択者(1寸)>。

  • 子孫は自分の真下だけを呼ぶ.
    • #refrigerator>.fruits { background-color: aqua }

    (5)子孫選択者(1村全体を含む)

  • は、子孫を含むより低いレベルを示す.
    • #table .fruits {
        background-color: yellow;
    }

    (6)属性:tag、ID、Classまたはnull+[属性とその値]

  • 対応する属性、属性、値を持つ要素を選択し、tag、id、classによって領域をさらに細分化します.
    • 1. 기존
 input[type=button] {
            color: red;
        }

응용 1 : 속성값이 특정하게 시작할 때 ( ^= )
input[type^=te] {
            color: red;
        }


응용 2 : 속성값이 특정하게 끝날 때 ( $= )
input[type$=on] {
            color: blue;
        }


응용 3 : 속성값이 특정글자를 포함할 때 ( *= )
input[value*=tt] {
            color: blue;
        }

    (7)兄弟

  • 兄弟とは同じレベルの要素を指す.
  • Single(+):検索条件同格で「フォロー」が選択されているため、先頭では適用されません.
  • マルチ(~):開始に応じてすべての後の要素を選択します.
    • 예제
<div>
  <h4>자손 1</h4>
  <h5>자손 2</h5>
  <p>자손 3</p>
  <p>자손 4</p>
  <p>자손 5</p>
</div>

1. 단일 
h4+h5{} → 자손 2 선택

2. 다중 
h4~p{ color: red; }
→ 자손 3, 4, 5 선택

    (8)反応選択者

  • div:hover:マウスの停止時.
  • div:active:クリック時

    • (8)構造選択者：-child/-of-type

  • ただ-child,of-type.
  • -child:ターゲットラベルがnに一致する場合にのみ適用
  • of-child:ターゲットラベルのn番目
    • 1. first, last, nth()
div p:first-child{
            color: pink;
        }
→ div 태그의 첫 번째 요소가 p일 때만 적용

2. first, last, nth() -of-type
div p:nth-of-type(3){
            color: green;
        }
→ div 태그 안에 3번째 p에 적용


p:first-of-type(1){
            color: green;
        }
→ 첫 번째 p에 적용

    （9）全選者

  • すべての要素を選択します.
  • また、優先度が最も低い.
  • ターゲットが小さいほど優先度が高くなり、同じであればあるほど後で使用する優先度が高くなる.
  • !importantを使用する場合、優先度が最も高くなります.
    • *{ color: cornflowerblue; }
    面接問題整理_04
    白俊解答-部分合わせて1806回