1. 유형 선택기 유형 선택기란 무엇입니까? 웹 페이지에 있는 기존 태그 유형을 이름으로 사용하는 행 문자를 나타냅니다. Body는 div, p,span을 포함하는 웹 페이지의 태그 유형입니다.
다음과 같습니다:
본문 {}
div {}
피{}
기간 {}
2. 그룹 선택기
XHMTL 개체의 경우 동일한 스타일을 그룹에 동시에 할당할 수 있습니다.
선택자는 쉼표로 구분됩니다. 이런 방식으로 작성하면 동일한 스타일을 한 번만 작성하면 되기 때문에 코드 양이 줄어들고 CSS 코드 구조가 향상된다는 장점이 있습니다.
사용시 "쉼표"는 중국어 전각 모드가 아닌 반각 모드임을 주의하시기 바랍니다.
다음과 같습니다:
h1,h2,h6,p,span
{
글꼴 크기:12px;
색상:#FF0000;
글꼴 모음: 굴림;
}
3. 선택 방법이 역할을 하도록 개체의 하위 개체에 대한 스타일을 지정하는 선택기를 포함합니다.
이 스타일 설정은 이 개체의 하위 개체 레이블에만 유효합니다. 이 스타일 설정은 단독으로 존재하거나 이 개체 외부에 있는 다른 하위 개체에는 적용되지 않습니다.
이것의 장점은 과도한 ID 및 클래스 설정을 피하고 필요한 요소를 직접 정의할 수 있다는 것입니다.
다음과 같이:
h2 스팬
{
색상: 빨간색;
}
다음과 같이:
몸체 h1 스팬 강함
{
글꼴 두께:굵게;
}
4. id 선택자는
DOM 문서 객체 모델의 원리에 따라 나타나는 선택자로서 XHTML 파일의 경우 각 태그에 id="" 형식으로 이름을 할당할 수 있지만 주의할 점은 다음과 같습니다. XHTML 파일 ID는 고유하며 반복될 수 없습니다.
div CSS 레이아웃 웹 페이지에서는 머리글의 머리글, 하단의 바닥글 등 다양한 목적에 맞게 이름을 지정할 수 있습니다.
XHTML은 다음과 같습니다:
<div id="content"></div>
CSS는 다음과 같습니다:
#content
{
글꼴 크기:14px;
줄 높이:120%;
}
5. 클래스 선택기
실제로 id는 XHTML 태그의 확장이고, 클래스는 여러 SHTML 태그의 조합입니다. 클래스를 직역하면 클래스 또는 카테고리를 의미합니다.
XHTML 태그의 경우 이름 할당에 class=""를 사용합니다. ID와 달리 클래스는 재사용이 가능합니다. 동일한 스타일을 가진 여러 요소를 클래스로 직접 정의할 수 있습니다.
클래스 사용의 장점은 자명합니다. 이는 CSS 코드의 재사용성을 반영합니다. 각 태그에 대한 스타일 코드를 작성하지 않고도 스타일을 사용하여 정의할 수 있습니다.
XHTML은 다음과 같습니다:
<p class="he"></p>
<span class="그"></span>
<h5 class="그"></h5>
CSS는 다음과 같습니다:
.he
{
여백:10px;
배경색:빨간색;
}
6. 태그별 선택기
id와 class를 동시에 사용하고 태그 선택기도 동시에 사용하려면 다음 방법을 사용할 수 있습니다.
h1#content {}
/*ID가 콘텐츠인 모든 h1 태그를 나타냅니다.*/
h1.p1 {}
/*클래스 p1이 포함된 모든 h1 태그를 나타냅니다.*/
레이블별 선택기의 정밀도는 레이블 선택기와 ID/클래스 선택기 사이에 있으며 일반적으로 사용되는 선택기 중 하나입니다.
7. 조합 선택기
위의 모든 선택기는 조합해서 사용하세요. 다음과 같습니다:
h1 .p1 {}
/*h1 아래에 클래스 p1이 있는 모든 태그를 나타냅니다*/
#콘텐츠 h1 {}
ID 콘텐츠가 포함된 태그 아래의 모든 h1 태그를 나타냅니다.
h1 .p1,#content h1 {}
/* 클래스 p1이 있는 h1 아래의 모든 h1 태그와 ID 콘텐츠가 있는 태그 아래의 모든 h1 태그를 나타냅니다.*/
h1#콘텐츠 h2{}
/*ID가 콘텐츠인 h1 태그 아래의 h2 태그*/
CSS 선택기는 매우 자유롭고 유연하며 페이지의 필요에 따라 다양한 선택기를 사용하여 CSS 파일을 최대한 구성하고 최적화할 수 있습니다.