Principes de base de CSS3 Style Inheritance - Mannequins

La partie cascade de la feuille de style en cascade (CSS3) dit tout. Un style situé dans la partie supérieure de la hiérarchie de la page descendra 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 requis pour implémenter ce style dans tous les endroits où le style est nécessaire.

Par exemple, un style défini avec la balise descendra dans la balise enfant de la balise. Si vous avez défini le style au niveau, vous devez le définir pour chacun de ceux qui requièrent le style. En le définissant au niveau, vous utilisez un raccourci sous la forme d'un style en cascade.

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

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

L'héritage vient aussi sous une autre forme. Vous pouvez définir des styles dans trois endroits différents. L'emplacement de cette définition modifie la priorité de ce style. Voici les trois emplacements de style et leurs priorités:

• Inline (priorité supérieure): Un style inline apparaît spécifiquement avec un objet particulier. Il modifie uniquement cet objet et aucun autre objet dans le document ou dans tout autre document. La localisation et la modification d'un style en ligne prennent du temps et sont sujettes aux erreurs. Vous devez donc les éviter autant que possible.

• Interne: Un style interne apparaît en tant qu'élément de l'étiquette dans le document. Cela affecte tous les objets du document, mais aucun autre document sur le site. L'utilisation de styles internes peut vous aider à donner un aspect particulier à une page particulière, mais vous ne devez utiliser un style interne que lorsque le style est unique à cette page et vous n'avez jamais l'intention d'utiliser ce style ailleurs. Étant donné que vous ne pouvez normalement pas faire une telle garantie, il est préférable d'éviter autant que possible les styles internes, mais même dans ce cas, ils sont préférables aux styles en ligne.

  Externe (priorité la plus basse):

• Un style externe apparaît dans un externe. Fichier CSS. Vous devez créer une référence à ce fichier en utilisant une balise dans un document. Les styles affectent tous les documents liés à. Fichier CSS. L'utilisation de cette approche facilite les mises à jour et donne à votre site une apparence uniforme dans l'ensemble.En outre, l'utilisation de styles externes permet aux personnes ayant des besoins spécifiques de fournir facilement une feuille de style alternative répondant mieux à leurs besoins.

  Vous pouvez associer autant de feuilles de style externes que nécessaire à une page en utilisant plusieurs tags. Cette approche vous permet d'utiliser des styles provenant de diverses sources afin que vous puissiez formater votre page avec le moins d'effort possible.

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

  Le dernier niveau d'héritage à considérer est le sélecteur lui-même. Vous pouvez créer des sélecteurs agissant uniquement sur des objets contenus dans d'autres objets ou répondant à des critères spéciaux. Un sélecteur spécifique remplacera toujours les paramètres fournis par un sélecteur générique, vous ne devez donc utiliser cette technique que lorsque cela est nécessaire (imaginez que vous essayez de trouver tous ces changements spécifiques dans tous les fichiers de votre site).

Plus le sélecteur est spécifique, plus sa priorité devient grande. Cependant, vous devez considérer les effets du niveau du sélecteur dans le document - et la manière dont le style est défini - comme faisant partie de l'image globale.