CSS für Jimdo

Jimdo-Elemente können außer mit "Bordmitteln" auch noch anders verändert werden: per CSS-Script.

CSS-Skripte sind Stil-Anweisungen, die bestimmten html-Bereichen bestimmte Formatierungen zuweisen (CSS = Cascaded-Style-Sheet = Hierarchisch aufgebautes Style-Anweisungsblatt). Infos findet Ihr z.B. hier:

 

Beispiel: 

Diese beiden Grafiken sind gar keine Grafiken, sondern per CSS formatierte Bereiche (div) mit einer bestimmten Höhe (height), Breite (width) und einem angerundeten Rahmen von 1px Stärke mit der Farbe #ccc (border/border-radius):


...in Bearbeitung

...in Bearbeitung

 

 

Code:


<div id="beispiel">

<div class="cssbox" style="margin-left: 15px; height: 200px; width: 200px;">

<h3>...in Bearbeitung</h3>

</div>

<div class="cssbox" style="height: 200px; width: 200px; position: absolute; margin-left: 30px; margin-top: -180px; background-color: #fff;">

<h3>...in Bearbeitung</h3>

</div>

</div>

Erklärung:

In oben stehendem html-Code kommen 2 Arten von CSS-Anweisungen zu Anwendung:

  • rot markiert: CSS-IDs und CSS-Klassen (id/class) = Anweisungen, die dem html-Code über in ein Script zugeordnet werden, dass zumeist in den Head-Bereich der Webseite geschrieben wird.
  • blau markiert: sog. Inline-Style = Anweisungen, die direkt in den Code geschrieben werden

Die ID id="beispiel" hat in diesem Beispiel keine besondere funktion, sorgt aber für eine eindeutige Identifizierung des gesamten Bereiches (<div> ... </div>)


Die Klasse class="cssbox" sorgt in dem Beispiel für die abgerundeten Ecken und den Rand der Bereiche (div), für die sie gelten (s.a. Grafik weiter unten).


Die Inline-Anweisungen style="..." sorgen in dem Beispiel für die Abmessungen und die Position der Bereiche. 


CSS Style Anweisungen in den Head-Bereich schreiben

Dieses Kapitel wird auf der Jimdo-Hilfe ein wenig stiefmütterlich behandelt, ist aber wesentlich für Style Anweisungen, die per Klasse oder ID zugewiesen werden:

Zitat: "Zum Bearbeiten des <head>-Bereichs, öffne den Menüpunkt Einstellungen in der Bearbeitungsleiste.
Dort findest du in der Sektion Webseite das Symbol Head bearbeiten.


Klicke auf Head bearbeiten um den Editor für diesen Seitenbereich zu öffnen und wähle Gesamte Webseite. Der Editor ist zunächst leer, wenn keine Eintragungen gemacht wurden.

 

1. Einstellungen

Einstellungen

2. Head Bearbeiten

 Head Bearbeiten

Die Style-Anweisungen werden einfach in den Editor geschrieben.

 

 

 

Wichtig: den sog. "Style-tag" (<style> ...</style>) nicht vergessen!

 

Die Syntax für Style-Anweisungen ist folgende:

 

<style>

 

/*Kommentar (Überschrift)

------------------------------------------------------------------*/

.name-klasse {Anweisung: Wert;}    /*Kommentar*/

#name_id {Anweisung: Wert}

 

/*weitere Anweisungen... bei Anweisungen mit gleichem Namen

gilt immer die Letzte im Script  */

 

</style>

 

 

Beispiel:


Viel Spaß beim Formatieren!

Download
Media-Queries.css
Cascading Style Sheet Datei 5.4 KB