Heim >Web-Frontend >CSS-Tutorial >Was sind die Textattribute in CSS3?
Was sind die Textattribute in CSS3?
- 王林Original
- 2020-11-23 11:53:034267Durchsuche
Zu den Textattributen in CSS3 gehören: 1. Farbattribut; 2. Textausrichtungsattribut [Buchstabenabstand]; Textdekorationsattribut [text-decoration].
Die Betriebsumgebung dieses Tutorials: Windows 10-System, CSS3-Version. Diese Methode ist für alle Computermarken geeignet.
(Teilen von Lernvideos: CSS-Video-Tutorial)
Die Textattribute in CSS3 sind:
1, Farbe
Funktion: Geben Sie die Farbe des Texts an
Beschreibung: Dieses Attribut wird im Block verwendet, Inline und Inline-Blöcke. Kann in Stylesheets verwendet werden, um die Farbe des gesamten Texts innerhalb des gesteuerten Elements zu ändern. Beispiel:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>CSS3之text属性</title>
<style type="text/css">
#coDiv {
color: #00c6ff;
}
#coP {
color: #2b542c;
}
#coSpan {
color: palevioletred;
}
#coStrong {
color: blueviolet;
}
#colIn {
color: deeppink;
}
</style>
</head>
<body>
<div id="coDiv">
<p id="coP">
我是一名前端爱好者1
</p>
我是一名前端爱好者2
</div>
<span id="coSpan">
我是一名前端爱好者3
<strong id="coStrong">我是一名前端爱好者4</strong>
</span>
<input type="text" id="colIn" />
</body>
</html>, text-align. Funktion: Geben Sie die horizontale Ausrichtung des Elementtexts an. Hinweis : Wird nur in Elementen auf Blockebene verwendet. Es wird nicht wirksam, wenn es direkt auf Inline-Elementen verwendet wird. Wenn dieses Attribut verwendet wird, werden die im Blockelement enthaltenen Text- und Inline-Elemente ausgerichtet. Die darin enthaltenen Blockelemente werden auch ausgerichtet, wenn dieses Attribut nicht standardmäßig festgelegt ist, da das untergeordnete Blockelement das text-align-Attribut von erbt das übergeordnete Blockelement. Beispiel:<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>CSS3之font属性</title>
<style type="text/css">
div {
border: 1px solid;
width: 1200px;
height: 150px;
}
#showdiv1 {
text-align: left;
}
#showdiv2 {
text-align: center;
}
#showdiv3 {
text-align: right;
}
#showdiv4 {
text-align: justify;
}
</style>
</head>
<body>
<div id="showdiv1">
大家好
</div>
<div id="showdiv2">
大家好
</div>
<div id="showdiv3">
大家好
</div>
<div id="showdiv4">
In a sense we've come to our nation's capital to cash a check. When the architects of our republic wrote the magnificent words of the Constitution and the Declaration of Independence, they were signing a promissory note to which every American was to fall heir. This note was a promise that all men, yes, black men as well as white men, would be guaranteed the "unalienable Rights" of "Life, Liberty and the pursuit of Happiness." It is obvious today that America has defaulted on this promissory note, insofar as her citizens of color are concerned. Instead of honoring this sacred obligation, America has given the Negro people a bad check, a check which has come back marked "insufficient funds."
</div>
</body>
</html>3. Buchstabenabstand:
Funktion: Abstand zwischen den Zeichen vergrößern oder verkleinern
Beschreibung: Wenn der negative Wert zu groß ist, wird die Schriftart verkleinert extrudiert, aber nicht überlappend
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>CSS3之text属性</title>
<style type="text/css">
#lsSpan1 {
letter-spacing: normal;
}
#lsSpan2 {
letter-spacing: 10px;
}
#lsSpan3 {
letter-spacing: -4px;
}
</style>
</head>
<body>
<span id="lsSpan1">Hello World</span><br>
<span id="lsSpan2">Hello World</span><br>
<span id="lsSpan3">Hello World</span><br>
</body>
</html>4, Zeilenhöhe:
Funktion: Zeilenhöhe des Textes festlegen
Beschreibung: Negative Werte sind nicht zulässig
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>CSS3之text属性</title>
<style type="text/css">
#lsSpan1 {
line-height: 16px;
border: 1px solid;
}
#lsSpan2 {
line-height: 2em;
border: 1px solid;
}
</style>
</head>
<body>
<p id="lsSpan1">Hello World</p><br>
<p id="lsSpan2">Hello World</p><br>
</body>
</html>5, Textdekoration
Funktion: Geben Sie das Hinzufügen an, um den Text zu ändern, zu unterstreichen, zu überstreichen, durchzustreichen usw.
Erklärung: Dieses Attribut hat die folgenden drei Abkürzungen: Textdekorationslinie, Textdekorationsfarbe, Text- Dekorationsstil
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>CSS3之text属性</title>
<style type="text/css">
#lsSpan1 {
text-decoration: none;
text-decoration-line: overline;
}
#lsSpan2 {
text-decoration: underline;
text-decoration-color: pink;
}
#lsSpan3 {
text-decoration: overline;
text-decoration-style: wavy;
}
#lsSpan4 {
text-decoration: line-through;
}
#lsSpan5 {
text-decoration: overline wavy palevioletred;
}
</style>
</head>
<body>
<a id="lsSpan1">这是超链接</a><br>
<p id="lsSpan2">Hello World</p><br>
<p id="lsSpan3">Hello World</p><br>
<p id="lsSpan4">Hello World</p><br>
<p id="lsSpan5">Hello World</p><br>
</body>
</html>Verwandte Empfehlung: CSS-Tutorial
Das obige ist der detaillierte Inhalt vonWas sind die Textattribute in CSS3?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!