Quels sont les attributs de texte en CSS3-tutoriel CSS-php.cn

Quels sont les attributs de texte en CSS3

王林

Libérer： 2020-11-30 10:52:30

original

4296 Les gens l'ont consulté

Les attributs de texte en CSS3 incluent : 1. Attribut de couleur ; 2. Attribut d'alignement du texte [text-align] ; 3. Attribut d'espacement des caractères [letter-spacing] ; 4. Attribut de hauteur de ligne de texte ; ] ]; 5. Attribut de modification de texte [text-decoration].

Quels sont les attributs de texte en CSS3

L'environnement d'exploitation de ce tutoriel : Système Windows 10, version CSS3, cette méthode convient à toutes les marques d'ordinateurs.

(Partage de vidéos d'apprentissage : tutoriel vidéo CSS)

Les attributs de texte en CSS3 sont :

1. 🎜 >

Fonction : Spécifiez la couleur du texte

Description : Cet attribut peut être utilisé dans les feuilles de style de bloc, en ligne et en ligne pour changer la couleur de tout le texte dans l'élément contrôlé

Exemple :

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

Copier après la connexion

2, text-align

Fonction : Spécifier l'alignement horizontal du texte de l'élément

Description : Uniquement efficace lorsqu'il est utilisé dans des éléments de niveau bloc, utilisé directement N'agit pas sur les éléments liés. Si cet attribut est utilisé, le texte et les éléments en ligne contenus dans l'élément block seront alignés. Les éléments block qu'il contient seront également alignés si cet attribut n'est pas défini par défaut, car l'élément block enfant hérite de l'attribut text-align de. l'élément de bloc parent.

Exemple :

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

Copier après la connexion

3. Espacement des lettres :

Fonction : Augmenter ou réduire l'espace entre les caractères (espacement des caractères)<🎜. >

Description : Lorsque la valeur négative est trop grande, la police sera extrudée mais ne se chevauchera pas

Exemple :

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

Copier après la connexion

line-height:

Fonction : Réglage de la hauteur de ligne du texte

Description : Les valeurs négatives ne sont pas autorisées

Exemple :

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

Copier après la connexion

5, text-decoration

Fonction : Spécifiez l'ajout Pour modifier le texte, souligner, surligner, barré, etc.

Description : Cet attribut a les trois abréviations suivantes : text-decoration-line, text-decoration-color, text- decoration-style

Exemple :

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

Copier après la connexion

Recommandations associées :

Tutoriel CSS

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!