Maison > Article > interface Web > Quels sont les attributs de texte en CSS3
Quels sont les attributs de texte en CSS3
- 王林original
- 2020-11-23 11:53:034243parcourir
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].
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 texteDescription : 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>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'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. 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>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>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>Recommandations associées :
Tutoriel CSSCe 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!