HTML 스팬 태그의 클래스 속성을 사용하는 방법은 무엇입니까? 클래스 속성에 대한 자세한 설명은 다음과 같습니다.-HTML 튜토리얼-php.cn

HTML 스팬 태그의 클래스 속성을 사용하는 방법은 무엇입니까? 클래스 속성에 대한 자세한 설명은 다음과 같습니다.

寻∝梦

풀어 주다： 2018-08-28 13:54:35

원래의

31409명이 탐색했습니다.

이 글에서는 주로 HTML 스팬 태그의 클래스 속성에 대해 설명합니다. 이는 CSS 스타일과 함께 사용해야 합니다. 이제 CSS 스타일의 기본 사항에 대해 설명하겠습니다. . 그럼 지금부터 이 글을 살펴보도록 하겠습니다

먼저 HTML SPAN 태그의 클래스 속성의 의미를 살펴보겠습니다.

span은 영어로 SPAN을 의미하지만 웹페이지 제작에서는 html 태그 전체 태그는

태그는 문서의 인라인 요소를 그룹화하는 데 사용됩니다.

class는 HTML에서 레이블 스타일을 정의하는 데 사용되며 재사용이 가능합니다. 다양한 레이블에 대해 길이, 너비, 높이, 배경색 등을 정의할 수 있습니다...

예를 들어 < ;/span> 여기서 main은 클래스 이름이고 CSS에서 "."로 정의됩니다.

개발을 살펴보세요.

예는 다음과 같습니다.

<p><span>some text.</span>some other text.</p>

로그인 후 복사

에 대한 설명 예는 다음과 같습니다.

span이 잘못된 경우,span 요소 내의 텍스트가 다른 텍스트와 시각적으로 다르지 않도록 스타일을 적용합니다. 그러나 위 예의 범위 요소는 p 요소에 추가 구조를 추가합니다.

span에 id 또는 class 속성을 적용하면 적절한 의미를 추가할 수 있을 뿐만 아니라 스타일 적용도 용이해집니다.

동일한 요소에 class 또는 id 속성을 적용할 수 있지만 둘 중 하나만 적용하는 것이 더 일반적입니다. 둘 사이의 주요 차이점은 클래스는 요소 그룹(유사한 요소 또는 특정 유형의 요소로 이해될 수 있음)에 사용되는 반면 id는 개별 요소와 고유 요소를 식별하는 데 사용된다는 것입니다.

팁: 실제로 W3School 사이트의 일부 텍스트가 다른 텍스트와 스타일이 다르다는 것을 눈치채셨을 것입니다. 예를 들어 "팁"은 굵은 주황색으로 표시됩니다. 이 효과를 얻는 방법에는 여러 가지가 있지만 우리의 접근 방식은 "힌트"를 사용하여 범위 요소를 사용한 다음 범위 요소의 상위 요소, 즉 p 요소에 클래스를 적용하여 적용할 수 있도록 하는 것입니다. 이 클래스의 하위 요소까지 확장됩니다. 해당 스타일.

이것은 HTML의 코드입니다:

<p class="tip"><span>提示：</span>... ... ...</p>

로그인 후 복사

이것은 CSS의 코드입니다:

p.tip span {
font-weight:bold;
color:#ff9955;
}

로그인 후 복사

그렇습니다. 간단한 CSS 속성과 SPAN 태그 적용을 추가하면 다른 태그에 태그를 적용할 수 있습니다. 태그 요소는 CSS 스타일의 장점 중 하나이며 사용하기 편리합니다.

다음은 HTML 스팬 태그의 또 다른 완전한 클래스 예입니다.

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>PHP中文网(php.cn)</title>
<style>
span.intro {color:blue;}
p.important {color:green;}
</style>
</head>
<body>
<span class="intro">标题 1</span>
<p>段落。</p>
<p class="important">注意：这是一个很重要的段落。 :)</p>
</body>
</html>

로그인 후 복사

그림에서 이해할 수 있듯이 이것은 또한 일부 CSS 스타일을 사용하면 전체 스타일을 수정할 수 있는 매우 간단한 웹 페이지입니다. 예를 들어 글꼴 색상을 파란색으로 변경합니다.

그림과 같습니다:

HTML 스팬 태그의 클래스 속성을 사용하는 방법은 무엇입니까? 클래스 속성에 대한 자세한 설명은 다음과 같습니다.