TechBlogSD - Alles für WordPress und WEB-Entwicklung
WEB- und WordPress-Anleitungen, Neuigkeiten, Rezensionen zu Themes und Plugins

Wie füge ich CSS in der Weebly-Site hinzu?

6

CSS steht für C ascading S tyle S heets und wird verwendet, um den Stil eines Elements zu definieren. Jedes HTML-Element in einem Weebly-Theme wird mit den definierten Parametern gesteuert, wie es auf einer veröffentlichten Site aussehen wird, und alle diese Parameter werden in der Datei "main_style.css" gespeichert, auf die über den Pfad "Design > Edit HTML / CSS > ." zugegriffen werden kann Assets". Es ist immer nicht notwendig, das Haupt-Stylesheet zu ändern, Sie können auch den Stil eines Elements entweder auf Seitenebene oder auf Ebene einzelner Elemente steuern. In unserem vorherigen Artikel hatten wir die Verwendung von Skripten auf einer Seite erklärt Weebly-Site und in diesem Artikel werden wir ausführlich über verschiedene Möglichkeiten zum Hinzufügen von CSS in der Weebly-Site diskutieren.

CSS kann auf drei Arten zu einer Site hinzugefügt werden:

  • Inline-Stil
  • Interner Stil
  • Externes Stylesheet

Der interne Stil wird innerhalb eines Abschnitts eines HTML-Dokuments definiert, der alle bestimmten Elemente auf dieser Seite betrifft.

Externe Stile werden in einer externen Textdatei mit der Erweiterung .css definiert und mit dem HTML-Dokument mit dem Tag innerhalb des Abschnitts verknüpft.

Der Inline-Stil wird direkt für ein HTML-Element innerhalb einer Webseite definiert und betrifft nur dieses Element.

Der interne Stil wird innerhalb eines Abschnitts eines HTML-Dokuments definiert, der alle bestimmten Elemente auf dieser Seite betrifft.

Externe Stile werden in einer externen Textdatei mit der Erweiterung .css definiert und mit dem HTML-Dokument mit dem Tag innerhalb des Abschnitts verknüpft.

Der Inline-Stil wird direkt für ein HTML-Element innerhalb einer Webseite definiert und betrifft nur dieses Element.

Der interne Stil wird innerhalb eines Abschnitts eines HTML-Dokuments definiert, der alle bestimmten Elemente auf dieser Seite betrifft.

Verwenden von Inline-Stilen in Weebly

Inline-Stile werden auf Elementebene verwendet, ohne andere Elemente auf derselben Seite zu beeinflussen. Wenn Sie beispielsweise den bestimmten Absatz in die rote Farbe mit der Schriftgröße 18px ändern möchten, während andere Absätze die Standardfarbe beibehalten, fügen Sie den folgenden Code in das Element "Code einbetten" ein.

<p style="font-size:18px; color:green;"> Here is the paragraph content…. </p>

Verwenden interner Stile in Weebly

Eingebettete Stile werden im Allgemeinen auf Seitenebene angewendet und wirken sich auf alle ähnlichen Elemente innerhalb einer Seite aus. Sie können beispielsweise den folgenden Code unter "Seiten > Seite auswählen > Erweiterte Einstellungen > Kopfzeilencode" einfügen, um den gesamten Absatztext auf einer Seite rot zu machen.

<style type="text/css"> p {color: red;} </style>

Wie füge ich CSS in der Weebly-Site hinzu?

Code in der Kopfzeile der Weebly-Seite hinzufügen

Sie können den Stil auch mit den Tags < style >…< / style > in das Element „Embed Code” einbetten, damit er nur für dieses Element wirksam wird.

Externe Stylesheets in Weebly verwenden

Dies ist die hocheffektive und empfohlene Art der Verwendung von CSS, da die Stile von HTML getrennt sind, es ist einfach zu warten und zu ändern. Im Folgenden sind einige grundlegende Punkte zur Verwendung des standardmäßigen externen Stylesheets in Weebly aufgeführt:

  • Jedes Weebly-Theme verwendet nur ein externes Stylesheet, das unter „Design > Edit HTML / CSS > Assets” mit dem Namen „main_style.css” verfügbar ist.
  • Jede Änderung an diesem Haupt-Stylesheet wird auf der gesamten Site wirksam.
  • Um das Stylesheet zu ändern, müssen Sie das Design unter einem anderen Namen speichern und das geänderte Design ist unter "Design > Design ändern > Benutzerdefiniertes Design" verfügbar.
  • Wenn ein Thema geändert wird, gehen alle Änderungen im Haupt-Stylesheet verloren, da das neue Thema das Standard-Stylesheet für dieses Thema verwendet.

Wenn Sie beispielsweise den Stil des Blockquote-Elements auf der gesamten Site ändern möchten, ändern Sie den Code in blockquote {……} in der Datei „main_style.css”. Dadurch wird der Stil aller vorhandenen Blockzitate sowie aller neuen Blockzitate geändert.

Wie füge ich CSS in der Weebly-Site hinzu?

Ändern des Hauptstil-CSS in Weebly

Wenn Sie ein neues Stylesheet haben, laden Sie es hoch, indem Sie auf das +-Symbol neben „Assets” klicken und die Option „Datei(en) hochladen…” auswählen. Stellen Sie sicher, dass die Datei die Erweiterung .css hat, und verknüpfen Sie das Stylesheet mit den erforderlichen Seiten im Abschnitt "Seiten > Seite auswählen > Erweiterte Einstellungen > Kopfzeilencode" mit dem folgenden Code:

Der Dateipfad für die hochgeladenen Dateien lautethttp://yoursite.weebly.com/files/theme/your-style-sheet.css “. Wenn Sie das Stylesheet mit einer Seite verlinken, können Sie entweder den absoluten Link „ http://yoursite.weebly.com/files/theme/your-stylesheet.css ” oder einen relativen Link wie „/files/theme/your .” verwenden -stylesheet.css”.

Für die Änderung von Schriftgröße, -stärke und -farbe sollten Sie die Standardfunktion verwenden, die unter „Design > Schriftarten ändern” verfügbar ist, und es ist nicht erforderlich, das CSS zu ändern.

Aufnahmequelle: www.webnots.com
Hinterlasse eine Antwort

Diese Website verwendet Cookies, um Ihre Erfahrung zu verbessern. Wir gehen davon aus, dass Sie damit einverstanden sind, Sie können sich jedoch abmelden, wenn Sie möchten. Annehmen Weiterlesen