-- CSS-Crashkurs --
Einleitung:
-----Was mit HTML geht:
Mit HTML kann man durch verschiedene Tags verschiedene
Dinge auf der Seite bewirken, ein paar Formatierungen
vornehmen und z.B. mit Tabellen Layouts entwerfen.
Wenn man jetzt aber beispielsweise eine Ãœberschrift
mit <h2> einfügt und einem der Abstand zum Text nicht
zusagt, hat man ein Problem, da sich dies mit purem
HTML nicht machen lässt.
-----Was CSS kann:
An dieser Stelle setzt CSS an: Man kann damit die
Eigenschaften eines jeden HTML-Tags verändern und hat
so ein unglaubliches Möglichkeits-Spektrum. Man könnte
jetzt also mit CSS einstellen, dass zwischen
Überschrift und Text 500 Pixel oder auch überhaupt
kein Platz sein soll. Ebenso kann man alle Farben auf
der Seite (z.B. Links, Hintergründe, Rahmen, sonstige
Linien usw.), alle sonstigen Abstände aller Elemente,
Bildeigenschaften, und alle anderen Dinge, die HTML
einfach so vorgibt, verändern.
-----CSS auf der Homepage verwenden:
Es gibt 2 Möglichkeite, CSS auf einer HTML-Seite zu
verwenden:
Man kann es folgendermaßen direkt in die HTML-Datei
einbauen:
<head>
...
<style type="text/css">
ALLES, WAS MAN MIT CSS AUF DIESER SEITE MACHEN MÖCHTE
</style>
...
</head>
Wenn man jedoch viele Dinge mit CSS formatiert und man
nicht alles immer neu schreiben will, kann man auch
eine externe CSS-Datei schreiben und diese dann in die
Seite einbinden. Das geht folgendermaßen:
1.: Man schreibt alles, was sonst zwischen <style ...>
und </style> stünde, in eine ganz normale
Notepad-Textdatei und speichert diese mit der Endung
.css.
2.: Diese wird dann folgendermaßen eingebunden:
<head>
...
<link rel="stylesheet" href="namederdatei.css"
type="text/css">
...
</head>
-----Wie ist eine CSS-Datei aufgebaut?
Eine CSS-Datei besteht grob aus zwei Bestandteilen, die sich aufeinander beziehen:
Zuerst wird der zu bearbeitende HTML-Tag ohne < und > geschrieben. Es folgt alles, was die Veränderungen beschreibt, in geschwungenen Klammern {...}.
Wie im letzten Teil beschrieben, können Dinge wie alle Farben auf
der Seite (z.B. Links, Hintergründe, Rahmen, sonstige Linien usw.), alle sonstigen Abstände aller Elemente, Bildeigenschaften mit CSS verändert werden. Dies kommt in die {...}-Klammern.
Wenn jetzt also der Platz, den die Überschrift <h2> unter sich haben soll, von nun an 7 Pixel betragen soll, wird dies folgendermaßen angegeben:
h2 {padding-bottom: 7px;}
"Padding-bottom" heißt "Abstand nach unten", px steht für Pixel. Das Semikolon steht da, weil nach diesem Bestandteil noch andere "Einstellungen" kommen können, die untereinander durch Semikola abgetrennt werden. Wenn man nämlich beispielsweise will, dass der Abstand der Überschrift nach links (also zur linken Seite hin) 30 Pixel beträgt, ergänzt man einfach:
padding-left: 30px;
Also: h2 {padding-bottom: 7px; padding-left: 30px;}
Ich empfehle, sich erst einmal alle diese Möglichkeiten, wie man Tags bearbeiten kann, anzusehen. Da ich hier auch nichts anderes machen kann, als das alles einfach aufzulisten, verweise ich hiermit auf SelfHtml:
http://de.selfhtml.org/navigation/css.htm
Probier das alles mal an body, table und h2 aus.
>>>>>Kleiner Einschub: Pseudoformate:
Pseudoformate bearbeiten keine konkreten HTML-Tags. Sie dienen dazu, Eigenschaften einer HTML-Seite zu bearbeiten, die nicht richtig zu einem bestimmten Tag passen, wie z.B. besuchte, nicht besuchte, aktivierte (also angeklickte) und - wie sagt man da - "gehoverte" Links (über die man eben mit der Maus geht).
Diese Pseudoformate werden mit einem Doppelpunkt an den HTML-Tag angehängt, innerhalb dessen sich die zu bearbeitende Eigenschaft befindet. Wenn du jetzt z.B. willst, dass ein noch nicht besuchter Link grün und unterstrichen ist, dann schreibst du einfach:
a:link {color: green; text-decoration: underline;}
Jetzt sind alle noch nicht besuchten Links im Dokument grün. Möchtest du noch weiter gehen und alle besuchten Links blau haben und untestrichen sind, dann schreibst du darunter:
a:visited {color: blue; text-decoration: underline;}
Und so kommt noch ein hover-Effekt dazu, diesmal mit rot:
a:hover {color: red; text-decoration: underline;}
Natürlich kann man diesen hover-Effekt noch effektvoller gestalten, indem man noch eine Hintergrundfarbe einfügt und die Unterstreichung verschwinden lässt.
a:hover {color: red; text-decoration: none; background-color: yellow;}
-->> Das bitte erst einmal ausprobieren!
Weiter geht's:
-----Die Schreibweise:
CSS-Dateien haben den Vorteil, dass man innerhalb der geschwungenen Klammern und zwischen den verschiedenen Elementen beliebig viel Platz lassen und die Datei so schön übersichtlich gestalten kann.
Eine häufig verwendete Methode ist:
a:link
{
color: red; text-decoration: none; background-color: yellow;
}
a:visited
{
color: blue;
}
Wie man es macht, ist letztendlich egal; wichtig ist jedoch, dass man den Überblick behält.
>>>>>Kleiner Einschub: Mit CSS direkt formatieren:
Man kann Elemente auch direkt mit CSS bearbeiten, indem man das Element style= und dann in Anführungszeichen das, was eigentlich bei CSS in die geschwungenen Klammern kommt, schreibt. Beispiele:
<table style="background-color: blue;">
<span style="background-color: yellow;">
Ende des Einschubs^^.
-----Veraltende HTML-Tags und die CSS-Alternativen:
Es gibt einige HTML-Tags, die längst nicht mehr verwendet werden sollten, das sind z.B.:
<center></center>
<font></font>
<s></s> bzw. <strike></strike>
<u></u>
die <body>-Angaben link, alink, vlink und text
Diese sollten immer mit CSS oder alternativen Tags ersetzt werden.
Fangen wir mit <center> an: Hier gibt es natürlich die Möglichkeit, mit <p style="text-align: center;"> oder <span style="text-align: center;"> den CSS-Weg zu nehmen, was aber doch recht unpraktisch ist im Gegensatz zu <p align="center">.
<font> sollte auf alle Fälle immer durch CSS ersetzt werden, auch deswegen, weil das den Quelltext übersichtlicher macht, da man ja eigentlich nicht so häufig die Schriftart wechselt, aber mit <font> in jeder neuen Tabellenzelle, in jedem neuen
-Tag die Schriftart neu definieren muss. Mit CSS kann man die Schriftart für das ganze Dokument definieren und dabei bleibt es dann:
body {font-family: arial, sans-serif, usw.;}
Wie beim <font>-Tag kann man hier beliebig viele Alternativ-Schriftarten angeben, die verwendet werden sollen, wenn die vorher genannte nicht installiert ist. Natürlich kann man unter "body" auch alle anderen allgemein gültigen Dinge wie Schriftgröße, Schriftfarbe, Seiten-Hintergrund usw. angeben. (BITTE BEACHTEN: "color: soundso" ist IMMER die Schriftfarbe.)
Beispiel:
body {color: #222222; font-size: 12pt; background-color: blue; font-family: arial, sans-serif, helvetica, geneva;}
-->> Und wieder mal alles ausprobieren! Danach geht es weiter.
-----Veraltende HTML-Tags und die CSS-Alternativen (Fortsetung):
Blitz-Wiederholung:
Veraltete oder veraltende Tags:
<center></center>
<font></font>
<s></s> bzw. <strike></strike>
<u></u>
die <body>-Angaben link, alink, vlink und text
Bisher geklärt:
<center></center>
<font></font>
Weiter im Text:
Die Durchstreich-Tags <strike> und <s> sollte man auch nicht mehr benutzen (auch wenn sie wahrscheinlich sowieso sehr selten Verwendung finden). Stattdessen: "text-decoration: line-through"
>>>>>Kleiner Einschub: <span>:
<span> ist ein Element, das nichts bewirkt und keine Eigenschaften hat. Es ist dazu geeignet, CSS mit der style="..."-Methode einzubinden, wenn man nur eine Passage des Textes oder auch nur ein Wort bearbeiten will.
Zurück zum Thema:
Statt <strike>Durchgestrichen</strike> bzw. <s>Durchgestrichen</s> schreibt man nun <span style="text-decoration: line-through;">Durchgestrichen</span>
"text-decoration: underline" kennst du ja schon.
Die Sache mit den <body>-Angaben link, alink, vlink und text ist mit den vorher erklärten Pseudoelementen für Links ganz einfach zu lösen:
Statt
<body text="black" link="blue" alink="red" vlink="green">
wird bei CSS geschrieben:
a:link {color: blue;}
a:active {color: red;}
a:visited {color: green;}
->->->->Test:
Ich glaube, ich sollte dich langsam mal aktiv werden lassen^^:
Also: Unter
http://home.pages.at/webseiten-service/screenshot_css.gif findest du den Screenshot einer Seite, die komplett mit CSS bearbeitet wurde.
Hier ist der Quelltext:
-------------------------------------------
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>CSS-Übung</title>
<style type="text/css">
??? ??? ??? ??? ??? ???
</style>
<body>
<p align="center">
Home -
Link -
Noch ein Link -
Vierter Link -
Fünfter Link -
Letzter Link
</p>
Hallo und willkommen auf dieser Homepage! Es folgt - Blindtext:
Franz jagt im komplett verwahrlosten Taxi quer durch Bayern. Franz jagt im komplett verwahrlosten Taxi quer durch Bayern. Franz jagt im komplett verwahrlosten Taxi quer durch Bayern. Franz jagt im komplett verwahrlosten Taxi quer durch Bayern. Franz jagt im komplett verwahrlosten Taxi quer durch Bayern. Franz jagt im komplett verwahrlosten Taxi quer durch Bayern.
</body>
</html>
-------------------------------------------
Statt der Fragen im <style...>-Bereich solltest du CSS so verwenden, dass die Seite wie auf dem Screenshot aussieht.
Anmerkungen:
Hintergrundfarbe der Seite: #330000
Schriftfarbe: #aaaa00
Farbe Link: #0000aa
Farbe besuchter Link: #0000aa
Farbe "Mouse-over" bei Link: #880000
Schriftart: Arial
Schriftgröße: 8pt
Viel Spaß!^^
