FAQ CSSConsultez toutes les FAQ

Nombre d'auteurs : 17, nombre de questions : 59, dernière mise à jour : 30 mars 2017 

 
OuvrirSommaireTechniquesTypographieEffets de style

Il faut utiliser le pseudo-élément CSSfirst-letter, pour appliquer un style différent à la première lettre d'un élément.

Exemple d'utilisation :

Code CSS
Sélectionnez

div:first-letter {
  font-size : 200% ; /* Taille agrandie à 200% par rapport aux autres lettres */
  text-transform : uppercase ; /* Lettre en majuscule */
  color : red ;
}
        

Et le code de la page (X)HTML :

 
Sélectionnez

<div>Mon texte avec une lettrine en première lettre</div>
        
Mis à jour le 27 mai 2010  par Giminik, Macmillenium

Pour justifier un texte (aligner à droite et à gauche), il faut utiliser la propriété text-align, qui peut prendre comme valeur :

  • left : gauche
  • right : droite
  • center : centré
  • justify : justifié

Exemple :

Code CSS nécessaire
Sélectionnez

.justifie { 
  text-align : justify; 
}
        

Dans la page (X)HTML :

Code (X)HTML
Sélectionnez

<div class="justifie">Mon texte à justifier</div>
        
Mis à jour le 23 janvier 2007  par debug

Il faut utiliser les propriétés d'alignement en CSS

Alignement à droite du contenu
Sélectionnez

<input style="text-align:right" type="text" name="champ1" value="blabla" />
        

Note : Le contenu est aligné à gauche, par défaut. On peut aussi centrer le contenu :

Centrage du contenu
Sélectionnez

<input style="text-align:center" type="text" name="champ2" value="blabla" />
        

Attention : Cette propriété peut être utilisé pour tout autres type de balises

Créé le 23 janvier 2007  par ilood

L'élement span (par exemple) est un élément de rendu "inline" qui sert à délimiter un élément de façon logique. Pour que l'élément se comporte tel un "bloc", il faut lui appliquer la propriété display avec la valeur block.

Définition du style CSS :

Code CSS
Sélectionnez

.bloc { 
  display : block; 
}
        

Et son utilisation dans la page (X)HTML :

 
Sélectionnez

<span class="bloc">Mon texte</span>
        
Mis à jour le 8 octobre 2012  par Jérôme, Macmillenium, Torgar

Pour cela, il faut utiliser la propriété text-indent et spécifier la largeur de l'alinéa.

Petit exemple :

Définition du CSS
Sélectionnez

p { 
  text-indent : 20px; 
  text-align : left;
}
        

Il est tout à fait possible de faire un retrait négatif en spécifiant une valeur négative pour la propriété text-indent.

Maintenant on met en place le code dans la page (X)HTML :

 
Sélectionnez

<p>
  La première ligne est indentée de 20 pixels par rapport aux lignes suivantes.<br />
  Deuxième ligne.<br />
  Troisième ligne...
</p>
        

Note : Ceci n'est compatible qu'à partir des versions d'Internet Explorer 3, Netscape 4 et Opéra 3.5.

Mis à jour le 29 février 2008  par Giminik

La propriété text-decoration permet de définir le type de soulignement désiré, et peut prendre comme valeur :

  • underline : souligné en bas
  • overline : souligné en haut
  • line-through : barré
  • blink : clignotant
  • none : pas de soulignement

Code CSS représentant ce type d'effet :

 
Sélectionnez

h1 { 
  text-decoration : underline overline; 
}
        

Puis l'application dans la page (X)HTML :

 
Sélectionnez

<h1>Texte avec effet de double soulignement</h1>
        
Mis à jour le 23 janvier 2007  par debug

Par défaut, les navigateurs appliquent des bordures pointillées pour identifier les éléments qui reçoivent le focus (liens et éléments de formulaire).

Ces bordures peuvent améliorer l'accessibilité de la page en cas de navigation clavier avec la touche TAB, la raison pour laquelle leurs suppression est fortement déconseillée.

Code CSS pour supprimer les bordures pointillées autour des liens et éléments de formulaire
Sélectionnez

a, input { outline:none }
Créé le 18 septembre 2009  par Macmillenium
  

Les sources présentées sur cette page sont libres de droits et vous pouvez les utiliser à votre convenance. Par contre, la page de présentation constitue une œuvre intellectuelle protégée par les droits d'auteur. Copyright © 2004 Developpez.com Developpez LLC. Tous droits réservés Developpez LLC. Aucune reproduction, même partielle, ne peut être faite de ce site et de l'ensemble de son contenu : textes, documents et images sans l'autorisation expresse de Developpez LLC. Sinon vous encourez selon la loi jusqu'à trois ans de prison et jusqu'à 300 000 € de dommages et intérêts.