CyberTaRo  homepage bastlerseite html 4 counter freewebspace gästebuch CyberTaRo HomePageBastler
CyberTaRo
HomePageBastler

 .
.:*~*:._.:*~*:._.:*~*:._.:*~*:._.:*~*:._.:*~*:._.:*~*:._.:*~*:._.:*~*:.
.
.
.

.
Style Sheets
CSS - Cascading Style Sheets
 Skriptsprachen

.
Neue Möglichkeiten mit CSS
.
Style Sheets eröffnen dem Web-Designer layouterische Möglichkeiten, wie sie mit reinem HTML
undenkbar wären. Außerdem vereinfachen sie die einheitliche Gestaltung kompletter Sites.
Mit Cascading Style-Sheets (CSS)können Sie eigene Formate
kreieren und vorhandene HTML-Tags nach Wunsch exakt  formatieren. Obwohl die
Spezifikation zu CSS 1.0 bereits 1996 verabschiedet wurde, kann man sich nicht darauf
verlassen, dass alles kompatibel ist.

Style Sheets sind aber plattformabhängig.

CSS Style Sheets  ist  eine Sprache zur Definition von Formateigenschaften einzelner
HTML-Befehle. Mit Hilfe von Style-Sheets können Sie beispielsweise bestimmen, daß
Überschriften 1. Ordnung eine Schriftgröße von 18 Punkt haben, in der Schriftart Helvetica,
aber nicht fett erscheinen, und mit einem Abstand von 1,75 Zentimeter zum darauffolgenden
Absatz versehen werden. Angaben dieser Art sind mit herkömmlichem HTML nicht möglich.

Beispiel 1

Das ist aber nur der Anfang. Style-Sheets bieten noch viel mehr Möglichkeiten. So
können Sie beliebige Bereiche einer HTML-Datei mit einer eigenen Hintergrundfarbe,
einem eigenen Hintergrundbild (Wallpaper) oder mit diversen Rahmen versehen. Sie
können beliebige Elemente, sei es eine Grafik, ein Textabsatz, eine Tabelle oder ein
Bereich aus mehreren solcher Elemente, pixelgenau im Anzeigefenster des WWW- Browsers
positionieren. Für Drucklayouts stehen Befehle zur Definition eines Seiten- layouts bereit.
Für die akustische Wiedergabe von HTML-Dateien gibt es ein ganzes Arsenal an Befehlen,
um künstliche Sprachausgabesysteme feinzusteuern.
 

Zentrale Style-Sheet-Datei

Ein weiteres wichtiges Leistungsmerkmal von Style-Sheets ist es, daß Sie Definitionen
zentral angeben können. 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 sind. Das spart Kodierarbeit und macht die HTML-Dateien kleiner. Sie können
Ihre Style-Sheet-Definitionen sogar in separaten Dateien notieren. Solche
Style-Sheet-Dateien können Sie in beliebig vielen HTML-Dateien referenzieren. Auf
diese Weise können Sie für große Projekte einheitliche Layouts entwerfen. In diesem
Fall brauchen Sie die Angaben nicht in jeder Datei zu wiederholen. Stattdessen können
Sie die Style-Sheet-Angaben in einer separaten Textdatei notieren und diese Datei
einfach in jeder gewünschten HTML-Datei einbinden.

BEISPIEL:

<html>
  <head>
  <title>Titel der Datei</title>
  <link rel=stylesheet type="text/css" href="formate.css">
  <style type="text/css">
  <!--
    ... Extra-Style-Sheet-Angaben ...
  //-->
  </style>
  </head>
  <body>
     ...BODY-Befehle
  </body>
  </html>

Mit ein paar kleinen Änderungen in einer zentralen Style-Sheet-Datei können Sie dann für
hunderte von HTML-Dateien ein anderes Layout bewirken. Diese Dateien haben die
Endung .css und sehen so aussehen:

/* DATEI: wselfhtm.css */
/* Wenn Ihnen Schriftarten, Schriftgroessen usw. von SELFHTML */
/* nicht passen, editieren Sie diese Datei und aendern */
/* Sie gewuenschte Werte. */
/* Bei Weitergabe oder Wiederveroeffentlichung von SELFHTML */
/* lesen Sie bitte den unteren Teil der Datei ab "WICHTIG"! */
/* Aenderungen auf eigene Gefahr! Der Autor leistet keinen */
/* Support bei Anzeigeproblemen, die durch Aenderungen in */
/* dieser Datei zustande kommen! */
/* Zeilen wie diese, die mit Schraegstrich und Stern */
/* beginnen und mit Stern und Schraegstrich enden, sind */
/* Kommentarzeilen. */
/* Es folgen die Style-Definitionen, die Sie aendern koennen: */
/* Unterhalb jedes Befehls steht eine Kurzerklaerung*/body {
                      margin-top:10px;margin-bottom:10px; }
/* margin-top = Abstand zwischen Fensterrand und Inhalt oben */
/* margin-bottom = Abstand zwischen Fensterrand und Inhalt unten */
/* 10px = 10 Pixel,Wert
                    aenderbar/p,h1,h2,h3,h4,ul,ol,li,div,td,th,address,blockquote,nobr,b,i
                    { font-family:Arial,sans-serif; }
/* font-family = Schriftart fuer Textelemente */
/* Arial,sans-serif = Arial und serifenlose Schrift, Wert aenderbar */
                    h1 { font-size:18pt; }
/* gilt nur fuer das Wort 'SELFHTML' auf der Einstiegsseite */
/* font-size = Schriftgroesse */
/* 18pt = 18 Punkt, Wert aenderbar */h2 { font-size:16pt; }
/* Seitenueberschriften */
/* font-size = Schriftgroesse */
/* 16pt = 16 Punkt, Wert aenderbar */h2.sh2 { font-size:16pt; }
/* Abschnittsueberschriften innerhalb einer Seite */
/* font-size = Schriftgroesse */
/* 16pt = 16 Punkt, Wert aenderbar */h3,h3.xmp,h3.xpl,h3.inf,h3.tip { font-size:12pt; }
/* Zwischenueberschriften wie 'Beispiel', 'Erlaeuterung' */
/* font-size = Schriftgroesse */
/* 11pt = 11 Punkt, Wert aenderbar */h4 { font-size:10pt; }
/* Zwischenueberschriften an manchen Stellen */
/* font-size = Schriftgroesse */
/* 10pt = 10 Punkt, Wert aenderbar */
                              p,ul,ol,li,div,td,th,address,nobr,b,i { font-size:10pt; }
/* normaler Text */
/* font-size = Schriftgroesse */
/* 10pt = 10 Punkt, Wert aenderbar */
/* normaler Text */
/* font-size = Schriftgroesse */
/* 10pt = 10 Punkt, Wert aenderbar */
                     pre { font-family:Courier New,Courier; font-size:10pt; color:#0000C0; }
/* Quelltext-Beispiele */
/* font-family = Schriftart */
/* Courier New,Courier = Schriftarten, Wert aenderbar */
/* font-size = Schriftgroesse */
/* 10pt = 10 Punkt, Wert aenderbar */
/* color = Farbe */
/* #0000C0 = blau, Wert aenderbar */
                          tt { font-family:Courier New,Courier; font-size:10pt; color:#0000C0; }
/* Quelltext-Befehle im normalen Fliesstext */
/* font-family = Schriftart */
/* Courier New,Courier = Schriftarten, Wert aenderbar */
/* font-size = Schriftgroesse */
/* 10pt = 10 Punkt, Wert aenderbar */
/* color = Farbe */
/* #0000C0 = blau, Wert aenderbar */
                   td.xmpcode { border-width:1pt; border-style:solid border-color:#999999;
                   background-color:#FFFFE0; }
/* Bereiche mit Beispiel-Quelltexten */
/* nur MS IE 4, Netscape 4.0 ignoriert diese Angaben */
/* border-width = Randbreite */
/* 1pt = 1 Punkt, Wert aenderbar */
/* border-style = Randstil */
/* solid = durchgezogen, Wert aenderbar */
/* border-color = Randfarbe */
/* #999999 = grau, Wert aenderbar */
/* background-color = Hintergrundfarbe */
/* #FFFFE0 = helles Gelb, Wert aenderbar */.code { background-color:#FFFFE0; }
/* Tabelleninhalte mit Quellcode */
/* background-color = Hintergrundfarbe */
/* #FFFFE0 = helles Gelb, Wert aenderbar */
/* Farbe sollte gleich sein wie bei td.xmpcode */td.xplcode {
                            background-color:#EEEEFF; }
/* Tabelleninhalte mit Erklaerungen */
/* background-color = Hintergrundfarbe */
/* #EEEEFF = helles Blau, Wert aenderbar */.doc { background-color:#EEEEEE; }
/* Layout-Elemente mit hellgrauem Hintergrund */
/* background-color = Hintergrundfarbe */
/* #EEEEEE = helles Grau, Wert aenderbar */
               .qbar { background-color:#FFFFE0; font-size:9pt; font-family:Arial,sans-serif; }
/* Layout-Elemente mit hellgrauem Hintergrund */
/* nur MS IE 4, Netscape 4.0 ignoriert diese Angaben */
/* background-color = Hintergrundfarbe */
/* #FFFFE0 = helles Gelb, Wert aenderbar */
/* font-family = Schriftart */
/* Arial,sans-serif = Schriftarten, Wert aenderbar */
/* font-size = Schriftgroesse */
/* 9pt = 9 Punkt, Wert aenderbar */pre.normal { color:#000000; }
/* normale praeformatierte Bereiche, nicht fuer Quelltexte */
/* color = Farbe */
/* #000000 = schwarz, Wert aenderbar */
a:link { color:#AA5522; text-decoration:underline; }
a:visited { color:#772200; text-decoration:underline; }
a:active { color:#000000; text-decoration:none; }
/* a:link = Verweise zu noch nicht besuchten Seiten */
/* a:visited = Verweise zu bereits besuchten Seiten */
/* a:active = Verweise, die gerade angeklickt werden */
/* color = Farbe */
/* #AA5522 = kotzbeige, Wert aenderbar */
/* #772200 = scheissbraun, Wert aenderbar */
/* #000000 = schwarz, Wert aenderbar */
/* text-decoration = Tesxtstil */
/* underline = unterstrichen, Default-Wert, Wert aenderbar */
/* none = nicht unterstrichen, Wert aenderbar */a.an { text-decoration:none; }
/* Wenn Sie sich mit Style-Sheets */
/* auskennen, koennen Sie weitere Angaben notieren */

/*******   WICHTIG   *******/

/* Wenn Sie diese Datei fuer Ihre persoenlichen Zwecke geaendert */
/* haben und das Dokument weitergeben oder wiederveroeffentlichen */
/* wollen, muessen Sie die Original-Einstellungen wiederherstellen */
/* Gehen Sie dazu beispielsweise folgendermassen vor: */
/* Im Verzeichnis von SELFHTML gibt es eine Datei 'wsave.css' */
/* Kopieren Sie die Datei wsave.css auf die Datei wselfhtm.css */
/* Hinterher muessen beide Dateien vorhanden sein, und beide */
/* muessen den Inhalt von wsave.css haben */

 

Der <style> - Tag und die Event-Händler

Die vielleicht wichtigsten Neuigkeiten von HTML 4 sind das Tag <style>, das
Attribut style= sowie Attribute wie onClick= oder onKeypress= (die sogenannten Event- Händler).
Denn diese Befehle weisen über HTML hinaus und integrieren andere, weiterführende Sprachen
mit speziellen Aufgaben offiziell in die
HTML-Sprache. Mit Hilfe des <style>-Tags und des style-Attributs lassen sich Cascading
Style Sheets (CSS) in HTML einbetten. Die CSS-Sprache, genauso wie HTML vom
W3-Konsortium normiert, erlaubt das beliebige Formatieren einzelner HTML-Elemente.
So ist es kein Problem mehr, einer Überschrift zu sagen, sie solle mit 14 Punkt Schriftgröße
in Helvetica kursiv mit Nachabstand 16 Punkt und gelbem
Rahmen oberhalb dargestellt werden. Das ist aber nur der Anfang. Die mächtige CSS-Sprache
hält mittlerweile für Hintergrundbilder, pixelgenaues Positionieren von Elementen, für die
Umbruchkontrolle beim Ausdruck von Seiten usw. Befehle bereit. Es lassen sich auch
seitenüber- greifende Layouts definieren, die dann für hunderte von Web-Seiten gültig sein
können. All dies ist durch das <style>-Tagund das style-Attribut Bestandteil von HTML geworden.

 Netscape und MS IE

Daß man beim Gestalten von Seiten für das Web mit Schwierigkeiten zu kämpfen hat, die aus
der Inkompatibilität der beiden wichtigsten Browser miteinander erwachsen, gilt beim Einsatz von
Style Sheets ganz besonders. Netscape und MS IE interpretieren die Style-Sheets unterschiedlich.
Derzeit ist noch viel umständliches Doppelkodieren für beide Browser notwendig.
 

CSS - Beispiel 2

Damit ein reines Textdokument einigermaßen ansehnlich im Browser aussieht, werden für unsere Beispielseite folgende Formatierungen vorgenommen: Der Text soll auf weißem Hintergrund mit
einem schmalen Farbverlauf am linken Seitenrand erscheinen, wobei links, oben und rechts
genügend Platz bleiben soll, um ein übersichtliches Erscheinungsbild zu gewährleisten.
Der Fließtext wird mit einer Serifenschrift in 12pt in Blocksatz gesetzt, wobei der erste Absatz
nach einer Überschrift keinen, alle anderen dagegen einen Einzug der ersten Zeile haben.

Die Überschriften erhalten eine serifenlose Schrift und stehen in einem Farbbalken, der sich
über die ganze Textbreite erstreckt. Außerdem erhalten sie einen Schatten. Für besondere
Hervorhebungen schließlich gibtes Textboxen mit einem Rahmen sowie Markersymbole und
Text am linken Seitenrand.
 


Style Sheet-Editoren

  Es gibt jetzt Editoren zum Erstellen von Cascading Style Sheets:

    
      Style Maker                  http://danere.com/StyleMaker/
      CoffeeCup StyleSheet Maker++  http://www.coffeecup.com/

  Viele HTML-Editoren werden ohne Zweifel ebenfalls beginnen,
   Unterstützung für CSS anzubieten

LINX zu CSS Style Sheets
 

W3 Konsortium
http://www.w3.org/Style

Web Developer`s Virtuelle Bücherei
http://www.wdvl.com/
 

Grundregeln
http://www.htmlhelp.com/reference/css/structure.html

 .
.
.:*~*:._.:*~*:._.:*~*:._.:*~*:._.:*~*:._.:*~*:._.:*~*:.
.:*~*:._.:*~*:._.:*~*:._.:*~*:._.:*~*:._.:*~*:._.:*~*:.
.

IMPRESSUM
www.CyberTaRo.de
PC und Internet   GrafikGalerien Sport, Hobby  MiscCyberTaRo`s WebSpace
Suchen  In allen Inhalten von cybertaro.de   -    Gästebuch  -   Portrait
Email an webmasters@kinkel-bischem.de             webmasters@kinkel-bischem.de
D-Frankfurt/M    Website eroeffnet  am 09-09-99   Update  1.1.2003