Forum SELFHTML  Archives du forum  2005  avril

	Forum SELFHTML: Archives: Différence entre "#", "." et ""
	(CSS) Différence entre "#", "." et ""  (CSS) Différence entre "#", "." et ""

(CSS) Différence entre "#", "." et ""

Le message suivant est de: terse, 05. 04. 2005, 17:44

Bonjour,

J'ai un problème et j'aimerai savoir si vous pouviez m'aider.

J'aimerai comprendre quelle est la différence entre le ". " et le "#" et ceux ou on met rien devant body,header ou encore menugauche, en référence au bout de code suivant :


--------------
<style type="text/css">
body {
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size: 0.8em;
margin: 0;
padding: 0;
}
#header {
height: 100px;
background-color: #99CCCC;
}
#conteneur {
position: absolute;
width: 750px;
left: 50%;
margin-left: -375px;
background-color:#CCCCFF;
}
#centre {
background-color:#9999CC;
margin-left: 150px;
}
#gauche {
position: absolute;
left:0;
width: 150px;
}
#pied {
height: 30px;
background-color: #99CC99;
}

.menugauche {
list-style-type: none;
margin: 0;
padding:0;
}
.menugauche li {
margin-bottom: 5px;
}
.menugauche a {
margin: 0 2px;
color: #000000;
text-decoration: underline;
}
.menugauche a:hover {
text-decoration: none;
}
p {margin: 0 0 10px 0;}
</style>

Je vous remercie d'avance,

terse

(CSS) Différence entre "#", "." et ""

Le message suivant est de: Patrick Andrieu, 06. 04. 2005, 03:00
http://actuel.fr.selfhtml.org/equipe/patrick.htm

Bonjour terse!



Je ferai un peu la même réponse que pour Sebastien plus bas: tout est expliqué dans SELFHTML. Pour ta question, voir donc ici:

http://fr.selfhtml.org/css/formats/global.htm

En particulier http://fr.selfhtml.org/css/formats/global.htm#classes et http://fr.selfhtml.org/css/formats/global.htm#div_span pour les classes et http://fr.selfhtml.org/css/formats/global.htm#formats_independants pour les formats indépendants.


Comme la question est cependant intéressante, je vais entrer un peu plus dans le détail.

Avec .name { mention } tu définis une classe. Tous les éléments auxquels tu attribueras cette classe (ex.: <p class="name">...</p>, <div class="name">...</div>) auront les formatages définis dans ta feuille de style à cet endroit.

Avec #name { mention }, tu définis un format indépendant. _Le seul_ élément qui aura l'ID "name" aura les formatages définis à cet endroit (ex.: <p id="name">...</p>). J'ai bien précisé _le seul_ élément, car une ID ne peut être attribuée qu'une seule fois dans le document.

Les éléments devant être formatés "généralement" n'ont pas besoin de mention "class" ou "id" et peuvent être pris en considération dans la feuille de style sans autre ajout, donc: h5, b, ul, li { mention } par exemple.

Exemple:

Avec les feuilles de style suivantes:

p { font-size:12px; }
.bigger { font-size:18px; }
#superbig {font-size:24px }

tu obtiens que tous les éléments <p> sans attribut ni class ni id appraitront en taille de police de 12 Pixels;
que les éléments (<p> ou autres) avec l'attribut class="bigger" seront affichés en 18 Pixel de taille de police; et que
le seul élément portant l'id="superbig" sera affiché en 24 Pixel de hauteur de police.

Justement la différenciation entre # et . est utile dans le DOM, où on se sert beaucoup des "id". Par exemple, si tu as deux divs semblables, l'un devant être manipulé (changement de couleur ou quoi que ce soit) par JavaScript et l'autre non, mais devant être formatés au départ de la même manière, alors tu mets dans ta feuille de style:

#exemple {font-size:mention1}
.exemple {font-size:mention1}

dans ton ficher HTML:

<div id="exemple">Texte ou contenu</div>
<div class="exemple">Texte ou contenu</div>

Une mention JavaScript te permet de manipuler le premier DIV avec par exemple: document.getElementById('exemple').style.fontSize = mention2;



Meilleures salutations de Francfort sur le Main,
Patrick
--
_ au delà du délire _

Forum SELFHTML  Archives du forum  2005  avril

© 1998-2004  selfhtml@fr.selfhtml.org