Kurs:Die erste eigene Website/CSS/Grundprinzip

Diese Seite ist für die Zielgruppe nicht leicht verständlich. Hilf mit, den Text verständlicher und einfacher lesbar zu machen, indem du z. B. die Fachwörter erklärst und mehr Praxis in den Text bringst.

Style-Sheets-Einbinden

Die Datei, die in diesem Dokument mit dem Link-Tag eingebunden wurde heißt hier style.css. Sie enthält die Informationen, wie die Datei im Browser wiedergegeben werden soll. Der Inhalt hätte auch mit dem Style-Tag direkt eingebunden werden können. Das auslagern in eine andere Datei hat jedoch den Vorteil, dass die Datei auch von anderen (X)HTML-Dokumenten geladen werden kann und somit muss man die CSS-Informationen nicht in jedem Dokument ändern, wenn man das gesamte Design ändern möchte. Ein Stylesheet wird im Head-Tag eingebunden, und zwar so: <link rel="stylesheet" href="style.css"> Das funktioniert allerdings nur, wenn style.css im selben Ordner wie das HTML-Dokument liegt.

Kommentare

Man kann in einer Style-Sheets-Datei auch Kommentare einfügen. Einen Kommentar startet man mit /* und beendet man mit */.

Tag auswählen

Es gibt verschiedene Methoden um Tags einzubinden.

Eine Möglichkeit ist Formatierungen für alle Tags der selben Art festzulegen, indem man den Elementnamen selbst vor die Klammer schreibt.
Es ist auch möglich, alle Tags mit einer bestimmten ID zu formatieren, indem man eine Raute (#) und direkt dahinter die ID schreibt.
Außerdem ist es noch möglich, dass man Tags mit einem Extranamen für die Formatierung auswählt, den man mit dem Attribut class und mit einem Punkt unmittelbar vor dem class-Namen einfügt.

Variante 1

body { /* CSS-Angaben für das gesamte Dokument */ }
h1 { /* CSS-Angaben für Überschriften ersten Grades */ }
a { /* CSS-Angaben für Links */ }

Variante 2

<ELEMENT id="ID"></ELEMENT>

ELEMENT muss durch den Element-Namen ersetzt werden und ID durch die gewählte ID für diesen Tag.

#menue { /* CSS-Angaben für Tags mit der id: menue */ }
#content { /* CSS-Angaben für Tags mit der id: content */ }

Variante 3

<ELEMENT class="NAME"></ELEMENT>

ELEMENT muss durch den Element-Namen ersetzt werden und NAME durch den gewählten Namen für diesen Tag.

.wichtig { /* CSS-Angaben für Tags mit dem class-inhalt: wichtig */ }
.neu { /* CSS-Angaben für Tags mit dem class-inhalt: neu */ }

Eigenschaften

Die Eigenschaften, die man für die jeweiligen Tags festlegen möchte haben immer die Selbe Struktur: Sie bestehen zuerst aus dem Eigenschaftsnamen, einem Doppelpunkt, einer Eigenschaft und einem Semikolon. Der Übersicht halber kann man hinter dem Doppelpunkt auch noch ein Leerzeichen einfügen.

NAME: WERT;

Eine Eigenschaft ist beispielsweise color zum ändern der Schriftfarbe. Wenn man nun die Schriftfarbe des gesamten Dokuments ändern möchte fügt man in die Style-Sheets-Datei folgende Zeile ein:

body { color: red; }

Angabe von Farben

In dem Fall ist der Wert der Eigenschaft eine Farbe. Farben können auf verschiedene Weisen eingegeben werden: Durch den Namen, der wenigen benannten Farben, oder durch die Eingabe von Farbinformationen mittels Zahlen für die Farbwerte von rot, grün und blau. Das erfolgt durch die Angabe von Hexadezimalzahlen nach folgendem Schema:

Man fügt eine Raute (#) ein, daran schließt sich direkt eine zweistellige Hexadezimalzahl für Rot, dann für Grün und schließlich für Blau an. Ein intensives Blau kann man beispielsweise mit #0000FF angeben.

Das gleiche System funktioniert auch mit jeweils einer Stelle. Dann ist jedoch die Farbvielfalt geringer.

Eine weitere Methode ist das Verwenden des Schemas rgb(R,G,B), wobei für R, G und B die Farbangaben für Rot, Grün und Blau eingesetzt werden müssen. Das kann in Prozent oder in Dezimalzahlen von 0 bis 255 geschehen. Das Blau könnte man somit auch mit rgb(0,0,255) angeben.

Es gibt zwei Arten von Farbnamen. Zum einen 16 Grundfarben, die feste Werte haben und zum anderen relative Farbangaben.

Die 16 Grundfarben:

██ Schwarz = black (Entspricht #000000)

██ Grau = gray (Entspricht #808080)

██ Silber = silver (Entspricht #C0C0C0)

██ Weiß = white (Entspricht #FFFFFF)

██ Dunkelrot = maroon (Entspricht #800000)

██ Rot = red (Entspricht #FF0000)

██ Dunkelgrün = green (Entspricht #008000)

██ Grün = lime (Entspricht #00FF00)

██ Dunkelblau = navy (Entspricht #000080)

██ Blau = blue (Entspricht #0000FF)

██ Dunkellila = purple (Entspricht #800080)

██ Lila = fuchsia (Entspricht #FF00FF)

██ Dunkeltürkies = teal (Entspricht #008080)

██ Türkies = aqua (Entspricht #00FFFF)

██ Dunkelgelb = olive (Entspricht #808000)

██ Gelb = yellow (Entspricht #FFFF00)

Einheiten für Größenangaben

Es gibt verschiedene Einheiten, in denen die Größe von etwas angegeben werden kann.

Absolute Angaben

Das sind Größenangaben, die sich auf feste Größen beziehen. Das sind

Zentimeter (cm ),
Millimeter (mm) und
Inch (in), sowie
Punkte (pt) = 1/72 Inch und
Pica (pc).

Diese Angaben haben den Nachteil, dass dadurch auf verschiedenen Bildschirmen eine unterschiedlich große Fläche ausgefüllt wird. Erstellt man die Seite auf einem kleinen Bildschirm mit absoluten Angaben, sieht die Seite auf einem großen Bildschirm winzig aus. Erstellt man sie aber für einen großen Bildschirm, muss man auf einem kleinen viel scrollen.

Sinnvoller sind absolute Angaben beim Gestalten der Druckversion, wo beispielsweise Pixel nicht so praktisch sind.

Wenn man auch Kommastellen angeben möchte, kann man das durch einen Punkt anstatt des in Deutschland üblichen Kommas machen.

Relative Angaben

Eine der bekanntesten dürfte die Angabe in Prozent sein. Sie lässt sich einfach mit einem Prozentzeichen (%) angeben. Dabei bezieht sich die Angabe, je nach CSS-Eigenschaft, entweder auf das eigene Element, das Elternelement, oder das gesamte Dokument. Prozentangaben eigenen sich vor allem für Breiten und Höhenangaben, z.B. von irgendwelchen Boxen mit unterschiedlichen Funktionen, dafür weniger gut für die Festlegung von z.B. der Rahmendicke.

Eine andere gute Einheit ist die relative Schriftgröße (em). Sie ergibt sich aus der Schriftgröße des Elements oder, bei der Festlegung der Schriftgröße selber, aus der Schriftgröße des Elternelements. Das ist insofern praktisch, als dass dies dem Besucher der Seite ermöglicht, eine für ihn gut lesbare Schriftgröße zu verwenden (die dieser im Browser festgelegt hat) und es dennoch möglich macht, z.B. die Schriftgröße von Überschriften noch größer zu wählen. Hier sind die oben genannten Kommastellen sehr hilfreich, da 2 ja schon die Doppelte Schriftgröße wäre, was teilweise sehr groß wird. Die Kommastellen werden, wie bei den absoluten Angaben, mit einem . abgetrennt.

Dann gibt es auch noch die Pixel (px). Sie sind nur in sofern Relativ, als dass sie von der Einstellung des Bildschirms abhängen. Einige verwenden vielleicht 800 x 600 px, andere vielleicht 1280x800, 1600x1200 oder sogar 2048x1536. Um so größer die Auflösung, umso kleiner werden die in Pixeln angegebenen Werte und umgehert. Hier kann daher auch das Problem des unnötigen und lästigen Scrollens auftreten, wie bei den Absoluten Angaben. Sehr gut ist diese Angabe jedoch für kleine Werte, wie dünne Rahmen, oder Trennstriche.

Außerdem gibt es noch die Angabe ex, die der Angabe em ähnelt, aber sich konkret auf die Höhe des Zeichens x bezieht.

Formatierungsmöglichkeiten

Tag	Formatierungsmöglichkeiten	Sinn	Beispiel
background-color	Englische Farbe ("blue") oder Code ("#0000FF")	Hintergrundfarbe	background-color: "blue"	=	Blau
font-color	Englische Farbe ("red") oder Code ("#FF0000")	Schriftfarbe	color: "red"	=	Rot
font-size	Angabe in relativer("1,5em") oder absoluter("20pt") Größen	Schriftgröße	font-size: "20pt"	=	Groß!
font-family	Schriftart("Comic Sans MS") ggf Alternative(,Arial")	Schriftart	font-family: "Comic Sans MS,Arial"	=	Schöne Schrift
font-weight	fett("bold"), kursiv("italic")	Schrifverzierungen	font-weight: "bold"	=	Fett
align	Links("left"), Mitte("center"), Rechts("right")	vertikale Ausrichtung	align: "center"	=	Zentriert
valign	oben("top"), Mitte("middle"), unten("bottom")	horizontale Ausrichtung	font-valign: "top"	=	<font-valign:"top">Oben
line-height	Angabe in relativer("60%") oder absoluter("600pt") Größen	Zeilenabstand	line-height: "150%"	=	hier klicken
width	Angabe in relativer("60%") oder absoluter("600pt") Größen	Breite	width: "50%"	=	hier klicken
height	Angabe in relativer("60%") oder absoluter("600pt") Größen	Höhe	height: "75%"	=	hier klicken