close

Anmelden

Neues Passwort anfordern?

Anmeldung mit OpenID

Lektion 1: Was ist CSS?

EinbettenHerunterladen
Auszug von: http://www.de.html.net/tutorials/css/lesson1.asp
Lektion 1: Was ist CSS?
Vielleicht haben Sie schon einmal von CSS gehört – allerdings ohne zu wissen, was
sich dahinter verbirgt. In dieser Lektion werden Sie erfahren, was CSS ist und was
CSS für Sie tun kann.
CSS ist das Akronym für Cascading Style Sheets.
Was kann ich mit CSS machen?
CSS ist eine Stilsprache, die das Aussehen von HTML-Dokumenten definiert. CSS
kann man z.B. zum festlegen von Schriftarten, Farben, Rändern, Linien, Höhen,
Breiten, Hintergrundbildern, für fortgeschrittener Positionierung und viele andere
Sachen benutzen. Warten Sie ab!
HTML kann zum layouten von Webseiten (miß-)braucht werden. Aber CSS bietet
mehr Möglichkeiten und ist zudem viel genauer und ausgereifter. CSS wird von allen
Browsern unterstützt.
Nach ein paar Lektionen dieses Tutorials werden Sie in der Lage sein, Ihre eigenen
Stylesheets mit CSS zu erstellen und Ihren Webseiten ein neues großartiges
Aussehen verleihen.
Wo ist der Unterschied zwischen CSS und HTML?
Mit HTML werden Inhalte strukturiert. Mit CSS wird der strukturierte Inhalt
formatiert.
Okay, es klingt ein bißchen technisch und verwirrend. Aber bitte lesen Sie weiter.
Alles wird sehr bald einen Sinn ergeben.
Vor langer langer Zeit, Madonna war Jungfrau und ein Typ namens Tim Berners Lee
erfand das Internet, da wurde HTML wirklich nur genutzt um Text zu strukturieren.
Ein Autor konnte seinen Text markieren, indem er festlegte “das ist eine
Überschrift” oder “das ist ein Textabsatz”. Dies wurde mit HTML-Tags wie <h1> und
<p> bewerkstelligt.
Als das Internet populärer wurde, versuchten Designer nach Möglichkeiten zu
suchen, den Online-Dokumenten Layouts zu verpassen. Um diesem Rechnung zu
tragen, erfanden die Browserhersteller (zu der Zeit Netscape und Microsoft) neue
HTML-Tags. So z.B. <font>, welcher von den ursprünglichen Tags abwich, da er ein
Layoutmittel war und kein Strukturierungswerkzeug.
Dies führte auch zu einer Situation, in der eigentliche Struktur-Tags, wie z.B.
<table>, mehr und mehr für das Layout von Seiten mißbraucht wurden, anstatt dem
Geschriebenen Struktur zu verleihen. Viele neue Layout-Tags, wie <blink> wurden
nur von einem Browsertyp unterstützt. Mitteilungen wie: “Sie benötigen Browser X,
um diese Seite zu sehen” bzw. “Optimiert für Browser X” waren auf immer mehr
Webseiten zu lesen.
CSS wurde erfunden um diese Situation zu beheben, indem es Webdesignern mit
ausreichenden Gestaltungsmöglichkeiten ausstattete, die von allen Browsern
unterstützt wurden. Gleichzeitig macht die Trennung von Aussehen und Inhalt einer
Seite die Pflege selbiger viel einfacher.
Welche Vorteile bringt mir CSS?
CSS war eine Revolution im Webdesign. Die konkreten Vorteile sind u.a.:
•
•
•
•
Kontrolle über das Layout vieler Webseiten aus einer einzigen Style-SheetDatei heraus;
präzisere Kontrolle über das Layout;
verschiedene Layouts für verschiedene Medientypen (Bildschirmanzeige,
Druck etc.);
eine Vielzahl von fortgeschrittenen und anspruchsvolle Techniken.
In der nächsten Lektion schauen wir uns etwas genauer an, wie CSS eigentlich
funktioniert und womit man am besten beginnt.
Lektion 2: Wie funktioniert CSS?
In dieser Lektion werden Sie lernen, Ihr erstes Style-Sheet zu erstellen. Sie werden
das Grundmodell von CSS kennenlernen und wir werden zeigen, welche Codezeilen
notwendig sind, um CSS in einem HTML-Dokument zu verwenden.
Viele der Eigenschaften, die in Cascading Style Sheets (CSS) verwendet werden,
ähneln denen von HTML. Wenn Sie bisher HTML für Layoutzwecke verwendet
haben, werden Sie wahrscheinlich viele Codes wiedererkennen. Schauen wir uns ein
konkretes Beispiel an.
Die grundlegende CSS-Syntax
Nehmen wir an, wir möchten ein schönes Rot als Hintergrundfarbe für unsere
Webseite:
In HTML hätten wir es so gemacht:
<body bgcolor="#FF0000">
Mit CSS erreichen wir das gleiche Resultat so:
body {background-color: #FF0000;}
Wie Sie sehen, sind die Codes in HTML und CSS mehr oder weniger identisch. Das
soeben gezeigte Beispiel zeigt Ihnen auch das grundlegende CSS-Modell:
Aber wo soll der CSS-Code hin, werden Sie jetzt fragen. Genau dazu kommen wir
jetzt.
CSS im HTML-Dokument anwenden
Es gibt drei Möglichkeiten, wie Sie CSS in einem HTML-Dokument verwenden
können. Diese Methoden werden alle nachfolgend beschrieben. Wir empfehlen,
dass Sie sich auf die letzte der drei Möglichkeiten konzentrieren.
Methode 1: In-line (Attribut-Stil)
Eine Möglichkeit CSS in HTML zu verwenden, ist das Attribut style. Auf dem obigen
Beispiel mit dem roten Seitenhintergund aufbauend, kann dieser wie folgt
eingefügt werden:
<html>
<head>
<title>Example</title>
</head>
<body style="background-color: #FF0000;">
<p>Das ist eine rote Seite.</p>
</body>
</html>
Methode 2: In-document (Tag-Stil)
Ein weiterer Weg ist, die CSS-Codes über den HTML-Tag <style> einzubinden, z.B. so:
<html>
<head>
<title>Example</title>
<style type="text/css">
body {background-color: #FF0000;}
</style>
</head>
<body>
<p>Das ist eine rote Seite.</p>
</body>
</html>
Methode 3: Extern (Verweis auf ein Style Sheet)
Die von uns empfohlene Methode ist, auf ein sog. externes Stylesheet zu verweisen.
In alles Beispielen des Tutorials werden wir diese Methode anwenden.
Ein externes Stylesheet ist einfach eine Textdatei mit der Endung .css. Wie jede
andere Datei auch, können Sie das Stylesheet auf Ihrem Webserver oder Ihrer
Festplatte speichern.
Nehmen wir an, Ihr Stylesheet heißt style.css und befindet sich im Ordner style.
Bildlich dargestellt, sieht das wie folgt aus:
Der Trick bei dem Ganzen ist nun, aus dem HTML-Dokument (default.htm) auf das
Stylesheet (style.css) zu verweisen. Solch ein Verweis kann mit einer Zeile HTMLCode bewerkstelligt werden:
<link rel="stylesheet" type="text/css" href="style/style.css" />
Sehen Sie, der Pfad zu unserem Stylesheet wird mit Hilfe des Attributes href
angegeben.
Die Codezeile muss in den Kopfteil des HTML-Dokumentes, zwischen die <head> und
</head>-Tags, eingefügt werden. Etwa so:
<html>
<head>
<title>Mein Dokument</title>
<link rel="stylesheet" type="text/css" href="style/style.css" />
</head>
<body>
...
Dieser Verweis gibt dem Browser vor, dass er das Layout aus der angegebenen CSSDatei verwenden soll, wenn er das HTML-Dokument darstellt. Das wirklich clevere
an dieser Lösung ist, dass verschiedene HTML-Dokumente auf dieses gleiche
Stylesheet verweisen können. Mit anderen Worten, eine CSS-Datei kann verwendet
werden, um bei vielen HTML-Dokumenten das Layout festzulegen.
Setzen wir, was soeben gelernt haben, praktisch um.
Probieren Sie selbst!
Öffnen Sie Notepad (bzw. den Texteditor Ihrer Wahl) und erstellen Sie zwei Dateien
– ein HTML-Dokument und eine CSS-Datei – mit folgenden Inhalten:
default.htm
<html>
<head>
<title>Mein Dokument</title>
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>
<h1>Mein erstes Stylesheet</h1>
</body>
</html>
style.css
body {
background-color: #FF0000;
}
Nun speichern Sie beide Dateien in denselben Ordner. Denken Sie daran, die
Dateien mit Ihren richtigen Endungen (“.css” bzw. “.htm”) zu speichern.
Öffnen Sie die default.htm in Ihrem Browser und Sie sehen, dass die Seite einen
roten Hintergrund hat. Herzlichen Glückwunsch! Sie haben soeben Ihr erstes
Stylesheet erstellt.
Fahren Sie mit der nächsten Lektion fort, in der wir einen Blick auf einige der
Eigenschaften in CSS werfen werden.
Document
Kategorie
Internet
Seitenansichten
1
Dateigröße
50 KB
Tags
1/--Seiten
melden