Comment obtenir l'effet lettrine en CSS ? Pseudo-élément + effet flottant (exemple de code)-tutoriel CSS-php.cn

Comment obtenir l'effet lettrine en CSS ? Pseudo-élément + effet flottant (exemple de code)

青灯夜游

Libérer： 2019-07-06 11:35:08

original

5246 Les gens l'ont consulté

Il existe une fonction de lettrine dans les documents Word, qui peut être utilisée dans la mise en page des articles. Parfois, elle peut ajouter beaucoup de couleur à l'article. Alors, CSS peut-il obtenir un tel effet ? Cet article vous présentera comment CSS obtient l'effet de lettrine, afin que vous puissiez comprendre comment utiliser les pseudo-éléments CSS + flottants pour obtenir l'effet de lettrine. Il a une certaine valeur de référence. Les amis dans le besoin peuvent s'y référer. J'espère qu'il vous sera utile.

En CSS, l'effet lettrine peut être obtenu grâce au pseudo element::first-letter. Le principe d'implémentation est très simple, c'est-à-dire définir la valeur de taille de police du premier mot sur une valeur plus grande, puis utiliser float pour l'implémenter.

Utilisons un exemple de code simple pour voir comment CSS obtient l'effet de lettrine.

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>首字下沉</title>
		<style>
			p::first-letter{
				color: #c69c6d;
				font-size: 2em;
				float:left;
				margin: 0 .2em 0 0;
			}
		</style>
	</head>
	<body>
		<p>这里是测试代码，实现首字下沉。这里是测试代码，实现首字下沉。这里是测试代码，实现首字下沉。这里是测试代码，实现首字下沉。这里是测试代码，实现首字下沉。这里是测试代码，实现首字下沉。</p>
		<p>这里是测试代码，实现首字下沉。这里是测试代码，实现首字下沉。这里是测试代码，实现首字下沉。这里是测试代码，实现首字下沉。这里是测试代码，实现首字下沉。这里是测试代码，实现首字下沉。</p>
		<p>这里是测试代码，实现首字下沉。这里是测试代码，实现首字下沉。这里是测试代码，实现首字下沉。这里是测试代码，实现首字下沉。这里是测试代码，实现首字下沉。这里是测试代码，实现首字下沉。</p>
	</body>
</html>

Copier après la connexion

Rendu :

Comment obtenir leffet lettrine en CSS ? Pseudo-élément + effet flottant (exemple de code)

Dans l'exemple ci-dessus, le premier mot de tous les paragraphes est supprimé si seul le premier mot d'un certain paragraphe est nécessaire. à laisser tomber, Pour obtenir l'effet de naufrage, vous devez coopérer avec d'autres sélecteurs pour y parvenir. Nous examinons ici l'implémentation de la lettrine dans le premier paragraphe :

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>首字下沉</title>
		<style>
			p:first-child::first-letter{
				color: #c69c6d;
				font-size: 2em;
				float:left;
				margin: 0 .2em 0 0;
			}
		</style>
	</head>
	<body>
		<p>这里是测试代码，实现首字下沉。这里是测试代码，实现首字下沉。这里是测试代码，实现首字下沉。这里是测试代码，实现首字下沉。这里是测试代码，实现首字下沉。这里是测试代码，实现首字下沉。</p>
		<p>这里是测试代码，实现首字下沉。这里是测试代码，实现首字下沉。这里是测试代码，实现首字下沉。这里是测试代码，实现首字下沉。这里是测试代码，实现首字下沉。这里是测试代码，实现首字下沉。</p>
		<p>这里是测试代码，实现首字下沉。这里是测试代码，实现首字下沉。这里是测试代码，实现首字下沉。这里是测试代码，实现首字下沉。这里是测试代码，实现首字下沉。这里是测试代码，实现首字下沉。</p>
	</body>
</html>

Copier après la connexion

Rendu :

Comment obtenir leffet lettrine en CSS ? Pseudo-élément + effet flottant (exemple de code)

Résumé : ce qui précède est le résumé de cet article Tout le contenu, j'espère qu'il sera utile à l'étude de chacun. Pour plus de didacticiels connexes, veuillez visiter le Tutoriel vidéo sur les bases de CSS !

Recommandations associées :

Tutoriel vidéo de formation sur le bien-être public php

Manuel en ligne CSS

Tutoriel graphique div/css

Tutoriel vidéo de conception Web

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!