Comprendre les règles d'héritage dans CSS3 vous permet de créer des sites intéressants qui nécessitent un minimum d'entretien. En suivant ces règles, lorsque la maintenance est nécessaire, vous devez normalement faire un seul changement, plutôt que de changer des centaines d'articles individuellement. Il paie pour expérimenter, cependant, de sorte que vous peut comprendre les effets complets de l'héritage et les effets de l'utilisation de multiples styles ensemble.

1. Créer un nouveau fichier de HTML5 avec votre éditeur de texte.

   Votre éditeur ne peut pas supporter les fichiers HTML5. Tout fichier texte va faire.

2. Tapez le code suivant pour la page HTML.

   Un exemple d'Héritage CSS
   Un paragraphe en dehors d'un
   .
   Un paragraphe dans un conteneur.

   Cette page contient un certain nombre de styles en ligne, qui ont toujours la priorité de l'héritage le plus élevé. Par exemple, la fournit une police-famille de monospace pour le

   tag partie de la phrase. Vous pouvez accomplir la même chose en affectant la
   un attribut de classe pour le code, mais cet exemple utilise le style de ligne à la place.

   La

   utilise un style en ligne pour définir le style text-align à gauche. Parce que le style par défaut définit l'alignement à gauche, vous ne verrez aucune différence. Cependant, si un autre changement de style modifie l'alignement du texte, ce style prendra effet et empêcher le mouvement de ce paragraphe.

   Les modifications de style internes apparaissent tous dans le

   tag. Notez que le style définit spécifiquement le style de police en italique et la taille de police à moyen.

   Le second style est plus spécifique. Il fixe les caractéristiques pour

   tags qui apparaissent comme un enfant d'un

   . En conséquence, les règles d'héritage disent que ce style sera prioritaire lorsque les règles de succession sont remplies, ce qui signifie que font-style et font-size styles seront différents dans ce cas.

3. Enregistrez le fichier sous Inheritance.HTML.

4. 
   
   
   
   

   Chargez l'exemple d'héritage dans votre navigateur.

   Vous voyez le rôle que l'héritage et cascade styles jouent.

   

5. Créer un nouveau fichier CSS avec votre éditeur de texte.

   Votre éditeur peut ne pas supporter les fichiers CSS. Tout fichier texte va faire.

6. Tapez les informations de style CSS suivante.

   body {text-align: center-color: DarkRed-background-color: Kaki-frontière:-bordure de couleur encart: Groenland} h1 {border: départ-bordure de couleur: Brown-} p {text-decoration: underline- font-family: "Times New Roman", Times, serif-font-style: oblique-font-size: xx-Large-}

   La tag apparaît comme l'objet le plus haut dans une page, de sorte que les changements notés dans le style de carrosserie devrait affecter tout pour ne pas être spécifiquement surclassée tard. Dans ce cas, l'exemple modifie l'alignement du texte au centre et place une bordure rouge sombre autour de tout contenu. La couleur de fond est également modifiée. Enfin, le style ajoute une bordure verte autour de chaque objet.

   Le style de h1 remplace tous les styles de carrosserie. Dans ce cas, cela signifie que la modification des styles de bordure.

   Le p style remplace également les styles de carrosserie. Cependant, il n'y a pas toutes les propriétés qui sont les mêmes dans ce cas, de sorte que les styles de p améliorer les styles hérités de la carrosserie.

7. Enregistrez le fichier sous Inheritance.CSS.

8. Ajoutez le code suivant à la zone du fichier HTML.

   Ce code crée le lien entre le fichier HTML et le fichier CSS.

9. Enregistrez le fichier HTML et rechargez la page.

   

   Notez que tous les changements prévus sont en place. Par exemple, le texte est centré, à l'exception du seul paragraphe qui a un style en ligne remplaçant le texte centré. Le texte du titre est maintenant en rouge foncé - le texte du paragraphe remplace que la sélection de la couleur, de sorte qu'il reste bleu. Même si il ya un p style externe pour la taille du texte, le style interne remplace.

   Vous devriez remarquer d'autre à propos de l'exemple de quelque chose. Le corps contient une frontière en médaillon de la bonne couleur et de la rubrique contient une frontière début de la bonne couleur, car il a de substitution par défaut.

   Cependant, les paragraphes ont pas de frontière. À un moment donné, tag changements ont touché l'ensemble du document et certains d'entre eux le font encore. Cependant, d'autres modifications affectent uniquement le corps et pas d'autres éléments de bloc. Éléments de bloc ne héritent certains paramètres du style de carrosserie.

10. Supprimer le style h1 de la feuille de style Inheritance.CSS.

    Vous pouvez également commenter le style h1 en ajoutant le démarrage (/ *) et se terminant (* /) commentaire symboles comme ceci:

    / * Commentées pour montrer bloc settings.h1 {border: départ-bordure de couleur: Brown -} * /

11. Enregistrez le fichier CSS et rechargez la page.

    

    Notez que le titre manque maintenant une frontière. Il se trouve que le titre n'a pas été impérieuses de la frontière au niveau du corps - il a été l'ajout d'une nouvelle frontière. Ne supposez jamais que d'un style de corps va mener à d'autres styles de niveau bloc - certains paramètres font tout simplement pas. Lorsque vous trouvez que votre page ne regarde pas comme vous l'espériez qu'il regarde, essayez de configurer la mise à niveau de bloc inférieur.

    Vous pouvez aussi voir quelques feuilles de style qui accèdent au style HTML, ce qui affecte la tag qui contient le tag. Il est vrai: Vous pouvez travailler avec le style html pour réaliser certains effets.

12. Ajouter le style html montré ici pour la feuille de style de Inheritance.CSS.

    html {border: départ-bordure de couleur: vert-background-color: White-}

13. Enregistrez le fichier CSS et rechargez la page.

    

    Vous avez rarement compter sur le style html car il est tout simplement pas nécessaire. Le bloc de HTML est un niveau au-dessus du bloc de corps, comme le montre cet exemple. Le bloc de HTML ne vous donne pas accès à tout ce que le bloc de corps ne peut pas changer dans la plupart des cas, sauf pour les effets spéciaux comme celui représenté ici.