FAQ CSSConsultez toutes les FAQ

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

 
OuvrirSommaireTechniquesAutres...

Il faut utiliser les pseudo-classes de la balise <a> :

  • active : actif lors du clic sur le lien ;
  • focus : actif lorsque que le lien reçoit la focalisation (obtenue à l'aide de la touche TAB) ;
  • hover : actif lors du survol ;
  • link : état par défaut du lien ;
  • visited : actif quand le lien a déjà été cliqué.

Définitions des styles dans la feuille CSS :

 
Sélectionnez

  /* propriétés pour la balise a */
  a {
    color : #0000FF;
    text-decoration : none;
  }
 
  /* :active permet de définir les propriétés d'un lien actif - qui vient d'être cliqué */
  a:active {
    color : #0000FF;
    text-decoration : none;
  }
 
  /* :focus permet de définir les propriétés des liens lorque l'on passe d'un lien à un autre
  avec la touche [TAB] */
  a:focus {
    color : #0000FF;
    text-decoration : none;
    background-color : #CCCCCC;
  }
 
  /* :hover permet de définir les propriétés du lien au survol de celui-ci */
  a:hover {
    color : #FF0000;
    text-decoration : underline;
  }
 
  /* :link permet de définir les propriétés des liens */
  a:link {
    color : #0000FF;
    text-decoration : none;
  }
 
  /* :visited permet de définir les propriétés des liens déjà visités */
  a:visited {
    color : #0000FF;
    text-decoration : none;
  }
 
          

Et dans la page HTML :

 
Sélectionnez

  <a href="lien.html">Mon lien</a>
          

Notes :

  • Il faut également définir les styles pour la balise <a> (pas seulement les pseudo-classes).
  • Ne fonctionne qu'avec Internet Explorer 4, Netscape 6, Opera 4 et versions supérieures.
  • La pseudo-classe focus n'est pas reconnue par Internet Explorer.
Mis à jour le 8 octobre 2012  par Giminik, Linaa

Définition du style :

 
Sélectionnez

/* définition du style de la police, et largeur du select */
select {
  font-family : Courier ;
  font-size : 10px ;
  width : 200px ;
}
 
/* élément de couleur bleu */
option.bleu {
  color : #0000FF ;
  background-color : #00CCFF ;
}
 
/* élément de couleur violet */
option.violet {
  color : #9900FF ;
  background-color : #99CCFF ;
}
        

Appel du style :

 
Sélectionnez

<select name="monselect">
  <option value="1" class="bleu">un</option>
  <option value="2" class="violet">deux</option>
  <option value="3" class="bleu">trois</option>
  <option value="4" class="violet" selected="selected">quatre</option>
</select>
        
Mis à jour le 29 février 2008  par Giminik

Malheureusement non, il n'y a, à l'heure actuelle, aucune solution en pur CSS. Mais il est possible d'utiliser une image, combinée avec du JavaScript.

Mis à jour le 29 février 2008  par Jérôme

Lien : Personnalisation d'un formulaire XHTML en Javascript

Il faut utiliser la propriété CSS overflow.

 
Sélectionnez

<p>
  <textarea style="overflow:hidden" rows="2" cols="50">blabla</textarea>
</p>
        

Les valeurs possibles pour cette propriété :

  • visible
  • hidden
  • scroll
  • auto

Consultez la section relative à la propriété overflow sur le site du W3C.

Créé le 27 juillet 2006  par debug

On peut grâce aux CSS, spécifier le style du curseur. C'est l'attribut cursor.

Il peut prendre comme valeur :

  • auto
  • nw-resize
  • crosshair
  • n-resize
  • default
  • se-resize
  • pointer
  • sw-resize
  • move
  • s-resize
  • e-resize
  • w-resize
  • ne-resize
  • text
  • help
  • wait
  • inherit

On le définit ainsi :

 
Sélectionnez

.feuille
{
  cursor: auto;
}         
        
Créé le 27 juillet 2006  par debug

Il faut utiliser les feuilles de style sur la balise <body>.
Il est possible d'appliquer une couleur à l'ensemble de la barre à l'aide de la propriété scrollbar-base-color :

 
Sélectionnez

body
{
  scrollbar-base-color : #0000FF { valeur HEXA ou nom de la couleur; }
}        
        

Il est d'ailleurs possible de définir toutes les couleurs de la barre :

 
Sélectionnez

body
{
  /* couleur de face de la barre de défilement et des boutons */
  scrollbar-face-color : #8DAEE8 ;
 
  /* couleur des flèches des boutons */
  scrollbar-arrow-color :  #00225A ;
 
  /* couleur de l'arrière plan  glisse la barre de défilement */
  scrollbar-track-color : #DEE0EA ;
 
  /* couleur de l'effet 3D sur le côté eclairé de la barre et des boutons : bords externes haut et gauche */
  scrollbar-3dlight-color : #FFFFFF ;
 
  /* couleur du coté éclairé de la barre et des boutons : bords internes haut et gauche */
  scrollbar-highlight-color : #FFFFFF ;
 
  /* couleur du coté sombre de la barre et des boutons : bords internes bas et droite */
  scrollbar-shadow-color : #666666 ;
 
  /* couleur de l'effet 3D du coté sombre de la barre et des boutons : bords externes bas et droite */
  scrollbar-darkshadow-color : #000000 ;
}
        

Note : Ceci ne fonctionne que sur IE5 et supérieur.

Créé le 27 juillet 2006  par Giminik

Il est possible d'utiliser la propriété CSSborder-width pour supprimer le cadre entourant l'image.

 
Sélectionnez

a img { 
  border-width : 0; 
}
        

On peut aussi trouver les formes raccourcies suivantes :

 
Sélectionnez

a img { 
  border : 0; 
}
        
 
Sélectionnez

a img { 
  border : none; 
}
        

Note : Le sélecteur a img permet de spécifier les styles pour les balises img à l'intérieur d'une balise a.

Mis à jour le 2 janvier 2007  par MasterOfChakhaL

L'image est un élément en ligne (inline), donc le navigateur alloue de la place pour les caractères avec une jambe (y, p, q, g, j ).

Pour éviter cela, il faut transformer l'image en block :

 
Sélectionnez

<img src="image.jpg" style="display:block;" />
Créé le 29 février 2008  par Bisûnûrs
  

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.