FAQ CSS
FAQ CSSConsultez toutes les FAQ
Nombre d'auteurs : 17, nombre de questions : 59, dernière mise à jour : 14 juin 2021
Sommaire→Techniques→Autres...- Comment changer la couleur d'un lien lors d'un évènement ?
- Comment alterner les couleurs de chaque élément d'une liste déroulante ?
- Est-il possible de personnaliser le bouton Parcourir d'un objet de type File ?
- Comment enlever l'ascenseur d'un textarea ?
- Comment changer l'apparence du curseur ?
- Comment colorer les barres de défilement (ou ascenseurs) ?
- Comment supprimer le cadre d'une image quand celle-ci est definie dans un lien ?
- Pourquoi je ne peux pas enlever l'espacement sous mon image ?
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 :
/* 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 :
<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.
Définition du style :
/* 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 :
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.
Il faut utiliser la propriété CSS overflow.
Les valeurs possibles pour cette propriété :
- visible
- hidden
- scroll
- auto
Consultez la section relative à la propriété overflow sur le site du W3C.
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 :
.feuille
{
cursor: auto;
}
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 :
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 :
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 où 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.
Il est possible d'utiliser la propriété CSSborder-width pour supprimer le cadre entourant l'image.
a img {
border-width : 0;
}On peut aussi trouver les formes raccourcies suivantes :
a img {
border : 0;
}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.