집 >웹 프론트엔드 >CSS 튜토리얼 >CSS3을 사용하여 콘텐츠 속성을 추가하는 방법은 무엇입니까? 콘텐츠 속성의 사용(코드 예)

CSS3을 사용하여 콘텐츠 속성을 추가하는 방법은 무엇입니까? 콘텐츠 속성의 사용(코드 예)

青灯夜游원래의: 2018-09-25 16:41:483562검색

이 장에서는 CSS3를 사용하여 콘텐츠 속성을 추가하는 방법을 소개합니다. 콘텐츠 속성(코드 예제) 사용, CSS3 콘텐츠(콘텐츠) 속성에 대한 자세한 설명을 통해 콘텐츠 속성을 사용하여 콘텐츠를 삽입하고, 부동 소수점을 지우고, 콘텐츠를 삽입하는 방법을 모든 사람에게 알립니다. 도움이 필요한 친구들이 참고할 수 있기를 바랍니다.

1. 콘텐츠 속성에 대한 자세한 설명

1 콘텐츠 속성의 역할:

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

2. 기본 구문:

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

normal: 기본값.

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

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

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

counter(): 정렬 식별자를 삽입하는 데 사용되는 카운터입니다. counter()는 숫자 숫자뿐만 아니라 영숫자 또는 로마 숫자도 추가할 수 있습니다. 구문: content:couter(카운터 이름, 숫자 유형) )

3. 브라우저 지원:

CSS3을 사용하여 콘텐츠 속성을 추가하는 방법은 무엇입니까? 콘텐츠 속성의 사용(코드 예)

모든 브라우저는 콘텐츠 속성을 지원합니다.

참고: IE8은 !DOCTYPE이 지정된 경우에만 Content 속성을 지원합니다.

2. CSS 콘텐츠 속성 적용

1 CSS 콘텐츠 속성은 float를 삭제한 후 의사 클래스를 사용합니다.

The content 속성 /after 의사 요소에서 가장 일반적인 응용 프로그램은 의사 클래스를 사용하여 부동 소수점을 지우는 것입니다.

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

Principle:

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

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

1) 일반 텍스트 삽입

사용법: 콘텐츠: "삽입됨 Article" 또는 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:

#🎜 🎜# CSS3을 사용하여 콘텐츠 속성을 추가하는 방법은 무엇입니까? 콘텐츠 속성의 사용(코드 예)

2) 텍스트 기호 삽입

CSS 콘텐츠 속성의 다음 속성 값을 사용하여 텍스트 기호를 삽입(삭제)할 수 있습니다.

없음 콘텐츠 설정, 없음으로 지정됨

open-quote 콘텐츠를 여는 따옴표로 설정

close-quote 콘텐츠를 다음으로 설정;

no-open-quote 지정된 경우 콘텐츠의 시작 따옴표를 제거합니다.

no-close-quote 지정된 경우 콘텐츠의 닫는 따옴표를 제거합니다. ;

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

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>

렌더링:

CSS3을 사용하여 콘텐츠 속성을 추가하는 방법은 무엇입니까? 콘텐츠 속성의 사용(코드 예)

3), 사진 삽입

# 🎜 🎜#css 콘텐츠 속성은 요소

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>插入图片</title>
		<style>
			p::after {
				content: url(cssCSS3을 사용하여 콘텐츠 속성을 추가하는 방법은 무엇입니까? 콘텐츠 속성의 사용(코드 예));
				border: 1px solid powderblue;
			}
		</style>
	</head>

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

</html>

Rendering:

CSS3을 사용하여 콘텐츠 속성을 추가하는 방법은 무엇입니까? 콘텐츠 속성의 사용(코드 예) Summary: 위의 내용 바로 앞/뒤에 이미지를 삽입할 수도 있습니다. CSS 콘텐츠 속성을 적용한 몇 가지 예는 매우 간단합니다.

위 내용은 CSS3을 사용하여 콘텐츠 속성을 추가하는 방법은 무엇입니까? 콘텐츠 속성의 사용(코드 예)의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

css css3 String 字符串插入排序继承 Attribute 选择器伪类伪元素

성명：

이전 기사：CSS 그리드 레이아웃을 사용하여 강아지 스탬프를 구현하는 방법(소스 코드 첨부)다음 기사：CSS 그리드 레이아웃을 사용하여 강아지 스탬프를 구현하는 방법(소스 코드 첨부)