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

      
  
查看颜色
 
标题查看颜色
  

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

      
  
php中文网
  

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 :

      
  
 
PHP中文网
 
最好的自学网站
 
最好的自学网站
 
最好的自学网站
 
最好的自学网站
 
  

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 :

  
设置中文字符间距
 
this is a test
  

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é :

   
  
php中文网
 
php中文网
  

Conversion de caractères

< Le L'attribut >text-transform gère le cas du texte. Cet attribut a 4 valeurs :

• aucun

• majuscule

• minuscule

• majuscule

La valeur par défaut none n'apporte aucune modification au texte et utilisera la majuscule d'origine dans le document source. Comme leurs noms l'indiquent, les majuscules et les minuscules convertissent le texte en caractères majuscules et minuscules. Enfin, majuscule ne met en majuscule que la première lettre de chaque mot.

En tant qu'attribut, text-transform n'a peut-être pas d'importance, mais cela peut être utile si vous décidez soudainement de mettre tous les éléments h1 en majuscules. Au lieu de modifier le contenu de tous les éléments h1 individuellement, utilisez simplement text-transform pour le faire pour vous :

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

Comme prévu, souligner les éléments sont soulignés , tout comme l'élément U en HTML. overline fait exactement le contraire et dessine un surlignement en haut du texte. La valeur line-through trace une ligne passante au milieu du texte, équivalente aux éléments S et strike en HTML. Blink fait clignoter le texte, semblable à la balise Blink très décriée prise en charge par Netscape.

La valeur none désactive toutes les décorations initialement appliquées à un élément. Habituellement, le texte brut est l'apparence par défaut, mais ce n'est pas toujours le cas. Par exemple, les liens sont soulignés par défaut. Si vous souhaitez supprimer le soulignement d'un lien hypertexte, vous pouvez utiliser le CSS suivant pour le faire :

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 :

This paragraph has many spaces in it.

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.