24 Novembre 2017 à 04:54:09

Auteur Sujet: Dreamweaver - CSS  (Lu 3977 fois)

Flore

  • Espoir
  • ***
  • Messages: 101
  • Points gagnés: 1
    • Voir le profil
Dreamweaver - CSS
« le: 08 Décembre 2006 à 19:18:36 »
Bonsoir,

Je n'arrive a comprendre la différence entre :
.quelquechose
et
#quelquechose
Dans un CSS et leur fonction.

merci de l'éclairage !!  :)
--

Flore

Quentin

  • Rédacteur Admin
  • Intarissable
  • *****
  • Messages: 1511
  • Points gagnés: 7
    • Voir le profil
Re : Dreamweaver - CSS
« Réponse #1 le: 08 Décembre 2006 à 19:50:50 »
Bonsoir,

id et class sont les deux sélecteurs de la norme CSS : ils permettent de cibler précisément l'application d'un ensemble de règles de style à un ou plusieurs élément(s).


D'une certaine, manière, id est un sélecteur redondant : tout ce qu'on peut faire avec, on peut en faire autant voire plus avec class. Mais id a son utilité.
id définit un élément de manière unique dans l'ensemble des balises : un document HMTL valide ne devrait ainsi pas comporter deux éléments avec le même id. De fait, id est le sélecteur idéal dès qu'il s'agit de positionner un élément au sein de l'interface, étant donné que deux éléments ne devraient logiquement pas avoir la même position dans l'interface.
class, de son coté, est utile pour définir toutes sortes de comportements, et plusieurs éléments peuvent utiliser la même classe (voire même utiliser plusieurs classes).
Enfin, une balise peut avoir un id et une (ou plusieurs) class - et id disposant d'une préséance sur class, il peut permettre de préciser un élément particulier au sein d'un ensemble de class.

Ajoutons que JavaScript peut manipuler les balises avec un id.

Rappelons pour terminer qu'au sein de la CSS, les id sont définis avec le signe dièse (#nom) et les class avec un point (.nom).

Donc :
- un id s'applique à un objet unique : il ne peut pas y avoir deux mêmes id dans une page
- une classe peut désigner plusieurs objets identiques.

Cordialement,

Quentin - Rédacteur/Admin sur 6ma.fr

Damien

  • Rédacteur Admin
  • Intarissable
  • *****
  • Messages: 2988
  • Points gagnés: 7
    • Voir le profil
    • aide informatique
Re : Dreamweaver - CSS
« Réponse #2 le: 08 Décembre 2006 à 20:03:14 »
Bonsoir,

C'est ce que j'essayais d'expliquer ici : class et id

le .quelquechose reprend les class html et le #quelquechose reprend les id html
La différence est que la class peut être utilisée plusieurs fois dans un code html, mais que l'id par définition identifie un seul élement html.

Exemple :

j'ai un site qui reprend toujours la même structure de page qui est : un div pour le haut (disons mon bandeau du haut), un div pour le centre (mon blabla) et un div pour le bas (mon copyright).
Dans mon div du centre, il y aura à chaque fois plusieurs paragraphes de texte.

Comme mes blocs haut, centre et bas seront uniques sur chaque page, il suffit que je leur donne un id et dans mon CSS ça fera des #. Par contre si je veux du CSS sur mes paragraphes de texte, il va falloir une class à chaque fois comme il peut y en avoir plusieurs. Dans mon cas ça fera donc :

<div id="haut">mon bandeau...</div>
<div id="centre">
  <p class="contenu">paragraphe 1</p>
  <p class="contenu">paragraphe 2</p>
  <p class="contenu">paragraphe 3</p>
</div>
<div id="bas">copyright...</div>

Dans ce cas, tu pourrais me dire à juste titre qu'en mettant des class partout ça fonctionne aussi...

Mais maintenant si je prend l'exemple de deux blocs qui sont des menus : un menu de gauche et un menu de droite. Imaginons que mes deux menus aient exactement le même style CSS : texte, couleur, encadré ...
Mias juste un paramètre change c'est l'alignement, qui va être soit float:left ou float:right suivant le menu. Et bien là tu peux faire ça :

<div id="menugauche" class="menu">accueil<br /> partenaires...</div>
<div id="menudroite" class="menu">A propos<br /> contact...</div>

Et dans le CSS :

.menu {
  color:#000000;
  border:1px solid #CCCCCC;
  font-size:14px;
}
#menugauche {
  float:left;
}
#menudroite {
  float:right;
}


Et là tu va peut-être mieux comprendre la différence entre une classe et un id, enfin j'espère parce que j'ai presque fait un tuto là  :mrgreen:
Cordialement,
Damien

Tutoriels informatique

Flore

  • Espoir
  • ***
  • Messages: 101
  • Points gagnés: 1
    • Voir le profil
Re : Dreamweaver - CSS
« Réponse #3 le: 09 Décembre 2006 à 00:04:32 »
Bonsoir,

merci à vous deux, je rentre juste, je lis tout ça demain a tête reposée.
Et je me fais une petite tentative de CSS.
Je vous tiens au courant.

Merci encore
--

Flore

Flore

  • Espoir
  • ***
  • Messages: 101
  • Points gagnés: 1
    • Voir le profil
Re : Dreamweaver - CSS
« Réponse #4 le: 09 Décembre 2006 à 18:30:06 »
MERCI !!!

J'ai compris !! ah ah ah !!!

Je profite du clavier, pour en poser une autre.
Est t'il possible d'associer plusieurs fichier css externe
dans une page html, et si oui qu'elle en serais le code ?

merci
--

Flore

Damien

  • Rédacteur Admin
  • Intarissable
  • *****
  • Messages: 2988
  • Points gagnés: 7
    • Voir le profil
    • aide informatique
Re : Dreamweaver - CSS
« Réponse #5 le: 09 Décembre 2006 à 19:29:22 »
Oui c'est possible d'inclure plusieurs fichiers CSS. Soit comme ça dans la page html :

<link href="style1.css" rel="stylesheet" type="text/css" />
<link href="style2.css" rel="stylesheet" type="text/css" />

Ou on peut même inclure un CSS dans un CSS en mettant dans un fichier CSS en tout début :

@import url(style1.css);
body {color: blue; }
p {color: green; }
Cordialement,
Damien

Tutoriels informatique

Thierry

  • Rédacteur Admin
  • Intarissable
  • *****
  • Messages: 1846
  • Points gagnés: 10
    • Voir le profil
Re : Dreamweaver - CSS
« Réponse #6 le: 09 Décembre 2006 à 20:06:12 »
On peut aussi faire des css spécifiques pour l'affichage à l'écran ou l'impression :

<link href="style1.css" rel="stylesheet" type="text/css" media="all" />
<link href="style2.css" rel="stylesheet" type="text/css" media="screen"/>
<link href="style3.css" rel="stylesheet" type="text/css" media="print"/>


Flore

  • Espoir
  • ***
  • Messages: 101
  • Points gagnés: 1
    • Voir le profil
Re : Dreamweaver - CSS
« Réponse #7 le: 09 Décembre 2006 à 21:23:58 »
Ouaouuu, merci pour vos réponse.
Mais cela ne risque pas d'être "lourd" pour l'ouverture des pages ?
J'entends dire que certain préfère avoir du css inclu et d'autre externe,
sans jamais trop savoir pourquoi !!!
Votre avis sur la question.
--

Flore

Damien

  • Rédacteur Admin
  • Intarissable
  • *****
  • Messages: 2988
  • Points gagnés: 7
    • Voir le profil
    • aide informatique
Re : Dreamweaver - CSS
« Réponse #8 le: 09 Décembre 2006 à 21:33:57 »
A mon sens, si tu sépares les CSS avecces techniques, c'est justement pour que ce soit moins lourd.
Par exemple quand je met :
<link href="style1.css" rel="stylesheet" type="text/css" />
<link href="style2.css" rel="stylesheet" type="text/css" />

C'est moins lourd que si je mettais tout le contenu des deux dans un seul alors que style2.css ne sera pas utilisé sur toutes les pages.
Cordialement,
Damien

Tutoriels informatique

Thierry

  • Rédacteur Admin
  • Intarissable
  • *****
  • Messages: 1846
  • Points gagnés: 10
    • Voir le profil
Re : Dreamweaver - CSS
« Réponse #9 le: 09 Décembre 2006 à 22:35:15 »
La question n'a d'intérêt que s'il y a plusieurs pages html pour le site.

S'il n'y a qu'une page autant mettre le css avec le html.

Mais comme ce n'est quasiment jamais le cas il vaut mieux mettre le css dans un fichier externe. Ainsi les règles css sont chargées une seule fois pour toutes les pages au lieu d'être chargées avec chaque page si elles sont incluses.