Persönliche Einleitung hierfür:

Es ist Sommer, es ist heiß und ich habe sechs Wochen Ferien. Also werde ich etwas weitermachen, was ich schonmal auf dynamic-vision.com angefangen habe.

Eine Artikel Reihe zu verschiedenen CSS-Themen. Eine meiner Meta-Descriptions heißt: Coding. Da ich für diesen Bereich kaum etwas getan habe, werde ich dies hier jetzt mal nachholen. In der Zukunft werden weitere Artikel erscheinen.

Webstandards

Die Idee des Internets war, Informationen auf der ganzen Welt für jedermann zugänglich zu machen. Um dies zu gewährleisten, wurden einige Standards bzw. Grundregeln entwickelt, die von jedem “Anzeigegerät” gleich interpretiert werden sollten. HTML, CSS, ECMA-Script (Javascript) und XML sind die “Regelwerke”, nach denen im Web entwickelt wird. Nur haben Browserentwickler diese Standards nie sehr ernst genommen und so gibt es heute keinen Webbrowser, der HTML und CSS zu 100% beherrscht. Ganz besonders hängt der Marktführer, der Internet Explorer, in der Entwicklung hinterher und macht allen Webdesignern das Leben schwer und steht der Weiterentwicklung des Web im Weg.

Struktur einer CSS-Datei

Eine CSS von Anfang an zu strukturieren ist wichtig. Es dient zur besseren Übersicht und zu einem einheitlichen StyleSheet.

Wichtig dabei sind auch Kommentare um sich so schneller im Sheet zurecht zu finden, wenn es später sehr lang wird.

Kommentare werden folgendermaßen gesetzt:

/* Kommentar */

Die Hauptelemente standardmäßig definieren

html, body{

margin: 0;

padding: 0;

font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;

background-color: #e1e1e1;

color: #fff;

font-size:62.5%;

}

div, p, h1, h2, h3, ul, ol, li,

span, a, form, img {

margin: 0;

padding: 0;

}

a:link {

color: #fff;

text-decoration: none;

}

a:hover {

color: #000;

text-decoration: underline;

}

a:visited {

color: #333;

text-decoration: underline;

}

a:active {

color: #000;

text-decoration: underline;

}

strong {

font-weight: bold;

}

h1 {

font-size: 1.0em;

color: #fff;

}

h2 {

font-size: 0.8em;

color: #333;

}

p, ul {

font-size: 0.7em;

color: #fff;

line-height: 1.2em;

}

Erklärung

Diese am Anfang gemachte Definitonen gelten für alle Elemente. Man kann so auch eine Seite belassen, allerdings wirkt diese Seite dann sehr standardmäßig. Für sehr schlichte Seiten, welche aber nur einen Text wiedergeben soll ist dies aber schon vollkommen ausreichend, da alle gängigen Tags und Paragraphen definiert sind.

Im ersten Code stehen die Hauptelemente, welche ersteinmal auf den Wert 0 definiert werden.

Außerdem wird auch der Haupthintergrund und die Hauptschriftfarbe festgelegt. (background-color und color)

Einzelne Werte werden durch ein Komma voneinander getrennt, aber sie die Werte in den geschwungenen Klammern gelten für alle diese Elemente.

Im ersten Teil wird auch eine font-family festgelegt. Dise Schriftarten werden auf der Seite eingesetzt. Dabei ist es wichtig, dass alle Schrifttypen eingesetzt werden.

Im zweiten Teil werden dann herkömmliche Formatierung von den Hauptelementen festgelegt, wie zum Beispiel die Links (a:…)

So, damit ist der Hauptteil geschafft und man kann auf spezielle Werte kommen. Wenn man zum Beispiel ein Logo machen will, bei dem man ein Bild sieht dann setzt man diesen Teil in einen sogenannten Div-Container

Kommen wir nun zu dem weiteren CSS Code.

Der HHTML Code ist zu diesem Zeitpunkt immernoch nicht da.

Logische Kommentare und Gliederung

Der Header ist wohl in den meisten Fällen oben auf einer Seite zu finden. Dies ist auch im StyleSheet der Fall.

Unter den Hauptformatierungen wird nun folgendes ergänzt:

/* Anfang der Headerformatierung */

#header {

border: 1px solid #fff;

backgorund-image: ('/images/header.png');

background-color: #ff000;

background-repeat: no-repeat;

height:150px;

margin: 0 auto;

}

#header h {

display: none;

}

/* Ende der Headerformatierung */

Mit der Unterordnung des h-Paragraphen zu dem Div-Container “header” untersteht die Formatierund nicht mehr dem am Anfang allgemein definierten, sondern man kann diese CSS Anweisung wiederrum frei ändern.

So nun hat man das erste Element der Website definiert.

Im HTML Code würde es nun so aussehen:

....<body>

<div id="header"><h1>Hier kommt der Header</h1></div>

....</body>

Und schon erscheint an der definierten Stelle das Logo.

So wird also ein StyleSheet strukturiert:

  • [*]Hauptelemente festlegen
  • [*]Strukturiert das CSS nach vorkommen im Quellcode weiterführen
  • [*]Kommentare zur Übersichtlichkeit nicht vergessen

In unserem Beispiel würde wohl als nächstes die Navigation, dann der Hauptteil, mit Content und abschließend der Footer folgen.

So hat man einen schönen und übersichtlichen CSS Code entworfen und gelernt damit umzugehen.

Das Boxenmodell

Erläuterung

Wie eine Box aufgebaut ist, ist eigentlich relativ simpel. Die Box bekommt einen Rahmen, welcher die Außenhaut der Box darstellt. Diesen Rahmen kann man im StyleSheet auf viele verschiedene Weisen definieren. Der Außenabstand ist dann der Abstand zwischen Rahmen der Box und der übrigen Webste / Elemente der Seite. Außenabstände lassen sich nur in nummerischen Werten angeben, also ist eine farbliche Formatierung o.A nicht möglich. Innenabstände in der Box legen den Abstand zwischen Rahmen und Inhalt der Box fest. Das heißt man kann mit dieser Angabe den Text im inneren der Box noch “tiefer ind die Box drücken”.

Bildliche Vorstellung

Boxenmodell Grafik

CSS-Anweisungen

Rahmen der Box

Rahmen im Ganzen:

border: [man kann hier in einer Reihe ohne Komma getrennt die Werte für border-color, border-style und border-width angeben]; (z.B.: border: 1px solid #000; )

Rahmenfarbe

border-color: [Hexwert mit # davor];

Rahmenart

border-style: [none, dotted, dashed, solid, double, groove, ridge, inset, outset];

Rahmenbreite

border-width: [thin, medium, thick, nummerische Angabe];

Zudem kann man die einzelnen Rahmen [Oben, Links, Rechts, Unten] auch noch einzeln formatieren.

Dazu muss man den Rahmen, welchen man bearbeiten will einfach in die Mitte schreiben. Zum Beispiel: border-left-color: #ff000; Dann ist der Linke Rahmen rot

Außenabstände der Box

Allgemeiner Außenabstand

margin: [Numerischer Wert in px,%,em oder cm];

Außenabstand oben

margin-top: [Numerischer Wert in px,%,em oder cm];

Außenabstand links

margin-left: [Numerischer Wert in px,%,em oder cm];

Außenabstand rechts

margin-right: [Numerischer Wert in px,%,em oder cm];

Außenabstand unten

margin-bottom: [Numerischer Wert in px,%,em oder cm];

Innenabstände der Box

Allgemeiner Innenabstand

padding: [Numerischer Wert in px,%,em oder cm];

Innenabstand oben

padding-top: [Numerischer Wert in px,%,em oder cm];

Innenabstand links

padding-left: [Numerischer Wert in px,%,em oder cm];

Innenabstand rechts

padding-right: [Numerischer Wert in px,%,em oder cm];

Innenabstand unten

padding-bottom: [Numerischer Wert in px,%,em oder cm];

Containererstellung [class]

Was sind Container?

Ein sogannter Container kann man sich vorstellen, wie ein Puzzelteil in einem großen Puzzel. Dieses Teil ist frei veränderbar und verschiebbar. Es ist ein Teil der ganzen Homepage. Im folgenden Beispiel wird erklärt, wie man ein Container für den Content einer Seite einsetzt.

Der Container kann alle HTML Elemente beinhalten. Das heisst man kann innerhalb des Containers wiederum p-Paragaphen oder Ãœberschriften einfügen.

Der Vorteil gegenüber Tabellen ist der, dass das rendering flachfällt. Außerdem ist er logisch aufgebaut und man kann ihn genau besimmen.

Codebeispiel

<div id="container">

</div>

Hier sieht man, dass ein Container ein einzelner <div> Tag ist. Eine leere Hülle, die man allerdings so im Browser nicht erkennen kann. Der div Tag bekommt eine ID (Idendifikation) zugewiesen. Diese ID wird dann in der CSS Datei formatiert und von dort aus gesteuert wird.

Danach kommt der Inhalt innerhalb des Containers:

<div id="container">

<h2>Ãœberschrift</h2>

<p>Text</p>

<p>Text</p>

</div>

Also eine Überschrift und zwei Textabsätze, welche innerhalb des Rahmen, welcher der Container nur darstellt, sind. Diese können auch wieder im CSS formatiert werden.

Kommen wir zum CSS

Man will zum Beispiel diesen Container in die Ecke oben rechts, allerdings mit einem gewissen Abstand zum Browserrand.

Schauen wir und die CSS Datei an:

<style type="text/css">

<!--

#container {

border: 1px solid #000;

background-color: #888;

width: 200px;

margin-left: 10px;

margin-top: 15px;

margin-right:0px;

margin-bottom: 0px;

padding: 0px;

position: absolute;

}

h2 {

color: #444;

margin:0px;

padding: 5px;

font: bold 1.4em "Tahoma", Arial, serif;

text-decoration: none;

}

p {

color: #fff;

margin:0px;

padding: 10px;

font: bold 0.9em "Tahoma", Arial, serif;

text-decoration: none;

}

-->

</style>

Wie man schon aus dem Tutorial: Einbindung des CascadingStyleSheets ins Dokument. weiß, sind diese CSS Werte direkt in dem HTML Dokument gemacht worden.

Falls ihr nocht nicht soweit seid, dann könnt ihr euch mal ein neues HTML Dokument erstellen und folgenden Inhalt hinein schreiben:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de" lang="de">

<head>

<style type="text/css">

<!--

#container {

border: 1px solid #000;

background-color: #888;

width: 200px;

margin-left: 10px;

margin-top: 15px;

margin-right:0px;

margin-bottom: 0px;

padding: 0px;

position: absolute;

}

h2 {

color: #444;

margin:0px;

padding: 5px;

font: bold 1.4em "Tahoma", Arial, serif;

text-decoration: none;

}

p {

color: #fff;

margin:0px;

padding: 10px;

font: bold 0.9em "Tahoma", Arial, serif;

text-decoration: none;

}

-->

</style>

</head>

<body>

<div id="container">

<h2>Ãœberschrift</h2>

<p>Text</p>

<p>Text</p>

</div>

</body>

</html>

So nun hat man einen Container mit Inhalt und die Formatierung der einzelnen Werte.

Im CSS ist es so, dass man ID mit dem Rautezeichen (#) kennbar macht. Wie ihr es auch im CSS Abschnitt seht: #container {… .

Die jeweilige Formatierung der Elemente kann man nach und nach machen. Bei der Formatierung hilft zudem auch noch folgendes Tutorial:

Rahmen, Außenabstände und Innenabstände – Das Boxenmodell

Container mit Classen verbinden

Vielleicht habt ihr in einigen Quellcodes schon einmal soetwas gesehen:

<div id="container">

<div class="text"></div>

</div>

Dies ist eine sehr nützliche Funktion. Es lassen sich hierbei IDs mit Classen verbinden, sodass sie aufeinander aufbauen. Man kann sich es so vorstellen das man eine Klammer hat und man in diese Klammer etwas einfügt, was aber nicht größer als die Klammer werden soll.

So ist es auch mit den Classen. Wenn man das Beispiel von oben aufgreift und am Code die Überschrift <h2>Überschrift</h2> durch: <div class=”text”>Blub</div> ersetzt hat man die Classe “text” dem Container “container” untergeordnet.

Das sähe dann folgendermaßen aus:

<div id="container">

<div class="text">Blub</div>

<p>Text</p>

<p>Text</p>

</div>

Der CSS Code:

#container {

border: 1px solid #000;

background-color: #888;

width: 200px;

margin-left: 10px;

margin-top: 15px;

margin-right:0px;

margin-bottom: 0px;

padding: 0px;

position: absolute;

}

#container .text {

border-bottom: 1px solid #000;

background-color: #fff;

position: absolute;

color: #000;

width: 190px;

padding: 5px;

font: bold 1.4em "Tahoma", Arial, serif;

text-decoration: none;

}

Wie man hier erkennt ordnet man auch im CSS die Classe dem Container zu.

Dies geschieht indem man zuerst die ID Angabe macht und dann mit einem Punkt versehen die Classe.

#id .classe { Wert jetzt für die classe }

So verbindet man diese beiden Elemente.

Abschließend muss gesagt werden, dass auch Classen alleine stehen können ohne ein übergeordnetes ID Feld.

Das Positive an Classen ist, dass diese mehrfach verwendet werden dürfen, im Gegensatz zu IDs, welche nur einmal im Code enthalten sein dürfen.

weitere CSS-Tutorials:

Vererbung

CSS-Aufrufe

21. Juli 2006 | Generell

5 Kommentare wurden geschrieben

  1. Heiko sagt:

    Interessanter Artikel Benedikt. Einige deiner CSS Bsp.Definitionen kannst du mittels Shorthandproperties und Vererbung zusammen fassen. Bei grossen umfangreichen Projekten, kann da schon einiges zusammenkommen und genau dort ist eine gute Strukturierung, wie von dir angesprochen, unerlässlich.

  2. Benedikt sagt:

    Das ist richtig.

    Naja, ich dachte für den Anfang, den man hiermit ja machen will reicht es, wenn man es auf die simpleste Art und Weise macht.

    Aber natürlich ist das richtig und ich denke, dass ich es in einem meiner nächsten CSS Artikeln beachte.

  3. […] Dieser Artikel geht über den Einsatz von HTML-Tags, die, die gleichen CSS-Anweisungen besitzen. Dafür war der Kommentar von Heiko ausschlaggebend. […]

  4. Homepageerstellung » CSS Menüs sagt:

    […] Tipp gefunden bei Schweizer Glücksspielexperten. Wer möchte kann dort auch gleich einen Blick in die CSS Grundlagen werfen und sich ein klein wenig mit CSS vertraut machen. […]

  5. […] CSS Grundlagen Semantik eines (X)HTML Dokuments […]

Schreibe einen Kommentar