Résumé de l'utilisation des pseudo-éléments en CSS (code)-tutoriel CSS-php.cn

Résumé de l'utilisation des pseudo-éléments en CSS (code)

不言

Libérer： 2018-08-24 11:55:08

original

1389 Les gens l'ont consulté

Ce que cet article vous apporte est un résumé (code) de la façon d'utiliser les pseudo-éléments en CSS. Il a une certaine valeur de référence. Les amis dans le besoin peuvent s'y référer.

Définir la première lettre du texte sur une lettre spéciale

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

Copier après la connexion

Définir la première ligne du texte sur une lettre spéciale

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

Copier après la connexion

Définissez la première lettre de la première ligne de texte sur spécial

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

Copier après la connexion

Utilisation : Insérer du contenu avant un élément

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

Copier après la connexion

Utilisation : Insérer du contenu après un élément

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

Copier après la connexion

Recommandations associées :

pseudo-classe CSS, pseudo-element_html/css_WEB-ITnose

Pseudo-classe CSS pseudo-element_html/css_WEB-ITnose

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!