HTML에서 다양한 CSS 클래스를 어떻게 사용할 수 있나요?

HTML 요소의 클래스를 지정하기 위해 class 속성을 사용합니다.

여러 HTML 요소가 동일한 클래스를 공유할 수 있습니다. 색상, 글꼴 변경 등과 같은 클래스의 다양한 속성을 사용하여 이러한 HTML 요소에 대한 스타일 규칙을 정의할 수 있습니다. 이 클래스의 요소는 정의된 규칙에 따라 형식이 지정됩니다. 이것을 클래스 선택자라고 합니다.

특정 클래스가 있는 요소를 선택하려면 마침표(.) 문자와 클래스 이름을 써야 합니다. 예를 들어 ".black" 클래스를 살펴보겠습니다.

으아악

class 속성이 검은색으로 설정된 문서의 각 요소에 대해 콘텐츠를 검은색으로 렌더링합니다. 예를 들어 클래스 속성이 검은색으로 설정된

요소만 콘텐츠를 검은색으로 렌더링합니다. 으아악

클래스 속성을 사용하여 스타일시트의 클래스 이름을 가리킵니다. JavaScript는 이를 사용하여 특정 클래스 이름을 가진 요소에 액세스할 수도 있습니다.

예 1

아래에는 클래스 속성 값이 동일한 두 요소가 있는 예가 나와 있습니다. 모든 요소는 head 태그의 스타일 정의에 따라 동일하게 스타일이 지정됩니다.

으아악

다음은 위 예제 프로그램의 출력입니다.

예 2

의 중국어 번역은 다음과 같습니다.

예 2

아래에는 클래스 속성 값이 다른 두 요소가 있는 예가 나와 있습니다. 두 요소 모두 head 태그의 스타일 정의에 따라 스타일이 지정됩니다.

여러 클래스를 정의하려면 클래스 이름을 공백으로 구분하세요. 요소는 지정된 클래스에 따라 스타일이 지정됩니다.

으아악

여러 클래스를 정의하려면 클래스 이름을 공백으로 구분하거나 다른 값을 지정하세요. 요소는 지정된 클래스에 따라 스타일이 지정됩니다.

예 3

의 중국어 번역은 다음과 같습니다.

예 3

다음 예에서는 클래스 속성 값이 서로 다른 세 가지 요소가 있습니다. 두 요소는 head 태그의 스타일 정의에 따라 동일하게 스타일이 지정되고, 다른 요소는 head 태그의 스타일 정의에 따라 스타일이 지정됩니다. 으아악

다음은 위 예제 프로그램의 출력입니다.

예 4

의 중국어 번역은 다음과 같습니다.

예 4

또 다른 예로

태그 스타일을 지정할 수 있습니다. 다음과 같은 방법으로 class="device"를 사용하여 모든

요소의 스타일을 지정하세요. 으아악

예 5

라벨 스타일은 여러 클래스, 즉 여기의 장치 및 액세서리를 통해 수행할 수 있습니다. -

으으으으

위 내용은 HTML에서 다양한 CSS 클래스를 어떻게 사용할 수 있나요?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!