Avertissement : cet article est le résultat de la traduction automatique, l'exactitude et la fidélité de la traduction ne sont donc pas garanties. Pour consulter la version originale de cet article, en anglais, cliquez ici.
CMS-General

Comprendre d’où vient le style CSS sur votre page

Dernière mise à jour: avril 26, 2019

Disponible avec :

Hub Marketing Professional, Enterprise
Basique

Il existe différents endroits où un style peut être appliqué à votre contenu HubSpot. L'endroit où le CSS (de l'anglais Cascading Style Sheets) est ajouté dans HubSpot affecte l'ordre d'application. Les styles CSS sont appliqués en cascade, ce qui signifie que les derniers styles appliqués primeront sur tout style précédemment défini. En règle générale, le style le plus spécifique est prioritaire. Cela signifie que le CSS appliqué à une page ou à un module spécifique sera prioritaire par rapport à ce qui est défini sur un modèle ou appliqué à votre domaine dans vos paramètres. 

Cet article explique comment le style CSS est appliqué à votre contenu HubSpot et comment utiliser les outils de développeur dans votre navigateur web pour localiser ce style. 

Remarque : si vous n'êtes pas en mesure de lire ou de modifier du CSS, il est fortement recommandé de travailler avec un concepteur pour apporter des modifications au style de votre site web. 

Comment un style est appliqué à votre contenu HubSpot

Un style peut être appliqué à votre contenu à divers endroits dans HubSpot. Le CSS s'appliquera en cascade dans un ordre décroissant, les derniers styles appliqués étant prioritaires. 

Remarque : le dernier style appliqué à votre contenu sera prioritaire par rapport aux styles définis précédemment dans le CSS. Un style peut aussi être remplacé par une déclaration plus précise ou par une balise !important. 

Le style sera appliqué à vos pages ou à vos articles de blog HubSpot dans l'ordre suivant, le dernier style appliqué étant prioritaire :

  1. CSS sur la feuille de style
  2. CSS ajouté à <style> la balise
  3. CSS depuis le navigateur web

CSS sur la feuille de style

Le style d'une feuille de style est le premier CSS appliqué à votre page ou à votre article de blog. Tout style utilisé dans l'éditeur de page sera prioritaire sur le modèle qui lui-même primera sur les feuilles de style associées à vos paramètres.

Le CSS sera appliqué dans cet ordre, le dernier style appliqué étant prioritaire :

  1. Feuille de style jointe à vos paramètres pour tous les domaines.
  2. Feuille de style jointe à vos paramètres pour un domaine spécifique.
  3. Feuille de style jointe à votre modèle de page ou d'article de blog.
  4. Feuille de style appliquée dans l'onglet Paramètres de votre page.
  5. Il existe aussi certains styles par défaut appliqués à toutes les pages HubSpot.

Si le CSS provient d'une feuille de style, le nom de la feuille de style apparaîtra à côté de la déclaration CSS dans l'inspecteur. Si vous passez la souris sur le nom de la feuille de style, vous pourrez voir le nom complet du fichier. 

Une fois que vous avez trouvé le nom de la feuille de style, accédez au gestionnaire de conception (Depuis votre compte HubSpot, accédez à Marketing > Fichiers et modèles > Outils de conception.) pour trouver la feuille de style et y apporter les modifications nécessaires. 

Si vous repérez le nom de votre feuille de style dans l'inspecteur, il est possible que le CSS soit appelé dans la feuille de style à partir d'un autre fichier codé. Ceci est indiqué par des inclusions, comme indiqué ici :


CSS ajouté à <style> la balise

Le CSS ajouté à la balise <style> peut être appliqué à n'importe lequel des emplacements suivants, le dernier style appliqué étant prioritaire :

  1. Code HTML de l'en-tête ou du pied de page du site ajouté à vos paramètres pour tous les domaines.
  2. Code HTML de l'en-tête ou du pied de page du site ajouté à vos paramètres  pour un domaine spécifique.
  3. Code HTML de l'en-tête ou du pied de page du site appliqué dans l'onglet Paramètres de votre page.
  4. Code HTML de l'en-tête ou du pied de page du site appliqué à votre modèle dans le gestionnaire de conception.
  5. Style en ligne ajouté à un module dans le modèle.
  6. Style en ligne ajouté à un module dans l'éditeur de contenu

Si l’URL de la page apparaît à côté de la déclaration, c’est que le CSS se trouve dans des balises <style> sur la page. S'il est marqué element.style à côté de la déclaration dans l'inspecteur, c'est que le CSS a été défini en ligne.

Cela signifie que le CSS ne provient pas d’une feuille de style et ne se trouve pas dans des balises <style> dans l'en-tête ou le pied de votre page, mais qu'il a été défini dans le module lui-même.

CSS depuis le navigateur

Si vous voyez l'indication User agent stylesheet (feuille de style de l'agent utilisateur) à côté de la déclaration, c'est que le CSS fait partie du style par défaut du navigateur. Vous le verrez le plus souvent pour des styles de balises HTML plus larges comme, par exemple <p>, <h1>, <h2>, <span>, <div>, etc. 

Ce style est appliqué en dernier et est prioritaire par rapport à vos feuilles de style jointes et au CSS ajouté dans une balise <style> , mais il peut être écrasé dans la feuille de style appliquée à votre page par une déclaration plus précise.

Utilisation d'outils de développeur dans votre navigateur web

Vous pouvez utiliser des outils de développeur de navigateurs web pour examiner les styles utilisés sur votre site en ligne. Si vous utilisez un autre type de navigateur, recherchez dans sa documentation d'aide des documents de référence quant à la façon d'inspecter les éléments des pages web.

Voici un lien vers des ressources sur l'utilisation d'outils de développeur sur les navigateurs web les plus utilisés :

Si vous utilisez un autre type de navigateur web, consultez leur documentation utilisateur pour en savoir plus sur comment inspecter les éléments de la page.