Heim  >  Artikel  >  Web-Frontend  >  So fügen Sie Text in CSS Rahmen oder Schriftverstärkungseffekte hinzu (detaillierte Code-Erklärung)

So fügen Sie Text in CSS Rahmen oder Schriftverstärkungseffekte hinzu (detaillierte Code-Erklärung)

奋力向前
奋力向前Original
2021-08-05 16:33:185484Durchsuche

Im vorherigen Artikel „Lernen Sie Schritt für Schritt, wie Sie mit CSS3 Schatteneffekte zu Text hinzufügen (detaillierte Code-Erklärung)“ habe ich Ihnen gezeigt, wie Sie mit CS3 Schatteneffekte zu Text hinzufügen. Im folgenden Artikel erfahren Sie, wie Sie mit CSS Rahmen oder Schriftverstärkungseffekte zu Text hinzufügen. Sehen wir uns gemeinsam an, wie das geht.

So fügen Sie Text in CSS Rahmen oder Schriftverstärkungseffekte hinzu (detaillierte Code-Erklärung)

So fügen Sie mit CSS Rahmen oder Schriftvergrößerungen zu Text hinzu

Textrahmen

p{ border:2px solid blue;}

Beispiel für einen Textrahmencode

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

Code-Renderings

So fügen Sie Text in CSS Rahmen oder Schriftverstärkungseffekte hinzu (detaillierte Code-Erklärung)

Schriftvergrößerung

Wählen Sie alle <p></p>-Elemente über den Elementnamen p aus ="https://img.php.cn/upload/image/959/246/516/1628152068872557.jpg" title="1628152068872557.jpg" alt="So fügen Sie Text in CSS Rahmen oder Schriftverstärkungseffekte hinzu (detaillierte Code-Erklärung)"/><p></p>元素

p{}

p指定样式规则

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

字体放大代码示例

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

字体放大代码效果图

So fügen Sie Text in CSS Rahmen oder Schriftverstärkungseffekte hinzu (detaillierte Code-Erklärung)

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

Wenn Sie möchten, lassen Sie alle Absätze einen grauen Hintergrund haben, verwenden Sie den Elementselektor <p></p>, um

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

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

So fügen Sie Text in CSS Rahmen oder Schriftverstärkungseffekte hinzu (detaillierte Code-Erklärung)

Empfohlenes Lernen: CSS-Video-Tutorial

🎜 zu definieren

Das obige ist der detaillierte Inhalt vonSo fügen Sie Text in CSS Rahmen oder Schriftverstärkungseffekte hinzu (detaillierte Code-Erklärung). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme:
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn