 |
|
|
|
Beispiele zur Anwendung von Style SheetsGrundformatierung einer WebseiteWer ein neues Webprojekt beginnt, neigt nach dem Motto Um eine saubere Trennung zwischen Inhalt und Layout kann man sich später kümmern gerne dazu, erst einmal Inhalt und Formatierungen wild ineinander zu packen; Hauptsache, die Seite wird schnell fertig. Dennoch empfehle ich jedem, gleich zu Beginn zentrale Styles zu definieren, sei es in einer separaten Style Sheet Datei oder als zentrale Formate im Header der Datei. Es gibt nämlich nichts Angenehmeres als das Layout einer Seite durch kleine Style-Änderungen komplett zu beeinflussen und sofort die Auswirkungen auf die Gesamtseite zu sehen. Auch wer schon fertige Webseiten hat, sollte im Nachhinein zentrale CSS definieren, um so das Erscheinen sämtlicher Seiten einheitlich zu machen und leichter die Kontrolle der verwendeten Formate zu haben. Die folgenden Style-Angaben halte ich für das Minimum, was für ein Webprojekt definiert werden sollte:
<style type="text/css">
body { background-color: #dddddd;}
p,li { font-family: 'Comic Sans MS', Arial;
text-align: justify;}
h1 { font-family: 'Comic Sans MS', Arial;
font-size: 25pt;
text-align: center;}
h2 { font-family: 'Comic Sans MS', Arial;
font-size: 18pt;}
th { font-family: 'Comic Sans MS', Arial;
background-color: blue;
font-weight: normal;
color: white; }
td { font-family: 'Comic Sans MS', Arial;
background-color: lightblue;
color: blue;
text-align: right; }
</style>
Dem body Tag wird eine Hintergrundfarbe zugewiesen. Für alle wichtigen Seitenelemente wie Absatz, Überschriften, Listenelement und Tabellenelemente wird die gleiche Schriftart festgelegt. Für Überschriften wird sogar explizit die Schriftgröße definiert. Auch die Textausrichtung normaler Absätze (text-align) sollte von Anfang an festgelegt werden. Wichtig ist auch, dass man eine einheitliche Formatierung für Tabellen vorgibt, sowohl was die verwendete Schrift als auch was die Ausrichtung in den einzelnen Zellen betrifft. Mit diesen wenigen Style Sheet Angaben hat man ein Grundlayout geschaffen, auf das man aufbauen kann. In unserem ursprünglichen Beispiel führen alleine diese wenigen CSS-Angaben zu diesem echt ansehnlichen Layout. Hat man einmal ein solches Grundlayout geschaffen, ist nichts schöner, als mit den Style Sheet Angaben zu experimentieren bis einem das Layout wirklich gefällt. Tolle Effekte mit FarbverläufenHast Du schon einmal Überschriften oder Schlagwörter wie die folgenden gesehen? Tolle Effekte mit vielen bunten Farben F a r b e n v i e l f a l t v o n . b l a u . n a c h . r o t Man ist immer wieder beeindruckt von solch bunten Wörtern. Farbe bringt ja bekanntlich mehr Freude ins Leben. Solche bunten Wörter erzeugt man mit CSS-Formatierungen im Prinzip ganz einfach mit der copy & paste Funktion. Beispiel: <span style="color: rgb(250,0,0); "> F </span> <span style="color: rgb(250,30,0); "> a </span> <span style="color: rgb(250,60,0); "> r </span> <span style="color: rgb(250,90,0); "> b </span> <span style="color: rgb(250,120,0);"> r </span> <span style="color: rgb(250,150,0);"> e </span> <span style="color: rgb(250,180,0);"> i </span> <span style="color: rgb(250,210,0);"> h </span> <span style="color: rgb(250,240,0);"> e </span>
F
a
r
b
r
e
i
h
e
Man sieht, dass jeder einzelne Buchstabe in einer eigenen Spanne (span) steckt, die individuell formatiert wurde. Der erste Buchstabe enthält ausschließlich Rot-Anteil. Bei den folgenden Buchstaben wird der Grün-Anteil sukzessive erhöht. Der letzte Buchstabe hat fast vollen Rot- und Grün-Anteil, ist also gelb. Freie Positionierung von ElementenWährend es ein Charakteristikum der Seitenauszeichnungssprache HTML ist, dass ein Block dem anderen folgt, kann man mittels CSS Elemente auf einer Seite frei positionieren. Verwendet man absolute Positionsangaben und gibt die Position eines jeden Elements relativ zur linken oberen Ecke des Browserfensters an, so lassen sich ganz neuartige Webseiten erstellen. Obwohl sich mittels CSS im Prinzip jedes beliebige Element frei positionieren lässt, ist es ratsam, immer einen <div> Bereich frei zu platzieren und diesen mit dem gewünschten Element zu füllen. Die freie Positionierung des Textes meine Webseite geschieht also folgendermaßen:
<div style="position: absolute; top: 180px; left: 20px;
font-size: 40pt; color: blue;">
meine Webseite
</div>
Der Text wird 180 Pixel von oben und 20 Pixel von links in der Farbe blau mit der Schriftgröße 40pt erscheinen. Ich habe im folgenden Beispiel einmal mehrere solche freie Positionierungen benutzt, um eine kunterbunte, avantgardistische Seite zu erstellen. Das Design ist sicher Geschmacksache, aber die Möglichkeiten, die einem die Anwendung der freien, absoluten Positionierung bietet, dürften klar herauskommen. Bewegte Objekte auf dem BildschirmBist Du über die Startseite auf meine Homepage gekommen? Dann hast Du Dich bestimmt über die kleine "Explosion" mit Sternchen oder Konfetti amysiert. Das folgende Beispiel zeigt den Effekt nochmals in einem separaten Fenster. Beim Überfahren des kleinen grünen Feldes fliegen 20 Sterne quer durch das Fenster. Hier bewegt sich also etwas, der Fachbegriff hierfür ist DHTML oder dynamisches HTML. Was versteht man unter dynamischem HTML? HTML ist wie bereits mehrfach erwähnt eine Seitenauszeichnungssprache, die festlegt, ob ein Element auf einer Seite eine Überschrift, ein Absatz, eine Tabelle oder ein Bild ist. Jedes Element kann Style Sheet Eigenschaften haben, z.B. die absolute Position im Fenster in Koordinaten top und left. Dynamisches HTML bedeutet nun, dass man diese CSS-Eigenschaften einzelner Elemente durch Scriptsprachen wie JavaScript ändert. HTML unterstützt dynamisches HTML durch sogenannte Event-Handler. Event-Handler sind Universalattribute, die auch von JavaScript aus abgefragt werden können. Ein solches Universalattribut ist zum Beispiel onMouseover, d.h. eine Aktion wird ausgelöst, wenn der Mauszeiger über dieses Element fährt. Dynamisches HTML bedeutet jedoch auch, dass HTML-Code mittels JavaScript auf eine Webseite geschrieben werden kann. Was passiert nun im Beispiel mit den 20 Sternchen? Das kleine grüne Feld ist mit dem Event-Handler onMouseover belegt. Sobald der Mauszeiger das grüne Feld berührt, wird ein JavaScript aufgerufen. Dieses Script platziert zuerst den HTML-Code für 20 Sterne in die Mitte des Fensters (alle übereinander). Dann ändert eine zweite Prozedur innerhalb des Scriptes die CSS-Eigenschaften top und left aller Sterne in mehreren Schritten, so dass sie zum Außenrand des Fensters wandern. Aber hier steckt schon ein ziemlich kompliziertes und aufwendiges JavaScript dahinter. Die Position einzelner Elemente kann man jedoch auch ohne JavaScript verändern, wie das folgende Beispiel zeigt (nur für Internet-Explorer realisiert). Der Effekt des Springens wurde mit folgendem Code realisiert:
<div id="element"
style="position: absolute; top: 250px; left: 50px;
width: 200px; height: 100px; padding: 10px;
font-size: 12pt; color: black; background-color: yellow;
border-style: solid; border-width: 5px; border-color: blue;"
onMouseover="document.all.element.style.posLeft = 400;"
onClick="document.all.element.style.posTop = 380"
onkeydown="document.all.element.style.posTop = 250;
document.all.element.style.posLeft = 50;">
<p>Dieses Element kann im Browser-Fenster hin- und herspringen.</p>
</div>
Mit dem <div> Tag wird ein Bereich definiert. Dieser Bereich bekommt mit dem HTML-Universalattribut id den Namen element. Innerhalb des <div> Tags folgt zunächst eine CSS Definition, die das Element absolut im Fenster platziert und schön bunt formatiert. Dann folgen 3 weitere HTML-Universalattribute, nämlich die Event-Handler onMouseover, onClick und onkeydown. Widmen wir uns dem ersten Event-Handler onMouseover. Wird der Bereich, in dem der Event-Handler enthalten ist, mit der Maus überfahren, so passiert das, was rechts von onMouseover= steht. Im Beispiel mit den bewegten Sternen wird ein JavaScript Programm aufgerufen. Hier wird nur die horizontale Position unseres Elementes verändert. Dies geschieht folgendermaßen: Mit Hilfe des Konstruktes document.all.element.style kann man im Internet-Explorer auf die Style Sheet Eigenschaften des Elementes element, also zum Beispiel posLeft zugreifen. Man beachte, dass der Name element, den wir dem Bereich zugewiesen haben, in dem etwas längeren Ausdruck wieder vorkommt; es könnten ja auch noch andere Bereiche mit anderem Namen auf der Seite vorhanden sein. Die beiden weiteren Event-Handler onClick und onkeydown reagieren auf einen Mausklick und auf einen beliebigen Tastendruck. Auch diese verändern die Style-Sheet Eigenschaften unseres Bereiches element, indem sie die absolute Lage neu zuweisen. Warum funktioniert das Beispiel nicht im Netscape? Wie das Beispiel mit den Sternen zeigte, ist dynamisches HTML auch in Netscape möglich. Unter Netscape greift man jedoch auf andere Weise auf die CSS-Eigenschaften eines Elementes zu. Aus diesem Grund muss man vor der Ausführung von DHTML-Konstrukten zuerst abfragen, welchen Browser der Anwender benutzt. Damit sind wir aber schon mitten in JavaScript, welches aber an anderer Stelle behandelt wird. Menü mit dynamischem ErläuterungstextIm vorigen Beispiel wurde ein absolut positioniertes Element im Browser-Fenster verschoben, indem seine CSS-Eigenschaften top und left durch das Auslösen von Events geändert wurden. Jetzt ändern wir die CSS-Eigenschaft visibility eines Objektes durch das onMouseover Event. Das folgende Beispiel zeigt am linken Fensterrand eine Menüleiste ähnlich derjenigen auf meiner Homepage. Wird ein Menüpunkt mit der Maus überfahren, erscheint rechts vom jeweiligen Menüpunkt ein Erläuterungstext, was man in der jeweiligen Rubrik findet. Wie erstellt man ein solches Menü? Den kompletten Quelltext erhält man, wenn man im Beispiel-Fenster die rechte Maustaste drückt und Quelltext anzeigen auswählt. Jetzt aber zur Technik, die dahinter steckt. Ich erstelle den ersten Menüpunkt Über mich, indem ich ihn in einen div Bereich der Klasse Menu setze. Als absolute vertikale Position gebe ich den Wert von 100 in einer Style-Definition vor. Der div Bereich enthält außerdem zwei Event-Handler, aber dazu später.
<div class="Menu" style="top: 100;"
onMouseover="document.all.Hinweis1.style.visibility = 'visible';"
onMouseout="document.all.Hinweis1.style.visibility = 'hidden';">
<p>Über mich</p>
</div>
Der so erstellte div Bereich wird entsprechend der Formatunterklasse Menu formatiert, die ich im Header folgendermaßen spezifiziert habe: Als Textfarbe wähle ich blau, als Hintergrund ein dunkles grau. Das entsprechende Element wird am linken Fensterrand (left: 0;) absolut positioniert und hat die Maße 150x20. Alle weiteren Menüpunkte werden ebenfalls mit dieser Unterklasse formatiert; es ändert sich immer nur die vertikale Position in der jeweiligen style Definition.
.Menu { color: blue;
background-color: #aaaaaa;
position: absolute;
left: 0;
width: 150;
height: 20;
}
Den ersten Hinweistext setze ich ebenfalls in einen div Bereich, dem ich die ID Hinweis1 gebe. So erhält jeder Hinweistext einen eigenen Namen, über den er ansprechbar ist. Als Grundformatierung wähle ich die allgemeine Unterklasse Hinweis aus; individuell setze ich entsprechend dem zugehörigen Menüpunkt die vertikale Position auf 100. <div id="Hinweis1" class="Hinweis" style="top: 100;"> <p>Hier steht alles über mich, meine Hobbies, meine Interessen...</p> </div> Die allgemeine Unterklasse .Hinweis definiere ich ebenfalls im Header des Dokumentes. Als Textfarbe wähle ich blau, als Hintergrund gelb. Der Text soll zum Rahmen einen Abstand von 10 Pixeln haben. Auch der Hinweistext wird absolut positioniert, und zwar immer 150 Pixel gemessen vom linken Fensterrand. Die Breite soll 250 Pixel betragen. Jetzt kommt das entscheidende CSS-Format: Zu Beginn hat jeder Hinweistext die Eigenschaft visibility: hidden, d.h. er wird nicht angezeigt, befindet sich aber bereits im Browser-Fenster.
.Hinweis { color: blue;
background-color: yellow;
padding: 10px;
position: absolute;
left: 150;
width: 250;
visibility: hidden;
}
Kommen wir zurück auf die beiden Event-Handler im div Bereich des Menütextes. Der Event-Handler onMouseover ändert die CSS-Eigenschaft visibility des zugehörigen Hinweistextes mit dem Namen Hinweis1 von hidden auf visible, d.h. solange sich der Mauszeiger über dem Menüfeld befindet, wird der Hinweistext angezeigt. Verlässt der Mauszeiger das Feld wider (onMouseout), so wird die entsprechende CSS-Eigenschaft wieder auf hidden gesetzt. Worin besteht der Clou bei diesem Beispiel? Sowohl die einzelnen Menüpunkte als auch die zugehörigen Erläuterungstexte werden beim Laden der Webseite absolut positioniert ins Browser-Fenster gesetzt; die Erläuterungstexte werden jedoch zunächst versteckt. Durch zwei allgemeine Formatunterklassen werden die Menüpunkte und Erläuterungstexte einheitlich formatiert; nur die vertikale Position muss für jeden Punkt individuell angegeben werden. Da jeder Erläuterungstext einen individuellen Namen bekommt, kann durch Event-Handler in den Menüpunkten die CSS-Eigenschaft visibility der Erläuterungstexte verändert werden, so dass diese plötzlich sichtbar werden. Natürlich funktioniert auch dieses Beispiel nicht in Netscape, da dieser die CSS-Eigenschaft visibility eines Elementes anders anspricht als der Internet-Explorer. Man müsste also wiederum eine Unterscheidung machen, was aber nur in JavaScript möglich ist. Individuelle Style Sheets für unterschiedliche BrowserEigentlich ist ja der Sinn von HTML und dem Publizieren von Webseiten, dass auf jedem Rechner unabhängig vom Betriebssytstem die Seite gleich dargestellt wird. Bei dynamischem HTML und dem damit verbundenen Zugriff auf spezielle Style Sheet Eigenschaften muss man jedoch von Browser zu Browser Unterschiede machen. Macht es überhaupt Sinn, einen Stil zu definieren, der nur im Microsoft Internet Explorer richtig wiedergegeben wird, im Netscape oder Opera dagegen nur für Chaos oder unformatierten Text sorgt? Da stellt sich doch die Frage, ob man nicht Styles definieren kann, die nur für einen bestimmten Browser gelten bzw. ob man nicht das Aussehen eines Tags, z.B. <li>, für unterschiedliche Browser individuell definieren kann. Die HTML-Ergänzungssprache CSS ist keine Programmiersprache, d.h. man findet keine typischen Konstrukte einer Programmiersprache wie Bedingungen oder Schleifen. In einer Style Sheet Datei kann man also keine Unterschiede machen je nachdem, welcher Browser die Datei lädt. Wohl aber ist es möglich, dass man verschiedene Style Sheet Dateien für jeden Browser-Typ definiert. Im nachfolgenden Beispiel wird für den Netscape eine andere Style Sheet Datei geladen als für den Microsoft Internet Explorer oder für den Opera Browser. Wer mehrere Browser installiert hat, wird verschiedene Schriftfarben und unterschiedlichen Text im Beispiel-Fenster vorfinden. Wie ist das möglich? Im Header der Beispiel-Datei befindet sich ein JavaScript, das beim Laden des Fensters automatisch gestartet wird. Über das Objekt navigator ermittelt das Script den Namen und die Version des verwendeten Browsers. Dann folgen drei Bedingungen, von denen hier nur die erste dargestellt ist, die je nach Browsertyp und -version 3 unterschiedliche JavaScript-Befehle ausführen. Deren erster schreibt den bereits gelernten <link> Befehl für eine externe CSS-Datei dynamisch in das Dokument. Die beiden weiteren Befehle erzeugen HTML-Code für eine Überschrift und einen Browser-individuellen Textabsatz.
<script language="JavaScript" type="text/javascript">
browserName = navigator.appName;
browserVersion = navigator.appVersion.charAt(0);
if (browserName=="Microsoft Internet Explorer" && browserVersion >= 4)
{ document.writeln('<link rel="stylesheet"
href="StylesExplorerDemo.css"
type="text/css">');
document.writeln('<h1>Browser-individuelle Style Sheets</h1>');
document.writeln('<p>Wie ich mittels JavaScript ermitteln konnte,
verwendest Du also den Internet Explorer oder
Opera. Für Dich habe ich die Farbe blau
ausgewählt.</p>');
}
</script>
Mittels JavaScript wird also für jeden Browsertyp anderer HTML-Code auf die Seite geschrieben; damit sind wir aber schon im hochprofessionellen Webdesign. Hier wollte ich nur zeigen, dass es möglich ist, für unterschiedliche Browser unterschiedliche CSS-Dateien zu verwenden. Nebenbei sei gesagt, dass man auf diese Weise ganze Seiteninhalte dynamisch erzeugen kann. Links und PseudoformateIst es nicht langweilig - Links sind praktisch immer blau. Das ist zwar gut einprägsam, aber ist das auch akzeptabel auf einem hellblauen Hintergrund? Zum Glück kann man die Farbe eines Links ändern, indem man das Tag <a> entsprechend formatiert:
a {color: green;}
Mit diesem CSS-Befehl werden alle Links grün dargestellt. Selbstverständlich kann man zur Formatklasse <a> auch Unterklassen bilden. Aber wozu soll das gut sein? Auf meiner Homepage gibt es zum Beispiel zahlreiche Links zu anderen Webseiten. Es gibt aber auch zahlreiche Links zu anderen Seiten auf meiner Homepage. Damit ein Surfer weiß, ob er durch Anklicken eines Links auf eine neue Webseite oder auf eine andere Unterseite meiner Homepage kommt, könnte ich interne Links anders darstellen als externe Links, also z.B.:
a.intern {color: green;}
a.extern {color: lightgreen;}
Diese unterschiedlichen Links setzt man durch Angabe der Unterklasse ein:
<a class="intern" href="./interneSeite.htm">interner Link</a>
<a class="extern" href="www.externeSeite.de">externer Link</a>
Kommen wir zu den Pseudoklassen. Aus HTML-Sicht ist ein Link ein eindeutiges Element: durch Anklicken verlinkt er den User an einen anderen Ort. Aus Anwender-Sicht kann ein Link jedoch unterschiedliche Zustände haben: ein Link, den ich noch nie gesehen habe, hat eine andere Bedeutung als ein Link, den ich schon angeklickt habe - den kenn ich ja schon. Also möchte ich bereits angeklickte Links auch anders darstellen. Auf den Stil derartiger dynamischer Eigenschaften bekommt man Zugriff durch sogenannte Pseudoklassen. So hat das Link-Tag <a> vier Pseudo-Unterklassen: a:visited formatiert den Zustand eines Links, der bereits angeklickt wurde. a:link formatiert einen Link, der noch nicht besucht wurde. a:hover formatiert einen Link, der gerade von der Maus überfahren wird. a:active formatiert einen aktiven Link, also einen Link, der gerade angeklickt wird. Im nachfolgenden Beispiel stelle ich Links blau in der Schriftgröße 12pt dar. Besuchte Links stelle ich 2 Punkte kleiner in roter Schrift dar. Überfährt man einen Link mit einer Maus, so wird dieser 14 Punkte groß und gelb. Beim Anklicken wird der Link grün und noch eine Stufe größer. Die dazugehörigen Style-Formate sehen wie folgt aus:
a:link { font-size: 12pt;
color: blue;}
a:visited { font-size: 10pt;
color: red;}
a:hover { font-size: 14pt;
color: yellow;}
a:active { font-size: 18pt;
color: green;}
Leider interpretieren noch nicht alle Browser sämtliche Pseudeformate. Mit dem Microsoft Internet Explorer hat man ab der Version 5.5 sämtliche Möglichkeiten offen. Zentrale Formatierung sämtlicher Tabellen auf einer WebseiteIch habe schon mehrfach erwähnt, dass ich nur eine Zeile in einem zentralen CSS-Format ändern muss, um z.B. die Rahmenfarbe all meiner Tabellen in der CSS-Befehlsübersicht zu ändern. Sämtliche Tabellen in dieser Übersicht haben genau dasselbe Layout. Das Layout ist zentral mit einer CSS-Unterklasse namens Befehle festgelegt. Folgende zentralen Formate bestimmen das Layout der Tabellen:
<style type="text/css">
.Befehle {border-style: solid;
border-color: blue;
}
col.BefehleCol1 {width: 150px;}
col.BefehleCol2 {width: 450px;}
table.Befehle {border-width: 3px;
width: 600px;
}
th.Befehle {background-color: #aaaaaa;
border-width: 1px;
border-bottom-width: 3px;
padding: 5px;
font-size: 12pt;
text-align: left;
}
td.Befehle {background-color: #cccccc;
border-width: 1px;
padding: 5px;
text-align: left;
}
</style>
In diesen recht umfangreichen Unterklassen steckt eine Menge Rafinesse und Geschick drin: Zuerst wird in der allgemeinen Unterklasse .Befehle ein blauer, durchgezogener Rahmen festgelegt. Dann werden zwei für das <col> Tag spezifische Unterklassen namens BefehleCol1 und BefehleCol2 definiert. Diese enthalten die Breite in Pixel der beiden Tabellenspalten. Im Folgenden wird die allgemeine Unterklasse .Befehle für die Tags <table>, <th> und <td> individuell erweitert. Die Gesamttabelle <table.Befehle> bekommt einen 3 Pixel dicken Rahmen und ist insgesamt 600 Pixel breit. Wohlgemerkt, dass der Rahmen blau und durchgezogen ist, wurde bereits im allgemeinen Format .Befehle festgelegt. Der Tabellenkopf <th.Befehle> bekommt ein dunkleres Grau als Hintergrund, einen 1 Pixel dicken Rahmen, an der Unterseite jedoch wie der Haupttabellenrand einen 3 Pixel dicken Rahmen. Die Schriftgröße beträgt 12pt, der Innenabstand 5px. Für normale Tabellenelemente <td.Befehle> wird ein helleres Grau als Hintergrund spezifiziert, die Rahmenbreite beträgt 1 Pixel, der Innenabstand 5 Pixel. Auch hier bestimmt noch die allgemeine Formatunterklasse .Befehle, dass der Rahmen durchgezogen und blau ist. Wie entwirft man nun eine Tabelle mit den oben spezifizierten Formaten? Hier ein kleines Beispiel:
<table class="Befehle">
<colgroup><col class="BefehleCol1"></col>
<col class="BefehleCol2"></col>
</colgroup>
<tr><th class="Befehle">CSS-Befehl</th>
<th class="Befehle">Auswahl möglicher Werte</th>
</tr>
<tr><td class="Befehle">text-align</td>
<td class="Befehle">left, right, center, justify</td>
</tr>
</table>
Sowohl die Tabelle <table> als auch die Elemente des Tabellenkopfes <th> als auch die übrigen Zellen der Tabelle <td> bekommen durch das Attribut class="Befehle" die Unterklasse .Befehle zugewiesen. Die Elemente werden so formatiert, wie im zentralen Style Sheet definiert. Dabei gilt stets die allgemeine Unterklasse .Befehle als auch die individuellen Unterklassen, z.B. td.Befehle. Das etwas unbekanntere HTML-Tag colgroup legt mit den col Tags den Aufbau der Tabelle, also hier zwei Spalten und deren Breite, fest. Hier noch einmal ein Beispiel, wie Tabellen mit diesen Formaten aussehen. Worin liegt die Besonderheit dieser Art von Tabellenformatierung? Wie gewünscht sehen alle Tabellen der Unterklasse Befehle gleich aus. In den Unterklassen col.BefehleCol1 und col.BefehleCol2 kann ich zentral die Breite der einzelnen Spalten ändern. Will ich eine andere Rahmenfarbe, muss ich nur die Farbangabe in der allgemeinen Unterklasse .Befehle ändern. Die Tabellenköpfe sämtlicher Tabellen formatiere ich durch die individuelle Unterklasse th.Befehle während ich alle weiteren Tabellenzellen sämtlicher Tabellen mit der individuellen Unterklasse td.Befehle formatieren kann. Ich kann also das Layout sämtlicher Tabellen an zentraler Stelle einstellen. Ergänzend möchte ich noch erwähnen, dass all meine Tabellen auf der Seite Geld anlegen ähnlich mit einer Unterklasse namens Bank zentral formatiert sind. Auf diese Weise kann ich von zentraler Stelle aus sämtliche Tabellen zum Thema Banken und sämtliche Tabellen zum Thema CSS-Befehle unabhängig voneinander individuell formatieren. Einbindung und Positionierung von Bildern mit CSSWas wären Webseiten ohne Bilder? Viele Webseiten sehen nur deshalb gut aus, weil Bilder an der richtigen Stelle mit dem richtigen Abstand zum übrigen Text eingebunden sind. HTML Viel schöner wird die Einbindung eines Bildes in den Text, wenn man CSS-Formatierungen benutzt. Mit den CSS-Befehlen margin und seinen Abkömmlingen für die 4 Seiten kann man Zurück zum Inhaltsverzeichnis CSS-Style-Sheets Copyright: Patrick Wagner, www.patrickwagner.de |
|
|
|
|
ermöglicht zwar mit den Attributen align="left" ein Umfließen eines Bildes durch Text. Auch ist es möglich mit den Attributen hspace=10px und vspace=20px einen horizontalen bzw. vertikalen Abstand des Bildes zum Text festzulegen. Allerdings stößt man bei HTML schnell an die Grenzen, wenn man diese Attribute verwendet, denn ein Abstand wird immer links und rechts bzw. oben und unten gesetzt. Dies sieht wie beim oberen Bild einfach nicht gut aus.