CSS2.1 - Cascading Style Sheets
24. Januar 2008
kategorie:
Kleine Einführung
CSS ist eine deklarative Stylesheet-Sprache für strukturierte Dokumente. Sie wird vor allem zusammen mit XHTML eingesetzt. CSS legt dabei fest, wie ein besonders ausgezeichneter Inhalt oder Bereich dargestellt werden soll. Dazu ist es wichtig, das HTML so zu gestalten, dass die Abschnitte, deren Aussehen gleich sein soll, auch als Gruppe erkannt werden können. Man zeichnet im Dokument also die Bedeutung einzelner Abschnitte aus, während das Aussehen dieser ausgezeichneten Abschnitte im CSS festgelegt wird.
Grundlegender Aufbau
Der Aufbau von CSS folgt einer einfachen, schnell zu lernenden Syntax, die sich aus Selektoren, Eigenschaften und Werten zusammensetzt. Kommentare zur besseren Strukturierung sind auch möglich, jedoch nicht erforderlich.
Selektor {
Eigenschaft-A: Wert-A;
Eigenschaft-B: Wert-B;
Eigenschaft-A, Eigenschaft-B: Wert-B, Wert-C
}
/* Kommentar */
Einbindung
Zur Einbindung gibt es zwei Möglichkeiten, die sich für den Benutzer nicht unterscheiden, jedoch bei der Programmierung zu unterscheiden sind.
Direkt in XHTML eingebunden
Mit <style…> … </style> ist die Notierung eines Bereichs für Stylesheet-Formatdefinitionen (style = Stil, Format) möglich. Im einleitenden <style>-Tag muss der Seite MIME-Typ der Stylesheet-Sprache angeben werden. Für CSS ist das die Angabe type=”text/css”. Zwischen dem einleitenden Tag und dem abschließenden </style> ist es dann möglich zentrale CSS-Formate definieren. Dies ist während der Entwicklung die sinnvollere Version.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>Das Style-Element</title>
<style type="text/css">
<!--
/* ... Hier werden die Formate definiert ... */
-->
</style>
</head>
<body>
<h1>Das Style-Element</h1>
</body>
</html>
Einbindung über Verlinkung
In vielen Fällen ist eine einheitliche Gestaltung für alle HTML-Dateien eines Projekts wünschenswert. Um unnötige Wiederholungen von Angaben in Dateien zu vermeiden, kann man stattdessen die Formate in einer separaten Textdatei definieren und diese Datei einfach in jeder gewünschten HTML-Datei einbinden. Wenn die Angaben in der separaten Datei geändert werden, wirken sich die Änderungen einheitlich auf alle Dateien aus, in denen die separate CSS-Datei eingebunden ist. Dadurch ist diese Option für den produktiven Gebrauch besser geeignet.
Im Dateikopf einer HTML-Datei ist die Verlinkung mit <link…> zu einer CSS-Datei, die CSS-Formatdefinitionen enthält, möglich. Innerhalb des <link>-Tags müssen die Angaben rel=”stylesheet” type=”text/css” stehen (rel = relation = Bezug, type = MIME-Typ). Beim Attribut href ist die gewünschte Datei anzugeben (href = hyper reference = Hypertext-Referenz). Wenn sich die CSS-Datei in einem anderen Verzeichnis oder auf einem anderen Server befindet, muss an dieser Stelle die genaue Pfadangabe oder die absolute URI (Uniform Resource Identifier - auch einfach als Verlinkung zu verstehen) notiert sein.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>Das link-Element für Stylesheets</title>
<link rel="stylesheet" type="text/css" href="formate.css">
<style type="text/css">
/* ... hier sind dateispezifische Formate erlaubt ... */
</style>
</head>
<body>
<h1>Das link-Element für Stylesheets</h1>
</body>
</html>
XHTML (Xtensible Hypertext Markup Language) 1.0 Strict
24. Januar 2008
kategorie:
Kleine Einführung
XHTML ist eine Auszeichnungssprache. Das bedeutet, dass mit ihr sozusagen Webseiten “gesetzt” werden können.
Erst einmal muss hier eines klar gestellt werden. Die Sprache XHTML dient nicht zur Gestaltung von Webseiten. XHTML dient nur dazu, Inhalte aufzubereiten und zu strukturieren. Der Rest geschieht anschließend mit CSS und/oder JavaScript. Mit HTML wird also auch nicht das Layout erstellt (Layouttabellen).
XHTML basiert vom Anfang bis zum Ende auf sogenannten Tags. Tags sind recht einfach zu verstehen. Ein Tag hat die folgende Struktur:
<tag>Inhalt</tag>
Jedes mal wenn ein Tag geöffnet wird (<tag>), wird im Browser ein Rechteck erstellt. Dieses Rechteck endet, sobald man den Tag wieder schließt (</tag>). Eine Webseite besteht also, aus der Sicht des Browsers, vollkommen aus rechteckigen Kästchen, die dann per CSS positioniert und eingefärbt werden.
Tags die auch Eigenschaften enthalten, sehen in HTML so aus:
<tag attribut="wert">Inhalt</tag>
Als Beispiel nehmen wir ein Bild. Der Tag für ein Bild heißt “img”. Dieser Tag verlangt Attribute, in diesem Fall ein Attribut, welches den ort des Bildes definiert.
<img src="images/bild.jpg"></img>
Dieser Tag ist wie zu sehen ist leer. Also kann man das Ganze einfach abkürzen:
<img src="images/bild.jpg" />
Solche Tags werden auch “Selbstschließende Tags” genannt.
<tag />
Von der Theorie in die Praxis
Um den Sinn von HTML besser zu verstehen, werfen wir euch einfach einmal ins kalte Wasser und fangen mit einer kleinen Beispiel-Webseite an. Damit soll ein kleiner Überblick dieser Einführung geboten werden. In dieser Beispielseite führen wir die wichtigsten Elemente einer Seite ein: ihren Titel, Überschriften, Listen, Inhaltscontainer und Absätze.
Beispiel:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xxmlns="http://www.w3.org/1999/xhtml>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Titel, wird im Fenstertitel des Browsers angezeigt</title>
</head>
<body>
<div id="box">
<h1>Überschrift erster Ebene</h1>
<ul id="navigation">
<li><a href="1-unterseite.html">unterseite 1</a></li>
<li><a href="2-unterseite.html">unterseite 2</a></li>
<li><a href="3-unterseite.html">unterseite 3</a></li>
</ul>
<div id="content">
<p>Absatz. Dieser wird verwendet um generell Text zu beinhalten</p>
<h2>Überschrift, Ebene 2</h2>
<p>Absatz</p>
<h3>Überschrift, Ebene 3</h3>
<p>Absatz mit <strong>stark betontem Text</strong>, <em>hervorgehobenen Text</em>, <del>gelöschtem</del> und <ins>eingefügten text</ins></p>
<p>Hier sieht man einen <a href="http://webmasterpro.de">Link zu Webmasterpro.de</a></p>
<h1>Eine Liste</h1>
<ul>
<li>erster Listenpunkt</li>
<li>zweiter Listenpunkt</li>
</ul>
</div>
</div>
</body>
</html>
Grundlegender Aufbau
Eine HTML Seite wird zuallererst einmal in <html>-Tags eingeschlossen. Dort finden sich dann zwei Kindelemente:
* <head> für im Browserfenster nicht direkt sichtbare Zusatzinformationen
* <body> für den direkt sichtbaren Seiteninhalt
Vor dem <html> Tag steht der “doctype”. Dieser gibt die Definition der zu verwendenden “Document Type Defininition” (DTD) an, also nach welchem Standard sich das Dokument richtet.
Beispiel:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xxmlns="http://www.w3.org/1999/xhtml>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Beispielseite
</title>
</head>
<body>
Sichtbarer Inhalt, der im Browserfenster erscheint.
</body>
</html>
Strukturierung mit Block-Level-Elementen
In diesem Abschnitt beschäftigen wir uns mit der frage, wie sich Inhalte gliedern lassen. Dazu stehen verschiedene Elemente zur Verfügung. In diesen findet sich dann der eigentliche Inhalt, wie Text oder Grafiken. Die wichtigsten Elemente:
* Überschriften verschiedener Ebenen (<h1>,<h2>,…,<h6>)
* Absätze (<p>)
* Listen (ungeordnet <ul>, durchnummeriert <ol>)
* Tabellen (<table>)
* Inhaltscontainer (<div>)
* …
Diese Elemente nennt man Block-Level Elemente. Das bedeutet, dass sie am Anfang und am Ende einen Zeilenumbruch erzeugen, also einen Block bilden.
Strukturierung mit Inline-Level-Elementen
Im Gegensatz zu den Block-Level-Elementen gibt es noch Inline-Elemente. Diese können nur innerhalb von Block-Level Elementen benutzt werden. Sie dienen der Auszeichnung von einzelnen Objekten wie:
* Links (<a>)
* Fett (=Betont) (<strong>)
* Kursiv (=Hervorgehoben) (<em>)
* Zeilenumbrüche (<br/>)
* und viele andere wie Zitat, Abkürzung, Entfernung…
Beispiel
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xxmlns="http://www.w3.org/1999/xhtml>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Beispielseite</title>
</head>
<body>
<p>
In diesem Absatz demonstrieren wir einige Inline-Tags.<br/>
<strong>Das hier ist fetter Text</strong><br/>
<strong>Das hier ist hervorgehobener Text</strong><br/>
Zeilen werden durch Zeilenumbrüche getrennt<br/>
</p>
</body>
</html>
Um CSS richtig zu benutzen, fehlt jetzt nur noch eins…
Die allgemeinen Universalattribute id und class.
Beide können sowohl in Inline- als auch in Block-Elementen benutzt werden. Für wichtige Container die nur ein mal auf der Seite vorkommen (z.B. Hauptnavigation, Hauptüberschrift u.s.w.) wird eine id vergeben, während allgemeine Container (wie z.B. Zitate von einem bestimmten Benutzer) mit class versehen werden, um ein gleichmäßiges Erscheinungsbild zu gewährleisten.
<tag id="der_id_name" class="der_class_name" />
visitenkarte für “Dres. med. S. Freres, H. Freres & M. Ihßen”
8. Januar 2008
kategorie:
Auftrag der in Rahmen der Ausbildung erledigt wurde. 2 Entwürfe - jeweils Vorder- und Rückseite.
dies ist mein kleiner clearfix. das solten du garnicht nicht sehen!
dies ist mein kleiner clearfix. das solten du garnicht nicht sehen!
dies ist mein kleiner clearfix. das solten du garnicht nicht sehen!