Heim >Web-Frontend >CSS-Tutorial >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:185540Durchsuche
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 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
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>字体放大代码效果图
如果想让所有的段落拥有灰色背景，使用元素选择器<p></p>
<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
Empfohlenes Lernen: CSS-Video-Tutorial
🎜 zu definierenDas 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!