CSS 선택기 소개-CSS 튜토리얼-php.cn

CSS 선택기 소개

DDD

풀어 주다： 2025-01-22 00:13:10

원래의

355명이 탐색했습니다.

이 강의에서는 CSS(Cascading Style Sheets)를 사용하여 HTML 시각적 요소를 향상시키는 방법을 알아봅니다. 특정 HTML 요소를 타겟팅하는 도구인 CSS 선택기부터 시작하겠습니다.

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

CSS는 색상, 간격, 크기 등 HTML 구성 요소의 모양을 지정합니다. 인라인 style 속성(예: )을 사용하여 개별 요소의 스타일을 지정할 수 있지만 이는 대규모 웹사이트에는 비효율적입니다.

보다 효과적인 접근 방식은 HTML의 <style> 섹션 내에서 <head> 요소를 사용하거나 style.css:<link>를 사용하여 HTML에 연결된 별도의 CSS 파일(예:

)을 사용하는 것입니다.

<code class="language-html">  <style>
    p {
      color: red;
      text-decoration: underline;
    }
  </style></code>

로그인 후 복사

또는

<code class="language-html"><!-- index.html -->
<link href="style.css" rel="stylesheet"></code>

로그인 후 복사

<code class="language-css">/* style.css */
p {
  color: red;
  text-decoration: underline;
}</code>

로그인 후 복사

모든  요소에 동일한 스타일을 적용합니다. 브라우저 개발자 도구(예: Chrome에서 마우스 오른쪽 버튼 클릭, "검사")를 사용하면 문제 해결을 위해 적용된 스타일을 검사하고 수정할 수 있습니다.

HTML 요소 선택

p의 p { color: red; }은 모든  요소를 선택합니다. 더 복잡한 구조의 경우 id 및 class 속성을 사용하여 더 세밀하게 제어할 수 있습니다.

클래스 및 ID 선택기

각 요소는 고유한 id을 가질 수 있습니다. ID 선택기(#idName)는 id로 요소를 대상으로 합니다. 그러나 id은 고유해야 하므로 유연성이 제한됩니다.

수업의 다양성이 더욱 향상되었습니다. 여러 요소가 동일한 클래스를 공유할 수 있습니다. 클래스 선택기(.className)는 해당 클래스가 있는 요소를 대상으로 합니다. 요소는 여러 클래스를 가질 수 있습니다(예: ).

.red-text { color: red; } red-text 클래스를 사용하여 모든 요소의 스타일을 지정합니다. p.red-text 특히  요소를 사용하여 red-text 요소에만 스타일을 지정합니다.

콤비네이터 선택기

DOM(문서 개체 모델)은 페이지 구조를 트리로 나타냅니다. 조합기 선택기는 이 계층 구조를 활용합니다.

지나치게 복잡한 조합자 조합은 권장되지 않습니다. 클래스 선택기(예: .intro p)와 결합할 수 있습니다.

의사 선택기

유사 클래스 선택자는 상태에 따라 요소 스타일을 지정합니다(예: a:hover, a:active, a:visited). 유사 요소 선택기는 요소의 일부를 대상으로 합니다(예: ::first-letter).

기타 선택자

추가 자료:

이 게시물은 원래 TheDevSpace에 게재되었습니다.

위 내용은 CSS 선택기 소개의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!