22-04-19 preview

2598 ワード

CSS宣言
1.組み込み
<style></style>
  • 埋め込み
  • <div style="color: red; margin: 20px;"></div>
  • リンク(並列接続)
  • <link rel="stylesheet" href="./css/main.css">

  • import(シリアル接続)
    cssファイルで@import url(./box.css);
  • CSSセレクタ
    1.基本
    - * 전체 선택자
    - 태그 선택자
    - 클래스 선택자
    - 아이디 선택자
  • 複合
  • - 일치 선택자 ABC와 SYZ를 동시에 만족하는 요소 선택 ex) span.orange
    - 자식 선택자 ul > .orange
    - 하위(후손) 선택자 div .orange
    - 인접 형제 선택자(다음 형제 하나) .orange + li
    - 일반 형제 선택자(다음 형제 모두) .orange ~ li
  • 仮想クラス
  • - :hover 
    - :active 마우스를 클릭하고 있는 동안
    - :focus  focus 가능하지 않은 요소에 속성으로 tabindex="-1" 추가해주면 포커스 가능해진다.
    - :first-child
    - :last-child
    - :nth-child(n)
    - ABC:not(XYZ선택자) 부정선택자   선택자 XYZ가 아닌 ABC 요소 선택
    
    4. 가상 요소
    5. 속성