CSS 콘텐츠 속성을 사용하는 방법-CSS 튜토리얼-php.cn

CSS 콘텐츠 속성을 사용하는 방법

青灯夜游

풀어 주다： 2019-05-28 17:28:46

원래의

4159명이 탐색했습니다.

css 콘텐츠 속성은 생성된 콘텐츠를 삽입하는 데 사용됩니다. :before 선택기와 :after 선택기와 함께 사용되어 부동 소수점을 지우거나 생성된 콘텐츠를 요소 콘텐츠 앞이나 뒤에 배치합니다. 모든 브라우저는 content 속성을 지원합니다.

CSS 콘텐츠 속성을 사용하는 방법

CSS 콘텐츠 속성을 사용하는 방법은 무엇인가요?

content 속성은 생성된 콘텐츠를 삽입하는 데 사용됩니다. 이는 부동 소수점을 지우거나 생성된 콘텐츠를 요소에 배치하기 위해 :before 선택기와 :after 선택기와 함께 자주 사용됩니다. . 콘텐츠 앞이나 뒤.

기본 구문:

content: normal | string | attr() | uri() | counter();

로그인 후 복사

●보통: 기본값입니다.

● 문자열: 텍스트 내용(일반적으로 문자열)을 검색합니다.

●attr(): 요소의 속성 값을 삽입합니다. 구문: attr(attribute).

●uri(): 이미지, 오디오, 비디오 파일 또는 브라우저에서 지원하는 기타 리소스일 수 있는 외부 리소스 파일을 삽입합니다.

● Counter(): 정렬 식별자를 삽입하는 데 사용됩니다. counter()는 숫자뿐만 아니라 영숫자 또는 로마 숫자도 추가할 수 있습니다. 구문: content:couter(计数器名，编号种类)

설명: 이 속성은 요소 앞이나 뒤에 배치되는 생성된 콘텐츠를 정의하는 데 사용됩니다. 기본적으로 이는 인라인 콘텐츠인 경우가 많지만 이 콘텐츠가 생성하는 상자 유형은 표시 속성을 사용하여 제어할 수 있습니다.

참고: 모든 브라우저는 content 속성을 지원합니다. Internet Explorer 8(이상)은 !DOCTYPE이 지정된 경우 콘텐츠 속성을 지원합니다.

CSS 콘텐츠 속성 사용 예

1 CSS 콘텐츠 속성은 의사를 사용합니다. -classes afterClear float

CSS의 콘텐츠 속성은 의사 요소 이전/이후에 특별히 적용됩니다. 가장 일반적인 응용 프로그램은 의사 클래스를 사용하여 부동 소수점을 지우는 것입니다.

//一种常见利用伪类清除浮动的代码
.clearfix:after {
    content:"."; //这里利用到了content属性
    display:block;
    height:0;
    visibility:hidden;
    clear:both;
}
.clearfix {
    *zoom:1;
}

로그인 후 복사

Principle:

after pseudo-element는 콘텐츠를 통해 요소 뒤에 한 지점의 콘텐츠가 있는 블록 수준 요소를 생성한 다음 Clear를 사용합니다. 둘 다 플로트를 지우는 것입니다.

2. CSS 콘텐츠 속성은 의사 요소를 사용하여 페이지에 콘텐츠를 삽입합니다.

1) 일반 텍스트 삽입

#🎜 🎜 #사용법: content: "삽입된 기사" 또는 content:none은 콘텐츠를 삽입하지 않습니다.

예:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>插入纯文字</title>
		<style>
			h1::after{
			    content:",在h1后插入内容"
			}
			h2::after{
			    content:none
			}
		</style>
	</head>
	<body>
		<h1>这是h1</h1>
        <h2>这是h2</h2>
	</body>
</html>

로그인 후 복사

Rendering:

#🎜 🎜#

CSS 콘텐츠 속성을 사용하는 방법 2) 텍스트 기호 삽입

CSS 콘텐츠 속성의 다음 속성 값을 사용하여 삽입( 삭제) 텍스트 기호: # 🎜🎜#

● None: Nothing으로 지정된 경우 내용을 설정합니다.

● open-quote: 내용을 여는 따옴표로 설정합니다.

# 🎜🎜#● close-quote: 콘텐츠를 닫는 따옴표로 설정합니다.

● no-open-quote: 지정된 경우 콘텐츠의 여는 따옴표를 제거합니다.

no-close-quote: 지정된 경우 콘텐츠의 닫는 따옴표를 제외하고 이동합니다.

● Inherit: 지정된 콘텐츠 속성의 값은 상위 요소에서 상속되어야 합니다.

content 속성의 여는 따옴표 속성 값과 닫는 따옴표 속성 값은 문자열 양쪽에 대괄호, 작은 따옴표, 큰 따옴표 등의 중첩된 텍스트 기호를 추가합니다. 여는 따옴표는 시작 텍스트 기호를 추가하는 데 사용되고 닫는 따옴표는 끝 텍스트 기호를 추가하는 데 사용됩니다.

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>插入文字符号</title>
		<style>
			h1 {quotes: "(" ")";/*利用元素的quotes属性指定文字符号*/}
			h1::before {content: open-quote;}
			h1::after {content: close-quote;}
			
			h2 {quotes: "\"" "\"";/*添加双引号要转义*/}
			h2::before {content: open-quote;}
			h2::after {content: close-quote;}
		</style>
	</head>

	<body>
		<h1>这是h1</h1>
		<h2>这是h2</h2>
	</body>

</html>

로그인 후 복사

렌더링:

3), 사진 삽입

CSS 콘텐츠 속성을 사용하는 방법 # 🎜 🎜#css 콘텐츠 속성은 요소

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>插入图片</title>
		<style>
			p::after {
				content: url(css3.jpg);
				border: 1px solid powderblue;
			}
		</style>
	</head>

	<body>
		<p>这是一段测试文字,文字后面是图片：</p>
	</body>

</html>

로그인 후 복사

Rendering:

바로 앞/뒤에 이미지를 삽입할 수도 있습니다.

위 내용은 CSS 콘텐츠 속성을 사용하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!