Rund um CSS

Paule · 13. November 2008

Autor: michi

Rund um CSS

Was ist der Vorteil von CSS?
Zitat
- Formatsprache für HTML-Elemente
  Mit HTML definieren Sie den grundsätzlichen Aufbau Ihrer Web-Seiten, die Elemente, die Strukturen, die Verweise, die referenzierten Elemente wie Grafiken, Multimedia usw. Aber HTML ist eigentlich nicht dazu gedacht, um exakt anzugeben, wie ein Element genau aussehen soll. So können Sie in HTML eine Überschrift definieren und dabei angeben, dass es sich um eine Überschrift 1. Ordnung handeln soll. Sie können innerhalb von HTML aber nicht bestimmen, wie groß, in welcher Schriftart usw. die Überschrift dargestellt werden soll. Das übernimmt der Web-Browser bei der Anzeige. Er benutzt dabei eine Mischung aus Grundeinstellungen, die der Anwender vornehmen kann, und fest programmierten Darstellungen einzelner HTML-Elemente.
  
  An diesem Punkt setzen die Cascading Stylesheets (CSS) ein. Es handelt sich dabei um eine unmittelbare Ergänzungssprache, die vorwiegend für HTML entwickelt wurde. Sie klinkt sich nahtlos in HTML ein und erlaubt das beliebige Formatieren einzelner HTML-Elemente. Mit Hilfe von CSS Stylesheets können Sie beispielsweise festlegen, dass alle Überschriften 1. Ordnung 24 Punkt groß sind, in roter Helvetica-Schrift, mit einem Nachabstand von 16 Punkt und mit einer grünen doppelten Rahmenlinie oberhalb dargestellt werden. Sie können aber genauso gut auch für einen beliebigen Text festlegen, dass nur dieser Text 3 Zentimeter groß sein soll und eine gelbe Hintergrundfarbe erhält. Daneben enthält CSS auch Möglichkeiten zum punktgenauen platzieren von Elementen am Bildschirm und für andere Ausgabemedien wie Drucker oder Audio-Systeme bereit.
  
  CSS erlaubt es, zentrale Formate zu definieren, beispielsweise für alle Überschriften erster Ordnung, oder für alle Textabsätze mit einem bestimmten Klassennamen, oder für kursiv ausgezeichneten Text, der innerhalb einer Tabellenzelle vorkommt. Die zentralen Formate können sich auf eine HTML-Datei beziehen, aber auch in eine externe Style-Datei ausgelagert werden, die Sie dann in allen gewünschten HTML-Dateien einbinden können. So werden einheitliche Formatvorgaben möglich, und der HTML-Code wird von unnötigem Ballast befreit.
  
  CSS ist mit HTML eng verzahnt. Es lohnt sich daher, beide Sprachen gleichzeitig zu erlernen. Im HTML-Kapitel der vorliegenden Dokumentation werden Sie bei den Beschreibungen zu einzelnen HTML-Elementen deshalb immer auch auf die Möglichkeiten hingewiesen, wie Sie diese Elemente mit Hilfe von CSS gestalten können.
  
  CSS ist ebenso wie HTML eine Klartextsprache. Auch für CSS brauchen Sie keine bestimmte Software, es genügt ein Texteditor. CSS ist wie HTML eine offen dokumentierte und vom W3-Konsortium standardisierte Sprache, die Sie frei und ohne Lizenzprobleme verwenden können.
  
  Quelle: SelfHtml
Alles anzeigen

Eine CSS für mehrere HTML Seiten

Sollten die HTML ein unterschiedliches Layout haben, wird nicht für jede HTML eine eigene CSS benötigt. Das erreicht man mit einer "Class" Anweisung.

Der CSS-Code sieht beispielsweise so aus:

Code

BODY.ws 
{
 background-color: #FFFFFF;
 color: #000000;
}
 
BODY.gr 
{
 background-color: #C0C0C0;
 color: #000000;
}
 
BODY.rt 
{
 background-color: #FF0000;
 color: #000000;
}

Alles anzeigen

Jeder Body Tag erhält so seine eigenen Informationen.

Auf der jeweiligen HTML-Seite sieht der Body dann so aus:

Code

<BODY CLASS="ws"> Bla,bla <br /><div style="z-index:3" class="smallfont" align="center">Search Engine Optimization by <a rel="nofollow" href="http://www.crawlability.com/vbseo/">vBSEO</a> 3.2.0</div><br /><div style="z-index:3" class="smallfont" align="center">Search Engine Optimization by <a rel="nofollow" href="http://www.crawlability.com/vbseo/">vBSEO</a> 3.2.0</div><br /><div style="z-index:3" class="smallfont" align="center">Search Engine Optimization by <a rel="nofollow" href="http://www.crawlability.com/vbseo/">vBSEO</a> 3.2.0</div></BODY>

Diese Seite wird also eine weiße Hintergrund haben mit schwarzem Text.

CSS und der HEAD Bereich

Die CSS ist ein eigener Dateityp, um es in das HTML Formular einzufügen, muss im HEAD Bereich der HTML dieser Tag stehen. (link.css ist die CSS Datei)
Code
```
<link rel=stylesheet type="text/css" href="link.css">
```
Nun werden die Informationen zusammen mit den HTML Quellencode umgesetzt.

Der Link wechselt vor dem anklicken die Farbe

Beispiel

Code

body { 
background-color: #ffffff; color: #000000;
}
A:link {
COLOR: #0000ff; TEXT-DECORATION: none; FONT-STYLE: normal
}
A:visited {
COLOR: #0000ff; TEXT-DECORATION: none; FONT-STYLE: normal
}
A:active {
COLOR: #33cc00; TEXT-DECORATION: none; FONT-STYLE: normal
}
A:hover {
COLOR: #33cc00; TEXT-DECORATION: none; FONT-STYLE: normal
}

Alles anzeigen

Rund um CSS

Jetzt mitmachen!

Teilen