"일꾼이 일을 잘하려면 먼저 도구를 갈고 닦아야 한다." - 공자, 『논어』.
첫 장 > 프로그램 작성 > CSS 선택기 소개

CSS 선택기 소개

2025-02-01에 게시
검색:572

이 레슨은 캐스케이딩 스타일 시트 (CSS)를 사용하여 HTML 비주얼을 향상시키는 것을 탐구합니다. 우리는 CSS 선택기로 시작합니다 - 특정 HTML 요소를 대상으로하는 도구.

캐스케이딩 스타일 시트 (CSS)

CSS는 색상, 간격, 크기 등 HTML 구성 요소의 모양을 지시합니다. 인라인 스타일 속성을 사용하여 개별 요소를 스타일링 할 수는 있지만 (예 :

) 큰 웹 사이트에 비효율적입니다.

보다 효과적인 접근 방식은 HTML의 섹션 내에서 요소를 사용하거나 별도의 CSS 파일 ( style.css ) 를 사용하여 HTML에 링크. :

  

또는


/* style.css */
p {
  color: red;
  text-decoration: underline;
}

이것은 모든

요소에 동일한 스타일을 적용합니다. 브라우저 개발자 도구 (예 : Chrome의 "검사"를 클릭하여 클릭) 문제 해결을 위해 응용 스타일을 검사하고 수정할 수 있습니다.

Introducing CSS Selectors Introducing CSS Selectors

HTML 요소 선택

p [ p {색상 : 빨간색; } 모든

요소를 선택합니다. 보다 복잡한 구조의 경우 id class 속성은 더 미세한 제어를 제공합니다.

클래스 및 id selectors

각 요소는 고유 한 id 를 가질 수 있습니다. id selectors (#idname ) 대상 요소는 id 입니다. 그러나 id s는 유연성을 제한해야합니다.

클래스는 더 큰 다양성을 제공합니다. 여러 요소가 동일한 클래스를 공유 할 수 있습니다. 클래스 selectors (. className ) 해당 클래스의 대상 요소. 요소는 여러 클래스를 가질 수 있습니다 (예 :

)

. Red-Text {색상 : 빨간색; } red-text 클래스를 사용하여 모든 요소를 ​​스타일로 사용합니다. p.red-text 특별히 스타일 만

red-text .

가있는 요소 만 있습니다.

Combinator Selector

문서 객체 모델 (dom)은 페이지의 구조를 트리로 나타냅니다. Combinator Selectors는이 계층을 활용합니다.

  • div> p : 직접 어린이 만 선택합니다

    요소의 요소
  • p span :

    .
  • 를 선택합니다.
  • p ~ span :

    .
  • 지나치게 복잡한 조합 조합은 낙담합니다. 클래스 선택기와 결합 할 수 있습니다 (예 : . Intro P ).
  • 의사 선택자 Introducing CSS Selectors Introducing CSS Selectors Introducing CSS Selectors 의사 클래스 선택기 스타일 요소는 해당 상태를 기반으로합니다 (예 : Introducing CSS Selectors a : hover Introducing CSS Selectors,

    a : active , a : visited

    ). Pseudo Element Selectors는 요소의 부분을 대상으로합니다 (예 :

    :: First-Letter ).

    기타 선택기 * : 모든 요소를 ​​선택하는 범용 선택기. Group Selectors (예 :

    H1, H2, P

    ) : 여러 요소 유형을 선택합니다. 속성 selectors (예 :

    p [lang]
      ,
    • p [lang = "en"] ) : 속성을 기반으로 요소를 선택합니다.
    • 더 읽기 :
    • 반응 형 디자인 반응 형 이미지
    • CSS 애니메이션

    이 게시물은 원래 thedevspace에 나타났습니다.

최신 튜토리얼 더>

부인 성명: 제공된 모든 리소스는 부분적으로 인터넷에서 가져온 것입니다. 귀하의 저작권이나 기타 권리 및 이익이 침해된 경우 자세한 이유를 설명하고 저작권 또는 권리 및 이익에 대한 증거를 제공한 후 이메일([email protected])로 보내주십시오. 최대한 빨리 처리해 드리겠습니다.

Copyright© 2022 湘ICP备2022001581号-3