Comment utiliser correctement les points (.) et les dièses (#) en CSS3 html5

Réduire
X
 
  • Filtrer
  • Heure
  • Afficher
Tout effacer
nouveaux messages

  • [Problème] Comment utiliser correctement les points (.) et les dièses (#) en CSS3 html5

    Bonjour,

    A force de lire encore et encore des sites de tutoriels, j'avoue que je sens un peu largué.

    On vous donne toujours des infos tellement succinctes, tellement ponctuelles, qu'elle ne peuvent vraiment vous être utiles lorsque vous êtes un débutant en que vous voulez construire une page simple, avec une entête, un menu, une partie principale et un pied de page, en y mettant du texte et des images ! Rien que ça !!!

    Mais je limite mes prétentions pour l'instant à un détail, dont voici un exemple précis :

    Un de vos intervenants répondait il y a quelque temps à une question que je me pose aujourd'hui : quel est la différence entre le point (.) et la dièse (#) en css3, et comment les utiliser correctement ?

    Voici ses deux réponses à quelques minutes près...



    A 10h09, il écrivait :
    "#" c'est pour un id et doit être utilisé une seule fois dans ta page
    "." est une class et peut être utilisé autant de fois que tu veux sur une page.


    Et à 10h22 :
    En fait quand tu reprends plusieurs fois la même mise en forme sur une page, tu utilises une classe. Donc dans ton code html tu utilises cette syntaxe :
    Code html
    <div class="nomclass"></div>
    Code CSS
    .nomclass { }


    Et quand tu l'utilises une fois en général, c'est par exemple pour la largeur de la div header tu dais (c'est ce qui était écrit : "dais"... une ffaute de frappe sans doute) un id.
    Code html
    <div id="header"></div>
    Code CSS
    #header { }


    Quelqu'un aurait-il la gentillesse de me réexpliquer cela de manière plus concrète ? Par exemple appliqué à un cas précis pour montrer comment agit l'un et l'autre ? Le cas, par exemple, où l'on veut créer une page avec une entête de couleur en haut et du texte dedans, et un menu d'une autre couleur sur le côté avec du texte dedans... Avec l'entête et le menu correctement positionnés...

    Sinon, quelqu'un voudrait-il bien de me rendre un fier service en acceptant que je lui envoie un fichier CSS et le fichier HTML correspondant pour me dire ce qui ne va pas, et pourquoi, sur la page HTML lancée par mon browser je ne vois aucune des mises en forme demandées ?... Alors que sur le tutoriel ça semblait marcher à merveille !

    D'avance, merci et bonne continuation,

    Elias

    supp mail
    sur MacBook Pro avec MacOS 10.6.8
    Dernière édition par toffffe à 28/03/2014, 22h14 Raison: supp mail

  • #2
    Re : Comment utiliser correctement les points (.) et les dièses (#) en CSS3 html5

    Salut
    Pour répondre à ta question c'est vrai que normalement le # est pour un id est utilisé qu'une seule fois et le . pour une class et peut être utilisé plusieurs fois.

    Prend l'exemple dans un template un logo logo tu en auras qu'un seul pour ton site, donc tu lui mettras un id, contrairement à un actualités, tu peux en avoir plusieurs sur une même page donc tu leurs préférera une class

    Je n'ai pas repris ton exemple pour le header car tu parles dans ta question de html5 et il existe en html5 des balises <header><footer><nav>...
    Auto-entrepreneur spécialiste Joomla https://www.stylitek.com

    Joomladay 2023 https://www.joomladay.fr/ 2 jours à ne pas manquer

    Commentaire


    • #3
      Re : Comment utiliser correctement les points (.) et les dièses (#) en CSS3 html5

      Sinon, quelqu'un voudrait-il bien de me rendre un fier service en acceptant que je lui envoie un fichier CSS et le fichier HTML correspondant pour me dire ce qui ne va pas, et pourquoi, sur la page HTML lancée par mon browser je ne vois aucune des mises en forme demandées ?... Alors que sur le tutoriel ça semblait marcher à merveille !
      Pour cette question c'est surement car tu as mal appelé ton fichier css, ou alors qu'il est pas dans le bon chemin
      Auto-entrepreneur spécialiste Joomla https://www.stylitek.com

      Joomladay 2023 https://www.joomladay.fr/ 2 jours à ne pas manquer

      Commentaire


      • #4
        Re : Comment utiliser correctement les points (.) et les dièses (#) en CSS3 html5

        Bonsoir,

        Pour reviser l'utilisation des sélecteurs . # et leurs dérivés:
        A fun game to help you learn and practice CSS selectors.

        sous forme d'un jeu, vous pouvez tester vos connaissances
        UP, le plugin universel à découvrir sur https//up.lomart.fr
        bgMax
        , AdminOrder, MetaData, Zoom, ArtPlug, Custom, Memo, Filter, ... sur http://lomart.fr/extensions

        Commentaire


        • #5
          Re : Comment utiliser correctement les points (.) et les dièses (#) en CSS3 html5

          rigolo, mais pas très intuitif sur la façon de répondre

          presque plus dur de comprendre la question que de trouver la réponse....mais on s'y fait vite

          sinon pour répondre à la question de départ, il y a pour apprendre : http://fr.openclassrooms.com/informatique/css/cours depuis les bases jusqu'à l'expertise
          Dernière édition par PieceOfCake à 28/03/2014, 23h05
          Il y a 10 sortes de gens. Ceux qui savent compter en binaire et ceux qui ne savent pas ...

          Commentaire

          Annonce

          Réduire
          Aucune annonce pour le moment.

          Partenaire de l'association

          Réduire

          Hébergeur Web PlanetHoster
          Travaille ...
          X