 |
| HTML |
| Der Anfang |
| Tabellen |
| Block |
| Inline |
| Formate |
| Noch mehr? |
| Beispiele |
 |
Herzlich willkommen auf meiner Homepage! Heute ist der |
Formatierungen dienen natürlich in erster Linie dem Zweck, deine Inhalte hübsch, leserlich und übersichtlich zu präsentieren! Dem Besucher deiner Webseite soll gefallen, wie du deine Seite aufgebaut hast, er soll möglichst auf Anhieb erkennen, worum es geht und sich auch schnell mit dem Angebotenen zurecht finden. Und heee... er soll vor allem keinen Augenkrebs und keine epileptischen Anfälle bekommen!
Also bitte immer prüfen, ob es gut lesbar ist, ob die Farbgestaltung passt, ob die Übersichtlichkeit stimmt... na ja, man trifft zwar nicht immer Jedermanns Geschmack, aber wenn es dir selbst gefällt, dann ist das wohl schon ok!
Alle HTML- Elemente bringen irgendeine Formatierung mit. Diese ist in der Programmierung deines Browsers enthalten, kann allerdings von Browser zu Browser unterschiedlich sein.
Es gibt jetzt in HTML mehrere Möglichkeiten diese 'Voreinstellung' nach deinen Wünschen anzupassen. Auf den vorhergehenden Seiten haben wir das ja auch schon ein paar mal gemacht.
Dabei aber bitte beachten, dass einige von diesen Attributen, zumindest in HTML 5, als veraltet und missbilligt gelten und wenn immer möglich durch CSS ersetzt werden sollten. Im Einzelfall solltest du immer prüfen (z.B. bei SelfHTML), welches Attribut für welches Element zulässig ist?
Diese Attribute werden im öffnenden Tag des HTML- Elements notiert - zwischen den einzelnen Attributen muss mindestens ein Leerzeichen stehen.
<a href="eine_internet_adresse" target="_self" title="Ein Hyperlink" id="link1">Beschreibung</a>
Hier mal eine (nicht vollständig) Liste:
align=""alt=""border=""class=""colspan=""height=""id=""rowspan=""style=""tabindex=""target=""title=""width=""Mit einigen der oben aufgelisteten Attribute haben wir uns ja auf den vorhergehenden Seiten schon beschäftigt - vor Allem dem style- und dem class-Attribut solltest du besonders Augenmerk widmen.
Nachteil bei dieser Formatierungsart ist, sie wirkt sich immer nur auf dieses eine HTML- Element aus, wo sie eben eingefügt ist. Wenn man mehrfach die gleiche Formatierung anwenden will, wird dass dann sehr schnell mühsam und unübersichtlich!
Was uns dann gleich zur nächsten Methode der Formatzuweisung bringt...
Was ist ein Stylesheet? Nun - ein Stylesheet ist nichts weiter als eine Liste, in der du HTML- Elementen an einer zentralen Stelle im Dokument die gewünschten Formatierungen zuweisen kannst. So ein Stylesheet sieht so aus:
<style type="text/css">
<!--
Hier werden deine Formatierungen eingefügt!
-->
</style>Bitte dieses <style> </style> nicht mit der Tag-Ergänzung style="" verwechseln. Beides dient zwar der Formatierung, es sind aber zwei unterschiedliche Methoden!
Das sollte dir mittlerweilen aber bekannt vorkommen! Das übliche HTML- Konstrukt <style> </style>, mit dem die Liste geöffnet und geschlossen wird. Dann eine Tag-Erweiterung type="text/css", mit der dem Browser gesagt wird, was in dem folgend Bereich drinsteht.. und dann noch was Neues! Dieses <!-- -->. Das ist die Kennzeichnung für einen Bereich in dem ein Kommentar/ eine Bemerkung steht. Das kann man überall im Dokument benutzen, um eben Kommentare einzufügen, die aber nicht angezeigt werden sollen. Im Falle dieses Stylesheets dient diese Kennzeichnung als Kommentar dem Zweck, dass ältere Browser nicht aus Versehen deine Formatierungen auf dem Bildschirm als Text anzeigen.
Dieses Stylesheet muss/sollte im Kopfbereich (<head> </head>) des Dokumentes stehen, damit es auch für das ganze Dokument wirksam wird. Der Browser arbeitet das Dokument sequentiell ab und alle Anweisungen werden erst dann wirksam, wenn der Browser sie auch gelesen hat.
Aber nun zum Inhalt des Stylesheets.
<head>
...<style type="text/css">
<!--
p {
font-family: 'Times New Roman';
font-size: 18px;
font-style: normal;
font-weight: normal;
color: #000000;
}
-->
</style>...
</head>
Alle CSS- Formatanweisungen sind wie folgt aufgebaut:
Als Erstes steht das Element, für das die Formatierung gelten soll - im Beispiel oben das 'p', also der Textabsatz.
Damit legst du für alle Textabsätze in deinem Dokument, die mit <p> </p> ausgezeichnet sind, die danach stehenden Eigenschaften fest.
Diese Eigenschaften müssen in geschweiften Klammern '{' und '}' eingeschlossen sein!
Die öffnende geschweifte Klammer '{' findest du auf deinem Keyboard mit der Tastenkombination 'Alt Gr' + '7'.
Die schließende geschweifte Klammer '}'mit der Tastenkombination 'Alt Gr' + '0'.
Innerhalb dieser geschweiften Klammern werden dann nacheinander die gewünschten Eigenschaften aufgelistet und jeweils mit einem Semikolon ';' abgeschlossen. Hier ist etwas Vorsicht geboten, CSS ist ein Sensibelchen in Sachen richtiger Schreibweise - was verkehrt geschrieben ist, wird nicht ausgeführt und kann dazu führen, dass auch die folgenden Formatierungen nicht mehr erkannt werden. Aber wenn du dich an folgende einfache Regel hältst, sollte alles gut sein! Vor der Anweisung dürfen beliebig viele Leerzeichen sein, aber in der Anweisung nur Eines, nämlich das Leerzeichen hinter dem Doppelpunkt ':'. Und auch das kann noch weggelassen werden.
Aber zurück zu den Formatierungsanweisungen. Sie beginnen mit einer CSS- Eigenschaft, direkt gefolgt von einem Doppelpunkt. Dann kann ein Leerzeichen folgen und anschließend der Wert, der dieser Eigenschaft zugeordnet werden soll. Wenn der Wert aus einem numerischen Wert und einer Bezugseinheit besteht (z.B. 0.8em), dann ist der Dezimalpunkt (.) nur als Punkt zulässig! Und natürlich darf auch hier kein Leerzeichen sein, es folgt direkt nach der Zahl die Bezugseinheit und das Semikolon als Zeichen, dass diese Anweisung zu Ende ist!
Warum ist das mit den Leerzeichen so wichtig? Nun.. in CSS gibt es auch Wertzuweisungen, die aus mehreren Werten bestehen - z.B.
border: 1px solid #ffffff;
Hier dient das Leerzeichen als Trennungszeichen zwischen den Attributen und genau so würde CSS reagieren, wenn du Leerzeichen an der falschen Stelle einfügst - deine Anweisung würde am Leerzeichen getrennt und CSS versteht dich nicht mehr.
Eine vollständige Liste von CSS- Eigenschaften und was du sonst noch alles wissen solltest, findest du HIER!
Ein paar wenige Formatierungen, eben die, die man sehr oft benutzt will ich dir aber hier auch vorstellen.
Wir fangen mal mit Textformatierungen an.
font-family: Schriftartname1, 'zweite Schrift', Schrift3;font-family: Anweisung deswegen üblicherweise mehrere Schriftarten angegeben. Der Browser arbeitet diese Liste von links nach rechts ab und benutzt die erste ihm bekannte (installierte) Schriftart. Schriftartennamen, die Leerzeichen beinhalten, sind in einfache Anführungszeichen (' ') einzutragen.font-size: Wert;font-style: Wert;normal=normal, italic=kursiv, oblique=schräggestellt
font-weight: Wert;normal=normal, lighter=dünner als Elternelement, bold=fett, bolder=fetter als Elternelement
line-height: Wert;text-align: Wert;left, right, center, justify
color: Wert;red=rot, green=grün, blue=blau, yellow=gelb....#xxxxxx). Das vorgestellte # ist das Kennzeichen, dass der folgende Ausdruck eine Hexadezimal ist. Es folgen 3 Blöcke, bestehend aus je 2 Zeichen, wobei der erste zweistellige Block den Anteil von rot festlegt, der zweite Block den Anteil von grün und der dritte Block den Anteil von blau! Rein optisch vielleicht am ehesten so zu visualisieren #xxxxxx.2563 = 16.777.216 möglicher Farben.#000000 entspricht der Farbe schwarz.#ffffff entspricht der Farbe weiß.#8b8b8b) ergeben einen mehr oder weniger hellen Grauton (zwischen schwarz und weiß)
Hier mal die möglichen Grautöne von #000000 bis #ffffff:
Und mit den anderen Farben darfst du jetzt gerne selber etwas spielen!
Ändere den Rotanteil und die Grafik zeigt dir, wie sich der Grünanteil (senkrecht von #00 - #ff) und der Blauanteil (waagerecht von #00 - #ff) auswirken.
Für diese hexadezimale Farbangabe gibt es auch noch eine 'Kurzform'. Hierbei werden statt der sechs Ziffern nur noch drei angegeben - #xxx.
Im Prinzip ist dann die Systematik identisch mit der, die für die sechsstellige Hexzahl gilt, außer dass man für jeden Anteil (rot, grün, blau) nur noch einen Wertebereich von #0 bis #f (dezimal 0 bis 15) benutzt. Daraus ergeben sich dann 163 = 4096 unterschiedliche Farbtöne - immer noch mehr als genug für die meisten Zwecke. #fff ist immer noch weiß und #000 ist immer noch schwarz und alles dazwischen probiere am besten selber aus!
So... Schluss mit bunt, jetzt geht es wieder mit #000 auf #ccf weiter, denn ein paar CSS- Formatierungen möchte ich her noch vorstellen.
Zum Beispiel wie man Hintergründe von den meisten Block-Elementen etwas interessanter gestalten kann.... das gilt auch für die Elemente <html> </html> und <body> </body>, denn die sind ja auch nichts weiter als 'Container', in die man was reinpacken kann!
background-color: Wert;background-image: url(pfad/dateiname);<head><style type="text/css"><!--
div.beispiel {background-image: url(pfad/bild.jpg);width: 90%;height: 200px;}--></style></head><body><div class="beispiel"></div></body>
und so als Hintergrund zum <div>background-repeat: Anweisung;background-attachment: Anweisung;fixed, scoll, local.background-image: linear-gradient(Wert1, Wert2, ...);<head><style type="text/css"><!--
div.beispiel {background-image: linear-gradient(#aaaaff , transparent , #aaffaa);width: 90%;height: 200px;}--></style></head><body><div class="beispiel"></div></body>div.beispiel? Also die Elementbezeichnung div, gefolgt von einem Punkt und dann ein Name... hier zum Beispiel beispiel?class') kann man dann im Dokument mit der Tag- Ergänzung class="Klassenname" mehrfach einem <div> zuweisen.<head><style type="text/css"><!--
div {width: 90%;height: 30px;border: 1px solid #0000ff;float: left;}div.mit_bild {background-image: url(pfad/bild.jpg);}div.einfarbig {background-color: #aaffaa;}div.bunt {background-image: linear-gradient(to right, yellow, #33ff33);}--></style></head><body><div>Das <div> ohne Klasse</div><div class="mit_bild">mit Bildhintergrund</div><div class="bunt">mit Farbverlauf</div><div class="einfarbig">einfarbiger Hintergrund</div></body><div>'s mit unterschiedlichen Klassen<div> sind alle div's gemeint - mit der Formatzuweisung mittels CSS- Klasse, kann man nun gezielt den mit class="Klassenname" ausgezeichneten div's eine abweichende Formatierung zuweisen. Aber bitte beachten, das definierte Format des Elternelements (div) wird an die Kindelemente (div.Klassenname) vererbt. Wie in obigem Beispiel - alle Kindelemente sind mit der Größe und Rahmen des Elternelementes ausgestattet. Wenn du da was anders haben willst, dann musst du das in der Klasse eben anders festlegen.style-Definition der Klassennamen mit dem vorstehenden Punkt (.Klassenname) mit den gewünschten Eigenschaften angegeben. <head><style type="text/css"><!--
.alles_rot {color: #ff0000;background-color: #ffaaaa;}--></style></head><body><h1 class="alles_rot">Eine Überschrift</h1><p class="alles_rot">Einen Text</p><p>Einem <span class="alles_rot">Span</span> im Text</p></body>Einen Text
Einem Span im Text
Aber zurück zu den Formatanweisungen. Rahmen (border) hatten wir ja schon einige male in den Beispielen angewendet - und hier jetzt etwas mehr im Detail.
border: Rahmendicke Rahmentyp Rahmenfarbe;border: Anweisung werden in der Regel mehrere Formatzuweisungen gleichzeitig getätigt. Und zwar die Rahmendicke, der Rahmentyp und die Rahmenfarbe, jeweils durch ein Leerzeichen getrennt.Rahmendicke und Rahmenfarbe können alle in CSS zulässigen Werte für Dimension bzw Farben angegeben werden.Rahmentyp sind die Werte solid, dashed, dotted, double, groove, ridge, inset und outset zulässig.<head><style type="text/css"><!--
div {width: 90%;height: 30px;float: left;}div.solid {border: 1px solid red;}div.dashed {border: 2px dashed blue;}div.dotted {border: 0.3em dotted #00ff00;}div.double {border: 1mm double pink;}div.groove {border: 5px groove #abc;}div.ridge {border: 6px ridge yellow;}div.inset {border: 4px inset #000000;}div.outset {border: 4px outset black;}--></style></head><body><div class="solid">border: 1px solid red;</div><div class="dashed">border: 2px dashed blue;</div><div class="dotted">border: 0.3em dotted #00ff00;</div><div class="double">border: 1mm double pink;</div><div class="groove">border: 5px groove #abc;</div><div class="ridge">border: 6px ridge yellow;</div><div class="inset">border: 4px inset #aaaaaa;</div><div class="outset">border: 4px outset black;</div></body>border: 1px solid red;border: 2px dashed blue;border: 0.3em dotted #00ff00;border: 1mm double pink;border: 5px groove #abc;border: 6px ridge yellow;border: 4px inset #000000;border: 4px outset black;'border:' wird immer der Rahmen an allen vier Seiten des Elements formatiert - man kann jedoch auch mit 'border-top:', 'border-right:', 'border-bottom:' und 'border-left:' jede Seite individuell ansprechen und gestalten.'border-color:', 'border-width:' und 'border-style:' festlegen. Wobei dann jeweils 4 Angaben folgen, die von oben - weiter im Uhrzeigersinn über rechts, unten nach links, die jeweiligen Werte zuweisen! Die Wertzuweisungen sind wieder jeweils durch ein Leerzeichen getrennt.<head><style type="text/css"><!--
div.alles_einzeln {width: 90%;height: 50px;float: left;border-width: 5px 0.4em 3mm 6px;border-style: dotted double groove solid;border-color: red #00ff00 blue #000;}--></style></head><body><div class="alles_einzeln"></div></body>border-radius: Wert;' auch das einstellen! Oh ja... und das auch noch für jede Ecke einzeln - schau hier!position: Anweisung;absolute' - positioniert das Element unabhängig vom Textfluss. Das Element scrolled mit. fixed' - positioniert das Element unabhängig vom Textfluss. Das Element scrolled nicht mit. relative' - positioniert das Element relativ zum Elternelement. static' - positioniert das Element im Textfluss. Wenn nicht anders festgelegt, verhalten sich alle Elemente static.left: Wert;
right: Wert;
top: Wert;
bottom: Wert;
absolute, fixed und relative positionierten Elemente relative zum linken, rechten, oberen und unterem Rand des Elternelementes festgelegt.float: Anweisung;position: static' positionierten Elementes im Textfluss. Mögliche Werte sind 'left' und 'right'. Das Element 'schwimmt' (float) am jeweils bestimmten linken oder rechten Rand seines Elternelementes. Ist genügend Platz vorhanden stapeln sich 'float-Elemente an der vorgegebenen Begrenzung.Nicht ganz so einfach zu verstehen, aber mit etwas Ausprobieren kommt man dann doch recht schnell dahinter wie es funktioniert.
Wie sich zum Beispiel mit 'position: fixed' gekennzeichnete Elemente verhalten siehst du auf dieser Seite an den Navigationselementen oben und links. .. ach ja, dieser große Bereich, in dem hier die Inhalte stehen, ist ein div, der mit 'position: absolute' formatiert wurde.
Zu beachten ist, dass Elemente - gerade die, die mit 'fixed' und mit 'absolute' positioniert werden - nicht mehr im Textfluss stehen, sondern eben da eingefügt werden, wo du es eben festlegst. Inhalte, die sich im Textfluss an dieser Stelle befinden, werden dann einfach überdeckt.
Ebenso können sich auch positionierte Elemente gegenseitig überdecken und um dann zu bestimmen welches dieser Elemente im Vordergrund ist und welches dahinter angezeigt wird, gibt es folgende Anweisung:
z-index: Wert;Wert ist als ganzzahlige Zahl anzugeben. Je größer Wert ist, um so näher ist das Element am Betrachter.<head><style type="text/css"><!--
div {position: absolute;width: 150px;height: 50px;}div.hintergrund {left: 40px;top: 10px;border: 2px solid #f00;background-color: #ccc;z-index: 1;}div.vordergrund {left: 50px;top: 30px;border: 2px solid #00f;background-color: #0f0;z-index: 2;}--></style></head><body><div class="hintergrund">z-index: 1;</div><div class="vordergrund">z-index: 2;</div></body>Mit diesen Positionierungen solltest du dich ruhig etwas näher beschäftigen, denn der Aufbau und das Layout deiner Seite lässt sich damit ganz einfach realisieren.
Wir sind fast fertig - zum Schluss noch ein paar Worte zu Abständen in und um Elementen.
Dem Ganzen liegt das sogenannte Box-Modell zu Grunde, mit dem die Systematik des Aufbaues von Block-Elementen beschrieben wird:
margin: Wert;
margin: oben rechts unten links;margin' wird der Rahmen / Abstand zu benachbarten Elementen festgelegt. Erlaubt sind alle in CSS zulässigen absoluten und relativen Größenangaben.margin: Wert;', so wird damit der Abstandsrahmen um das gesamte Element festgelegt.margin: Wert1 Wert2 Wert3 Wert4;', die dann in der Reihenfolge 'oben', 'rechts', 'unten', 'links' die individuellen Abstände zu den Seiten des Elementes festlegen.margin-top: Wert;', 'margin-right: Wert;', 'margin-bottom: Wert;' und 'margin-left: Wert;' können die Abstände auch einzeln festgelegt werden.auto' zulässig:margin-left: auto; margin-right: auto;' werden Elemente (z.B. Bilder und Tabellen) zentriert dargestellt.padding: Wert;
padding: oben rechts unten links;padding' wird der Abstand festgelegt, den Inhalte des Elementes zum Rand des Elementes einhalten müssen. Erlaubt sind alle in CSS zulässigen absoluten und relativen Größenangaben.padding: Wert;', so wird damit der Innenabstand zu allen vier Seiten des Elementes festgelegt.padding: Wert1 Wert2 Wert3 Wert4;', die dann in der Reihenfolge 'oben', 'rechts', 'unten', 'links' die individuellen Innenabstände zu den Seiten des Elementes festlegen.padding-top: Wert;', 'padding-right: Wert;', 'padding-bottom: Wert;' und 'padding-left: Wert;' können die Innenabstände auch einzeln festgelegt werden.<head><style type="text/css"><!--
div {width: 200px;height: 80px;border: 2px solid #f00;background-color: #ccc;}div.aussenrand {margin: 20px;}div.innenrand {padding: 20px;}div.innen_und_aussen {margin: 20px;padding: 20px;}--></style></head><body><div>ohne 'margin' und ohne 'padding'</div><div class="innenrand">ohne 'margin' / mit 'padding'</div><div class="aussenrand">mit 'margin' / ohne 'padding'</div><div class="innen_und_aussen">mit 'margin' / mit 'padding'</div></body>So - fertig! Fehlt jetzt nur noch die letzte und auch zu bevorzugende Methode, wie du deine Formatierungen in dein Dokument bekommst!
Wir haben uns jetzt eine ganze Weile mit CSS- Formaten beschäftigt und diese immer schön in eine interne Liste innerhalb dieses
<style type="text/css">
<!--
Deine Formatanweisungen
-->
</style>
Bereiches hineingeschrieben! Und das ist auch schon mehr als nur die halbe Miete. Nachteil bei diese Methode - in der Regel bestehen Webseiten aus mehreren Dokumenten und dieses interne Style-Sheet formatiert nur dieses eine Dokument, in dem es eben drin steht.
Um die selben Formatierungen auch in den anderen Dokumenten meiner Webseite nutzen zu können, müsste ich es in jedes Dokument nochmal hinein kopieren. Das ist sehr aufwendig und vor allem auch sehr schwer zu pflegen. Jede Änderung müsste ich ja x-mal wiederholen.
Einfacher und besser ist es ein externes Style-Sheet zu benutzen. In diesem externen Style-Sheet werden genau so deine Formatanweisungen eingetragen, wie wir es bisher gemacht haben, nur dass wir eine separates Textdokument dafür benutzen. Dieses Textdokument speichern wir mit einem beliebigem Namen und der Endung '.css' auf unsere Festplatte und teilen dann jedem Dokument unseres Webauftrittes mit, wo es die Formatierungen findet:
<!DOCTYPE html><html lang="de"><head><meta charset="utf-8"><title>Name deiner Seite</title><link rel="stylesheet" type="text/css" href="beliebiger_name.css"></head><body>Deine Inhalte stehen hier!</body></html>Jede Änderung, die wir dann in dem externen Style-Sheet vornehmen, wird automatisch von allen zugehörigen Dokumenten erkannt und ist dort wirksam.
Diese Seite verwendet Cookies.
Wenn Du weiter auf dieser Seite
bleibst, eklärst Du Dich damit
einverstanden.
Für mehr Informationen bitte die
DATENSCHUTZBESTIMMUNGEN
zur Kenntnis nehmen.