Websiteentwicklung: CSS: Grundlagen
Aus Wikibooks
Inhaltsverzeichnis |
[Bearbeiten] Grundlagen
Falls Sie im vorigen Kapitel Aufbau mehr oder weniger nur Bahnhof verstanden haben, lassen Sie sich nicht abschrecken. Versuchen wir jetzt lieber etwas Licht ins Dunkel zu bringen.
[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.
Anschließend 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 großzügig zu verwenden.
Unter "global defaults" sammle ich jene Definitionen, welche die gesamtheitliche Basis liefern; in obigem Beispiel, dass der Text grundsätzlich weiß 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 entweder .xhtml oder .xht.[1]
Falls Sie also noch keine (X)HTML-Seite haben, legen Sie diese nun mit Ihrem Texteditor an und nennen sie "index.xhtml". Siehe dazu Websiteentwicklung:_XHTML:_Erste_Seite.
