Lesson03_02 스타일 규칙 선택기_기본 튜토리얼

스타일 규칙 선택기

저자: Loncer 더 많은 학습 자료는 wwww.loncer.cn에서 확인하세요.

• HTML 선택기

  은 선택자로 사용되는 HTML 태그이므로 CSS가 적용된 모든 웹페이지에서 정의된 문장에 따라 모든 HTML 태그가 표시됩니다.

  클래스 선택기
• HTML 태그로 생성된 각 웹페이지 요소를 여러 카테고리로 나누려면 이 HTML 태그의 클래스를 다른 값으로 설정하세요. 예:
  

  ---

  p1

  例如:
  

  ---

  p1

  
  

  p2

  
  

  p3

  样式定义如下:
  

  p2

  p3 스타일은 다음과 같이 정의됩니다: 참고: 선택기가 스타일 시트, 클래스 이름(.) 바로 뒤에 이 스타일 규칙은 클래스=이 클래스 이름을 갖는 모든 HTML 태그에 적용됩니다.

• 즉, 클래스 선택기는

  网页中:
  text here

  样式定义如下:
  

• 두 가지 범주로 나뉩니다.
  
  관련 클래스 선택기: HTML 태그 이름, 클래스 이름(동일한 요소에 대해 다른 규칙을 정의할 수 있음)
  독립 클래스 선택기: .클래스 이름(다른 요소에 대해 동일한 스타일 규칙을 정의할 수 있음)
  ID 선택기 ID 속성은 특정 HTML 요소를 정의하는 데 사용됩니다. 웹 페이지 파일에서 하나의 요소만 특정 ID 값을 사용할 수 있습니다. 웹페이지에서:
• 여기에 텍스트를 입력하세요 스타일은 다음과 같이 정의됩니다:
  

常用的伪元素如下

元素名	作用
A:active	选中超链接时的状态
A:hover	光标移动到超链接上的状态
A:link	没有任何动作时的状态
A:visited	访问过的超链接状态
P:first-line	段落中的第一行文本
P:first-letter	段落中的第一个字母

연관 선택자는 공백으로 구분된 두 개 이상의 단일 선택자로 구성된 문자열을 나타냅니다.
예: p em {Background: yellow}
여기서 "p em"은 연관 선택자이며, 이는

태그 쌍 사이의 콘텐츠 배경이 노란색이고 다른 곳에 있는 태그 쌍의 콘텐츠는 영향을 받지 않음을 의미합니다. 참고: 연관된 선택으로 정의된 규칙은 단일 선택기로 정의된 규칙보다 우선순위가 높습니다. 결합된 선택기 스타일 시트에서 반복되는 선언을 줄이기 위해 여러 선택기를 하나의 스타일 규칙 정의로 결합할 수 있습니다. 예: H1, H2, H3, H4, H5, H6, TD{color:red} 유사 요소 선택기는 동일한 HTML 요소와 여기에 포함된 콘텐츠 일부의 다양한 상태를 정의하는 방법을 나타냅니다. 형식은 다음과 같습니다. HTML 요소: 의사 요소 주기적 {속성: 값} 클래스 선택기는 의사 요소와 함께 사용할 수 있습니다: HTML 요소. 클래스 이름: 의사 요소 {속성: 값}