Accueil
Club Emploi Blogs   TV   Dév. Web PHP XML Python Autres 2D-3D-Jeux Sécurité Windows Linux PC Mac
Accueil Conception Java DotNET Visual Basic  C  C++ Delphi Eclipse MS-Office SQL & SGBD Oracle  4D  Business Intelligence
logo



Comment appliquer plusieurs styles à un élément ?
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 ?
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 ?
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) ?
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 ?
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 ?
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 : faq À quoi sert l'attribut id en (X)HTML/CSS ?
lien : faq Comment utiliser les classes en CSS


Consultez les autres F.A.Q's


Les sources présentés sur cette page sont libres de droits, et vous pouvez les utiliser à votre convenance. Par contre cette page de présentation de ces sources constitue une oeuvre intellectuelle protégée par les droits d'auteurs. Copyright ©2004  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'à 3 ans de prison et jusqu'à 300 000 E de dommages et intérêts. Cette page est déposée à la SACD.

Vos questions techniques : forum d'entraide Accueil - Publiez vos articles, tutoriels, cours et rejoignez-nous dans l'équipe de rédaction du club d'entraide des développeurs francophones. Nous contacter - Copyright 2000..2005 www.developpez.com