Zusammenfassung der Verwendung von Pseudoelementen in CSS (Code)-CSS-Tutorial-php.cn

Zusammenfassung der Verwendung von Pseudoelementen in CSS (Code)

不言

Freigeben： 2018-08-24 11:55:08

Original

1359 Leute haben es durchsucht

Dieser Artikel enthält eine Zusammenfassung (Code) zur Verwendung von Pseudoelementen in CSS. Ich hoffe, dass er für Freunde hilfreich ist.

Setzen Sie den ersten Buchstaben des Textes auf einen Sonderbuchstaben

<!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>

Nach dem Login kopieren

Setzen Sie die erste Textzeile auf einen Sonderbuchstaben

<!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>

Nach dem Login kopieren

Setzen Sie den ersten Buchstaben der ersten Textzeile auf „Spezial“

<!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>

Nach dem Login kopieren

Verwendung: Fügen Sie vor einem Element etwas Inhalt ein

<!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>

Nach dem Login kopieren

Verwendung: Fügen Sie einige Inhalte nach einem Element ein

<!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>

Nach dem Login kopieren

Verwandte Empfehlungen:

css pseudo-class, pseudo-element_html/css_WEB-ITnose

CSS-Pseudoklasse pseudo-element_html/css_WEB-ITnose

Das obige ist der detaillierte Inhalt vonZusammenfassung der Verwendung von Pseudoelementen in CSS (Code). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!