Comment ajouter des bordures ou des effets d'amplification de police au texte en CSS (explication détaillée du code)-tutoriel CSS-php.cn

Comment ajouter des bordures ou des effets d'amplification de police au texte en CSS (explication détaillée du code)

奋力向前

Libérer： 2021-08-06 10:11:33

original

5518 Les gens l'ont consulté

Dans l'article précédent "Vous apprendre étape par étape comment utiliser CSS3 pour ajouter des effets d'ombre au texte (explication détaillée du code)", je vous ai présenté comment utiliser CS3 pour ajouter des effets d'ombre au texte. L'article suivant vous présentera comment utiliser CSS pour ajouter des bordures ou des effets d'amplification de police au texte. Voyons comment le faire ensemble. Comment ajouter des bordures ou un agrandissement de police au texte avec CSS

Agrandissement des polices Comment ajouter des bordures ou des effets d'amplification de police au texte en CSS (explication détaillée du code)

Comment ajouter des bordures ou des effets d'amplification de police au texte en CSS (explication détaillée du code)

Sélectionnez tous les éléments `` via le nom de l'élément p

p{ border:2px solid blue;｝

Copier après la connexion

pSpécifiez les règles de style

<meta charset="utf-8"> 
<title>文字边框</title>
<style>
p{ border:2px solid blue;｝
</style>
</head>

<body>
<p>中文网1</p>
<p>中文网2</p>
<p>中文网3</p>
</body>

</html>

Copier après la connexion

Exemple de code d'agrandissement de police

p{}

Copier après la connexion

Rendu de code d'agrandissement de police

Si vous voulez Laissez tous les paragraphes ont un fond gris, utilisez le sélecteur d'élément  pour définir

p {font-size:200%;} 将字体放大1倍

Copier après la connexion

Exemple de code

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>文字边框</title>
<style>
	p{font-size: 200%;}
p.one 
{
	border-style:dashed;
	border-width:5px;
}
p.two 
{
	border-style:solid;
	border-width:medium;
}
p.three
{
	border-style:solid;
	border-width:1px;
}
p.four
	{border-style:dashed;
	border-width:2px;
	border-color:red
</style>
</head>

<body>
<p class="one">php中文网</p>
<p class="two">php中文网</p>
<p class="three">php中文网</p>
<p class="four">php中文网</p>
</body>

</html>

Copier après la connexion

元素

p{background:lightgray;} 选中所有的<p>设置背景色：亮灰色。

Copier après la connexion

p指定样式规则

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>文字边框</title>
<style>
	p{background:lightgray; font-size: 200%;}
p.one 
{
	border-style:dashed;
	border-width:5px;
}
p.two 
{
	border-style:solid;
	border-width:medium;
}
p.three
{
	border-style:solid;
	border-width:1px;
}
p.four
	{border-style:dashed;
	border-width:2px;
	border-color:red
</style>
</head>

<body>
<p class="one">php中文网</p>
<p class="two">php中文网</p>
<p class="three">php中文网</p>
<p class="four">php中文网</p>
</body>

</html>

Copier après la connexion

字体放大代码示例

rrreee字体放大代码效果图

如果想让所有的段落拥有灰色背景，使用元素选择器

Rendu de code

Apprentissage recommandé : Tutoriel vidéo CSS

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!