FAQ CSSConsultez toutes les FAQ

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

 
OuvrirSommaireGénéralitésSyntaxe

Un commentaire dans une feuille de style débute par /* et se termine par */.

 
Sélectionnez

/* Voici un exemple de
  commentaires */
        

Note : Les commentaires ne peuvent pas être imbriqués.

Mis à jour le 23 janvier 2007  par Giminik

On définit un seul style pour plusieurs éléments en les séparant par une virgule dans la feuille de style CSS.

 
Sélectionnez

h1, .maclasse, #monparagraphe { 
  color : red;
  font-weight : bold; 
}
        

Ici, les éléments h1, les classes maclasse et l'identifiant monparagraphe seront affichés de la même manière (du même style).

Créé le 23 janvier 2007  par freegreg

On ne peut pas simplifier toutes les propriétés CSS. Cependant, il existe des raccourcis qui permettent, pour certaines des propriétés, de réduire la taille de la feuille de style, et une meilleure visibilité (parfois).


Les marges

 
Sélectionnez

.maclasse {
  margin-top : 1px;
  margin-right : 2px;
  margin-bottom : 3px;
  margin-left : 4px;
}        
        

peut être raccourci en

 
Sélectionnez

.maclasse {
  margin : 1px 2px 3px 4px;
}        
        

On peut aussi trouver d'autres formes de ce raccourci :

  • Avec trois valeurs
 
Sélectionnez

.maclasse {
  margin : 1px 2px 3px; /* top | left et right | bottom */
}
        
  • Avec deux valeurs
 
Sélectionnez

.maclasse {
  margin : 1px 2px; /* top et bottom | left et right */
}
        
  • Avec une seule valeur :
 
Sélectionnez

.maclasse {
  margin : 1px; /* top, right, bottom et left */
}        
        

Ces formes de raccourcis s'appliquent, aussi, aux propriétés : padding, border, border-color, border-style, et border-width.


Les bordures

 
Sélectionnez

.maclasse {
  border-width : 1px;
  border-style : solid;
  border-color : #F00;
}        
        

peut être raccourci en

 
Sélectionnez

.maclasse {
  border : 1px solid #F00;
}
        

Ce raccourci peut être utilisé pour : border-top, border-right, border-bottom et border-left.

 
Sélectionnez

.maclasse {
  border-top : 1px solid #F00;
}
        


Les arrières plans

 
Sélectionnez

.maclasse {
  background-color : #F00;
  background-image : url('monimage');
  background-repeat : no-repeat;
  background-attachment : fixed;
  background-position : top center;
}        
        

peut être raccourci en

 
Sélectionnez

.maclasse {
  background : #F00 url('monimage') no-repeat fixed top center;
}
        


Les polices de caractères

 
Sélectionnez

.maclasse {
  font-style : italic;
  font-variant : small-caps;
  font-weight : bold;
  font-size : 14px;
  line-height : 140%;
  font-family : Arial, Times, Serif;
}
        

peut être raccourci en

 
Sélectionnez

.maclasse {
  font : italic small-caps bold 14px/140% Arial, Times, Serif;
}
        


Les listes

 
Sélectionnez

.maclasse {
  list-style-type : disc;
  list-style-position : inside;
  list-style-image : url('monimage');
}
        

peut être raccourci en

 
Sélectionnez

.maclasse {
  list : disc inside url('monimage');
}
        


Note : Si les propriétés ne sont pas spécifiées dans leur forme raccourcie, elles prennent alors leurs valeurs initiales.

Créé le 23 janvier 2007  par Bisûnûrs, Linaa

Le CSS offre plusieurs syntaxes permettant de définir une couleur.

Il s'agit de définir les composantes rouge, verte et bleue de la couleur (dans cet ordre).

Vous pouvez utiliser:

  • La notation hexadécimale : avec un chiffre ou deux par composante précédé du caractère # (3 chiffres ou 6 chiffres pour une couleur) ;
  • La notation décimale : en définissant chaque composante par un nombre entre 0 et 255 dans la fonction rgb();
  • La notation en pourcentage : en définissant chaque composante par un pourcentage (donc entre 0% et 100%) dans la fonction rgb() ;
  • rgba : ce n'est ni plus ni moins que la version rgb gérant la couche Alpha ou dite de transparence. Les valeurs varient entre 0 et 1 compris.

Attention : il s'agit d'une propriété CSS version 3 et n'est donc pas disponible sur tous les navigateurs. Assurez-vous de sa compatibilité avant de l'employer.

La fonction rgb() accepte parfaitement que certaines composantes soient définies en notation décimale et d'autres en pourcentage.

Par exemple, pour spécfier que la couleur de votre texte doit être en jaune pur (rouge et vert au maximum et pas de bleu), vous pourriez faire ainsi

Définition de la couleur :
Sélectionnez

body {
  color: #FFFF00;    /* notation hexadécimale avec deux chiffres par composante */
  color: #FF0;    /* notation hexadécimale avec un chiffre par composante */
  color: rgb(255,255,0);  /* notation décimale à l'aide de la fonction rgb() */
  color: rgb(100%,100%,0);  /* notation en pourcentage à l'aide de la fonction rgb() */
  color: rgb(255,100%,0);  /* mélange entre notation décimale et notation en pourcentage */
  color: rgba(0, 255, 0, 0.5); /* Rouge semi-transparent */
}
Mis à jour le 8 octobre 2012  par MasterOfChakhaL, Torgar

Pour définir le chemin d'une image en CSS, vous devez utilisez la notation fonctionnelle url().

Par exemple :

 
Sélectionnez

#mon-element {
  background-image: url("chemin-de-mon-image.gif");
}

Vous pouvez utilisez un chemin absolu ( http://... ) ou un chemin relatif.
Si vous indiquez un chemin relatif, alors ce chemin sera relatif à l'emplacement de la feuille de style.

Note : Les guillemets autour du chemin sont optionnels.

Mis à jour le 8 octobre 2012  par MasterOfChakhaL
  

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.