recherche

Maison >interface Web >tutoriel CSS >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)

奋力向前
奋力向前original
2021-08-05 16:33:185519parcourir

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 policesComment 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 <p></p> via le nom de l'élément p

p{ border:2px solid blue;｝

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>

Exemple de code d'agrandissement de police

p{}

Rendu de code d'agrandissement de police

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

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

p {font-size:200%;} 将字体放大1倍
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>
<p></p>元素

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

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>

字体放大代码示例

rrreee

字体放大代码效果图

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

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

Rendu de code

Apprentissage recommandé : Tutoriel vidéo CSS

<p></p>

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!

css css3 选择器
Déclaration：
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Article précédent：Apprenez étape par étape à utiliser CSS3 pour ajouter des effets d'ombre au texte (explication détaillée du code)Article suivant：Apprenez étape par étape à utiliser CSS3 pour ajouter des effets d'ombre au texte (explication détaillée du code)

Articles Liés

Voir plus