css 콘텐츠 속성은 생성된 콘텐츠를 삽입하는 데 사용됩니다. :before 선택기와 :after 선택기와 함께 사용되어 부동 소수점을 지우거나 생성된 콘텐츠를 요소 콘텐츠 앞이나 뒤에 배치합니다. 모든 브라우저는 content 속성을 지원합니다.
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>
#🎜 🎜#
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>
렌더링:
# 🎜 🎜#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 중국어 웹사이트의 기타 관련 기사를 참조하세요!