FAQ (X)HTML/CSS

Sommaire > Généralités > CSS
        Comment appliquer plusieurs styles à un élément ?
        Comment appliquer un style à plusieurs éléments/classes/identifiants ?
        Comment insérer un commentaire dans une feuille de style ?
        Comment simplifier mon Style CSS (raccourcis) ?
        Comment utiliser les classes en CSS ?
        Comment utiliser les identifiants en CSS ?

Version PDF (Miroir) Version hors-ligne (Miroir)

Comment appliquer plusieurs styles à un élément ?

[haut]

auteur : debug

Il suffit de déclarer les styles avec des classes, puis appliquer les styles dans l'attribut class, en séparant l'utilisation des différents styles avec un espace.

Style CSS associé au corps (X)HTML

.rouge { 
  color : red; 
}
.gras { 
  font-weight : bold; 
}

Code (X)HTML de la page

<p class="rouge gras">Début de mon paragraphe en rouge et en gras.</p>

Comment appliquer un style à plusieurs éléments/classes/identifiants ?

[haut]

auteur : freegreg

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

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).

Comment insérer un commentaire dans une feuille de style ?

[haut]

auteur : Giminik

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

/* Voici un exemple de
  commentaires */

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

Comment simplifier mon Style CSS (raccourcis) ?

[haut]

auteurs : Bisûnûrs, Linaa

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 codes couleurs
Il commence par un # suivi de 6 chiffres qui correspondent à un code hexadécimal (Rouge, Vert, Bleu). Par exemple, on peut simplifier le #FF00AA en #F0A (ils vont par paire) mais pas #01AABB.

Les marges

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

peut être raccourci en

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

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

Avec trois valeurs

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

Avec deux valeurs

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

Avec une seule valeur :

.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

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

peut être raccourci en

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

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

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

Les arrières plans

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

peut être raccourci en

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

Les polices de caractères

.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

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

Les listes

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

peut être raccourci en

.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 par défaut.

Comment utiliser les classes en CSS ?

[haut]

auteur : Linaa

Les classes dans une feuille de style sont toujours précédées d'un point.

Voici un exemple d'utilisation :

Code CSS

.bordures {
  border : 1px solid #FF0000;
}

Code (X)HTML associé au CSS

<div class="bordures">Mon bloc encadré</div>

Note : La classe bordures peut s'appliquer aux balises div mais également aux autres, telles que p, span, a, input, etc.

Comment utiliser les identifiants en CSS ?

[haut]

auteur : Linaa

En CSS, un identifiant est toujours représenté par un #.

Voici un exemple d'utilisation :

Code CSS

#copyright {
  font-size : 70%;
  color : #f00;
  text-align : center;
  border-top : 1px solid #f00;
}

Code (X)HTML

<p id="copyright">Fait par moi, et personne d'autre</p>

Notes :

Un identifiant doit être utilisé une seule fois dans une page, mais peut être réutilisé dans d'autres.
On peut également imposer que les identifiants ne s'appliquent qu'à des éléments particuliers (par exemple, p#copyright).
Pour une utilisation multiple des styles sur une même page, il faut passer par des classes.

lien :

À quoi sert l'attribut id en (X)HTML/CSS ?
lien : faq

Comment utiliser les classes en CSS

Version PDF (Miroir) Version hors-ligne (Miroir)

Consultez les autres F.A.Q's

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 ni 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.