Kategorie: CSS Befehle

Für HTML Elemente und natürlich auch den gesamten HTML „body“ bestimmen wir per CSS Befehl bei Bedarf Hintergründe. Ob Bilder, Farben oder Verläufe ist natürlich euch überlassen. Hier die wichtigsten Befehle für Backgrounds.

Hinweis: Auch hier kann die Mischschreibweise (background:) verwendet werden.

Beispiele

.element {
    background-image:url(image.png);
    background-repeat:no-repeat;
    background-position:center center;
}

.element {
    background-image:url(image.png);
    background-position:center center;
}

Das große Thema in CSS: Die Positionierung. Sie umfasst relativ wenige Befehle. Diese haben jedoch eine große Wirkung auf die Darstellung im Browser. Mit diesen Anweisungen werden grundlegende Layouts erstellt wie Raster, Rahmengerüste, Navigationen und Co.

Der Befehl „position“ gibt an, wie das entsprechende HTML Element positioniert wird:

• statisch im normalen HTML / CSS Fluss,
• relativ zum HTML / CSS Fluss,
• absolut (nimmt keine Höhe im HTML / CSS Fluss ein) oder
• fixed (nimmt keine Höhe im HTML / CSS Fluss ein und bleibt beim Scrollen stehen).

Mit float setzen wir Boxen / Block-Elemente nebeneinander. „float:left“ um das entsprechende Element links anzuordnen, auf der rechten Seite wird umflossen – oder umgekehrt mit „float:right;“. Mit clear beenden wir den Umfluss wieder. Der CSS Befehl wird dabei auf das folgende Element angewendet – also auf jenes, das nicht mehr umfließen soll.

Die Angabe „display“ besagt, wie sich das Element verhalten soll:

• none (das Element ist nicht sichtbar),
• block (das Element verhält sich wie ein Block-Element – verursacht somit einen „Absatz“),
• inline (das Element verursacht keinen Absatz) oder
• inline-block (Element verursacht keinen Absatz, es können jedoch Block-Eigenschaften wie Margins hinzugefügt werden).

Durch die Befehle visibility und opacity stellen wir die Sichtbarkeit und die Transparenz ein. Anders als „display:none;“ wird bei „visibility:hidden;“ das Objekt zwar nicht gezeigt, der Platz aber für das Objekt weiterhin freigehalten.

Weiterlesen

Die Außenabstände (Margins) verhalten sich bei CSS ähnlich wie die Innenabstände (Paddings). Der Margin Befehl definiert den Abstand von Elementen zueinander.

Wir sorgen mit dem CSS Befehl Margin zum Beispiel für einen Spalt zwischen zwei „Boxen“. Auch hier können wir wieder die Mischschreibweise verwenden. Zulässig sind Außenabstände nur bei Block-Elementen wie div, p, ul, li, ….

Innenabstände (Paddings) sorgen – wie der Name schon sagt – für die nötigen Abstände zwischen dem Inhalt der „Box“ und dem Rahmen / Ende der Box. Diese sollten nicht verwechselt werden mit den Außenabständen (Margins).

Haben wir beispielsweise eine Box mit blauem Hintergrund und wollen darauf weißen Text setzen, so sollten wir mit dem CSS Befehl einen definierten Innenabstand angeben. Dadurch erscheint der Text nicht direkt am „Rand der Box“. Mit einer „Padding“ Anweisung von 20 Pixeln erzeugen wir beispielsweise einen in vielen Fällen gut zu erkennenden Innenabstand zwischen Text und Rahmen. Das Erscheinungsbild des Textes wird über CSS für Schriften definiert. Um die CSS Datei klein zu halten, verwenden wir hier im Idealfall die Mischschreibweise (siehe unten).

Beispiel

.element {
    padding:20px;
    padding-top:50px;
    padding-bottom:100px;
}

Wir definieren über CSS Befehle ebenfalls den Rahmen von HTML Objekten. Dazu weisen wir diesem mindestens eine Rahmenstärke zu. Um Farbe und Stil des Rahmens zu modifizieren, verwenden wir weitere Befehle. Dazu können wir ebenfalls die Mischschreibweise von CSS nutzen.

Ein Beispiel für einen gemischten Rahmen-Befehl:border:2px dotted red;  (2 Pixel stark, gepunktet, rot)

So reicht eine Anweisung, um Stärke, Farbe und Stil anzugeben. Somit sparen wir uns einige Zeilen CSS Code und halten den Quellcode schlank. Auch ist es mit CSS möglich, bei Rahmen nur bestimmte Seiten anzusprechen. Das funktioniert zum Beispiel so: „border-top:3px solid green;“

Dies versieht den Rahmen am Kopf eines Objektes mit den definierten Eigenschaften zur Darstellung. In diesem Fall handelt es sich um einen durchgezogenen, 3 Pixel starken, grünen Rahmen. Per CSS Anweisung können bei Rahmen Innenabstand und Außenabstand festgelegt werden, damit Inhalte, beziehungsweise benachbarte Elemente, sich nicht zu nahe kommen.

Den Rahmen Abrunden können wir mir dem Befehl border-radius.

Beispiel

.element {
    border:3px solid rgb(230,180,40);
    border-top:1px dotted red;
    border-right:3px dashed;
}

Wir haben die Möglichkeit, Schriftart, Schriftgröße, -dicke, Farbe und Ausrichtung sowie die „Fallback-Schriftart“ zu definieren. Letztere nutzt der Browser nach Möglichkeit, falls die gewünschte Schrift nicht auf dem Computer des Benutzers installiert ist.

Mit speziellen Anweisungen ist es möglich, Text einzurücken oder die Groß- und Kleinschreibung zu erzwingen und zu steuern. Dadurch kann der Text in Normalschrift geschrieben werden. Er wird lediglich via CSS in Großbuchstaben oder Kleinbuchstaben umgewandelt – somit indiziert Google den Text in Normalschrift. Folgende CSS Befehle passen Schrift und Texte an:

Weiterlesen