Calendrier des cours

Tutoriel CSS avancé

• Livre de cours CSS
• Introduction au CSS
• Grille de syntaxe de base CSS
• Syntaxe avancée CSS
• Sélecteurs dérivés CSS
• Sélecteurs id CSS
• Sélecteurs de classe CSS
• Création CSS
• Arrière-plan CSS
• Texte CSS
• Polices CSS
• Listes CSS

Modèle de boîte CSS

• Vue d'ensemble du modèle de boîte CSS
• Marge interne CSS
• Bordure CSS
• Marge externe CSS
• Fusion des marges externes CSS

Positionnement CSS

• Vue d'ensemble de la position CSS
• Position relative CSS
• Position absolue CSS
• Flottaison CSS

Sélecteurs CSS

• Sélecteurs d'éléments CSS
• Groupement de sélecteurs CSS
• Détails des sélecteurs de classe CSS
• Détails des sélecteurs id CSS
• Détails des sélecteurs d'attribut CSS
• Sélecteurs de descendants CSS
• Sélecteurs d'éléments enfants CSS
• Sélecteurs de frère adjacent CSS

Cours optionnels

Recommandation de cours :

• CodeW3C.com Caisse magique

Les propriétés de texte CSS définissent l'apparence du texte.

Grâce aux propriétés de texte, vous pouvez changer la couleur du texte, l'espacement des caractères, aligner le texte, décorer le texte, retraiter le texte, etc.

Indentation de texte

Retrait de la première ligne des paragraphes sur une page Web, c'est l'un des effets de formatage de texte les plus courants.

CSS offre Propriété text-indentCette propriété permet de réaliser le retrait de texte de manière pratique.

En utilisant l'attribut text-indent, la première ligne de tous les éléments peut être retraitée d'une longueur donnée, même si cette longueur peut être négative.

L'utilisation la plus courante de cette propriété est de retraiter la première ligne d'un paragraphe, les règles suivantes feront en sorte que toutes les premières lignes des paragraphes soient retraitées de 5 em :

p {retrait-texte: 5em;}

attention :En règle générale, le retrait-texte peut être appliqué à tous les éléments en bloc, mais il ne peut pas être appliqué aux éléments en ligne, tels que les images, etc. Cependant, si un élément en bloc (comme un paragraphe) contient une image sur la première ligne, cette image se déplacera avec le reste du texte de cette ligne.

Astuce :Si vous souhaitez créer un effet de 'retrait' pour la première ligne d'un élément en ligne, vous pouvez utiliser une marge interne ou externe pour créer cet effet.

Utilisation de valeurs négatives

text-indent peut également être définie sur une valeur négative. En utilisant cette technique, il est possible d'obtenir de nombreux effets amusants, comme le 'retrait suspendu', où la première ligne est suspendue à gauche de la partie restante de l'élément :

p {retrait-texte: -5em;}

Cependant, soyez prudent lorsque vous définissez un retrait négatif pour text-indent, car si vous définissez un retrait négatif pour un paragraphe, certains textes de la première ligne peuvent dépasser la bordure gauche de la fenêtre du navigateur. Pour éviter ce problème de display, il est recommandé de définir une marge ou une marge interne supplémentaire pour le retrait négatif :

p {retrait-texte: -5em; marge-gauche: 5em;}

Utilisation des pourcentages

L'attribut text-indent peut utiliser toutes les unités de longueur, y compris les pourcentages.

Les pourcentages doivent être relatifs à la largeur de l'élément parent du retrait. Autrement dit, si vous définissez un retrait de 20%, la première ligne de l'élément affecté se retraitera de 20% de la largeur de l'élément parent.

Dans l'exemple suivant, la valeur de retrait est de 20% de l'élément parent, soit 100 pixels :

div {largeur: 500px;}
p {retrait-texte: 20%;}
<div>
<p>cette est une phrase</p>
</div>

Héritage

L'attribut text-indent peut être hérité, envisagez les balises suivantes :

div#outer {largeur: 500px;}
div#inner {retrait-texte: 10%;}
p {largeur: 200px;}
<div id="outer">
<div id="inner">quelques textes. quelques textes. quelques textes.</div>
<p>cette est une phrase.</p>
</div>
</div>

Les paragraphes marqués ici se retraiteront également de 50 pixels, car ce paragraphe hérite de la valeur de retrait de l'élément div ayant l'ID 'inner'.

Alignement horizontal

text-align C'est une propriété de base qui affecteLigne de texteAlignement entre eux. Les trois premiers valeurs sont assez directs, mais les quatrièmes et cinquièmes sont un peu plus complexes.

Les valeurs left, right et center font que le texte dans l'élément est respectivement aligné à gauche, à droite et centré.

Les langues occidentales sont toutes écrites de gauche à droite, et le valeur par défaut de text-align est left. Le texte est aligné à la bordure gauche, et la bordure droite est en dents de scie (appelé texte de gauche à droite). Pour des langues telles que l'hébreu et l'arabe, text-align a une valeur par défaut de right, car ces langues sont écrites de droite à gauche. Pas de surprise, center centrera chaque ligne de texte dans l'élément.

Astuce :Pour centrer un élément en bloc ou un élément de tableau, il faut ajuster les marges extérieures gauche et droite de ces éléments de manière appropriée.

text-align:center et <CENTER>

Vous pourriez penser que text-align:center a le même effet que l'élément <CENTER>, mais en réalité, ils sont très différents.

<CENTER> Non seulement affecte le texte, mais centre également l'élément entier. text-align ne contrôle pas l'alignement de l'élément, mais ne s'applique qu'à son contenu interne. L'élément lui-même ne se déplace pas d'un côté à l'autre d'un paragraphe, mais c'est le texte qui est affecté.

justify

Le dernier attribut d'alignement horizontal est justify.

Dans le texte aligné à deux extrémités, les deux extrémités des lignes de texte sont placées sur les bords internes de l'élément parent. Ensuite, ajustez l'espacement entre les mots et les lettres pour que la longueur de chaque ligne soit égale. Vous avez peut-être remarqué que le texte aligné à deux extrémités est très courant dans le domaine de l'impression.

Il convient de noter que c'est l'agent utilisateur (et non CSS) qui détermine comment le texte aligné à deux extrémités est étiré pour remplir l'espace entre les bords latéraux du parent. Pour plus de détails, veuillez consulter Page de référence de l'attribut CSS text-align.

Espacement des caractères

L'attribut word-spacingIl est possible de modifier l'espacement standard entre les caractères (mots). Sa valeur par défaut normal est identique à la valeur définie à 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 augmentera. Pour ajuster word-spacing avec une valeur négative, il le rapprochera :

p.spread {word-spacing: 30px;}
p.tight {word-spacing: -0.5em;}
<p class="spread">
Ceci est un paragraphe. L'espacement entre les mots sera augmenté.
</p>
<p class="tight">
Ceci est un paragraphe. L'intervalle entre les mots sera réduit.
</p>

Exemple TIY : Augmenter ou réduire l'intervalle des mots (intervalle des lettres)

remarque :Pour une compréhension approfondie de la définition de CSS pour "mot" (word), veuillez visiter Page de référence de l'attribut word-spacing CSS.

Intervalle des lettres

attribut letter-spacingLa différence avec word-spacing réside dans le fait que letter-spacing modifie l'intervalle entre les caractères ou les lettres.

Comme pour l'attribut word-spacing, les valeurs acceptées pour letter-spacing incluent toutes les longueurs. La valeur par défaut est normal (ce qui est équivalent à letter-spacing:0). La valeur de longueur entrée augmentera ou réduira l'intervalle entre les lettres d'une quantité spécifiée :

h1 {letter-spacing: -0.5em}
h4 {letter-spacing: 20px}
<h1>Ceci est un en-tête 1</h1>
<h4>Ceci est un en-tête 4</h4>

Exemple TIY : Définir l'intervalle des caractères (espacement des lettres)

Conversion de caractères

attribut text-transformGestion de la casse des textes. Cette propriété a 4 valeurs :

• none
• uppercase
• lowercase
• capitalize

La valeur par défaut none ne modifie pas le texte, en utilisant la casse originale du document source. Comme son nom l'indique, uppercase et lowercase convertissent le texte en majuscules et en minuscules complètes. Enfin, capitalize ne met en majuscule que la première lettre de chaque mot.

En tant qu'attribut, text-transform peut ne pas être important, mais si vous décidez soudain de rendre tous les éléments h1 en majuscules, cette propriété est très utile. Il n'est pas nécessaire de modifier individuellement le contenu de tous les éléments h1, mais il suffit d'utiliser text-transform pour effectuer cette modification :

h1 {text-transform: uppercase}

L'utilisation de text-transform offre deux avantages. D'abord, il suffit d'écrire une règle simple pour effectuer cette modification, sans avoir à modifier l'élément h1 lui-même. Ensuite, si vous décidez à l'avenir de basculer toutes les casses en casse originale, la modification peut être réalisée plus facilement.

Exemple TIY : Contrôle de la casse des lettres dans le texte

décoration de texte

Ensuite, nous discutons text-decoration attributC'est une propriété très intéressante qui offre de nombreux comportements amusants.

text-decoration a 5 valeurs :

• none
• underline
• overline
• line-through
• blink

Bien sûr, underline ajoute un soulignement à l'élément, comme le fait l'élément U en HTML. Overline a l'effet opposé, il dessine une surbrillance en haut du texte. La valeur line-through dessine une ligne traversante au milieu du texte, ce qui est équivalent aux éléments S et strike en HTML. Blink fait clignoter le texte, de la même manière que le marqueur blink supporté par Netscape, très controversé.

La valeur none ferme toutes les décorations appliquées à un élément. Habituellement, le texte sans décoration est l'apparence par défaut, mais ce n'est pas toujours le cas. Par exemple, les liens hypertextes ont par défaut un soulignement. Si vous souhaitez supprimer le soulignement des liens hypertextes, vous pouvez utiliser le CSS suivant pour cela :

a {text-decoration: none;}

attention :Si vous supprimez explicitement le soulignement avec une telle règle, la seule différence visuelle entre l'ancrage et le texte normal est la couleur (au moins c'est ainsi par défaut, bien que cela ne puisse pas être assuré à 100%).

Il est possible de combiner plusieurs décorations dans une règle. Si vous souhaitez que tous les liens hypertextes aient à la fois un soulignement et une surbrillance, la règle suivante s'applique :

a:link a:visited {text-decoration: underline overline;}

Cependant, il est important de noter que si deux décorations différentes s'appliquent à un même élément, la valeur gagnante remplacera entièrement l'autre valeur. Considérez les règles suivantes :

h2.stricken {text-decoration: line-through;}
h2 {text-decoration: underline overline;}

Pour une règle donnée, tous les éléments h2 avec la classe stricken n'ont qu'une décoration de trait traversant, sans soulignement ni surbrillance, car La valeur text-decoration remplace plutôt que de s'ajouter.

Traitement des espaces blancs

Propriété white-spaceIl affecte la manière dont l'agent utilisateur traite les espaces, les retours chariots et les caractères tabulation dans le document source.

En utilisant cette propriété, vous pouvez influencer la manière dont le navigateur web traite les espaces blancs entre les caractères et entre les lignes de texte. Dans une certaine mesure, le traitement par défaut de XHTML des espaces blancs est déjà terminé : il combine tous les espaces blancs en un seul espace. Donc, pour les balises suivantes, lorsqu'elles sont affichées dans un navigateur Web, seules une espace est affichée entre les caractères, et les retours chariots à l'intérieur des éléments sont ignorés :

<p>This     paragraph has    many
    spaces           in it.</p>

Cette comportement par défaut peut être défini explicitement comme suit :

p {white-space: normal;}

Les règles ci-dessus indiquent au navigateur de traiter comme d'habitude : supprimer les espaces blancs en trop. Si cette valeur est donnée, les caractères de retour de ligne (retours chariot) sont convertis en espaces, et les séquences de plusieurs espaces sur une ligne sont converties en un seul espace.

Exemple TIY : white-space: normal

La valeur pre

Cependant, si l'attribut white-space est réglé sur pre, le traitement des espaces blancs dans les éléments affectés par cet attribut est différent, et se comporte comme un élément pre de XHTML ; les espaces blancs ne sont pas ignorés.

Si la valeur de l'attribut white-space est pre, le navigateur prendra en compte les espaces supplémentaires, même les retours chariot. À cet égard et à cet égard seulement, n'importe quel élément peut être équivalent à un élément pre.

Exemple TIY : white-space: pre

attention :Après test, les navigateurs IE 7 et antérieurs ne prennent pas en charge cette valeur, donc utilisez un navigateur non IE pour visualiser l'exemple ci-dessus.

La valeur nowrap

L'opposé de cette valeur est nowrap, qui empêche le texte de l'élément de sauter de ligne, sauf si un élément br est utilisé. L'utilisation de nowrap dans CSS est très similaire à l'utilisation de <td nowrap> dans HTML 4 pour définir une cellule de tableau qui ne peut pas sauter de ligne, mais la valeur white-space peut être appliquée à n'importe quel élément.

Exemple TIY : white-space: nowrap

Les valeurs pre-wrap et pre-line

CSS2.1 a introduit les valeurs pre-wrap et pre-line, qui n'existaient pas dans les versions précédentes de CSS. Ces valeurs permettent aux créateurs de mieux contrôler le traitement des espaces blancs.

Si l'attribut white-space de l'élément est réglé sur pre-wrap, les séquences de caractères d'espace blanc seront conservées dans le texte de l'élément, mais les lignes de texte se dérouleront normalement. Si ce paramètre est utilisé, les séparateurs de ligne du texte source ainsi que les séparateurs de ligne générés seront également conservés. En revanche, pre-line, qui est opposé à pre-wrap, fusionne les séquences de caractères d'espace blanc comme dans un texte normal, mais conserve les sauts de ligne.

exemple TIY : white-space: pre-wrap

exemple TIY : white-space: pre-line

attention :Nous avons testé les deux exemples ci-dessus dans les navigateurs IE7 et FireFox2.0, mais les valeurs pre-wrap et pre-line ne sont pas bien prises en charge.

résumé

le tableau suivant résume le comportement de la propriété white-space :

direction du texte

Si vous lisez un livre en anglais, vous le lirez de gauche à droite, de haut en bas, c'est la direction du flux de l'anglais. Cependant, ce n'est pas le cas pour toutes les langues. Nous savons que le chinois ancien était lu de droite à gauche, bien sûr, y compris l'hébreu et l'arabe, etc. CSS2 a introduit une propriété pour décrire sa directionnalité.

propriété directionaffecte l'orientation de l'écriture du texte des éléments en bloc, l'alignement des colonnes des tableaux, la direction de remplissage horizontal de son cadre d'élément, et la position de la dernière ligne des éléments alignés à deux extrémités.

remarque :Pour les éléments en ligne, seule propriété unicode-bidiLa propriété direction est appliquée uniquement lorsque définie sur embed ou bidi-override.

La propriété direction a deux valeurs : ltr et rtl. Dans la plupart des cas, la valeur par défaut est ltr, affichant du texte de gauche à droite. Si vous souhaitez afficher du texte de droite à gauche, utilisez la valeur rtl.

propriétés de texte CSS

Boîte à outils

Manuel de référence CSS

Exemples CSS

Quiz CSS

Tutoriels CSS

Liens de sponsors