Hinweis: Dieser Artikel wird aus Kulanz zur Verfügung gestellt. Er wurde automatisch mit einer Software übersetzt und unter Umständen nicht korrekturgelesen. Die englischsprachige Fassung gilt als offizielle Version und Sie können dort die aktuellsten Informationen finden. Hier können Sie darauf zugreifen.
Design Manager

Grundlegendes zum Ursprung der CSS-Stile auf Ihrer Seite

Zuletzt aktualisiert am: November 21, 2019

Produkte/Lizenzen

Marketing Hub  Professional, Enterprise
Basic

Es gibt verschiedene Orte, an denen die Stile auf Ihren HubSpot-Content angewendet werden können. An welcher Stelle die CSS (Cascading Style Sheets) in der HubSpot-Software hinzugefügt werden, wirkt sich auf die Reihenfolge aus, in der sie angewendet werden. CSS funktionieren kaskadierend, d. h., die letzten angewendeten Stile überschreiben die vorausgegangenen. In der Regel haben spezifischere Stile Priorität. Dies bedeutet, dass CSS, die auf eine bestimmte Seite oder ein bestimmtes Modul angewendet werden, eine höhere Priorität als die haben, die in einer Vorlage oder in Ihren Einstellungen für Ihre Domain festgelegt werden. 

In diesem Artikel wird beschrieben, wie CSS-Stile auf Ihren HubSpot-Content angewendet werden und wie Sie die Entwicklertools in Ihrem Webbrowser nutzen, um diese Stile zu finden. 

Bitte beachten: Wenn Sie keine CSS lesen oder bearbeiten möchten, wird empfohlen, dass Sie mit einem Designer zusammenarbeiten, um den Stil der Website zu ändern.

So werden Stile auf Ihren HubSpot-Content angewendet

Stile können an verschiedenen Stellen in der HubSpot-Software auf Ihren Content angewendet werden. CSS wird in absteigender Reihenfolge kaskadiert, wobei die letzten angewendeten Stile Priorität haben. 

Bitte beachten: Der letzte Stil, der auf Ihren Content angewendet wird, hat Priorität über zuvor im CSS festgelegte Stile. Stile können auch durch eine spezifischere Deklaration oder ein mit „!important“ ausgezeichnetes Tag überschrieben werden.

Stile werden auf Ihre HubSpot-Seiten oder -Blog-Beiträge in der folgenden Reihenfolge angewendet, wobei der letzte Stil Priorität hat:

  1. CSS im Stylesheet
  2. CSS hinzugefügt zum <style>-Tag
  3. CSS vom Webbrowser

CSS im Stylesheet

Stile in einem Stylesheet sind das erste CSS, das auf Ihre Seite oder Ihren Blog-Beitrag angewendet wird. Alle Stile, die im Seiten-Editor angewendet werden, haben Vorrang vor der Vorlage, die wiederum Priorität vor den in Ihren Einstellungen festgelegten Stylesheets hat.

CSS wird in dieser Reihenfolge angewendet, wobei der letzte angewendete Stil Priorität hat:

  1. Ein in Ihren Einstellungen für alle Domains hinzugefügtes Stylesheet.
  2. Ein in Ihren Einstellungen für eine bestimmte Domain hinzugefügtes Stylesheet.
  3. Ein für Ihre Seite oder Ihre Blog-Beitragsvorlage hinzugefügtes Stylesheet.
  4. Ein auf der Registerkarte „Einstellungen“ Ihrer Seite hinzugefügtes Stylesheet.
  5. Es gibt auch einige Standardstile, die auf alle HubSpot-Seiten angewendet werden.

Wenn CSS aus einem Stylesheet stammt, wird der Name des Stylesheets neben der CSS-Deklaration im Inspektor angezeigt. Wenn Sie den Mauszeiger über den Namen des Stylesheets halten, wird der gesamte Dateiname eingeblendet.

Nachdem Sie den Namen des Stylesheets gefunden haben, gehen Sie zu Ihrem Design-Manager (Gehen Sie in Ihrem HubSpot-Account zu Marketing > Dateien und Vorlagen > Design-Manager.), um Ihr Stylesheet zu finden und die erforderlichen Änderungen vorzunehmen.

Wenn Sie den Namen Ihres Stylesheets im Inspektor sehen, wird das CSS möglicherweise von einer anderen kodierten Datei in das Stylesheet übertragen. Dies wird durch „include“-Angaben angezeigt, wie hier zu sehen:


CSS hinzugefügt zum <style> -Tag

Zum <style> -Tag hinzugefügtes CSS kann an einem der folgenden Orte angewendet werden, wobei der zuletzt angewendete Stil Priorität hat:

  1. Website-Header-HTML oder Website-Footer-HTML, das in Ihren Einstellungen für alle Domains hinzugefügt wurde.
  2. Website-Header-HTML oder Website-Footer-HTML , das in Ihren Einstellungen für eine bestimmte Domain hinzugefügt wurde.
  3. Website-Header-HTML oder Website-Footer-HTML, das auf der Registerkarte „Einstellungen“ Ihrer Seite angewendet wurde.
  4. Website-Header-HTML oder Website-Footer-HTML, das im Design-Manager auf Ihre Vorlage angewendet wurde.
  5. Inline-Stile, die zu einem Modul in der Vorlage hinzugefügt wurden.
  6. Inline-Stile, die zu einem Modul im Content-Editor hinzugefügt wurden

Wenn die Seiten-URL neben der Deklaration angezeigt wird, weist dies darauf hin, dass das CSS in <style> -Tags auf der Seite vorliegt. Wenn element.style neben der Deklaration im Inspektor erscheint, wurde das CSS inline festgelegt.

Das bedeutet, dass das CSS nicht aus einem Stylesheet stammt oder in <style> -Tags in der Kopf- oder Fußzeile Ihrer Seite vorliegt, sondern im Modul selbst festgelegt wurde.

CSS vom Webbrowser

Wenn Sie das Stylesheet des Benutzer-Agents neben der Deklaration sehen, ist das CSS Teil der Standardstile des Browsers. Sie sehen dies am häufigsten für die übergeordneten HTML-Tag-Stile wie <p>, <h1>, <h2>, <span>, <div> usw.

Diese Stile werden zuletzt angewendet und haben Priorität vor Ihren angehängten Stylesheets und CSS in <style> -Tags, aber sie können durch ein Stylesheet auf Ihrer Seite mit einer spezifischeren Deklaration überschrieben werden.

Entwicklertools in Ihrem Webbrowser verwenden

Sie können Webbrowser-Entwicklertools verwenden, um die auf Ihrer Live-Website angewendeten Stile zu analysieren. Wenn Sie einen anderen Typ von Browser verwenden, suchen Sie in der Hilfe-Dokumentation nach Referenzmaterialien zum Untersuchen der Webseitenelemente.

Im Folgenden finden Sie Links zu Ressourcen über die Verwendung von Entwicklertools für die gängigsten Webbrowser:

Wenn Sie einen anderen Typ von Webbrowser verwenden, ziehen Sie die Benutzerdokumentation heran, um weitere Informationen zum Untersuchen der Elemente auf der Seite zu erhalten.


/de/cos-general/how-can-i-determine-where-the-styling-on-my-page-is-coming-from