Anzeige
Tutorialbeschreibung

CSS Tutorial - Teil 1

CSS Tutorial - Teil 1

Mehrteiliges CSS Tutorial, das von einigen Leuten hoffentlich gebraucht werden kann. Ich erkläre den richtigen Einatz von CSS in HTML.


CSS - Cascading Style Sheets


Warum CSS anwenden, wenn ich meine Website auch mit Photoshop erstellen kann?


Man kommt vom Tabellenlayout weg, was ich persönlich sehr wichtig finde, da Tabellen eigentlich nicht zum Layouten gedacht sind.

Nun ja, CSS bietet viele Vorteile. Einer der wichtigsten Gründe ist der, dass man die Größe des Quellcodes um einiges senken kann. Dies hat natürlich den Vorteil, dass auch Internetnutzer mit einer langsamen Internetverbindung (z. B. 56k-Modem) die Seiten schneller angezeigt bekommen, da nicht so viel geladen werden muss.

Wenn man Seiten mit CSS formatiert, kann man mit nur einer Änderung, z. B. die Schriftgröße, diese Änderung auf allen Unterseiten vornehmen, anstatt dies auf jeder einzelnen Seite tun zu müssen.

So bekommt man sehr einfach und schnell ein Corporate-Design hin, da jede Seite, die mit CSS formatiert wurde, aussieht wie die andere.

Man kann den Code nahezu für fast alle modernen Browser valide schreiben. Aber: Der Internet-Explorer stellt z. B. das Box-Modell nicht in allen Fällen korrekt dar. Dafür gibt es sog. Hacks.

So, das waren einige Vorteile.


Was genau ist CSS?


CSS ist eine Ergänzung zu der Auszeichnungssprache HTML. Viele denken immer noch, HTML wäre eine Programmiersprache. Dem ist nicht so. Ohne HTML kann man mit CSS nichts anfangen. Mit CSS kann pixelgenau positioniert werden. Man kann Listen, Formulare und Tabellenzellen sehr bequem formatieren und ein Aussehen verleihen, das mit reinem HTML gar nicht machbar ist.

Genau wie HTML auch, wird CSS vom W3-Konsortium nominiert. Es ist ein frei verwendbarer Standard, welches von einer Arbeitsgruppe des Konsortiums weiterentwickelt wird und die sich um das Regelwerk kümmert.

Entstanden ist CSS bereits 1996 in der Version 1.0 und 1999 bereits wieder überarbeitet worden. Den Status einer Empfehlung bekam Version 2.0 1998. Heute wird an der Version 3.0 gearbeitet.

CSS wird von den meisten modernen Browsern unterstützt. Jedoch gibt es immer noch diverse Tags, die nicht von allen Browsern gleich interpretiert werden. So hat z. B. Microsoft eigene CSS-Effekte, die auch nur im IE funktionieren. Da gibt es u.a. den ALPHA Filter, der Vordergrund und Hintergrund verschmelzen lässt. Allerdings werden solche Sachen nicht sehr häufig genutzt.

So, ich denke, dass die Meisten das sowieso kennen und komme jetzt zum ersten Schritt.


Stylesheets in ein HTML-Dokument einbinden.


1. Möglichkeit:


Man kann Stylesheets zentral im HTML-Dokument einfügen. Das sieht folgendermaßen aus:

<html>
<head>
<title>Titel der Datei</title>
<style type="text/css">
/* Hier werden die Formate definiert */
</style>
</head>
<body>
</body>
</html>


Mit <style...> ... </style> wird der Bereich notiert, in dem die Formatdefinitionen stehen.
Außerdem muss ein MIME-Type angegeben werden, im Fall von CSS lautet dieser "text/css".


2. Möglichkeit:


Stylesheets in separater Datei definieren:

<html>
<head>
<title>Titel der Datei</title>
<link rel="stylesheet" type="text/css" href="datei.css">
</head>
<body>
</body>
</html>


Mit rel="" wird der Bezug beschrieben. In dem Fall lautet dieser stylesheet. Dann wieder der MIME-Type wie im ersten Beispiel.
Und mit href="datei.css" sagen wir dem Dokument, wo die externe CSS-Datei liegt. Immer den genauen Pfad angeben.


3. Möglichkeit:


CSS Formate innerhalb eines HTML-Elements definieren:

<html>
<head>
<title>Titel der Datei</title>
</head>
<body>
<h1 style="Elementspezifische Formate"></h1>
</body>
</html>


Man kann für jedes einzelne HTML-Element CSS-Formate definieren. Bei mehreren Formaten immer mit einem ";" trennen.

Mit CSS kann man auch verschiedene Stylesheets für unterschiedliche Ausgabemedien angeben. 3 davon gebe ich hier an:

<html>
<head>
<title>Titel der Datei</title>
<link rel="stylesheet" media="screen" href="website.css"
<link rel="stylesheet" media="print" href="druck.css"
<link rel="stylesheet" media="aural" href="lautsprecher.css"
</head>
<body>
</body>
</html>


media="screen"   =   gilt für die Bildschirmausgabe.
media="print"    =   gilt für den Ausdruck der Webseite auf Papier.
media="aural"   =   gilt für synthetische, computergesteuerte Sprachausgabe.

Die letzte Möglichkeit ist die @import:

<html>
<head>
<title>Titel der Datei</title>
<style type="text/css">
@import url(druck.css) print;
@import url(website.css) screen;
</style>
</head>
<body>
</body>
</html>


So, das war der erste Teil - ich hoffe, er ist nicht zu kurz und dass es jeder verstanden hat. Im nächsten Teil werde ich den Aufbau der Formate beschreiben und wie man sie einsetzt.

Ich werde versuchen pro Woche ein bis zwei Teile zu schreiben.
Kritik ist gerne erwünscht.

Bis dann
Peter

Kommentare
Achtung: Du kannst den Inhalt erst nach dem Login kommentieren.
Portrait von Daddaaff
  • 19.04.2012 - 10:20

Endlich eine richtig gute Grundlage

Portrait von smoekone
  • 14.12.2011 - 16:23

Als Anfänger super zu verstehen. Danke!

Portrait von DrNormal
  • 24.11.2011 - 18:09

Einfach zu verstehn, vielen Dank.

Portrait von DaNino
  • 14.07.2011 - 16:40

ohne CSS Vorkenntnise ist schlecht zu verstehen, was gerade erklärt wird.

Portrait von spatzerl
  • 14.04.2011 - 18:16

Vielen Dank, gefällt mir...

Alternative Portrait
-versteckt-(Autor hat Seite verlassen)
  • 09.10.2010 - 17:58

übersichtlich und gut erklärt, danke

Portrait von hoth
  • 05.10.2010 - 14:17

supi, vielen Dank...

Portrait von stefan1987
  • 28.08.2010 - 21:04

danke für deine tuts

Portrait von johannestraschuetz
Alternative Portrait
-versteckt-(Autor hat Seite verlassen)
  • 07.07.2010 - 11:09

Danke für das Tut, gut erklärt.

Portrait von Beedee1308
  • 28.05.2010 - 11:27

Gute Übersicht, danke!

Portrait von KingSmerg
  • 08.04.2010 - 07:11

danke...hat mir auch geholfen

Portrait von JulianART
  • 06.04.2010 - 09:56

danke hat mir sehr weiter geholfen gut erklärt :)

Portrait von aka_Robin
  • 29.03.2010 - 22:04

vielen dank... gute arbeit... ideal für den einstieg....

Portrait von vladina
  • 16.03.2010 - 08:49

Sehr gut....aber trotzdem ziemlich kompliziert die ganze Angelegenheit :(

Portrait von booyakadesign
  • 08.03.2010 - 14:25

Für jemanden wie mich der Neueinsteiger ist, ist das Tutorial Gold wert.

Portrait von Susanne_1108
  • 19.02.2010 - 10:58

Vielen Dank, das ist genau das richtig für mich als Anfägerin.
Servus Susanne

Portrait von Rapid15
  • 13.02.2010 - 18:23

Sehr gutes Tutorial!

Portrait von lukiono
  • 24.01.2010 - 13:50

Sehr gutes Tutorial.

Portrait von TheGhozt
  • 17.11.2009 - 12:57

Super Erklärungen und gut beschrieben

x
×
×