Notions de base de l'héritage de style CSS3

La cascade partie de Cascading Style Sheet (CSS3) dit tout. Un style à la partie supérieure de la hiérarchie de la page sera cascade vers le bas dans les parties inférieures de la page. En définissant un style au bon niveau de la hiérarchie, vous réduisez le travail nécessaire pour mettre en œuvre ce style dans tous les endroits où le style est nécessaire.

Par exemple, un style qui est défini avec le tag coulera dans le

tag qui est un enfant de la
tag. Si vous avez défini le style à la
niveau, vous auriez besoin de le définir pour chaque
qui exige le style. En le définissant à la
niveau, vous employer un raccourci sous la forme d'un style en cascade.

L'utilisation d'une architecture en cascade signifie que vous définissez styles qui affectent la page dans son ensemble à un niveau plus élevé que les modèles spécifiques utilisés pour définir des éléments particuliers.

Par exemple, si votre page repose principalement sur une seule police, alors vous devez définir cette police à la tag. Même si le Document Object Model (DOM) hiérarchie commence avec le document, se déplace vers la racine (le tag), et alors seulement, se divise en la et balises, la tag est le premier élément affichable.

Héritage est également livré sous une autre forme. Vous pouvez définir des styles dans trois endroits différents. La localisation de cette définition modifie la priorité de ce style. Voici les trois emplacements de style et de leurs priorités:




  • Inline (priorité): Un style en ligne apparaît spécifiquement avec un objet particulier. Il ne modifie que cet objet et aucun autre objet dans le document ou dans tout autre document. La localisation et la modification d'un style en ligne est chronophage et source d'erreurs, vous devriez donc les éviter autant que possible.

  • Interne: Un style interne apparaît comme étant une partie de la

    Utilisation des styles internes peut vous aider à fournir piquant particulière à une page en particulier, mais vous devez utiliser un style interne uniquement lorsque le style est unique à cette page, et vous ne l'intention d'utiliser ce style nulle part ailleurs. Étant donné que vous pouvez normalement pas faire une telle garantie, il est préférable d'éviter les styles internes chaque fois que possible, mais même ainsi, ils sont préférables à inline styles.

  • Externe (faible priorité): Un style externe apparaît dans un fichier .CSS externe. Vous devez créer une référence à ce fichier en utilisant une tag dans le d'un document. Les styles affectent chaque document lié au fichier .CSS.

    En utilisant cette approche permet des mises à jour plus facile et donne à votre site un aspect uniforme globale. En outre, l'utilisation de styles externes, il est facile pour les personnes ayant des besoins spéciaux pour fournir une feuille de remplacement de style qui répond mieux à leurs besoins.

    Vous pouvez associer autant de feuilles de style externes au besoin avec une page en utilisant multiples balises. Cette approche vous permet d'utiliser des styles provenant de diverses sources afin que vous pouvez formater votre page avec le minimum d'effort.

    Feuilles de style externes sont traitées dans l'ordre dans lequel ils apparaissent. Si deux fichiers .CSS contiennent le même nom de style qui modifient les mêmes propriétés, le style traité en dernier est le style qui a la priorité.

Le niveau final de l'héritage à considérer est le sélecteur lui-même. Vous pouvez créer des sélecteurs qui agissent uniquement sur les objets contenus dans d'autres objets ou qui répondent aux critères spéciaux. Un sélecteur spécifique sera toujours remplacer les paramètres fournis par un sélecteur générique, de sorte que vous ne devrait utiliser cette technique si nécessaire (imaginez essayer de trouver tous ces changements spécifiques sur votre site dans tous les fichiers).

Le plus spécifique le sélecteur, plus sa priorité devient. Cependant, vous devez tenir compte des effets de niveau de la sélection dans le document - et la manière dont le style est défini - dans le cadre de l'image globale.


» » » » Notions de base de l'héritage de style CSS3