3장 CSS 애플리케이션 보충

선택자 특성 적용

선택자의 특성을 이야기하기 전에 CS가 계승하는 특성을 언급하는 것이 중요합니다. . 소위 상속된 특성은 내부에 포함된 태그가 외부 태그의 스타일 속성을 갖게 됨을 의미합니다. 상속 기능의 가장 대표적인 적용은 웹페이지 전체의 스타일을 미리 설정해 두는 것이며, 다른 스타일로 지정해야 하는 부분은 필요에 따라 개별 요소에 설정할 수 있다. 이 기능은 웹 디자이너에게 보다 이상적인 플레이 공간을 제공할 수 있습니다. 다음으로 선택자 특성의 적용에 대해 알아보겠습니다! 사실 이 부분은 선언의 방식이라고 생각해야 하는데, 2장의 기본 선언과 적용을 읽고 나면 여기서 선택자에 대해 이야기하면 더 좋은 아이디어를 얻을 수 있을 것입니다. CSS를 적용하거나 디자인할 때 요소의 관계나 속성을 기반으로 특정 표시 속성을 설정하는 방법에는 여러 가지가 있습니다. 이는 선택기 속성을 적용하여 제어 및 적용을 보다 유연하게 할 수 있습니다. 1. 컨텍스트 선택자(Context Selector): 스테이트먼트 라벨의 컨텍스트 관계를 기반으로 특정 속성을 표시하는 방식이다. 컨텍스트 선택기는 브라우저가 HTML 소스 코드에 지정된 콘텐츠를 표시할 때 요소 태그의 컨텍스트를 고려하고 지정된 스타일 명령문을 표시함을 의미합니다. 즉, HTML 소스 코드의 태그 순서가 일관적이라면 이 명령문이 적용됩니다! 요소 A(태그 A) 요소 B(태그 B) 요소 C(태그 C) ... {스타일 규칙} 컨텍스트 선택기의 선언은 집합적 선언과 매우 유사하지만 요소 태그는 집합적 선언은 쉼표로 구분해야 하며, 컨텍스트 선택기로 선언할 때는 공백을 사용하여 요소 태그를 구분해야 합니다. 요소 A 요소 B, 요소 C 요소 D 요소 E, ... {스타일 규칙} 이러한 방식으로 집합적 선언을 사용하여 배열 컨텍스트 선택기의 스타일 규칙을 선언할 수 있습니다. 2. 카테고리 선택기: 하나 또는 여러 개의 태그가 동일한 스타일 규칙 세트를 사용할 수 있도록 하는 방법입니다. 클래스를 사용하면 서로 다른 요소 태그에 동일한 스타일 속성 집합을 적용하거나 동일한 요소 태그에 서로 다른 스타일 속성 집합을 적용할 수 있습니다. 가장 먼저 소개할 내용은 다음 예제에 작성된 것처럼 동일한 스타일 속성 집합을 다양한 요소에 적용하는 방법입니다.

  ...  

...

　...　

...

　...앞의 작은 점에 주목하세요 선언에서 CLASS 이름은 임의로 선택할 수 있습니다. 동일한 요소 태그에 다양한 스타일 속성 세트를 적용하려는 경우 카테고리 속성을 적용하여 설정할 수도 있습니다. ...

...

　 ...

...

이름은 임의적일 수 있습니다. 카테고리 기능을 유연하게 사용하면 스타일 설정이 더욱 유연해집니다! 3. ID 선택기: 카테고리 선택기와 유사하지만 차이점은 "고유성"에 있습니다. ID 속성의 사용은 카테고리 속성과 매우 유사하지만 파일의 각 ID는 고유합니다. 즉, 카테고리 속성은 하나 또는 여러 요소 태그에 반복적으로 적용될 수 있지만 ID 속성은 문서에서 한 번만 나타날 수 있습니다. 아래 예시에 적어주시면 됩니다. 　 ...　P ID=" blue" >...　 ...보시다시피 선언 방법은 파운드 기호 『#』을 사용하는 것입니다. ID의 "고유성"은 javaScript 또는 VBScript가 요소를 제어할 수 있도록 하는 핵심입니다. 위에서 소개한 선택기 특성의 선언 및 사용을 통해 스타일 설정을 보다 유연하고 변경 가능하게 만들 수 있습니다. 실제로 이전 장에서 소개한 기본 선언과 적용 방법을 먼저 익힌 다음, 이번 장에서 설명한 선택기 기능을 적용해 스타일시트 사용법을 차근차근 익힐 수 있습니다.

유사한 특성을 가진 애플리케이션 연결

HTML의 기본 구문을 기억하세요. BODY 태그에서 link, alink 및 vlink 속성을 사용하여 연결 가능하거나 연결된 단어의 글꼴 색상을 제어할 수 있습니다. 요즘에는 CSS를 사용하여 의사 클래스라고 하는 이러한 속성을 제어할 수도 있습니다. 이를 일반 카테고리로 취급하고 해당 스타일 규칙을 선언할 수 있습니다. 실제로 이러한 의사 카테고리는 위에서 언급한 카테고리 선택기처럼 HTML 소스 코드에서 지정 카테고리(CLASS)를 설정할 필요가 없습니다. 유사 카테고리의 선언과 적용은 아래와 같습니다. 일반적인 선언 방법: 의사 카테고리는 콜론으로 선언됩니다. 구조에 다음 명령문을 추가하면 페이지의 링크 텍스트가 설정한 스타일에 따라 표시됩니다! A:link { 스타일 규칙 }A:active { 스타일 규칙 }A:visited { 스타일 규칙 }A:hover { 스타일 규칙 }A:link는 방문하지 않은 링크에 대한 스타일 규칙을 설정하는 데 사용됩니다. A:active는 활성 링크의 스타일 규칙을 설정하는 데 사용됩니다. A:visited는 방문한 링크에 대한 스타일 규칙을 설정하는 데 사용됩니다. A:hover는 링크 위로 마우스를 이동할 때 스타일 규칙을 설정하는 데 사용됩니다. 그 중 호버는 NC4에서 지원되지 않지만, 나머지 3가지 기능은 두 주요 브라우저 모두에서 지원됩니다. IE4 이상의 브라우저를 사용하는 경우 이 웹사이트의 링크에서 호버 기능의 장점을 알 수 있습니다. 간단한 스타일 설정으로 긴 설정 목록을 작성해야 했던 것과 동일한 효과를 얻을 수 있습니다. 이 링크 의사 카테고리는 위에서 설명한 카테고리 선택 기능과 함께 사용할 수도 있습니다.

Ｄ　Ｉ　Ｖ　Ｓ　P　Ａ　＼N

스타일 시트는 모든 태그에 적용할 수 있지만 , 그러나 DIV 및 SPAN 요소를 사용하면 HTML의 응용 수준이 크게 확장되었습니다. DIV와 SPAN 두 요소는 응용 분야에서 매우 유사하며, 사용할 때 종료 태그를 추가해야 합니다. 즉,

...

및 ... 스팬> 적용 가능한 두 가지 속성과 이벤트 처리도 매우 유사하며 둘 다 앞서 언급한 선택기 기능과 함께 작성할 수 있습니다. 둘 다 페이지 콘텐츠에 표시 기능을 부과하지 않으며 매우 널리 사용되는 요소 태그라고 할 수 있습니다. DIV와 SPAN의 차이점은 DIV 요소는 블록으로 정의되고

...

사이는 완전한 단락 블록으로 정의된다는 점입니다. SPAN 요소는 인라인으로 정의되며, ...< /SPAN> 이 둘은 서로 독립적이기 때문에 서로 혼합될 수 있습니다. 따라서 이 두 요소를 다른 속성과 결합하여 웹 페이지에 표시되는 콘텐츠를 유연하게 조정할 수 있습니다.

위 내용은 Chapter 3 CSS Application의 보충 내용입니다. 더 많은 관련 내용은 PHP 중국어 홈페이지(www.php.cn)를 참고해주세요!