Was sind die Textattribute in CSS3?-CSS-Tutorial-php.cn

Was sind die Textattribute in CSS3?

王林

Freigeben： 2020-11-30 10:52:30

Original

4268 Leute haben es durchsucht

Zu den Textattributen in CSS3 gehören: 1. Farbattribut; 2. Textausrichtungsattribut [Buchstabenabstand]; Textdekorationsattribut [text-decoration].

Was sind die Textattribute in CSS3?

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>

Nach dem Login kopieren

, 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&#39;ve come to our nation&#39;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>

Nach dem Login kopieren

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

Beispiel:

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

Nach dem Login kopieren

4, Zeilenhöhe:

Funktion: Zeilenhöhe des Textes festlegen

Beschreibung: Negative Werte sind nicht zulässig

Beispiel:

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

Nach dem Login kopieren

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

Beispiel:

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

Nach dem Login kopieren

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!