AccueilFAQRechercherMembresGroupesS'enregistrerConnexion

Forum de graphisme, codage et game design proposant des tutoriels, astuces, libres services et commandes dans les domaines de l'infographie amateur, de l'intégration web (HTML et CSS essentiellement) ainsi que dans la conception de RPG sur forum.


    Principe du CSS : L'ordre et l'héritage

    Partagez
    Manumanu
    MasculinAge : 29Messages : 69

    le Mer 28 Aoû 2013 - 1:55

    L'ordre : le style en cascade


    Comme son nom l'indique, le CSS (Cascading Style Sheets - Feuilles de style en cascade) suit un modèle en cascade, c'est à dire les uns à la suite des autres, de haut en bas. Les propriétés appliqués à un élément sont donc fonction de leur positionnement dans votre fichier CSS.

    Si vous écrivez plusieurs propriétés pour un même élément, c'est toujours la dernière qui s'appliquera, et ce peu importe la façon dont vous le définissez :

    Premier cas :
    Code:
    p {
       color: blue;
       color: green;
       color: red;
    }
    Second cas :
    Code:
    p { color: blue }
    p { color: green }
    p { color: red }
    Dans ces deux cas, le texte des paragraphes (balise <p>) sera affiché en rouge. Jusque là, tout est simple.


    L'héritage


    Le second principe du CSS, c'est qu'une propriété appliquée à un parent s'applique également à ses enfants, si bien sûr elle est compatible.

    Un exemple tout simple :
    Code:
    .rouge { color: red }
    Code:
    <div class="rouge">
       <p>Texte</p>
       <span>Texte</span>
       <div>Texte</div>
    </div>
    Pour chacune de ces balises, la propriété de couleur de leur parent (la div portant la classe "rouge") sera héritée, et tout ces éléments appliqueront donc une couleur rouge à leur contenu. Là encore, tout est simple.

    La proximité des déclarations


    Compliquons un peut les choses.
    Le principe d'héritage fonctionne en fonction de la proximité des déclarations avec une balise. C'est un peu dur à comprendre comme ça, alors voyons un exemple plus explicite :
    Code:
    .blue{ color: blue }
    .rouge { color: red }
    Code:
    <div class="rouge">
       <p>Texte</p>
       <span class="blue">Texte</span>
       <div>Texte</div>
    </div>
    Cette fois, tout le texte sera rouge, à l'exception du contenu du span, qui sera en bleu. En effet, l'ordre des propriétés et déclaration CSS se fait aussi en fonction de la proximité avec les éléments avec les déclarations. En clair, une déclaration qui touche directement un enfant aura toujours plus de "poids" qu'une déclaration héritée depuis un parent. De la même façon, une déclaration sur un parent plus proche hiérarchiquement sera héritée à la place de celle d'un parent plus lointain :

    Code:
    <div class="rouge">
       <div class="bleu">
          <span>Ce texte sera bleu</span>
       </div>
    <div>

    Cas particulier : !important


    Cette propriété un peu particulière peut surclasser l'héritage hiérarchique du CSS. Exemple :
    Code:
    .maClasse {
       color: white;
       color: red;
       color: blue !important;
       color: green;
    }
    Alors le texte sera bleu, car la propriété !important surclasse toute hiérarchie (nous le verrons plus tard dans un autre cours sur le poids des déclarations).

    À noter, l'héritage hiérarchique fonctionne aussi avec !important. Ainsi, si vous faites ceci, alors c'est de nouveau la dernière propriété (vert) qui sera utilisée :

    Code:
    .maClasse {
       color: white !important;
       color: red !important;
       color: blue !important;
       color: green !important;
    }



    NyoTheNeko
    FémininAge : 22Messages : 5018

    le Sam 2 Jan 2016 - 16:57

    Merci pour ce tuto Manu, il est à présent classé au bon endroit et plus dans les LS! ^^




      La date/heure actuelle est Sam 10 Déc 2016 - 7:52