Clonk-Center Titelbild

Texte / CSS Tutorial




So, mal ein kleines Einsteigertutorial. Eigentlich nicht n├Âtig, wenn man selfHTML mal lesen w├╝rde, alles sch├Ân erkl├Ąrt und auch noch toll mit Beispielen, aber die meisten scheinen es ja nicht zu verstehen - oder nicht verstehen zu wollen.

Naja, dann versuche ich es einfach mal. Ich muss aber vorher noch ausdr├╝cklich warnen, dass ich es auch gerade erst gelernt habe.

Unter jedem gezeigten Beispiel findet sich eine Beschreibung, was der jweilige Code bewirken w├╝rde.

Kapitel 1 - CSS einbinden



CSS, die Cascading Style Sheets, kann HTML strukturiert und gestaltet werden. CSS ist nicht schwer zu erstellen, im Gegenteil: Es ist eine der leichtesten ├ťbungen.
Um eine Seite mit CSS zu gestalten, kann man zwei verschiedene Methoden benutzen:
  • Style-Attribut:Bei fast allen HTML-Tags kann mit mittels eines style-Attributs auch direkt schreiben.
  • Direktes Einbinden: Man kann CSS auch direkt in das jeweilige Dokument
    schreiben. Dies ist aber auf dem CPPP nicht m├Âglich, wiederum aber auf dem CC.
  • Indirektes Einbinden: CSS kann auch in einer Datei gespeichert werden und dann von einem HTML Dokument aus abgerufen werden. Das ist sehr praktisch f├╝r mehrere HTML-Seiten, f├╝r ein einzelnes Dokument allerdings ziemlich unn├╝tz.


Style-Attribut
Ben├Âtigt man CSS nur bei einem einzelnen Tag, kann man es auch ohne Klassen zu definieren in den Tag schreiben:
<p style="font-family:Arial;">Hello World</p>

Der Text 'Hello World' wird in der Schriftart 'Arial' angezeigt.


Direktes Einbinden
Wenn man alle gleichen Tags gestalten m├Âchte, ...
<style type="text/css">
a { font-family: Arial; }
</style>

L├Ąsst alle Links in der Schriftart 'Arial' anzeigen.


...benutzt man <style> im Header des Dokuments. Der obenstehende Code w├╝rde f├╝r alle Links, ( " <a> " ), mit der Schriftart Arial darstellen lassen.

Indirektes Einbinden
M├Âchte man eine .css Datei in einem HTML-Dokument einbinden, ben├Âtigt man den Tag <link>. Mit einem einfachen href-Attribut gibt man einfach den Dateipfad an.
<link rel="stylesheet" type="text/css" href="style/Mein_CSS.css">

Die CSS-Datei 'Mein_CSS.css' aus dem Ordner 'style' wird geladen.

Dies ist vorallem f├╝r mehrere Dokumente praktisch, da so nicht fortw├Ąhrend der selbe Code abgetippt bzw. kopiert werden muss, und die Dateien auch kleiner sind.

So bindet man CSS also ein - nun aber zum wichtigereren Teil:

Kapitel 2 - CSS erstellen


Nun wissen wir also, wie CSS eingebunden wird - aber wie schreibt man es eigentlich?

Mit CSS kann man beinahe alle Tags genauer bestimmen und erg├Ąnzen. Das ganze funktioniert recht simpel: Man gibt den Namen des Tags an, bei <div> z.B. div, und ordnet ihm Attribute zu.
<style type?"text/css">
p { font-size: 15px;
color: white; }
</style>

Alle Textabs├Ątze werden mit der Schriftgr├Â├če 15 und in weiss angezeigt.

<p>, der Tag f├╝r Textabs├Ątze, wird hier genauer bestimmt. Mit den Attributen font-size und color k├Ânnen beispielsweise Textgr├Â├če und Farbe angepasst werden.
Da es nat├╝rlich viel zu viel w├Ąre, kann ich hier nat├╝rlich nicht alle Attribute auflisten.
Jedoch findet sich eine ziemlich gro├če Liste mit allen wichtigen Attributen hier.

Klassen definieren
In CSS k├Ânnen auch Klassen definiert werden. Das bedeutet, dass wenn ein Tag einer Klasse zugeordnet wird, die Attribute dieser bekommt.
<style type="text/css">
.abstand { margin-left: 15px; }
</style>

<div class="abstand"><p>Halli-hallo Welt!</p></div>

Die Div-Box wird mit einem Abstand von 15 Pixeln gezeigt.

Hier wurde die Klasse abstand definiert und ein <div>-Tag dieser zugeordnet.
Dies ist sehr n├╝tzlich, falls mehrere gleiche Tags vorhanden sind, aber nur Bestimmte die Attribute der Klasse bekommen sollen.
Ein Tag wird einer Klasse mit dem Attribut class zugeordnet. Unterklassen wie z.B. .abstand i, um beispielsweise alle <i>-Tags innerhalb einer Klasse zu definieren, sind auch m├Âglich.

Kapitel 3 - Gute Designs erstellen


Gute Layouts bestehen nicht darin, seine Lieblingsbilder auf eine Seite zu panschen und mit einer sch├Ân augenreizenden Schrift alles sch├Ân zu garnieren.
Du musst bedenken: Jedes einzelne Bild muss vom Besucher erst geladen werden, und taucht nicht einfach so auf. Wenn du nun ein sch├Ân fettes, gro├čes Bild in den Hintergrund packst, stockt die Seite.

Also machen wir mal einen Exkurs in Sachen designen. Hier unten sehen wir ein schlechtes und ein gutes Beispiel:
  • Sehr augenreizende Schriftfarbe - Auf Dauer kann sowas niemand lesen.
  • Schlecht ausgew├Ąhlter Hintergrund, die Schrift ist kaum zu erkennen.

├ťbertrieben? Leider nein. Solche Exemplare sind mir wirklich schon zu Augen gekommen.


Schlechtes Beispiel:

Lorem ipsum
dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.



Ganz anderes sieht es wiederum bei dem guten Beispiel aus:
  • Gut ├╝berdachtes, flie├čendes Design
  • Anstatt das Bild als Hintergrund zu benutzen, lieber als einzelnes Bild verwenden

├ťbertrieben? Zum Gl├╝ck nein. Solche Exemplare sind mir wirklich schon zu Augen gekommen. Nat├╝rlich ist dies ein sehr einfaches Beispiel, ich kann jetzt nicht ein Design aus dem Hut zaubern.


Gutes Beispiel:

Lorem ipsum
dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.



20 Kommentare


05.12.2008 22:08 von Deffi:
Danke N4ppel, das werde ich bei n├Ąchster Gelegenheit erg├Ąnzen :]

21.11.2008 17:02 von mralmani:
Na, das hilft mir mal bisschen auf dem CPPP weiter :).

16.11.2008 12:27 von N4ppeL:
>Ich brauche noch Kritik, was man noch erw├Ąhnen k├Ânnte, das hier ist bisher viel zu wenig.


IDs sind bestimmt noch von Nutzen. Aber vor all dem sollte der grundlegende Aufbau vielleicht mit einfachen Beispielen erkl├Ąrt werden und vielleicht solltest du dazu auch Tags benutzen, die jeder schon irgendwie irgendwo mal gesehen hat, auch wenn er kein html kann. (b oder u z.B.)

Dazu sind praktische "├╝bungen" immer toll. Also du k├Ânntest vielleicht erkl├Ąren wie man ein HTML file (das muss man schliesslich auch k├Ânnen wenn man auf CPPP tolle designs haben will) erstellt und mit CSS etwas verziert mit einheitlichen ├ťberschrfiten, farben, hintergrundfarben.

Eine demo wie m├Ąchtig CSS eigentlich ist w├Ąre nat├╝rlich auch interessant. Irgendwo hab ich mal eine tolle gesehen, wenn ich google frage kommt nur das da: http://cssdesign.e-workers.de/
Der Inhalt ist immer der selbe (html) aber das design ist jeweils komplett neu und die Seite sieht entsprechend v├Âllig anders aus.
Zuletzt geändert: 16.11.2008 12:27

13.11.2008 21:00 von Jim:
ich check auch nix

13.11.2008 17:08 von Faby:
ich versteh das nicht ganz aber egal...

09.11.2008 18:23 von Deffi:
>Ich brauche noch Kritik, was man noch erw├Ąhnen k├Ânnte, das hier ist bisher viel zu wenig.

09.11.2008 18:19 von Methos:
>Wie w├Ąre es, wenn du sagst, warum?


Nun, haupts├Ąchlich verlinkst du zu anderen Sachen wegen der Attribute etc. Dann sagst du wie man es einbinden kann, und gibst noch ein paar Tipps. Ein echtes Tut. w├Ąre viel gro├čer und detailreicher mit mehr Beispielen, mehr Attributen, die dann auch noch erl├Ąutert werden o├ä.

09.11.2008 18:06 von Deffi:
>E: Der Titel des Textes ist unpassend...

Wie w├Ąre es, wenn du sagst, warum?

09.11.2008 16:52 von Methos:
Irgendwie glaube ich eher, henry, dass frnz.de ein Fake ist... die Texte sind lahm, dass Design ist irgendwo zur├╝ckgeblieben und franz.de sieht nicht aus, als h├Ątte es der selbe Typ erstellt.

E: Der Titel des Textes ist unpassend...
Zuletzt geändert: 09.11.2008 16:59

09.11.2008 15:50 von Deffi:
>Vielleicht k├Ânntest du noch ein wenig mehr auf die CPPP CSS' eingehen, vor allem auch was man nicht macht


Mal sehen, ich habe auf CPPP noch nie ein CSS gemacht :O

09.11.2008 15:07 von henry:
>Solche Exemplare sind mir wirklich schon zu Augen gekommen.

http://www.frnz.de/
Zuletzt geändert: 09.11.2008 15:08

09.11.2008 14:04 von Zapper:
Clonkoholic, dann doch bitte das Original und keinen Abklatsch.

09.11.2008 12:42 von Pl├╝schtroll:
Verlinke noch auf www.blindtextgenerator.de dann bin ich gl├╝cklich.

09.11.2008 11:41 von Spell:
@WolfRitter das ist F├╝lltext...  Es ist bedacht das es keinen Sinn ergibt. Solche Texte werden meistens mit bestimmten Programmen generiert...

09.11.2008 11:35 von WolfRitter:
Mal ne Frage:
Soll das Latein sein oO?
Wenn ja , es gibt im Lateinischen kein k sondern nur c , kein j sondern i und erstrecht kein y.
F├╝r mich machen deshalb die S├Ątze wenig Sinn.
Ansonsten gutes Tutorial f├╝r CSS.

09.11.2008 8:52 von Methos:
Keine Ahnung, finde ich irgendwie nicht so berauschend...

09.11.2008 2:47 von Nachtfalter:
Sehr sch├Ân gemacht. Vielleicht k├Ânntest du noch ein wenig mehr auf die CPPP CSS' eingehen, vor allem auch was man nicht macht. (wei├če Schrift auf hellen Untergrund, usw. ...)

08.11.2008 21:12 von Alexander:
Sch├Ân, echt sch├Ân leider so kurz...

08.11.2008 21:11 von Dragonclonk:
Sch├Ân gemacht.

05.11.2008 21:35 von Deffi:
Ich brauche noch Kritik, was man noch erw├Ąhnen k├Ânnte, das hier ist bisher viel zu wenig.
Zuletzt geändert: 05.04.2010 20:31