Texte CSS
Nous ne décrirons pas les attributs du tableau ci-dessus un par un. Nous décrirons seulement certains attributs couramment utilisés, principalement pour que tout le monde puisse apprendre et pratiquer en même temps. Vous pouvez tester vous-même d'autres contenus et vous pouvez également consulter le contenu spécifique de chaque attribut sur w3c.
Exemple 1 couleur couleur
index.html
<!doctype html> <html> <head> <meta charset="UTF-8"> <title></title> <link rel="stylesheet" href="style.css" type="text/css"> </head> <body> <p>查看颜色</p> <h1>标题查看颜色</h1> </body> </html>
style.css
body{
color: aqua;
}Exécuter le résultat :
Vous pouvez voir que nous définissons la couleur du corps, mais la balise p et la balise h1 affichent également la couleur définie par le corps La couleur de la police montre que les deux balises héritent de la couleur de la police du corps.
Exemple 2 text-align
text-align est un attribut de base qui affecte la relation entre les lignes de texte dans un élément. Les 3 premières valeurs sont assez simples, mais les 4ème et 5ème sont un peu plus compliquées.
Les valeurs gauche, droite et centre entraînent que le texte de l'élément soit respectivement aligné à gauche, aligné à droite et centré.
Les langues occidentales sont lues de gauche à droite, et la valeur par défaut de tous les alignements de texte est à gauche. Le texte est aligné sur la bordure gauche et irrégulier sur la bordure droite (appelé texte « de gauche à droite »). index.html
<!doctype html> <html> <head> <meta charset="UTF-8"> <title></title> <link rel="stylesheet" href="style.css" type="text/css"> </head> <body> <p>php中文网</p> </body> </html>
style.css
body{
color: red;
text-align: center;
}Exécuter les résultats :
Exemple 3 text-indent
Indenter le texte Indenter la première ligne d'un paragraphe sur une page Web C'est l'un des effets de formatage de texte les plus couramment utilisés. CSS fournit la propriété text-indent, qui peut facilement implémenter l'indentation du texte. En utilisant l'attribut text-indent, la première ligne de tous les éléments peut être indentée d'une longueur donnée, même une valeur négative. L'utilisation la plus courante de cet attribut consiste à mettre en retrait la première ligne d'un paragraphe. La règle suivante indentera la première ligne de tous les paragraphes de 5 em :
p {text-indent: 5em;}Le code dans l'index.html ci-dessous est :
<!doctype html> <html> <head> <meta charset="UTF-8"> <title></title> <link rel="stylesheet" href="style.css" type="text/css"> </head> <body> <div> <h3>PHP中文网</h3> <p>最好的自学网站</p> <p>最好的自学网站</p> <p>最好的自学网站</p> <p>最好的自学网站</p> </div> </body> </html>
Si vous n'ajoutez aucune modification CSS pour le moment. L'effet affiché est :
Ajoutez l'indentation suivante à notre code style.css pour indenter les trois mots "Lab Building" de 2 octets.
h3{
text-indent: 5em;
}Résultat de l'exécution :
Espacement des mots
l'attribut d'espacement des mots est OK Modifiez l'espacement standard entre les caractères (mots). Sa valeur par défaut, normale, équivaut à la définir sur 0.
L'attribut word-spacing accepte une valeur de longueur positive ou négative. Si une valeur de longueur positive est fournie, l'espacement entre les mots augmente. Définir une valeur négative pour l'espacement des mots le rapprochera :
<html> <body> <h1 style="word-spacing:15px;">设置中文字符间距</h1> <h1 style="word-spacing:15px;">this is a test</h1> </body> </html>
Espacement des lettres
La différence entre l'attribut d'espacement des lettres et l'espacement des mots est que l'espacement des lettres modifie l'espacement entre les caractères ou les lettres.
Comme l'attribut word-spacing, les valeurs possibles pour l'attribut letter-spacing incluent toutes les longueurs. Le mot-clé par défaut est normal (qui est le même que letter-spacing:0). La valeur de longueur saisie augmentera ou diminuera l'espace entre les lettres du montant spécifié :
<html>
<head>
<style type="text/css">
h1 {letter-spacing: -0.5em}
h4 {letter-spacing: 20px}
</style>
</head>
<body>
<h1>php中文网</h1>
<h4>php中文网</h4>
</body>
</html>Conversion de caractères
<🎜 Le L'attribut >text-transform gère le cas du texte. Cet attribut a 4 valeurs :- aucun
- majuscule
- minuscule
- majuscule
h1 {text-transform: uppercase}L'utilisation de text-transform présente deux avantages. Tout d’abord, écrivez simplement une règle simple pour effectuer cette modification sans modifier l’élément h1 lui-même. Deuxièmement, si vous décidez plus tard de remettre tous les boîtiers dans leur boîtier d'origine, il sera plus facile de terminer la modification. Décoration de texte
Ensuite, nous discutons de l'attribut text-decoration, qui est un attribut très intéressant qui fournit de nombreux comportements intéressants. text-decoration a 5 valeurs :- aucun
- souligner
- surligner
- passage en ligne
- clignoter
a {text-decoration: none;}Remarque : si vous utilisez explicitement une telle règle pour supprimer le soulignement du lien, alors la seule différence visuelle entre l'ancre et le texte normal est la couleur (au moins c'est la valeur par défaut, mais il n'y a aucune garantie que la couleur sera la même) la différence).
Vous pouvez également combiner plusieurs décorations en une seule règle. Si vous souhaitez que tous les hyperliens soient à la fois soulignés et surlignés, la règle serait la suivante :
a:link a:visited {text-decoration: underline overline;}Notez cependant que si deux décorations différentes correspondent au même élément, la valeur de la règle gagnante sera exactement Remplacer une autre valeur. Veuillez considérer la règle suivante :
h2.stricken {text-decoration: line-through;}
h2 {text-decoration: underline overline;}Pour la règle donnée, tous les éléments h2 avec la classe stickyn n'ont qu'une seule décoration de ligne directe, et aucun soulignement ni surlignement, car la valeur de décoration de texte sera remplacée à la place par Accumulation.
Gestion des espaces
L'attribut white-space affecte la gestion par l'agent utilisateur des espaces, des nouvelles lignes et des caractères de tabulation dans le document source.
En utilisant cet attribut, vous pouvez influencer la façon dont le navigateur gère les espaces entre les mots et entre les lignes de texte. Dans une certaine mesure, le traitement XHTML par défaut gère déjà les espaces : il fusionne tous les caractères d'espacement en un seul espace. Ainsi, étant donné le balisage suivant, lorsqu'il est affiché dans un navigateur Web, un seul espace sera affiché entre chaque mot, tandis que les nouvelles lignes dans l'élément seront ignorées :
<p>This paragraph has many spaces in it.</p>
Cette valeur par défaut peut être définie explicitement avec la déclaration suivante Comportement :
p {white-space: normal;}La règle ci-dessus indique au navigateur de faire ce qu'il ferait normalement : supprimer tout espace supplémentaire. Si cette valeur est donnée, les caractères de nouvelle ligne (retours chariot) sont convertis en espaces et les séquences de plusieurs espaces sur une ligne sont converties en un seul espace.
Direction du texte
Si vous lisez un livre en anglais, vous le lirez de gauche à droite et de haut en bas, c'est l'anglais sens d'écoulement. Cependant, ce n'est pas le cas pour toutes les langues. Nous savons que le chinois ancien se lit de droite à gauche, et bien sûr l’hébreu et l’arabe se lisent de droite à gauche. CSS2 a introduit une propriété pour décrire sa directionnalité. L'attribut
direction affecte le sens d'écriture du texte dans les éléments de niveau bloc, le sens de disposition des colonnes dans les tableaux, le sens dans lequel le contenu remplit horizontalement sa zone d'élément et la position de la dernière ligne dans les éléments justifiés. .
Remarque : Pour les éléments en ligne, l'attribut direction n'est appliqué que lorsque l'attribut unicode-bidi est défini sur embed ou bidi-override. L'attribut
direction a deux valeurs : ltr et rtl. Dans la plupart des cas, la valeur par défaut est ltr, qui affiche le texte de gauche à droite. Si vous affichez du texte de droite à gauche, la valeur rtl doit être utilisée.
![Projet front-end-Shangyou [Pratique complète de la technologie HTML/CSS/JS]](https://img.php.cn/upload/course/000/000/068/63bfcb2974f91471.jpg)
![Cours frontal base zéro [Vue apprentissage avancé et application pratique]](https://img.php.cn/upload/course/000/000/068/63bbd15353895588.jpg)
![Tutoriel WEB front-end [HTML5+CSS3+JS]](https://img.php.cn/upload/course/000/000/068/63ba60c8da520536.jpg)
![Application pratique Apipost [api, interface, tests automatisés, mock]](https://img.php.cn/upload/course/000/000/068/63b3c967a20f4861.jpg)
