Formatierungen und Styles
Soweit haben wir jetzt schon das wesentliche für den Aufbau einer Webseite gelernt, aber im Grunde ist diese Seite immer noch leblos.
Da passt eine Schriftart nicht, hier eine Schriftgrösse, die Ausrichtung der Texte ist unschön und überhaupt könnte da mehr Farbe rein.
Wir Ihr ja schon erfahren habt, gibt es dafür einige Tags, mit denen man formatieren kann.
Doch halt! Bevor Ihr jetzt anfangt, alle Tags wild auszuprobieren: Die folgenden Tags machen nach dem heutigen Stand noch Sinn...
<b></b> oder
<strong></strong> (Formatiert den folgenden Text fettgedruckt)
<br /> (Erzeugt einen Zeilenumbruch)
<div></div> (Beschreibt einen zusammenhängenden Textbereich. Dieser beginnt in einer neuen Zeile und kann mittels CSS formatiert werden)
<h1></h1> - <h6></h6> (Erstellt Überschriften in der Ordnung H1 bis H6)
<hr> (Erzeugt eine horizontale Trennlinie. Damit kann man Fliesstext besser optisch trennen)
<i></i> (Stellt den nachfolgenden Ttext kursiv (italic) dar)
<li></li> (Stellt den nachfelden Text als Liste dar)
<p></p> (Erzeugt für den folgende Text einen eigenen Absatz)
<s></s> oder
<strike></strike> (Markiert den folgenden Text als durchgestrichen)
<span></span> (Erstellt einen zusammengehörenden Text, den man gemeinsam formatieren kann)
<u></u> (Formatiert den folgenden Text unterstrichen)
... die folgenden Tags jedoch weniger
<center></center> (Rückt den folgenden Text in die Mitte der Zeile)
<color></color> (Färbt einen Text in einer anderen Farbe ein)
<font></font> (Legt die Formatierung über Fontart, -Farbe und -Größe für den nachfolgenden Text fest)
Wie? Werdet Ihr jetzt sicherlich fragen.
Warum denn <center>, <color> und <font> nicht mehr? Gerade diese kann man doch immer wieder einsetzen und sind auch sinnvoll?
Ja, die Formatierungen sind nach wie vor sinnvoll, aber in dieser Form zu umständlich! Glaubt Ihr nicht?
Dann werde ich Euch jetzt in einen Bereich führen, der CSS heisst und wesentlich mehr Möglichkeiten bietet, als die oben genannten Tags zusammen.
Glaubt Ihr nicht? Wartets ab!
Zunächst wieder ein kleiner Exkurs:
Es wurde z.B. eine neue Webseite kreiert, die mehrere Seiten, Frames, Tabellen und Bereiche beinhaltet. Alles wurde mit Liebe gestaltet, die oben genannten Tags fleissig verwendet.
Nach einer Weile ist die Seite zu langweilig geworden oder es sollen einfach nur Ergänzugen, bzw. weitere Seiten hinzukommen. Und die ganze umständliche Arie mit den Formatierungen geht wieder von vorne los.
Wer bis hierher schon angefangen hat, seine eigene Webseite zu erstellen, wird jetzt sicherlich aufhorchen, wenn ich behaupte:
Formatierungen können wesentlich einfacher und zentaler erstellt werden, als jeden Bereich einer Webseite immer wieder neu zu formatieren.
Was? Wie? Wo? Gibts doch nicht!
Doch, und zwar mit Styles!
Hier ein Beispiel, wie ein Style definiert wird und damit wieder zurück zu unseren Kurs:
<style type="text/css" media="screen">
<!--
body
{ background-image:url(back.jpg); padding:10px; }
{ font-size:20px; font-family:"Arial Black",Arial,sans-serif; color:#73FBE7; }
-->
</style>
Dieser Bereich muss im Kopfteil einer Webseite definiert werden, das sollte aber jetzt auch schon jeder wissen, oder?
Nachdem die Inhalte der letzten Beiträge nun wieder ins Gedächtniss gerufen wurden, will ich erklären, was in diesem Beispiel passiert und warum wir überhaupt mit Styles arbeiten, bzw. worin die Vorteile liegen.
Zunächst einmal wird mit dem Beginn des Blocks definiert, daß sich dieser Code-Teil um CSS-Code handelt ("text/css"), die "Platzhalter" <!-- und --> begrenzen den Code-Block.
Was dazwischen folgt, definiert für die diversen Objekte innerhalb einer Webseite alle Formatierungen.
Hier wird der Rumpfteil mit einem angegebenen Hintergrundbild und einer Schriftgrösse in entsprechender Schriftart und -farbe versehen.
Ja, warum denn hier definieren, für <body> kann ich doch auch der HTML-Tag verwenden?
Richtig, aber dieses ist nur ein Beispiel und das kann eben für alle Objekte verwendet werden.
So kann man z.b. die Form, Farbe, Grösse und Schrift von Links ändern (für die gesamte Webseite oder nur für bestimmte Links), Schriftformatierungen für die gesamte Seite vorgeben, Frames formatieren und vieles mehr.
Hier mal ein Auszug aus der aktuellen Styles-Datei zu diesem Forum:
body {
background-color: #E5E5E5;
scrollbar-face-color: #E6D7C7;
scrollbar-highlight-color: #FFFFFF;
scrollbar-shadow-color: #CED3D7;
scrollbar-3dlight-color: #BEC4CF;
scrollbar-arrow-color: #006699;
scrollbar-track-color: #EEEEEE;
scrollbar-darkshadow-color: #DD9999;
}
font,th,td,p { font-family: Verdana, Arial, Helvetica, sans-serif }
a:link,a:active,a:visited { color : #006699; }
a:hover { text-decoration: underline; color : #DD6900; }
hr { height: 0px; border: solid #BEC4CF 0px; border-top-width: 1px;}
p, td { font-size : 11px; color : #000000; }
h1,h2 { font-family: "Trebuchet MS", Verdana, Arial, Helvetica, sans-serif; font-size : 22px; font-weight : bold; text-decoration : none; line-height : 120%; color : #000000;}
.bodyline { background-color: #FFFFFF; border: 1px #DD9999 solid; }
.forumline { background-color: #FFFFFF; border: 1px #000099 solid; }
.adminlink { background-color: #F0F8FF; border: 1px #000099 solid; }
td.row1 { background-color: #EEEEEE; }
td.row2 { background-color: #CED3D7; }
td.row3 { background-color: #BEC4CF; }
td.row4 { background-color: #E6D7C7; }
th {
color: #0000FF; font-size: 11px; font-weight : bold;
background-color: #E6D7C7; height: 25px);
}
td.cat,td.catHead,td.catSides,td.catLeft,td.catRight,td.catBottom {
background-color:#CED3D7; border: #FFFFFF; border-style: solid; height: 28px;
}
td.cat,td.catHead,td.catBottom {
height: 29px;
border-width: 0px 0px 0px 0px;
}
th.thHead,th.thSides,th.thTop,th.thLeft,th.thRight,th.thBottom,th.thCornerL,th.thCornerR {
font-weight: bold; border: #FFFFFF; border-style: solid; height: 28px;
}
td.row3Right,td.spaceRow {
background-color: #BEC4CF; border: #FFFFFF; border-style: solid;
}
.gen { font-size : 12px; }
.genmax { font-size : 16px; }
.genmed { font-size : 11px; }
.gensmall { font-size : 10px; }
.gen,.genmed,.gensmall { color : #000000; }
a.gen,a.genmed,a.gensmall { color: #006699; text-decoration: none; }
a.gen:hover,a.genmed:hover,a.gensmall:hover { color: #DD6900; text-decoration: underline; }
.mainmenu { font-size : 11px; color : #000000 }
a.mainmenu { text-decoration: none; color : #006699; }
a.mainmenu:hover{ text-decoration: underline; color : #DD6900; }
.cattitle { font-weight: bold; letter-spacing: 1px; color : #006699}
a.cattitle { text-decoration: none; color : #006699; }
a.cattitle:hover{ text-decoration: underline; }
.forumlink { font-weight: bold; font-size: 12px; color : #006699; }
a.forumlink { text-decoration: none; color : #006699; }
a.forumlink:hover{ text-decoration: underline; color : #DD6900; }
.nav { font-weight: bold; font-size: 11px; color : #000000;}
a.nav { text-decoration: none; color : #006699; }
a.nav:hover { text-decoration: underline; }
.topictitle,h1,h2 { font-weight: bold; font-size: 11px; color : #000000; }
a.topictitle:link { text-decoration: none; color : #006699; }
a.topictitle:visited { text-decoration: none; color : #5493B4; }
a.topictitle:hover { text-decoration: underline; color : #DD6900; }
input,textarea, select {
color : #000000;
font: normal 11px Verdana, Arial, Helvetica, sans-serif;
border-color : #000000;
}
input.post, textarea.post, select {
background-color : #FFFFFF;
}
input { text-indent : 2px; }
input.button {
background-color : #EEEEEE;
color : #000000;
font-size: 11px; font-family: Verdana, Arial, Helvetica, sans-serif;
}
"Ui! Das ist doch viel zu kompliziert, das lerne ich nie!"
Wird jetzt sicherlich jeder ausrufen (wollen), aber keine Angst, das ist wirklich alles deutlich leichter, als es hier dargestellt ist, man kann dafür nämlich Grundregeln aufstellen und nach einer kurzen Erklärung, wie Styles arbeiten, dürfte das Meiste dieses Beispieles schon klarer erscheinen.
Fangen wir also mit den CSS-Grundlagen an:
Jeder HTML-Tag ist als Objekt für eine CSS-Definition geeignet. Also kann ich z.B. den Tag < b > mit einer CSS-Definition belegen. Falsch!
Nicht alle Tags sind CSS-fähig!
Was? Wieso? Verwirrung!
Erste Grundregel: Vereinfacht gesagt, können nur solche HTML-Tags mit CSS formatiert werden, die selber keine Formatierungen darstellen.
Also sind Tags wie
und weitere ausgenommen.
Man kann auch sagen: Überall, womit ich Text in eine andere Form und Farbe bringe, lässt sich CSS nicht anwenden.
Es macht ja schliesslich auch keinen Sinn, den Tag für Fettschrift nochmal zu formatieren, oder?
Also wären da z.B. die Tags <body>, <input> und <table> (um nur ein paar Beispiele zu nennen) sowie deren zugehörenden Objekt-Tags (Tags, die zusammengenommen z.B. eine Tabelle erstellen können und dazu dem Tag <table> untergeordnet sind) CSS-fähig (In den Beiträgen zu Tabellen und Formularen geht dieser Kurs auch noch eingehender darauf ein, wo und wie mit CSS gearbeitet werden kann).
Hieraus ergibt sich die zweite Grundregel:
Wird in einer CSS-Definition ein Tag und dessen zugehörenden Objekt-Tags mit Definitionen beschrieben, so wird diese CSS-Formatierung immer bei Verwendung dieses Tags eingesetzt. Man stellt somit eine Standard-Formatierung her.
In unserem Beispiel geschieht das z.B. für Links mittels
a.nav { text-decoration: none; color : #006699; }
Hier wird definiert, das jeder Link, der mit dem Tag <a> erstellt wird und eine Klasse <nav> enthält, ohne Unterstreichung (text-decoration: none) und in bläulicher Schrift (color: #006699) erstellt werden soll.
Was sind denn nun wieder Klassen?
Genau das macht CSS aus: Es werden Klassen erstellt, die man vordefiniert und für bestimmte Tag das Standard-Format vorgeben oder beliebig auf Tags angewandt werden können. Jede Zeile in dem obigen Beispiel ist eine Definition von Klassen.
Würde man nun diese Beispiel-Definition ohne ".nav", also nur für <a> erstellen, so würden grundsätzlich alle Links mit dieser Formatierung angezeigt, ausser, man verwendet dann eine andere CSS-Klasse.
So wurde zusätzlich ein Bezeichner "nav" hinzugefügt, der als Klassendefinition in einem Link verwendet werden muss, damit dieser die Formatierung erfährt.
Und wie wird dann diese Klasse in den Link eingebunden?
So:
Und das ist dann auch schon das ganze Geheimnis von CSS-Klassen!
Am Ende dieses Kurses werdet Ihr alle wichtigen HTML-Tags kennengelernt haben und könnt dann auch für die entsprechenden Tags CSS-Klassen erstellen. Vorher aber nochmal zur Verdeutlichung den genauen Aufbau einer Klasse:
Variante 1:
.Klasse { Definition/Formatierung }
Hiermit wird eine Klasse erstellt, die in jedem HTML-Tag (wie gesagt: ausser den formatierenden Tags!) mittels "class=" verwendet werden können.
Variante 2:
HTML-Tag.Klasse { Definition/Formatierung }
Diese definierte Klasse gibt nur für den angegebenen Tag und würde bei der Verwendung innerhalb eines anderen Tags keine Auswirkung haben.
Die Definitionen müssen immer innerhalb geschweifter Klammern untergebracht werden, also immer zwischen "{" und "}".
Ihr könnt ja schon einmal die Griffe dafür auf der Tastatur üben, denn diese werden oftmals eingesetzt. Wer z.B. C/C++ oder PHP kennt, weiß, wovon ich rede
Was kann nun alles definiert werden? Alles, was auch mit HTML-Tags möglich ist und ein paar Dinge mehr.
Hier eine Übersicht über die wichtigsten (nicht alle möglichen) Formatierungen mittels CSS:
font-family (Schriftart)
Alle Standard-Schriften die installiert sind, können hier angegeben werden. Dabei wird in der Reihenfolge der Angabe geprüft, welche Schrift vorhanden und damit verwendet wird.
Achtung: Ist eine angegebene Schrift auf dem Rechner des Anwenders nicht vorhanden, wird diese durch die nächste angegebene Schrift, wenn keine gefunden wurde durch die Standard-Schrift dessen Systems ersetzt!
Standardschriften sind z.B. 'Times New Roman', Times, Verdana, Arial, Helvetica (bei Times New Roman sollte man die Hochkommas setzen, um Fehler zu verweiden)
Dazu kann man auch sogenannte generischen Schriftarten angeben, die, nachdem keine der angegebenen Schriften gefunden wurde, verwendet werden. Diese Schriften sind fest vorgegeben und heissen wie folgt:
serif = eine Schriftart mit Serifen,
sans-serif = eine Schriftart ohne Serifen,
cursive = eine Schriftart für Schreibschrift,
fantasy = eine Schriftart für ungewöhnliche Schrift,
monospace = eine Schriftart mit dicktengleichen Zeichen.
font-style (Schriftstil)
italic = Schriftstil kursiv
normal = normaler Schriftstil
font-size (Schriftgrösse)
xx-small = winzig.
x-small = sehr klein.
small = klein.
medium = mittel.
large = groß.
x-large = sehr groß.
xx-large = riesig.
smaller = sichtbar kleiner als normal.
larger = sichtbar größer als normal.
font-weight (Schriftgewicht)
bold = fett.
bolder = extra-fett.
lighter = dünner.
font-strech (Zeichenabstand)
wider = weiter als normal.
narrower = enger als normal.
condensed = gedrängt.
semi-condensed = halb gedrängt.
extra-condensed = stark gedrängt.
ultra-condensed = extrastark gedrängt.
expanded = geweitet.
semi-expanded = halb geweitet.
extra-expanded = stark geweitet.
ultra-expanded = extrastark geweitet.
normal = normale Laufweite.
font (Schrift allgemein)
Hier kann man mehrere Definitionen hintereinander packen, um nicht die komplexeren vorangangenen Definitionen verwenden zu müssen.
text-decoration (Textdekoration - Optische Hervorhebungen)
underline = unterstrichen.
overline = überstrichen.
line-through = durchgestrichen.
blink = blinkend.
none = normal (keine Text-Dekoration).
color (Schriftfarbe)
vertical-align (vertikale Ausrichtung)
top = obenbündig ausrichten.
middle = mittig ausrichten.
bottom = untenbündig ausrichten.
sub = tieferstellen (ohne die Schriftgröße zu reduzieren).
super = höherstellen (ohne die Schriftgröße zu reduzieren).
text-align (horizontale Ausrichtung)
left = linksbündig (Wird auch ohne Angabe verwendet - Standard)
center = zentriert
right = rechtsbündig
justify = Blocksatz
white-space (Textumbruch)
normal = automatischer Zeilenumbruch (wie bei allen HTML-Tags außer <pre> und <nowrap>).
pre = Zeilenumbruch wie im Editor eingegeben (so wie bei <pre>...<pre>).
nowrap = Kein automatischer Zeilenumbruch, Umbruch möglich durch entsprechende HTML-Tags.
margin (Abstand eines Objektes zum Fenster/Frame/Objektrand für alle Seiten, wobei in der Reihenfolge oben rechts unten links formatiert wird)
padding (Abstand eines Objektesinhaltes zum Objektrand für alle Seiten im gleichen Umfang)
border-width (Dicke eines Rahmens um ein Element - beim Internet Explorer muss dazu border-style mit angegeben werden!)
thin = dünn.
medium = mittelstark.
thick = dick.
border-xxx-color (Rahmenfarbe)
border-top-color definiert die Rahmenfarbe für oben,
border-left-color die Rahmenfarbe für links,
border-right-color die Rahmenfarbe für rechts,
border-bottom-color die Rahmenfarbe für unten.
border-style (Rahmenart - kann ebenfalls mit den Zusätzen top, left, right und bottom verwendet werden)
none = kein Rahmen (bzw. unsichtbarer Rahmen).
hidden = kein Rahmen (bzw. unsichtbarer Rahmen).
dotted = gepunktet.
dashed = gestrichelt.
solid = durchgezogen.
double = doppelt durchgezogen.
groove = 3D-Effekt.
ridge = 3D-Effekt.
inset = 3D-Effekt.
outset = 3D-Effekt.
border (Stellt die Zusammenfassung o.g. Border-Formatierungen dar)
background-color (Hintergrundfarbe)
background-image:url () (Hintergrundbild)
:link, :visited, :hover, :active (Pseudoformate für Links - Verweise. Die Reihenfolge ist so einzuhalten!)
link = allgemein
visited = besucht
hover = unter Mauszeiger
active = gerade aufgerufen
top (Startposition von oben)
left (Startposition von links)
bottom (Startposition von unten)
right (Startposition von rechts)
width (Breite)
min-width (Mindestbreite)
max-width (Maximalbreite)
height (Höhe)
min-height (Mindesthöhe)
max-height (Maximalhöhe)
display (Anzeigeart bzw. Nichtanzeige ohne Platzhalter)
block = Erzwingt einen Block - das Element erzeugt eine neue Zeile.
inline = Erzwingt die Anzeige im Text - das Element wird im laufenden Textfluss angezeigt.
list-item = wie block, jedoch mit einem Aufzählungszeichen.
none = Element wird nicht angezeigt und es wird auch kein Platzhalter freigelassen.
visibility (Anzeige bzw. Nichtanzeige mit Platzhalter)
hidden = Der Inhalt des Element wird zunächst versteckt
visible = Der Inhalt des Element wird zunächst angezeigt
cursor (Verändert den Mauszeiger)
auto = automatischer Cursor (Normaleinstellung).
default = Plattformunabhängiger Standard-Cursor.
crosshair = Fadenkreuz.
pointer = Zeiger.
move = Kreuz zum Bewegen des Elements.
text = Textmarke.
wait = Wartesymbol.
help = Hilfesymbol.
url("Datei") = Beliebiger Cursor, "Datei" sollte GIF- oder JPG-Grafik sein.
scrollbar-base-color = Basisfarbe der Scroll-Leiste
scrollbar-3dlight-color = Farbe für 3D-Effekte
scrollbar-arrow-color = Farbe für Verschiebepfeile
scrollbar-darkshadow-color = Farbe für Schatten
scrollbar-face-color = Farbe für Oberfläche
scrollbar-highlight-color = Farbe für oberen und linken Rand
scrollbar-shadow-color = Farbe für unteren und rechten Rand
scrollbar-track-color = Farbe für freibleibenden Verschiebeweg
Definiert wird innerhalb der Klammern immer mit o.g. Formatierungen, gefolgt von einem Doppelpunkt und dem entsprechenden Wert.
Getrennt werden die Formatierungen mit einem Semikolon ";".
So könnte folgendes definiert werden:
a.nav {color: #FF0000; backgound-color: #00FFFF }
Ihr könnt ja mal versuchen, was das bedeutet, mehr wird auch an dieser Stelle mal wieder nicht verraten.
Doch wo setze ich nun, nachdem ich diese Massen an Formatierungsmöglichkeiten kenne, an und definiere das Ganze?
Da gibt es 3 Punkte, an denen Styles definiert werden können:
Mit Hilfe einer externen Datei (Sollte sinnigerweise .css als Dateiendung haben)
Hierzu werden in eine neue Datei alle Formatierungen aufgeführt. Diese müssen nicht mit <style></style> umschlossen werden und auch kein <html>-Tag tragen. Eingebunden wird diese Datei mittels <link>, wie in einem vorherigen Beitrag beschrieben.
Hiermit kann man die CSS-Definitionen zentral für die gesamte Webseite ablegen, auch wenn diese aus mehreren Dateien bestehen sollte. Ein Einbinden mittels <link> genügt dann, ohne den Definitionsblock wiederholen zu müssen. Dadurch wird die Webseite beschleunigt, da die Definitionsdatei nur einmal geladen wird!
Innerhalb eines HTML-Dokumentes im Kopfbereich
Es gibt das gleiche, wie für die externe Datei, jedoch muss dieser Block dann mit <style></style> umschlossen werden.
Innerhalb einzelner HTML-Tags
Dabei wird im öffnenden Tag (bei Links innerhalb des Tags <a>) mittels der Anweisung "style=" die CSS-Formatierung erstellt und gleichzeitig auch verwendet.
Und wie verwende ich eine per externer Datei oder im Kopfteil definierte CSS-Formate?
Wer es nicht vergessen hat:
Mittels dem Aufruf "class=" analog "style=" innerhalb des öffnenden HTML-Tags bei global erstellten, also Tag-losen Klassen, bzw. ohne diese Angaben, wenn der Tag grundlegend mittels CSS formatiert und auch so dargestellt werden soll.
Selbstverständlich kann man diese Format-Vorgaben auch mittels einer anderen Klasse oder den bekannten HTML-Tags umformatieren.
So, das zu den CSS-Formaten. Zu bedenken ist dabei zuletzt noch, daß immer nur ein Tag oder ein mit einem Tag wie <span> umschlossener Textblock komplett mittels den CSS-Anweisungen formatiert wird, solange man innerhalb des Textes die Formatierung nicht anders definiert.
Mit <span> sähe das z.B. so aus:
<span class="CSS-Klasse">Text</span>
<span style="CSS-Formatierungen">Text</span>
Gut. Damit wir jetzt auch endlich mal vorwärts kommen, gehen wir im nächsten Beitrag eine weitere Möglichkeit durch, Text auf der Webseite zu positionieren, bzw. die Positionen festzulegen: Die Tabellen unter HTML.