HTML5 및 CSS3 프로그래밍 용 더미 정의 방법 - 더미

비디오: CSS 수업 - 선택자의종류 2 : 클래스선택자 2024

HTML5 페이지에서 특정 유형의 모든 요소에 스타일을 쉽게 적용 할 수 있지만 때로는 스타일을보다 엄격하게 제어하려는 경우가 있습니다. 예를 들어 두 개 이상의 단락 스타일을 사용할 수 있습니다. 예를 들어, 클래스를보십시오. HTML 페이지.

이 페이지에는 여러 가지 형식이 있습니다.

질문에 큰 기울임 꼴 산 세리프 글꼴이 있습니다. 두 가지 이상의 질문이 있습니다.
대답은 작고, 청색이며, 체택 글꼴입니다. 하나 이상의 답변이 있습니다.

질문과 답변은 모두 단락이므로 두 가지 스타일이 필요하기 때문에 단락의 스타일을 지정할 수 없습니다. 하나 이상의 질문과 하나 이상의 답변이 있으므로 ID 트릭은 문제가 될 수 있습니다. 두 개의 다른 요소는 동일한 ID를 가질 수 없습니다. 이것은 수업의 개념이 작용하는 곳입니다. 모든 ID는 하나의 요소에 속하지만 많은 요소가 동일한 클래스를 공유 할 수 있습니다.

페이지에 클래스를 추가하는 방법

CSS를 사용하면 HTML에 클래스를 정의하고 클래스 전반에 적용되는 스타일 정의를 만들 수 있습니다. 다음과 같이 작동합니다.

HTML 질문에 class 속성을 추가합니다.

ID와 달리 여러 요소가 동일한 클래스를 공유 할 수 있습니다. 질문을하도록 수업을 설정하면 다음 단락이 질문으로 표시됩니다.
```
북극에는 어떤 종류의 소가 있습니까?
```
답변 클래스를 설정하여 답변에 유사한 클래스 속성을 추가합니다.
```
에스키모!
```
단락의 두 가지 하위 클래스 인 질문과 답변이 있습니다.
질문에 대한 수업 스타일을 만듭니다.

클래스 스타일은 CSS에서 정의됩니다. 클래스 이름 앞에 마침표 (.)가있는 클래스를 지정하십시오. 클래스는
```
와 같이 CSS에서 정의됩니다. 질문 {글꼴: 기울임 꼴 150 % arial, sans-serif; text-align: left;}
```
이 상황에서 질문 클래스는 왼쪽에 정렬 된 큰 산 셰리프 글꼴로 정의됩니다.
대답의 모양을 정의하십시오.

클래스는 오른쪽 정렬 체체 글꼴을 사용합니다.

. 답변 {font: 120 % "Comic Sans MS", 필기체; 텍스트 정렬: 오른쪽; color: # 00F;}

클래스 사용하기

CSS 클래스를 사용하는 방법을 보여주는이 코드는

클래스이다. html. 질문 {글꼴: 기울임 꼴 150 % arial, sans-serif; 텍스트 정렬: 왼쪽;}. 답변 {font: 120 % "Comic Sans MS", 필기체; 텍스트 정렬: 오른쪽; color: # 00F;}

좋아하는 농담
북극에는 어떤 종류의 소가 살고 있는가?
에스키모!
개 집 꼭대기에는 무엇이 있습니까?
위!

때로는

p와 같은 선택기가 나타납니다. 멋진 요소

는 요소와 클래스 이름을 모두 포함합니다.이 스타일은 클래스가 첨부 된 단락에만 적용됩니다. 일반적으로 클래스는 모든 종류의 것들에 적용될 수 있기 때문에 위대한 클래스이므로 요소 이름을 그대로 두어 스타일을 최대한 재사용 할 수 있습니다.

클래스 결합

하나의 요소는 둘 이상의 클래스를 사용할 수 있습니다.

단락은 세 가지 스타일로 표시되지만 빨간색과 스크립트 만 정의됩니다. 세 번째 단락은 두 클래스를 모두 사용합니다. 코드는 다음과 같습니다.

redScript. html. 빨간색 {color: white; 배경색: 빨간색;}.

이 단락은 두 가지 클래스를 사용합니다.

스타일 시트는 두 개의 클래스를 도입합니다. 빨강 클래스는 단락을 빨간색으로 만들고 (빨간색 배경이 흰색 인 텍스트), 스크립트 클래스는 필기체 글꼴을 요소에 적용합니다.

처음 두 단락에는 각각 클래스가 있으며 클래스는 예상대로 작동합니다. 흥미로운 부분은 두 개의 클래스가 있기 때문에 세 번째 단락입니다.

두 스타일 모두 작성된 순서대로 요소에 적용됩니다. 두 클래스 이름 모두 따옴표 안에 나타나며 쉼표가 필요하지 않음 (또는 허용됨)에 유의하십시오. 원하는 경우 요소에 두 개 이상의 클래스를 적용 할 수 있습니다. 클래스에 충돌하는 규칙이있는 경우 (예를 들어, 요소가 녹색이고 다음 요소가 파란색으로 만드는 경우) 목록의 최신 클래스는 이전 값을 덮어 씁니다.

요소는 또한 ID를 가질 수 있습니다. ID 스타일, 요소 스타일 및 모든 클래스 스타일은 브라우저가 객체를 표시하려고 할 때 고려됩니다. 일반적으로 (mainBackgroundColor와 같이) 클래스의 의미에 따라 클래스를 명명하는 것이 가장 좋습니다. 녹색이 빨간색보다 낫다는 것을 결정할 수 있으므로 클래스 이름을 변경해야하거나 녹색을 나타내는 빨간색 클래스를 가져야합니다. 그건 이상 할거야.