CSS – Eine “Formelsammlung für Dich”

css_formelsammlung

Auch aus der wunderbaren Welt von CSS möchte ich Dir heute einige “Befehle” etwas näher bringen. Wie auch schon in der HTML-Formelsammlung werde ich die Befehle in Kategorien unterteilen und Dir dann ihre Funktion erklären! Vorab möchte ich Dir schon einmal sagen, dass Du hier nicht alle CSS-Befehle finden wirst, da dies einfach den Rahmen des Tutorials sprengen würde. Ich werde nur die CSS-Befehle auflisten, die ich meiner Meinung nach wichtig finde und die auch regelmäßig genutzt werden.

CSS – Was soll ich denn damit?

Mit CSS kannst Du deine Internetseite im Browser “verschönern” und besser strukturieren. Mit folgendem Befehl

<link rel="stylesheet" type="text/css" href="mein_stylesheet.css">

verlinkst Du deine CSS-Datei mit der HTML-Datei, für die es gedacht ist. Es ist viel einfacher und auch übersichtlicher, das ganze “Styling” deiner Internetseite in einer externen Datei vorzunehmen, als alle Befehle mitten in den HTML-Code zu schreiben. Dann müsstest Du auch für jede Änderung immer und immer wieder das passende Codestück suchen. Die Abkürzung CSS steht für Cascading Style Sheets.

Vorab möchte ich mich bei Dir für die etwas “chaotische” Formatierung dieses Artikels entschuldigen. Da es mir nur bedingt möglich ist, das in dem Text verwendete CSS zu verändern bzw. anzupassen, konnte ich die Tabellen nicht besser anordnen.

Den Text verschönern mit CSS

color: #000000;
verändert die Schriftfarbe. Hierbei kann der Farbwert nicht nur als HEX-Code, sonder auch als rgb(0, 0, 0) angegeben werden.
font-family: Georgia;
definiert die Schrift eines Absatzes. Einige Schriften, die aus mehreren Wörtern bestehen (wie zum Beispiel “Arial Black”) müssen in Anführungszeichen geschrieben werden, da der Browser sonst zwei Schriften (“Arial” und “Black”) daraus macht.
font-size: 16px;
sagt dem Browser, in welcher Größe er den Text schreiben soll. Du kannst die Größenangaben in Pixeln (=px), Ems (=em), Points (=pt) oder Prozent (=%) angeben.
font-style: italic, oblique, normal;
weißt einem Text den Stil zu. Italic und oblique stehen hierbei für kursive Schrift. Der Wert normal weißt dem Absatz die Standard-Definition zu.
font-weight: bold, normal;
erzeugt bei dem betroffenen Text Fettdruck, oder setzt das “Schriftgewicht” auf den Standard zurück.
letter-spacing: 1.5em;
Bestimmt den Abstand der Buchstaben, die sich in dem betroffenen Absatz befinden.
line-height: 1.5;
bestimmt die Zeilenhöhe in einem Textabsatz. Diese ist besonders für die Leserlichkeit des Textes sehr wichtig. Die Angabe der line-height kann als Zahl, aber auch in Prozent angegeben werden.
text-align: left, right, center, justify;
text-align: left: Der betroffene Text wird linksbündig gesetzt.text-align: right: Der betroffene Text wird rechtsbündig gesetzt.

text-align: center: Der betroffene Text wird zentriert gesetzt.

text-align: justify: Der betroffene Text wird in Blocksatz geschrieben.

text-decoration: underline, overline, line-through;
text-decoration: underline:Unterstreicht den betroffenene Text.

text-decoration: overline:Überstreicht den betroffenen Text.

text-decoration: line-through:Durchstreicht den betroffenen Text.

text-transform: uppercase, lowercase, capitalize;
text-transform: uppercase: Jeder Buchstabe ist ein Großbuchstabe.

text-transform:lowercase:
Jeder Buchstabe ist ein Kleinbuchstabe.

text-transform: capitalize: Der erste Buchstabe jedes Wortes ist ein Großbuchstabe.

word-spacing: 1.5em;
Bestimmt den Abstand der Wörter voneinander, die sich in dem betroffenen Text befinden.

Verlinkungen mit Stil

a:active {...}
definiert das Aussehen eines momentan aktiven (im Regelfall der Link, den man zuletzt genutzt hat) Links.
a:hover {...}
definiert das Aussehen eines Links, in dem Moment, in dem man mit dem Mauszeiger über ihn fährt.
a:link {...}
definiert das Aussehen eines normalen Links.
a:visited {...}
definiert das Aussehen eines bereits besuchten Links.

Hübsche Listen erleichtern das abarbeiten

list-style-image: url(mein_bild.png);
ist dafür vorgesehen, um eine eigene Bild-Datei als Aufzählungszeichen für Listen zu benutzen.
list-style-position: outside, inside;
bestimmt, ob die Aufzählungszeichen der Liste innerhalb oder außerhalb der Listenelemente erscheinen.
list-style-type: (siehe Beschreibung);
none: sorgt für kein Aufzählungszeichen.

disc:
sorgt für einen gefüllten Kreis als Aufzählungszeichen.

circle:
sorgt für einen nicht-ausgefüllten Kreis als Aufzählungszeichen.

square:
sorgt für ein gefülltes Quadrat als Aufzählungszeichen.

decimal:
nummeriert die Listenelemente mit normalen Zahlen durch.

upper-alpha:
wandelt die Aufzählungszeichen in Großbuchstaben (in alphabetischer Reihenfolge) um.

lower-alpha:
wandelt die Aufzählungszeichen in Kleinbuchstaben (in alphabetischer Reihenfolge) um.

upper-roman:
sorgt für eine Durchnummerierung lateinischer Art (in Großbuchstaben).

lower-roman:
sorgt für eine Durchnummerierung lateinischer Art (in Kleinbuchstaben).

Mit Box-Elementen den Inhalt veranschaulichen

background-color: #FFFFFF;
background-image: url(mein_bild.png);
background-repeat: repeat, repeat-x, repeat-y, no-repeat;
background-position: left/center/right, top/center/bottom;
background-color: weißt einem Box-Element eine Hintergrundfarbe zu.

background-image: weißt einem Box-Element eine Bild-Datei als Hintergrund zu.

background-repeat: sorgt dafür, dass das Hintergrundbild in beide Seiten, nur horizontal/vertikal oder gar nicht wiederholt wird, um das Box-Element zu füllen.

background-position:
bestimmt die Position des Hintergrundbildes eines Box-Elementes. Hierbei müssen immer zwei Angaben gemacht werden. Die erste Angabe für die horizontale Ausrichtung, die zweite Angabe für die vertikale Ausrichtung.

border-color: #000000;
border-style: solid, double, dotted, dashed;
border-top: 1px solid #000000;
border-bottom: 1px solid #000000;
border-left: 1px solid #000000;
border-right: 1px solid #000000;
border-color: weißt einem Rahmen eine Farbe zu.

border-style: solid: Ein einfacher, normaler, durchgezogener Strich dient hier als Rahmen.

border-style: double: Zwei einfache, normale, durchgezogene Striche dienen hier als Rahmen.

border-style: dotted: Ein gepunkteter Strich dient hier als Rahmen.

border-style: dashed:
Ein gestrichelter Strich dient hier als Rahmen.

border-top: bezieht die Style-Angaben nur auf den oberen Rahmen Strich eines Box-Elementes.

border-bottom: bezieht die Style-Angaben nur auf den unteren Rahmen Strich eines Box-Elementes.

border-left: bezieht die Style-Angaben nur auf den linken Rahmen Strich eines Box-Elementes.

border-right: bezieht die Style-Angaben nur auf den rechten Rahmen Strich eines Box-Elementes.

float: left, right;

clear: left, right, both;
float left: Das betroffene Box-Element liegt vorrangig links von anderen Elementen, wie zum Beispiel eines Textabsatzes. Das ist hilfreich, wenn mehrere Elemente nebeneinander erscheinen sollen (zum Beispiel Inhalt und Navigation einer Webseite.)

float right: Das betroffene Box-Element liegt vorrangig rechts von anderen Elementen, wie zum Beispiel eines Textabsatzes.

clear left: Das Umfließen eines links-liegenden Elementes wird gestoppt. Die Elemente befinden sich von da an wieder untereinander.

clear right: Das Umfließen eines rechts-liegenden Elementes wird gestoppt. Die Elemente befinden sich von da an wieder untereinander.

clear both: Das Umfließen von Elementen beiderseits (rechts und links) wird gestoppt. Auch hier befinden sich die Elemente dann wieder untereinander.

margin: 5px 10px 5px 10px;
padding: 10px 3px 9px 6px;
margin: bestimmt den Außenabstand des aktuellen Box-Elementes zu seinem äußeren Element (parent-element). Die Angaben werden in folgender Reihenfolge übernommen: oben, rechts, unten und links.

padding: bestimmt den Innenabstand des aktuellen Box-Elementes zu seinem inneren Element (child-element). Die Angaben werden in folgender Reihenfolge übernommen: oben, rechts, unten und links.

max-width: 500px;
min-width: 50px;

max-height: 300px;
min-height: 30px;
sagt dem Browser, wie groß er das Box-Element maximal (bzw. minimal) vergrößern (bzw. verkleinern) darf.
width: 300px;
height: 100px;
definiert die Höhe und Breite eines Box-Elements. Die Angabe kann hier ebenfalls in Prozent angegeben werden.

Struktur in Daten bringen – mit schönen Tabellen

border-collapse: collapse, separate;
collapse: Die Zellen einer Tabelle liegen dicht aneinander, es ist kein Abstand sichtbar.

separate:
Die Zellen einer Tabelle sind gespalten, es ist ein Abstand zwischen ihnen sichtbar.
empty-cells: show, hide;
show: Zellen in einer Tabelle, die keinen Inhalt haben, werden mit ihrem Rahmen angezeigt.

hide:
Zellen in einer Tabelle, die keine Inhalt haben, werden mit ihrem Rahmen versteckt. Sie sind also “unsichtbar”.
white-space: nowrap;
verhindert, dass Wörter in einer Zeile mittels eines Bindestrichs getrennt werden. Stattdessen wird das betroffene Wort in eine neue Zeile geschrieben.

Ich hoffe, dass Dir dieses Artikel ein wenig geholfen hat, die häufig gebrauchten CSS-Tags zu verstehen. Falls Du Kritik oder auch einen Fehler gefunden hast, schreibe es mir doch bitte in die Kommentare. Ich werde mich dann möglichst schnell darum kümmern.

TIPP: Eine wunderbare CSS-Hilfe ist die Seite CSS4you!

86 Responses to “CSS – Eine “Formelsammlung für Dich””


Leave a Reply