Contenu
Les propriétés définies ci-dessous influencent la représentation visuelle des caractères, des blancs, des mots et des paragraphes.
Valeur : | <longueur> | <pourcentage> | inherit |
Initiale : | 0 |
S'applique à : | à ceux des éléments de type bloc |
Héritée : | oui |
Pourcentage : | se rapporte à la largeur du bloc conteneur |
Médias : | visuel |
Cette propriété spécifie un alinéa pour la première ligne du texte dans un bloc. Plus précisément, celui de la première boîte de la première rangée dans la première boîte de ligne de ce bloc. Cette boîte est indentée à partir du bord gauche (ou droit, pour une mise en page de droite à gauche) de la boîte de ligne. Les agents utilisateurs devraient représenter cette indentation comme un espace vide.
Le significations des valeurs sont :
La valeur de la propriété 'text-indent' peut être négative, mais ceci dépend des limites de l'implémentation. Si cette valeur est négative, la valeur de la propriété 'overflow' peut avoir une influence sur la visibilité du texte.
Cet exemple produit un alinéa de '3em' :
P { text-indent: 3em }
Valeur : | left | right | center | justify | <chaîne> | inherit |
Initiale : | selon l'agent utilisateur et selon le sens d'écriture |
S'applique à : | ceux des éléments de type bloc |
Héritée : | oui |
Pourcentage : | sans objet |
Médias : | visuel |
Cette propriété décrit l'alignement d'un contenu en-ligne dans un élément de type bloc. Les significations des valeurs sont :
Un pavé de texte consiste en un empilement de boîtes de ligne. Pour les valeurs 'left', 'right' et 'center', cette propriété indique la façon dont les boîtes en-ligne, dans chacune des boîtes de ligne, s'alignent par rapport aux côtés gauche et droite de ces boîtes de ligne ; l'alignement n'est pas effectué par rapport à la zone de visualisation. Pour la valeur 'justify', l'agent utilisateur peut, en plus des ajustements de position, étirer les boîtes de ligne. Voir également les propriétés 'letter-spacing' et 'word-spacing').
Dans cet exemple, noter que tous les éléments de type bloc dans élément DIV avec la classe 'center' auront leur contenu centré, la propriété 'text-align' étant héritée :
DIV.center { text-align: center }
Remarque : L'algorithme de justification effectif dépend de l'agent utilisateur et de l'écriture.
Les agents utilisateurs conformes peuvent interpréter la valeur 'justify' comme étant 'left', ou 'right', selon que le sens d'écriture de l'élément est de gauche à droite, ou de droite à gauche.
Valeur : | none | [ underline || overline || line-through || blink ] | inherit |
Initiale : | none |
S'applique à : | tous les éléments |
Héritée : | non (voir les explications) |
Pourcentage : | sans objet |
Médias : | visuel |
Cette propriété décrit les décorations qui sont ajoutées au texte d'un élément. Quand la propriété est appliquée à un élément de type bloc, elle agit sur tous les descendants de type en-ligne de celui-ci. Quand elle est appliquée à un élément de type en-ligne, ou agit sur celui-ci, cette propriété influence toutes les boîtes générées par cet élément. Quand les éléments sont vides ou sans contenu textuel (ex. l'élément IMG en HTML), les agents utilisateurs doivent ignorer cette propriété.
Les significations des valeurs sont :
La couleur, ou les couleurs, requises pour la décoration de texte devraient être déterminées par la valeur de la propriété 'color'.
Cette propriété n'est pas héritée, cependant les boîtes qui descendent d'une boîte de bloc donnée devraient recevoir la même décoration que celle-ci (ex. toutes devraient être soulignées). La couleur de la décoration devrait être conservée, même si la valeur de la propriété 'color' des éléments descendants était différente.
Dans cet exemple en HTML, le contenu de texte de chacun des éléments A, ceux-ci étant des liens, seront soulignés :
A[href] { text-decoration: underline }
Valeur : | none | [<couleur> || <longueur> <longueur> <longueur>? ,]* [<couleur> || <longueur> <longueur> <longueur>?] | inherit |
Initiale : | none |
S'applique à : | tous les éléments |
Héritée : | non (voir les explications) |
Pourcentage : | sans objet |
Médias : | visuel |
Cette propriété accepte une liste de valeurs, séparés par une virgule, représentant des effets d'ombrage à appliquer au texte d'un élément. Ces effets s'appliquent dans l'ordre spécifié et peuvent ainsi se recouvrir, mais ceux-ci ne recouvriront jamais le texte lui-même. Les effets d'ombrage ne modifient pas la taille d'une boîte, mais peuvent s'étendre au-delà des limites de celle-ci. Les effets d'ombrages se situent au même niveau dans l'empilement que l'élément en question.
Chaque effet doit spécifier un décalage de l'ombrage, et peut, en option, spécifier une zone de flou et la couleur de l'ombrage.
Le décalage de l'ombrage est donné par deux valeurs de <longueur> qui en précisent la distance par rapport au texte. La première spécifie la distance horizontale à la droite du texte, une valeur négative place l'ombrage à la gauche de celui-ci. La seconde spécifie la distance verticale en-dessous du texte, une valeur négative place l'ombrage au-dessus de celui-ci.
En option, on peut spécifier, après les valeurs de décalage de l'ombrage, celle du rayon du flou. C'est une longueur qui indique les limites de cet effet de flou. L'algorithme exact pour le calcul de cet effet n'est pas spécifié.
En option également, on peut spécifier, avant ou après les valeurs de décalage de l'ombrage, celle de la couleur de l'ombrage. Cette valeur de couleur servira de fondement pour l'effet d'ombrage. Si aucune couleur n'est indiquée, c'est la valeur de la propriété 'color' qui est considérée à sa place.
On peut employer les ombrages de texte avec les pseudo-éléments :first-letter et :first-line.
L'exemple ci-dessous produira un ombrage à droite et en dessous du texte de l'élément. Aucune couleur ni rayon de flou ayant été spécifiés, l'ombrage prendra la couleur de l'élément en question et n'aura pas d'effet de flou :
H1 { text-shadow: 0.2em 0.2em }
Celui-ci produira un ombrage à droite et en-dessous du texte de l'élément. Cet ombrage aura un rayon de flou de 5px et de couleur rouge :
H2 { text-shadow: 3px 3px 5px red }
Dans l'exemple suivant, on spécifie une liste d'effets d'ombrage. Le premier ombrage apparaîtra à droite et en-dessous du texte, avec une couleur rouge et sans effet de flou. Le deuxième va recouvrir le premier effet d'ombrage et apparaîtra à gauche et en-dessous du texte, avec une couleur jaune et un effet de flou. Le troisième sera placé à droite et au-dessus du texte. Aucune couleur n'étant spécifiée pour celui-ci, c'est la valeur de la propriété 'color' de l'élément en question qui sera utilisée :
H2 { text-shadow: 3px 3px red, yellow -3px 3px 2px, 3px -3px }
Considérons cette règle :
SPAN.glow { background: white; color: white; text-shadow: black 0px 0px 5px; }
Ici, on a utilisé les propriétés 'background' et 'color' avec la même valeur, ainsi que la propriété 'text-shadow' pour créer un effet "éclipse solaire" :
Remarque : Cette propriété n'est pas définie en CSS1. Certains effets d'ombrage (tel que celui du dernier exemple) peuvent rendre le texte invisible pour les agents utilisateurs ne reconnaissant que CSS1.
Valeur : | normal | <longueur> | inherit |
Initiale : | normal |
S'applique à : | tous les éléments |
Héritée : | oui |
Pourcentage : | sans objet |
Médias : | visuel |
Cette propriété précise le comportement de l'espacement entre les caractères du texte. Les significations des valeurs sont :
Les algorithmes d'interlettrage dépendent des agents utilisateurs. La justification peut aussi avoir une influence sur l'interlettrage (voir la propriété 'text-align').
Dans cet exemple, l'interlettrage des éléments BLOCKQUOTE est augmenté de 'O.1em' :
BLOCKQUOTE { letter-spacing: 0.1em }
Dans celui-ci, l'agent utilisateur ne peut pas en modifier l'interlettrage :
BLOCKQUOTE { letter-spacing: 0cm } /* Pareil à '0' */
Quand l'interlettrage résultant entre deux caractères est différent de celui par défaut, les agents utilisateurs ne devraient pas utiliser de ligatures.
Les agents utilisateurs conformes peuvent interpréter la valeur de la propriété 'letter-spacing' comme étant 'normal'.
Valeur : | normal | <longueur> | inherit |
Initiale : | normal |
S'applique à : | tous les éléments |
Héritée : | oui |
Pourcentage : | sans objet |
Médias : | visuel |
Cette propriété précise le comportement de l'espacement entre des mots. Les significations des valeurs sont :
Les algorithmes d'espace-mot dépendent de l'agent utilisateur. La justification peut aussi avoir une influence sur l'espacement entre les mots (voir la propriété 'text-align').
Dans cet exemple, l'espace-mot entre chacun des mots des éléments H1 est augmenté de '1em' :
H1 { word-spacing: 1em }
Les agents utilisateurs conformes peuvent interpréter la valeur de la propriété 'word-spacing' comme étant 'normal'.
Valeur : | capitalize | uppercase | lowercase | none | inherit |
Initiale : | none |
S'applique à : | tous les éléments |
Héritée : | oui |
Pourcentage : | sans objet |
Médias : | visuel |
Cette propriété détermine les effets de capitalisation du texte d'un élément. Les significations des valeurs sont :
Dans chaque cas, la transformation effective dépend de l'écriture de la langue en question. Voir RFC 2070 ([RFC2070]) pour la détermination de la langue utilisée dans un élément.
Les agents utilisateurs conformes peuvent interpréter la valeur de la propriété 'text-transform' comme étant 'none', pour les caractères n'appartenant pas au répertoire Latin-1 et pour les éléments dans certaines langues, langues pour lesquelles la transformation serait différente de celle spécifiée dans les tables de conversion de ISO 10646 ([ISO10646]).
Dans cet exemple, l'ensemble du texte des éléments H1 est transformé en capitales :
H1 { text-transform: uppercase }
Valeur : | normal | pre | nowrap | inherit |
Initiale : | normal |
S'applique à : | tous les éléments |
Héritée : | oui |
Pourcentage : | sans objet |
Médias : | visuel |
Cette propriété détermine la gestion des blancs dans un élément.
Les règles suivantes indiquent comment sont gérés les blancs dans les éléments PRE et P, ainsi que pour l'attribut "nowrap" de HTML :
PRE { white-space: pre } P { white-space: normal } TD[nowrap] { white-space: nowrap }
Les agents utilisateurs conformes peuvent ignorer la propriété 'white-space' des feuilles de style de l'auteur et de l'utilisateur, mais pas dans la feuille de style par défaut où une valeur doit être spécifiée pour celle-ci.