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.

<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.

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:

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