|
|
Il y a actuellement 304 tutoriaux sur Aidoforum. Toute reproduction, partielle ou complète, est interdite.
Retour aux tutoriaux.
|
| HTML/CSS -> Les class et id, quelles différences ? |
Sur ce tutorial, je vais vous montrer la différence entre les class et les id, comme y mettre du css etc...
--------------------------------------------------------------------------------
Comme vous le savez peut-être, depuis quelques temps on utilise les "div" pour coder, c'est déjà plus propre que les tableaux, bien qu'on les utilise encore.
--------------------------------------------------------------------------------
Dans votre page Xhtml, vous y collez ceci, bon ok j'imagine que vous le saviez déjà mais bon.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>AidoForum</title>
</head>
<body>
</body>
</html>
|
C'est entre body qu'on mettera nos textes etc...
Entre body vous allez mettre :
<div id="test">Hello, ça va ?</div>
|
Dans votre CSS que vous incluerez avec ce code entre head et head :
<link href="style.css" rel="stylesheet" type="text/css" />
|
Dans votre css, vous y mettez le bla bla habituel...
body {
background-color:#FFFFFF;
color:#000000;
margin:0px;
padding:0px;
}
|
Etc..
Ensuite notre id du div c'est : test.
Et quand c'est une ID, dans le css on ne mettera pas un point mais ceci : #
Donc si je veux rendre mon div plus beau je ferai :
#test {
background-image:url(images/background-test.jpg);
color:#000066;
border:1px dotted;
border-color:#000066;
}
|
Attention:
Quand vous prennez les id il faut utiliser la même id une seule fois, sinon vous ne serez pas valide, et c'est-là qu'interviennent les class !
--------------------------------------------------------------------------------
Une class, ça se place comme ceci.
<div class="Aidoforum">Hello les zamis</div>
|
Notre class se nomme : Aidoforum. Donc dans mon css je metterai ceci :
.Aidoforum {
background-image:url(images/background-test.jpg);
color:#000066;
border:1px dotted;
border-color:#000066;
}
La différence c'est qu'on utilise un point pour commencer et on peut réutiliser la même class plusieur fois et ce sera valide, ça évitera de rendre votre css trop lourd avec des id, les id, je les utilise pour le :
- Header : Haut de page.
- Menu : La navigation sur le site.
- Corps : Où il y a le texte.
- Footer : Le bas de page, les copyrights.
Si vous avez des suggestions pour le tutorial, mettez-les en commentaires.
A bientôt,
Orange :)
| | Par Orangeloulou, le 09 Juin 2006 à 14h30 |
| Commentaire de Orgnobi le 24 Juin 2006 à 11h41 |
Dans le tutorial, Orange utilise les balises div mais il faut savoir que les id et les classes peuvent être appliquées à n'importe quelle balise xhtml.
Pour parler des tableaux, c'est vraiment pas propre de coder un design avec des tableaux. Ca peut paraitre pratique au debut mais des qu'il y a une modif à faire, c'est la vrai galère. Donc css power !!!
|
| Commentaire de Pouzy le 24 Juin 2006 à 14h39 |
Hm, Aido est codé en tableaux, parce que j'avais commencé à le coder en CSS, mais impossible de trouver une compatibilité entre IE et Firefox, donc... Hop, tableaux. 
|
| Commentaire de ju2cho7 le 02 Juillet 2006 à 18h05 |
plus pratique les tableaux
|
| /!\ Vous devez être inscrit pour pouvoir commenter ce tutoriel, ou demander du support. /!\ |
|
|
|
|
|
|
