I. Technik Grundbegriffe HTML-Syntax Text Farben Tabellen Formulare
Links-Multimedia Meta-Befehle Frames  CSS Forum Editoren


CSS - Cascading Style Sheets
Funktion und Zweck
 CSS in HTML-Datei einbinden
 Separate CSS-Datei
Formatdefinitionen mit dem style-Attribut
Aufgaben		  

Funktion und Zweck von CSS

Seitenanfang
CSS ist eine Ergänzung zu HTML, die es erst ermöglicht, Inhalt und Layout (Art der Darstellung) zu trennen. Es wird auf alle Angaben in HTML verzichtet, die mit dem reinen Markup (das sind in der Regel alle Attribute der Befehle) nichts zu tun haben. CSS ist eine Sprache zur Definition von Formateigenschaften einzelner HTML-Elemente. Mit CSS kann man zum Beispiel Abstände und Schriftgrößen festlegen, Rahmen und Hintergrundfarben definieren, pixelgenaue Positionierung von Elementen vornehmen und vieles mehr. CSS ist wie HTML ein softwareunabhängiger Textcode und wird vom W3C normiert.

Stylesheets bieten weitere Möglichkeiten. So können HTML-Elemente - egal ob Textabsätze, Listen, Tabellenzellen oder Formulare - mit einer eigenen Hintergrundfarbe, einem eigenen Hintergrundbild (Wallpaper) oder mit diversen Rahmen ausgestattet werden. Ein weiteres wichtiges Leistungsmerkmal von CSS ist die Möglichkeit, zentrale Formate zu definieren. So können Sie beispielsweise im Kopf einer HTML-Datei zentrale Definitionen zum Aussehen einer Tabellenzelle notieren. Alle Tabellenzellen der entsprechenden HTML-Datei erhalten dann die Formateigenschaften, die einmal zentral definiert wurden.

Sie können Ihre Stylesheet-Definitionen sogar in separaten Dateien notieren. Die Stylesheet-Dateien können Sie in beliebig vielen HTML-Dateien referenzieren. Auf diese Weise können Sie für große Projekte einheitliche Layouts entwerfen. Mit ein paar kleinen Änderungen in einer zentralen Stylesheet-Datei können Sie dann für hunderte von HTML-Dateien ein anderes Aussehen bewirken. CSS Stylesheets unterstützen also erstens die professionelle Gestaltung beim Web-Design, und zweitens helfen sie beim Corporate Design für große Projekte oder für unternehmensspezifsche Layouts.

 

CSS in HTML-Datei einbinden 

<head>
<title>Titel der Datei</title>
<link rel="stylesheet" type="text/css" href="formate.css">
<style type="text/css">
<!--
a:link { color:#fefefe; text-decoration:none; font-family:Arial,Verdana,Helvetica,sans-serif; }
a:visited { color:#fefefe; text-decoration:none; font-family:Arial,Verdana,Helvetica,sans-serif; }
a:active { color:#DD0099; text-decoration:none; font-family:Arial,Verdana,Helvetica,sans-serif; }
a:hover { color: #DD0099; text-decoration:underline; font-family:Arial,Verdana,Helvetica,sans-serif; }
//-->
</style>
</head>

 

Formate zentral in separater CSS-Datei definieren

In vielen Fällen werden Sie einheitliche Formate für alle HTML-Dateien Ihres Projekts haben wollen. In diesem Fall brauchen Sie die Angaben nicht in jeder Datei zu
wiederholen. Stattdessen können Sie die Formate in einer separaten Textdatei definieren und diese Datei einfach in jeder gewünschten HTML-Datei einbinden. Wenn Sie
die Angaben in der separaten Datei ändern, wirken sich die Änderungen einheitlich auf alle Dateien aus, in denen die separate CSS-Datei eingebunden ist.

Beispiel:

<html>
<head>
<title>Titel der Datei</title>
<link rel="stylesheet" type="text/css" href="formate.css">
<style type="text/css">
<!--
... hier sind datei-spezifische Formate erlaubt ...
-->
</style>
</head>
<body>
</body>
</html>

 

Dies ist die separate CSS-Datei: stilvorlage.css

<!--
/* DATEI: formate.css */
/* --- HINTERGRUND - DER GESAMTEN SEITE --- */
/* --- ABSTAND RAENDER --- */
body { background-color:#ffffff; color:#000336; margin-top:0px; margin-bottom:0px; margin-left:0px; margin-right:0px; }
/* --- SCHRIFT-FAMILIE --- */
body,p,h1,h2,h3,h4,ul,ol,li,div,td,th,address,blockquote,nobr,b,i
{ font-family:Arial,Verdana,Helvetica,sans-serif; }
/* --- LINKS --- */
a:link { color:#000080; text-decoration:underline; font-family:Arial,Verdana,Helvetica,sans-serif; }
a:visited { color:#000080; text-decoration:underline; font-family:Arial,Verdana,Helvetica,sans-serif; }
a:active { color:#DD0099; text-decoration:underline; font-family:Arial,Verdana,Helvetica,sans-serif; }
a:hover { color: #0000ff; text-decoration:underline; font-family:Arial,Verdana,Helvetica,sans-serif; }
/* normaler Text */
p,ul,ol,li,div,td,th,address,blockquote,i { font-size:pt; }
/* Ueberschrift 1 */
h1 { font-size:20pt; color:#ff0099}
/* Seitenueberschriften */
h2,h2.xmp,h2.xpl,h2.inf,h2.tip { font-size:18pt; color:#ff0099}
/* Zwischenueberschriften */
h3,h3.xmp,h3.xpl,h3.inf,h3.tip { font-size:16pt; color:#ff0099}
/* Zwischenueberschriften an manchen Stellen */
h4 { font-size:10pt; }
//-->

 

Formatdefinitionen mit dem style-Attribut

Sie können einzelne HTML-Elemente innerhalb des sichtbaren HTML-Dokuments mit Hilfe von Stylesheet-Eigenschaften formatieren. Die Formatdefinitionen gelten dann
genau für den Geltungsbereich des betreffenden HTML-Elements, und nach den Regeln der natürlichen Formatvererbung auch für Kindelemente des betreffenden Elements.
Sinnvoll ist diese Möglichkeit, wenn Sie entweder sonst auf CSS verzichten und es nur mal für ein paar Ausnahmen benötigen, oder wenn Sie zentrale Formate
verwenden, einzelne Elemente aber anders als mit den dort definierten Formatdefinitionen gestalten möchten.

<p style="background-color:#808040; color:#D8FD02;
font-family:'Century Schoolbook',serif; font-size:24pt; letter-spacing:3px;
padding:40px; border:double #D8FD02 4px;"
title="Zitat von Francis Picabia">
Unser Kopf ist rund, damit das Denken die Richtung wechseln kann!
</p>

 

Aufgaben

Seitenanfang

  1. Legen Sie im Kopf (Head) einer Datei mehrere Formate fest.

  2. Erstellen Sie eine separate Style-Sheet Datei.

  3. Arbeiten Sie mit dem Befehl "style".
  Frames Seite drucken Forum
I. Technik Grundbegriffe HTML-Syntax Text Farben Tabellen Formulare
Links-Multimedia Meta-Befehle Frames  CSS Forum Editoren
© Copyright by Johann-Lauer.de
Quelle: www.web-publishing.biz E-Mail: info@web-publishing.biz 		Seitenanfang