CSS에서 의사 요소를 사용하는 방법 요약(코드)
- 不言원래의
- 2018-08-24 11:55:081316검색
이 기사는 CSS에서 의사 요소를 사용하는 방법에 대한 요약(코드)을 제공합니다. 이는 특정 참고 가치가 있으므로 도움이 될 수 있습니다.
텍스트의 첫 글자를 특수 문자로 설정
<!DOCTYPE html >
<html>
<head>
<meta charset="utf-8">
<title>自学教程(如约智惠.com)</title>
<style >
p:first-letter {
color:#ff0000;
font-size:xx-large;
}
</style>
</head>
<body>
<p>你可以使用"first-letter"伪元素向文本的首字母设置特殊样式；</p>
</body>
</html>텍스트의 첫 번째 줄을 특수 문자로 설정
<!DOCTYPE html >
<html>
<head>
<meta charset="utf-8">
<title>自学教程(如约智惠.com)</title>
<style >
p:first-letter {
color:#ff0000;
font-size:xx-large;
}
</style>
</head>
<body>
<p>你可以使用"first-letter"伪元素向文本的首字母设置特殊样式；</p>
</body>
</html>텍스트의 첫 번째 줄의 첫 글자를 특수 문자로 설정
<!DOCTYPE html >
<html>
<head>
<meta charset="utf-8">
<title>自学教程(如约智惠.com)</title>
<style >
p:first-letter{
color:#ff0000;
font-size:xx-large;
}
p:first-line {
color:#0000ff;
font-variant:small-caps;
}
</style>
</head>
<body>
<p>你可以结合使用"first-line"和"first-letter"伪元素向文本的首行和首字母设置特殊样式。</p>
</body>
</html> 사용법: 요소 앞에 일부 콘텐츠 삽입
<!DOCTYPE html >
<html>
<head>
<meta charset="utf-8">
<title>自学教程(如约智惠.com)</title>
<style >
h1:before {content:url(smiley.gif);}
</style>
</head>
<body>
<h1>This is a heading</h1>
<p>The :before pseudo-element inserts content before an element.</p>
<h1>This is a heading</h1>
<p><b>注意:</b>仅当 !DOCTYPE 已经声明 IE8 支持这个内容属性</p>
</body>
</html>사용법: 요소 뒤에 일부 콘텐츠 삽입
<!DOCTYPE html >
<html>
<head>
<meta charset="utf-8">
<title>自学教程(如约智惠.com)</title>
<style >
h1:after {content:url(smiley.gif);}
</style>
</head>
<body>
<h1>This is a heading</h1>
<p>The :before pseudo-element inserts content before an element.</p>
<h1>This is a heading</h1>
<p><b>注意:</b>仅当 !DOCTYPE 已经声明 IE8 支持这个内容属性</p>
</body>
</html>관련 권장 사항:
css pseudo-class, pseudo-element_html/css_WEB-ITnose
CSS 의사 클래스 pseudo-element_html/css_WEB-ITnose
위 내용은 CSS에서 의사 요소를 사용하는 방법 요약(코드)의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
성명：
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.