HOME 

 WEBMASTER 

 • Workshops 
 HTML Grundlagen 
 Tabellen 
 Grafiken 
 Frames 
 Hyperlinks 
 CSS Grundlagen 
 • Tools 
 • Weblog 
 WEBMAIL 

 SERVICE 

 • Jetzt anmelden 
 • Login 
 • Support 
 • Passwort? 
 • Informationen 
 • Kontakt 
 ANMELDUNG 

Quick Navigation FreeCity » Webmaster » Workshops » CSS
Cascading Stylesheets für Einsteiger


Stylesheets sind mittlerweile ein fester Bestandteil der Webseiten-Programmierung geworden. Sie erlauben die Festlegung von Formatvorlagen, die innerhalb von gekennzeichneten Passagen verwendet werden sollen. Dabei sind sie nicht nur flexibler als "normale" HTML-Tags, sondern sie ersparen auch eine Menge Arbeit, da eine ganze Fülle an Formatierungen mit nur einem Befehl wiedergegeben werden kann.

Formatierungen, die ein Stylesheet übernehmen kann:

  • Schrift, Schriftgröße und -farbe
  • Textauszeichnungen (Kursiv/ Fett/ Unterstrichen und andere)
  • Textausrichtung (Links/ Rechts/ Mittig/ Blocksatz)
  • Zeilenabstand
  • Wortabstand
  • Formatierung der Hyperlinks (Farben/ Unterstreichung/ Hover)
  • Die Eingabefelder von Formulare verändern
  • Formen von Mauszeigern
  • Rahmen
  • Hintergrundfarbe oder Hintergrundbild (auch für Textteile)
  • Randabstände
  • Positionierungen (relativ und absolut für beliebige Objekte)

CSS Befehle einsetzen - Möglichkeiten:
 

Beispiele:
1. Style Anweisungen direkt im Quellcode
Direkt im Quellcode sind Stylesheets nur bedingt einsetzbar. Beispielsweise innerhalb einer Überschrift oder eines Absatzes.
<h1 style="color : red">Überschrift</h1>
<p style="color : red">Text</p>

 

2. Style Anweisungen im <span> Befehl
Mit dem Befehle <span> können größere Bereiche im Quelltext definiert werden.
Sämtliche Inhalte, die in diesem Bereich eingefügt sind, werden mit diesem Befehl versehen..

<span style="line-height : 130%">Text</span>

 

3. Style Anweisungen im Dateikopf
Ebenso wie man "normale" HTML-Befehle bereits im <body> angeben kann, können auch Stylesheets bereits dort eingefügt werden, um die komplette HTML Seite zu formatieren werden.

 

  <html>
<head>
<title>Seitenname</title>
<style type="text/css">
<!--
P { line-height : 130%; text-align : justify ; color : red; font-weight : bold; font-size : 110% ;}
//-->
</style>
</head>
<body>
</body>
</html>

 

4. Style Anweisungen in einer externen Datei
Der eigentliche Platz von Stylesheets sing jedoch externe Dateien. Dadurch werden sie zur Formatvorlage (hier style.css) und können für den ganzen Webauftritt verwendet werden.
Das erspart nicht nur eine Menge Arbeit, Änderungen lassen sich somit lediglich durch das Bearbeiten dieser Datei durchführen.
Die externe Datei wird in einfachem Textformat gespeichert und enthält die Style Anweisungen im Klartext. Damit die darin enthaltenen Anweisungen wirken können, muss jede HTML-Seite das Stylesheet auch laden können.


 

Befehlszeile im Dateikopf (head):
<link rel="STYLESHEET" href="style.css" type="text/css">
Klicken Sie » hier um zu sehen, wie eine externe CSS-Datei aussehen könnte.

 

5. Style Anweisungen mit <class> Befehl
Mit dem Befehl "Class" lassen sich eigene Formate fest vergeben. Dazu sind zwei Sachen notwendig: Eine Markierung innerhalb der HTML Datei, und zwar dort wo die Formatierung wirken soll. Die Bezeichnung können Sie frei wählen, es wird ihr lediglich ein Punkt vorangestellt. Also beispielsweise .klein

Überall wo nun in der HTML Datei die Markierung .kl auftaucht, wird der Text in einer Größe von 9pt dargestellt, nach links ausgerichtet und mit einem doppelt so großen Abstand zu den anderen Zeilen versehen. Diese Vorgehensweise macht auch dort Sinn, wo durch ein externes Stylesheet bereits Formatierungen vorgesehen sind, diese werden sozusagen "überstimmt".

  .kl { font-size : 9pt; text-align : left; line-height : 130%;}

» Rahmen
» Textformatierung
» Übersicht

Gratis anmelden! 
Username

Passwort

Passwort vergessen? 
Dienste pflegen
Fragen - Antworten

DatenschutzerklärungNutzungsbedingungen | Impressum

FreeCity ein Dienst der KONTENT GmbH