CSS Cascading Style Sheets

css-logo

Cascading Style Sheets können das Aussehen von Internetseiten fest legen. Dabei wird jedem Strukturelement (z.B. Überschrift, Liste, usw.) ein besonderes Aussehen/Format zugewiesen. Ähnich dem Arbeiten mit Formatvorlagen in der Textverarbeitung erleichtert dies die Formatierung von HTML/XHTML/XML Seiten, so dass ein Internetauftritt auf einfache Weise ein durchgängiges Layout erhält.

Wie geht das?

Das Festlegen der Formatierung kann auf zwei Arten erfolgen:

  1. Die notwendigen Einstellungen werden in jeder einzelnen (X)HTML-Datei in den Header geschrieben oder bei den einzelnen TAGs hinzugefügt.
    Diese Methode sollte nicht verwendet werden, da bei Änderungen diese in jeder (X)HTML-Datei durchgeführt werden müssen.
  2. Die Formate werden in einer eigenen CSS-Datei festgelegt und diese wird von jeder HTML-Datei verwendet, so dass alle Seiten eines Webauftritts ein ähnliches Layout haben. Änderungen an der Formatierung müssen nur einmal durchgeführt werden und wirken sich auf alle eingebundenen (X)HTML-Seiten aus. Diese Methode soll im Weiteren vertieft werden.
HTML entwickelt sich weiter

Seit HTML 4.0 schreiben die Spezifikationen vor, dass viele Formatierungen durch CSS realisiert werden sollen.

Unter XHTML werden zahlreiche HTML-Formatdefinitionen nicht mehr unterstützt, unter XML wird der Text komplett von der Formatierung getrennt und es sind externe CSS Definitionen notwendig.

Syntax CSS

Selector (=TAG-Name) { Eigenschaft: Wert; }

h1 {color: red;}
(X)HTML Header

In den <head> Bereich muss der Eintrag der CSS-Datei erfolgen:

<link href="bini-demo.css" rel="stylesheet" type="text/css" />
Basics
Die CCS-Datei kann mit einem einfachen Editor erstellt werden und enthält alle notwendigen Formatinformationen. Dabei sollte auf Übersichtlichkeit geachtet werden und strukturierte Verfeinerung praktiziert werden. D.h. zuerst werden Formate für mehrere Elemente definiert, die in Folge verfeinert werden.
Kommentar

Eine Information am Beginn der CSS-Datei kann wertvolle Informationen liefern (Author, letzte Änderung, ...) oder die Überlegungen bei der Entwicklung leichter nachvollziehen lassen.

/* basic-01.css 2010-08 bi 
         einfache Beispiele */
*

Der Universalselektor * steht für alle Elemente, d.h. alle innerhalb von * aufgelistete Definitionen gelten für alle (X)HTML-TAGs.

* {font-family:comic sans ms; color:pink;}

In diesem Beispiel werden alle Ausgaben in der Schrift Comic (sofern diese am PC des Betrachters installiert ist) und in pink dargestellt.

Vorschau

Farbe im Hintergrund

Nun soll eine Hintergrundfarbe gestzt werden. Dabei kann man auf einige wenige vordefinierte Farben zurückgreifen

body {background:green;}

oder diese im Farbcode des Hexadezimalsystems angeben.

body {background:#00FF00;} 

Vorschau

Bild im Hintergrund

Beim Einbinden eines Hintergrundbildes sollte unbedingt darauf geachtet werden, dass die Ladezeit kurz gehalten wird (nicht alle Besucher haben eine schnelle Internetverbindung) und ev. die Effekte eines Kachelmusters ausgenutzt werden können.

body {background:#bcbcbc url(bg.jpg);}

In der Definition sollte stets die Hintergrundfarbe der Farbe des Bildes entsprechen, damit die Farbgebung auch dann noch stimmig ist, wenn das Hintergrundbild nicht geladen werden kann.

Vorschau

Schrift & Farbe

Durch Farben können bestimmte Texte klarer strukturiert werden, z.B können Überschriften unterschiedliche Färbungen erhalten.

h1 {color: magenta;}
h2 {color: #009900;}

Diese Art der Definition kann für so gut wie alle Schriftbereiche verwendet werden.

Vorschau

Text & Ausrichtung

Damit Texte automatisch ausgerichtet werden, kann die Eigenschaft text-align mit den Werten left, right, center verwendet werden.

h1 {color: magenta; text-align:center;}
h6 {text-align:right;}

Vorschau

Schrift & Dicke

Mit der folgenden Eigenschaft kann die Schriftstärke variiert werden, folgende Werte sind zulässig: normal, bold, bolder, lighter, 100-900, ...

p {font-weight:bolder;}

Allerdings muss dies, von der jeweiligen Schrift auch unterstützt werden.

Vorschau

Schrift & Stil

Ein schräger Schriftstil kann erreicht werden durch:

p {font-style:italic;}

Vorschau

Schrift & Art

Man unterscheidet serifenfreie Schriftfamilien (z.B. Arial - eine solche Schriftart wird hier im Fließtext verwendet) und Schriften mit Serifen (aus dem Französischen für Füßchen), also mit feinen Linien an den Buchstabenenden (z.B. Times New Roman - bei den Codebeispielen findet diese Schriftart Verwendung).

h4 {font-family: Arial, Helvetica, sans-serif;}
h5 {font-family: xyz, "Snap ITC", "Times New Roman", serif;} 

Ist die Schrift Arial am PC des Betrachters installiert, so wird diese Schrift verwendet. Sind mehrere Schriftfamilien angegeben, so wird die erste passende, d.h. jede die als erste in der Liste mit einer installierten Schrift übereinstimmt verwendet. Um sicher zu gehen, dass das Layout auch ohne korrekt passender Schrift optimal dargestellt wird, sollte als letzte Eintragung in der Liste, der Typ der Schriftfamilie angegeben werden.

Vorschau

Schrift & Größe

Die Angabe von Schriftgrößen erfolgt in vielen Fällen durch die Angabe der Größe in Punkt (pt). Dieses Maß stammt aus dem Druckergewerbe, doch leider erscheint ein Punkt auf verschieden Ausgabegeräten unterschiedlich groß, so dass sich dies negativ auf das Gesamtlayout auswirken kann.

Daher ist es günstiger eine Basisschriftgröße zu definieren und alle weiteren Schriftmaße in Abhängigkeit dieser zu definieren. Mit der Einstellung

html {font-size: 62.5%;}  

erreicht man eine Schriftgröße, die auf fast allen Bildschirmen und unter verschiedenen Betriebssystemen etwa einer 10pt Schrift entspricht.

Alle weiteren Schriftgrößen werden nun in der Einheit em definiert, wobei 1em der Basisschriftgröße entspricht. D.h. 1.2em etspricht etwa einer 12pt Schrift.

h3 {font-size: 1.2em;}

Dabei ist zu beachten, dass sich die Definitionen vererben und sich eine relative Definition stets auf das Elternelement bezieht.

Vorschau  Schriftgrößenvergleich

Links & Gestaltung

Links sind ganz wichtige Elemente bei Internetauftritten und können in vielfältiger Weise gestaltet werden. Jedoch sollte hier mit Augenmaß vorgegangen werden, damit nicht unschöne Effekte auftreten:

  1. Keine Schriftgrößenänderungen, damit der Text nicht zu springen beginnt und neu umgebrochen wird, dies erschwert die Orientierung auf der Seite.
  2. Keine Änderung der Schriftstärke, dies würde zu den selben Effekten wie oben führen.
  3. Besuchte und unbesuchte Links deutlich unterscheiden.
  4. Hover-Efekte sparsam einsetzen, am besten nur in Menüs.
  5. Weniger ist mehr: dezente Farbänderungen passen besser in das Gesamtbild, dabei sollte darauf geachtet werden, dass die Links nicht mit Überschiften verwechselt werden.

Die Definition für alle Links könnte so aussehen:

a {font-weight:bold; 
   text-decoration:underline; 
   color:#990000}

dabei wird der Link fett, rot und unterstrichen dargestellt.

Vorschau

Nun sollen bereits besuchte Links nicht unterstrichen dargestellt werden (dieser Effekt ist Browserabhängig und funktioniert leider nicht immer), daher wurde auch der Hover-Effekt aktiviert:

a:link {}
a:visited {text-decoration:none;}
a:hover {text-decoration:none;}
a:active {}

Die anderen Linktypen bleiben unverändert und müssen auch nicht angeführt werden.

Vorschau

Besonders nett können Links mit automatisch hinzugefügten Grafiken gestaltet werden. Dazu müssen allerdings eigene Klassen erstellt werden.

Vorschau

Aufzählungen & Nummerierungen

Listen stellen heute ein sehr mächtiges und attraktives Gestaltungselement von Webauftritten dar. Durch verschiedene vordefinierte Stile oder eigene Symbole können Listen individuell angepasst werden.

ul {list-style-type:circle;}

Folgende Werte können gesetzt werden: none, circle, square, disc, decimal, upper-alpha, lower-alpha, upper-roman, lower-roman, lower-greek. (Es reicht auch die Kurzform list-style zu verwenden.)

Eine eigene Grafik als Aufzählungszeichen kann gesetzt werden durch:

ul {list-style-image:url(star16.png);}

Hierbei ist zu beachten, dass die Größe der Grafik jener der Schrift angepasst wird, so dass es nicht zu unschönen Verschiebungen kommt.

Vorschau

Tabellen & Rahmen

Nach dem Siegeszug von Tabellen als layoutbestimmendes Element, sollten diese heute nur mehr für tabellarische Auflistungen genutzt werden. Durch die Vielzahl von anwendbaren CSS-Eigenschaften können diese Daten optisch in den Vordergrund gerückt werden oder elegant Information preisgeben.

Durch Rahmen können die einzelnene Eintragungen voneinander getrennt werden. Dabei muss unterschieden werden zwischen einem Rahmen für die ganze Tabelle, d.h. das table-TAG bekommt einen Rahmen:

table {border:medium solid blue;}

Es wird wieder die Kurzschreibweise verwendet um die Dicke, die Art und die Farbe des Rahmens festzulegen; selbstverständlich kann auch jede Eigenschaft einzeln definiert werden.

Aber auch jede einzelne Zelle kann mit einen Rahmen versehen werden, dann muss die Definition allerdings der Zelle, also dem td-TAG zugewiesen werden:

td {border:thin dotted yellow;}

Die Definition einer Hintergrundfarbe für eine Zelle oder ganze Zeile kann diese auch deutlich kennzeichnen:

tr {background-color:pink;}

Mehr Luft bringt man in die Tabelle, indem der Abstand des Textes zum Zellenrand vergößert wird:

td {padding:5px;}

Sollen hingegen die einzelnen Zellen voneinener einen Sicherheitsabstand einhalten, so muss der Außenabstand vergrößert werden. Vorsicht margin funktioniert hier nicht!

table {border-spacing:10px;}

Sollen leere Zellen angezeigt werden, d.h. Hintergrundfarbe und Rahmen erhalten bleiben, so muss dies dem Browser mitgeteilt werden. Verschiedene Browser behandeln leere Zellen unterschiedlich.

table {empty-cells:show;}

Sollen leere Zellen hingegen nicht angezeigt werden, d.h. Hintergrundfarbe und Rahmen sollen verschwinden, so wird die Eigenschaft auf hide gesetzt.

table {empty-cells:hide;}

Eine Tabelle kann aber auch kompakter gestaltet werden, indem kein Abstand zwischen den Rahmen erzeugt wird, sondern diese zusammenfallen:

table {border-collapse:collapse;}

Soll der Abstand bewusst gesetzt werden, so muss der Eigenschaft der Wert seperate zugewiesen werden.

table {border-collapse:seperate;}

Vorschau

Die Verwendung der Pseudoklasse hover gibt auch einen recht netten Effekt:

tr:hover {background-color:aqua;}

Vorschau

Verschachtelte Definitionen

Bis jetzt haben wir uns darauf beschränkt einzelnen (X)HTML-TAGs ein neues Erscheinungsbild zu verleihen. Durch CSS-Definitionen wurden die Eigenschaften von einzelnen Objekten verändert. Oft reichen diese Möglichkeiten leider nicht aus, um ein ansprechendes Layout zu gestalten. Betrachtet man die Definition einer Liste, so legt man mit der Definition das Aussehen ALLER Listen fest. D.h. es ist nicht mehr möglich eine Liste in einer Liste (normalerweise eingerückt und ein anderes Aufzählungszeichen) zu erkennen. Dieser Unterschied kann durch verschachtelte CSS-Definitionen erreicht werden:

ul    {list-style-type:circle;}
ul ul {list-style-type:square;
	   margin-left:100px;}

Vorschau

Klassen

Reichen die vorgegebenen (X)HTML-TAGs nicht aus und möchte man besondere Formatierungen öfter in einem Dokument verwenden, so bieten die Klassendefinitionen strukturelle Erweiterungen zu etablieren. Klassen sollten nicht dazu missbraucht werden, um Formateigenschaften zuzuweisen, sondern sollten im Sinne der Struktur eines Dokuments verwendet werden.

Möchte man einzelne Worte in einem Satz grün schreiben, so sollte nicht eine Klasse gruen erstellt werden, denn dies kann keinem Strukturelement der Seite zugeordnet werden. Aber es könnte eine Klasse Hinweis erstellt werden, die auch grüne Schrift erzeugen soll, aber nun mit einer Dokumentstruktur verknüpft werden kann.

.hinweis {color:green;}

Diese Definition kann mit allen (X)HTML-TAGs verwendet werden und ist somit universell einsetzbar.

Möchte man hingegen eine Klasse nur für ein bestimmtes TAG definieren, so ist dies auch möglich und erhöht ein wenig die Übersichtlichkeit:

p.merksatz{border:thin;
			border-style:solid;
			border-color:red;
			padding:5px;
			background-color:#FF99FF;
			color:blue;
			letter-spacing:1pt;}

Diese Definition kann nur auf Absätze, also p-TAGs angewendet werden.

Die Verwendung in der (X)HTML-Datei erfolgt über folgenden Eintrag:

<p class="merksatz">CCS und HTML bieten ... <p>

Vorschau

ID-Selector

Soll ein Objekt ganz speziell layoutiert werden, so muss dieses eine eindeutige Kennzeichnung erhalten. Dies kann auf ähnliche Weise, wie bei den Klassen erfolgen, jedoch sollte das so gekennzeichnete TAG nur ein einziges Mal innerhalb der (X)HTML-Seite auftreten. Dem Objekt wird eine eindeutige ID zugewiesen:

<p id="motto">Wir machen es besser!<p>

Die Formatdefinition erfolgt wie bei den Klassen, nur dass der trennende Punkt durch ein Nummern-Symbol ersetzt wird:

p#motto{background-color:maroon;
			color:yellow;
			font-family:Broadway, sans-serif;
			font-size:2em;
			padding:1.2em;}

Vorschau

span & div

Diese beiden (X)HTML-TAGs entfalten mittels Klassen und IDs ihre wahre Größe. Beide TAGs besitzen kein spezielles Aussehen und werden von den meisten Browsern quasi ignoriert. D.h. das span-TAG erscheint, als Inline-Element, als normaler Fließtext und das Block-Element div, erscheint als normaler Absatz ohne besondere Auszeichnung. Mittels Klassen bzw. IDs können nun diese unscheinbaren TAGs neues Format erlangen.

span.fehlermeldung {background-color:yellow;
		color:red;}
div#box {border:medium red solid;
		background-color:aqua;
		padding:7px;
		margin:60px;
		width:180px;}

Vorschau

Boxen

Die im obigen Abschnitt angesprochenen Boxen (rechteckige Bereiche) werden heute, wegen ihrer Vielseitigkeit zur Gestaltung der meisten Webseiten genutzt. Mit ihrer Hilfe können Objekte genau positioniert und am Schirm ausgerichtet werden. Dies ermöglicht es Bereiche für Kopf- und Fußzeilen, Menüs und Inhalt festzulegen. Die unzähliche Eigenschaften erlauben es jeder Box ihr spezielles Design und Verhalten zuzuweisen.

Ein paar dieser Möglichkeiten sollen nun vorgestellt werden, wobei viele dieser Einstellmöglichkeiten miteinander kombiniert werden können und so wieder neue Erscheinungsformen zulassen. Damit die Maße der Boxen leichter nachvollzogen werden können, sollte stets der Aufbau jeder Box im Hinterkopf gehalten werden (Abb. von selfhtml.de)

Boxmodel

Leider halten sich nicht alle Browser an diese Nomenklatur, so dass es gelegentlich zu Abweichungen kommen kann.

Zu den Grundeinstellungen jeder Box gehören ihre Breite und Höhe, damit die Ausmaße der Box deutlich sichtbar werden, soll noch ein dünner roter Rahmen die Box umschließen:

div {width:200px; 
		height: 150px; 
		border: thin solid red;}

Vorschau

Nun soll die Box an eine bestimmte Position gerückt werden und zwar soll sie von der linken oberen Bildschirmecke einen linken Abstand von 110px und einen oberen Abstand ebenfalls von 110px aufweisen, d.h. nach rechts und nach unten verschoben werden:

div {position:absolute; 
		left:110px; 
		top:110px;
		width:200px; 
		height:150px; 
		border:thin solid red;
		background-color:yellow;}

Vorschau

Damit die vorhandene Information nicht von der Box überdeckt wird, soll nun die Box relativ zum letzten Blockelement (Absatz) positioniert werden.

div {position:relative; 
		left:50px; 
		top:50px;
		width:200px; 
		height:150px; 
		border:thin solid red;
		background-color:yellow;}

Vorschau

Die Box kann horizontal zentriert werden, indem der Browser den seitlichen Abstand automatisch ermittelt:

div {margin-left:auto; 
		margin-right:auto; 
		width:200px; 
		height:150px; 
		border:thin solid red;
		background-color:yellow;}

Vorschau

Enthält eine Box mehr Text als sie aufnehmen kann, so ist es vom Browser abhängig wie die Darstellung erfolgt. Manche Browser schreiben den Text einfach über den Rand, andere vergrößern die Box.

Vorschau

Damit die Box mitwachsen kann, darf keine Höhe angegeben werden:

div {margin-left:auto; 
		margin-right:auto; 
		width:200px; 
		/* height:150px; <<< Kommentar! */
		border:thin solid red;
		background-color:yellow;}

Vorschau

Soll aber die Box ihre Größe behalten und dennoch den gesamten Inhalt sichtbar darstellen, so kann eine Bildlaufleiste das Problem beheben:

div {margin-left:auto; 
		margin-right:auto; 
		width:200px; 
		height:150px;
		border:thin solid red;
		background-color:yellow;
		overflow:auto;}

Vorschau

Der Innenabstand zwischen Text und Rahmen kann mit padding festgelegt werden:

div {margin-left:auto; 
		margin-right:auto; 
		width:200px; 
		height:150px;
		border:thin solid red;
		background-color:yellow;
		padding:10px;
		overflow:auto;}

Vorschau

Soll der Bereich hinter der Box durchscheinen, so kann die Hintergrundfarbe der Box transparent (opacity - ab CSS 3) gesetzt werden:

body {background: gray url(../basics/bg.jpg);}
div {margin-left:auto; 
		margin-right:auto; 
		width:200px; 
		height:150px;
		border:thin solid red;
		background-color:yellow;
		opacity:0.6;
		padding:10px;
		overflow:auto;}

Vorschau

Eine nette Spielerei bilden Boxen mit Hoover-Effekt:

div#mybox {position: relative;
			width:200px; height: 150px;
			margin-left: auto;
			margin-right: auto;
			background-color:#ff0000;}
div#mybox:hover {background-color:#00ffff;}

Vorschau

Verschachtelte Boxen

In diesem einfachen Beispiel soll gezeigt werden, wie die Definitionen ineinander greifen und mehrerer Boxen ein stimmiges Layout bilden können. Dazu werden vorerst drei voneinander unabhängige Boxen definiert, jede mit einer anderen Hintergrundfarbe belegt, um sie besser identifizieren zu können.

Die zugehörige (X)HTML-Datei:

<body>
  <div id="container">In diesen Bereich sollen später die beiden Boxen eingefügt werden ....</div>
  <div id="maintext">Dieser Bereich bildet das Hauptfenster.</div>
  <div id="menu">In diesem schmalen Bereich könnte man ein Menü einfügen.</div>
</body>

mit den passenden CSS-Definitionen:

div#container {	width:340px;         /* die Breite des Containers wird festgelgt */                
        margin: 20px auto;           /* der obere/untere-Abstand wird mit 20px festgelgt, 
                                        li/re-Positionierung erfolgt automatisch */
        text-align: left;            /* die Textausrichtung wird auf links gesetzt */ 
        padding:20px;                /* der innere Abstand wird mit 20px festgelegt */
        background-color:#66FFFF;}   /* Hintergrundfarbe türkis */
				
div#maintext { padding: 20px;       /* der Abstand des Textes vom Rand der Box wird festgelegt */
        width:180px;                /* die Breite der Box wird festgelegt */
        height:150px;               /* die Höhe der Box wird festgelegt */
        overflow:auto;              /* notwendige Scrollleisten werden eingeblendet */
        background-color:#FFFFCC;}  /* Hintergrundfarbe hellgelb */
				
div#menu { float: right;            /* die Box schwimmt an den rechten Rand des uebergeordneten Elements 
                                       --> Container */
        width: 50px;                /* die Breite der Box wird festgelegt */
        height:150px;               /* die Höhe der Box wird festgelegt */
        padding: 20px;              /* der Abstand des Textes vom Rand der Box wird festgelegt */ 
        background-color:#CCCCCC;}  /* Hintergrundfarbe grau */

Vorschau

Nun werden die beiden Boxen menu und maintext in den Container gepackt und schon ist unsere Seite fertig.

Die Reihenfolge der einzelnen Boxen ist dabei zu beachten, da die Menübox nach rechts schwimmen soll, muss dazu Platz sein, d.h. diese muss zuerst in der (X)HTML-Datei definiert werden. An der CSS-Datei müssen keine Änderungen mehr vorgenommen werden.

<body>
  <div id="container">
     <div id="menu">In diesem schmalen Bereich könnte man ein Menü einfügen.</div>
     <div id="maintext">Dieser Bereich bildet das Hauptfenster.</div>
  </div>
</body>

Vorschau

Boxmodell

Dieser Workshop zeigt die Entwicklung eines Internetauftritts. Aus wenigen Boxen wird Schritt für Schritt durch Erweiterung der CSS-Definitionen und geringfügige Anpassungen an der (X)HTML-Struktur ein Grundgerüst für einen Menügesteuerten Webauftritt. Die Änderungen und Ergänzungen können den einzelnen Musterbeispielen und ausgegebenen Texten entnommen werden. Jeder Schritt ist durch eine eigene (X)HTML-Datei mit der zugehörigen CSS-Datei dokumentiert.

zahnrad postit id_01.css
zahnrad postit id_01.html
zahnrad postit id_02.css
zahnrad postit id_02.html
zahnrad postit id_03.css
zahnrad postit id_03.html
zahnrad postit id_04.css
zahnrad postit id_04.html
zahnrad postit id_05.css
zahnrad postit id_05.html
zahnrad postit id_06.css
zahnrad postit id_06.html
zahnrad postit id_07.css
zahnrad postit id_07.html
zahnrad postit id_08.css
zahnrad postit id_08.html
zahnrad postit id_09.css
zahnrad postit id_09.html
zahnrad postit id_10.html
Objekte übereinander

Durch relative oder absolute Positionierung können Objekte auch übereinander gelegt werden. Die Reihenfolge wird durch die Anordnung im Quelltext festgelegt, so dass das zuletzt definiete Objekt an oberster Stelle zu liegen kommt und die anderen Objekte überdeckt. Jedes Objekt erhält automatisch vom Browser einen z-index Wert zugewiesen, wenn das Objekt keinen besitzt. Durch die manuelle Festlegung eines Wertes, kann die Reihenfoge beeinflusst werden. Das Objekt mit dem größten z-index Wert überdeckt die anderen.

Einen besonders netten Gestaltungseffekt bietet die Eigenschaft opacity, die Werte zwischen 0 und 1 zulässt und die Deckkraft des Objekts festlegt. 0 entspricht völlig durchsichtig - also unsichtbar, 1 bedeutet ganz undurchsichtig.

Diese Eigenschaft wurde erst mit CSS Version 3 definiert, so dass ältere Browser eigene Definitionen benötigen.

zahnrad postit baustelle.png
zahnrad postit flugzeug.png
zahnrad postit stop.png
zahnrad postit ueberholen.png
zahnrad postit zindex-01.html
zahnrad postit zindex-02.css
zahnrad postit zindex-02.html
zahnrad postit zindex-03.css
zahnrad postit zindex-03.html
zahnrad postit zindex-04.css
zahnrad postit zindex-04.html
zahnrad postit zindex-12.css
zahnrad postit zindex-12.html
zahnrad postit zindex-14.css
zahnrad postit zindex-14.html
Formulare formatieren

Eingabefeld mit Hintergrundfarbe und bunter Schrift:

input {background-color:#FFFFCC; color:blue;}


 

Eingabefeld mit Rahmen und größerer Schrift:

input {background-color:#FFFFCC; color:blue; border:thin solid yellow; font-size:16pt;}


 

Textfeld mit Rahmen und Hintergrundbild:

textarea {background:pink url(bilder/bleistift100.png) no-repeat right bottom;;
color:red; 
border:thick outset red; 
font-size:14pt; 
font-family:'Lucida Handwriting';


 

Button mit Hintergrundfarbe und bunter Schrift:

input {background-color:lightgreen; color:darkgreen;
border:medium outset green;
font-style:italic; font-weight:bold;
padding:5px;}


 

Überprüfen

Um die korrekte Programmierung und dadurch die optimale Anzeige in vielen Browsern sicher zu stellen, können die (X)HTML-Seiten und CSS-Definitionen einer Onlineüberprüfung unterzogen werden. Dabei werden neben Tippfehleren auch oft unvollständige TAGS oder Definitionen aufgespürt.

http://validator.w3.org/

http://jigsaw.w3.org/css-validator/

Literatur

Kobert, Thomas
Das Einsteigerseminar CSS
cascading style sheets
1. Aufl. - Heidelberg : bhv 2007
ISBN 9783826674686

Maurice, Florence
HTML & CSS
1. Aufl. - München : markt + technik 2010
ISBN 9783827245786

Münz, Stefan; Gull, Clemens
HTML5-Handbuch
Poing : Francis 2010
ISBN 9783645600798

Seibert, Björn; Hoffmann, Manuela
Professionelles Webdesign mit (X)HTML und CSS
[modernes Webdesign mit Webstandards ; Farbe, Grafik und Typ
1. Aufl. - Bonn : Galileo Press 2008
ISBN 9783836211048

Sigos, David
CSS für Kids
1. Aufl. - Heidelberg : bhv 2007
ISBN 9783826686368

Teague, Jason Cranford
CSS3
der Meisterkurs
1. Aufl. - München : Markt + Technik 2011
ISBN 9783827247360

Wetsch, Elisabeth
Einstieg in CSS
Grundlagen und Praxis
2. Aufl. - Bonn : Galileo Press 2010
ISBN 9783836214667
Links

Logo

Logo

Logo

Logo

Logo

Logo

Logo
Letzte Aktualisierung: 15.04.2012 18:01