이 레슨은 캐스케이딩 스타일 시트 (CSS)를 사용하여 HTML 비주얼을 향상시키는 것을 탐구합니다. 우리는 CSS 선택기로 시작합니다 - 특정 HTML 요소를 대상으로하는 도구.
캐스케이딩 스타일 시트 (CSS)
CSS는 색상, 간격, 크기 등 HTML 구성 요소의 모양을 지시합니다. 인라인 스타일
속성을 사용하여 개별 요소를 스타일링 할 수는 있지만 (예 :
) 큰 웹 사이트에 비효율적입니다.
보다 효과적인 접근 방식은 HTML의
섹션 내에서
요소를 사용하거나 별도의 CSS 파일 ( style.css
)
를 사용하여 HTML에 링크. :
또는
/* style.css */
p {
color: red;
text-decoration: underline;
}
이것은 모든
요소에 동일한 스타일을 적용합니다. 브라우저 개발자 도구 (예 : Chrome의 "검사"를 클릭하여 클릭) 문제 해결을 위해 응용 스타일을 검사하고 수정할 수 있습니다.
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 ).
의사 선택자
의사 클래스 선택기 스타일 요소는 해당 상태를 기반으로합니다 (예 :
a : hover
, 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