Suchfunktion


 
 

Navigation

Inhaltsverzeichnis
Informatik

Startseite

CSS (Cascading Style Sheets) - Eine Einführung

Allgemeines:
Auf Lernort-Mint.de findet sich eine kurze Einführung in die Verwendung von "HTML" zur Erstellung von Webseiten. CSS (kurz: Cascading Style Sheets) wird dazu verwendet, das Aussehen (Layout) von HTML-Dokumenten festzulegen z.B. zu erzeugen (Schriftarten, Farben, Hintergrund). Dies lässt sich auch mit "HTML" durchführen, nur ist die Verwendung von CSS einfacher und strukturierter.
 

Vorteile von CSS:
Wie bereits in der Einleitung erwähnt, ist man mit "HMTL" auch in der Lage, das Layout von Webseiten zu gestalten bzw. erstellen. Bekannte "HTML"-Befehle dazu sind z.B. <table>.....</table> (zum Erstellen von Tabellen) oder <p> als Befehl für einen Absatz.

  • Der Hauptvorteil von CSS ist, dass das Layout mehrere Webseiten mit Hilfe einer einzigen CSS-Datei übernommen werden kann, dadurch muss nicht mehr jede Seite mühsam mit HTML-Befehlen erzeugt werden.
  • Ein weiterer Vorteil ist, dass CSS von allen Webbrowsern unterstützt wird. Einige HTML-Befehle, wie bespielsweise <blink>...</blink> werden nur von einigen Browsern "verstanden".
  • Zusätzlich sind die CSS-Befehle den HTML-Befehlen teilweise sehr ähnlich.


CSS (Cascading Style Sheets)
Wie bereits erwähnt ist CSS und HTML teilweise sehr ähnlich, deswegen können CSS-Dateien auch mit jeden Textprogramm (z.B. Editor) geschrieben werden.
So wird eine einfache Webseite mit HTML-Befehfeln  aufgebaut (ohne Lyout)

<HTML>
<HEAD><TITLE> Name der Website</TITLE></HEAD>
<BODY>
Hier steht, was nachher im Browser erscheint.
</BODY>
</HTML>

Nun kann man z.B eine Hintergrundfarbe definieren (z.B. rot), dazu verändert man den "Body (Körper der Webseite)". So lautet der Befehl nun: <body bgcolor="#FF0000">

"Übersetzt" man nun den HTML-Befehl in CSS, so lautet dies body {background-color: #FF0000;}
Allgemein leitet sich der CSS-Befhel aus dem HTML-Tag (selector), der Eigenschaft (property) und dem Wert der Eigenchaft ab (value). Somit erhält man den allgemeinen Aufbau eines CSS-Befehles:

 selector {property: value;}

Einige CSS-Befehle:

  • Hintergrundfarbe: body {background-coulor: value;}
  • Hintergrundbild: body {background-image: url("Dateiname");}
  • Textposition, z.B. Außenabstand definieren: body {margin: 100px 10px 10px 100px;}


Einbinden von CSS-Befehlen in eine Website:
Prinzipiell gibt es drei Möglichkeiten, CSS-Befehle einzubauen:

  • Die sog. In-line (Attribut-Stil)-Methode, dabei wird dies über den Befehl "style" direkt in die html-Datei eingebunden, also zwischen <body> und </body> (z.B. <body style="background-color: #FF0000;">)
  • Eine weitere Möglichkeit ist die sog. In-document (Tag-Stil)-Methode, dabei werden die CSS-Befehle im Header der htlm-Datei eingebunden). 
<html>
   <head>
  <title>Name der Webseite</title>
  <style type="text/css">
    body {background-color: #FF0000;}
  </style>
   </head>
   <body>
  • Die häufigst verwendete Methode ist der Verweis auf eine CSS-Datei. Dazu wird zwischen <head> und </head> folgender Befehl eingefügt: <link rel="stylesheet" type="text/css" href="Name.css" />. Die CSS-Datei ist dabei ein externes Stylesheet in Form einer Textdatei mit der Endung .css.Wichtig ist, dass der Verweis href= auf das richtige Verzeinis weist.

  •  
.