Websiteentwicklung: CSS: Grundlagen

Aus Wikibooks

[Bearbeiten] Grundlagen

Falls Sie im vorigen Kapiel Aufbau mehr oder weniger nur Bahnhof verstanden haben, lassen Sie sich nicht abschrecken. Versuchen wir jetzt lieber etwas Licht im Dunkeln zu finden.

[Bearbeiten] Wohin gehört ein CSS?

Die CSS-Definitionen können sich entweder direkt in der (X)HTML-Datei oder separat in einer eigenen Datei befinden. Üblicherweise verwendet man die letztere der beiden Varianten, da man die (X)HTML-Datei nicht unnötig aufblähen und vor allem die CSS-Definitionen auch von weiteren (X)HTML-Seiten bequem einbinden möchte.

Falls Sie jetzt mit einem neuen Projekt beginnen, erstellen Sie also idealerweise mit Ihrem Texteditor eine neue Datei und nennen diese "screen.css". In dieser Datei werden Sie dann künftig das Layout der Bildschirmdarstellung definieren.

Vermutlich haben Sie schon eine Idee, wie Ihre künftige Website aussehen sollte. Wahrscheinlich wird diese neben einem Präsentationsteil auch einen reinen Navigationsteil haben. Wenn nun jemand Ihre Website besucht und einen interessanten Artikel drucken möchte, bringt es ihm nichts, wenn die Hälfte des Papiers mit Navigationselementen bedruckt wird. Das können Sie verhindern, wenn Sie das Layout für die Druckausgabe in einer separaten CSS-Datei definieren. Legen Sie dazu eine weitere Textdatei mit dem Namen "print.css" an.

Selbstverständlich können Sie die Dateien nennen, wie Sie wollen, z.B. "elefant.css" und "gruenekuh.css". In den nachfolgenden Artikeln werden wir aber davon ausgehen, dass Sie den obigen Namensvorschlag übernommen haben.

[Bearbeiten] Wie beginne ich?

In die erste Zeile Ihrer CSS-Dateien kommt die Definition, welchen Zeichensatz Sie in diesem Dokument verwenden:

@charset "utf-8";

Vielleicht wenden Sie sich erstmal nur der screen.css zu und schieben die print.css für später auf. Üblicherweise lässt sich diese später einfach aus der screen.css ableiten.

Anschliessend sollten Sie mit etwas Kommentar beschreiben, was Sie hier eigentlich tun wollen. Meine CSS-Headers sehen meist etwa wie folgt aus:

@charset "utf-8";
 
/*
master stylesheet for www.boeni.com
(c) 2007  Stephan Böni, CH-Basel
 
version history:
1.0.0  22.06.2007  sb  initial release
1.0.1  25.06.2007  sb  fix menubar height (firefox)
1.1.0  01.07.2007  sb  new background image and smoother colors
*/
 
/*** global defaults ***/
body {
  color:       #ffffff;
  background:  #000000;
}

Fühlen Sie sich bei den Kommentaren völlig frei. Wenn Ihnen dieses Konzept nicht zusagt, erfinden Sie ein eigenes. Nur, scheuen Sie sich nicht, Kommentare grosszügig zu verwenden.

Unter "global defaults" sammle ich jene Definitionen, welche die gesamtheitliche Basis liefern; in obigem Beispiel, dass der Text grundsätzlich weiss und der Hintergrund schwarz ist.

[Bearbeiten] HTML, XHTML oder XML?

Vielleicht besitzen Sie bereits eine HTML-, XHTML- oder XML-Datei, in der Sie die soeben erstellten CSS-Dateien einbinden möchten. Vielleicht müssen Sie diese Frage verneinen und fragen sich an dieser Stelle, welche Variante - HTML, XHTML oder lieber XML - Sie verwenden sollten, um einen Website zu erstellen. Um es auf einen Nenner zu bringen: Mit XHTML werden Sie vermutlich richtig liegen. Mehr dazu finden Sie im Buch Websiteentwicklung: XHTML.

Wenn wir nachfolgend von HTML reden, gilt dies natürlich immer auch für XHTML, welches der Nachfolgestandard von HTML ist. Die Dateieindung einer XHTML-Datei lautet nach wie vor ".html". Bei Windows-Servern hat sich ".htm" als Variante eingeschlichen.

Falls Sie also noch keine (X)HTML-Seite haben, legen Sie diese nun mit Ihrem Texteditor an und nennen sie "index.html".

[Bearbeiten] Halt! Wo, Wie, Was?

Okay, Sie haben noch gar keine Ahnung, sitzen vor Ihrem PC und wollen einfach mal lokal etwas lauffähig bekommen. Mit etwas Glück verwenden Sie Linux. Dann können Sie der Nachfolgenden Anleitung folgen.

1. Falls noch nicht installiert, installieren Sie den Apache2 Webserver
2. Starten Sie Apache2 mit /etc/init.d/apache2 start
3. Legen Sie die oben erstellten Dateien im Ordner "/srv/www/htdocs" ab
4. Schreiben Sie "Hallo Welt" in die Datei "index.html"
5. Klicken Sie hier: http://localhost
6. Sie befinden sich auf Ihrer neuen Seite (und können dies hier folglich nicht mehr lesen)