Eine CSS-Datei kann je nach Website schon mal 1000 Zeilen erreichen, vorausgesetzt man organisiert sie übersichtlich.
Dabei kann ein Inhaltsverzeichnis sehr hilfreich sein. Die damit verbundene Mehrarbeit lohnt sich auf jeden Fall. Sollte man bei der mühevoll erstellte Website nach einem Jahr Änderungen durchführen müssen, hat man durch das Inhaltsverzeichnis sehr schnell den Überblick was wo steht.
Ein Inhaltsverzeichnis könnte so ausschauen:
/*------------------------------------Stylesheets fuer www.loscarachos.deDatei: bildschirm.cssDatum: 30.9.2008Ersteller: Holzwurm Webdesign------------------------------------*/ /*##################################INHALTSVERZEICHNIS:1.Allgemeine Selektoren2.Allgemeine Hyperlinks3.Layout allgemein + #startseite3.1 #wrapper3.2 #kopf3.3 #links3.4 #rechts3.5 #fuss4. Layout Unterseiten4.1 #mitglieder 4.1.1 #miguel 4.1.2 #enrico4.2 #galerie4.3 #kontakt5.Sonstige Styles5.1 Sonstige Klassen##################################*/Man kann natürlich noch hinter den einzelnen Punkten des Inhaltsverzeichnisses die Zeilennummern eintragen, darauf habe ich aber hier verzichtet.
Allgemeine Selektoren sieht bei mir meistens so aus:
/*====1.Allgemeine Selektoren====*/* {padding:0;margin:0;}Mit der ersten Anweisung setze ich die Abstände aller Elemente auf Null. Damit vereinheitliche ich die unterschiedlichen browserinternen Vorformatierungen und schaffe so eine gemeinsame Basis, von der aus ich alle Abstände neu definiere.
Das nennt man CSS-Prolog.
html {height:100%;}Das Wurzelement wird auf die Höhe des sichtbaren Bildschirmbereiches ausgedehnt
body {color:#000;background-color:#f1f1f1;font:100.01%/1.4 arial, verdana, sans-serif;}Für body werden Schrift,- und Hintergrundfarbe festgelegt. Außerdem Schriftgröße, Zeilenabstand und einige Schriftarten. Weitere Infos dazu findest du in diesem Artikel.
p, li, dt, dd, input, textarea {font-size:1em;}Die Standardschriftgröße für die wichtigsten Elemente werden definiert.
p {margin-bottom:0.5em;}Alle Textabsätze bekommen einen unteren Abstand zugewiesen.
li {list-style-type:none;}Die Listenzeichen werden ausgeschaltet. Da diese browserübergreifend oft nicht einheitlich dargestellt werden bastel ich mir lieber eine kleine Grafik als Listenzeichen und binde diese als Hintergrundgrafik ein. Das funktioniert browserübergreifend.
img {border:none;}a imgborder:none;}Default-Rahmen um Bilder und verlinkte Bilder werden auf Null gesetzt.
h1 {font-size:2.4em;}h2font-size:1.6em;margin: 1em 0 0.6em 0;}Alle Überschriften werden hier formatiert. Abweichendes dazu wird weiter unten in der CSS-Datei in den Unterseiten definiert.
Weiteres zur Ordnung in einer CSS-Datei könnt ihr hier nachlesen:
Coool hab das direkt als meinen CSS Prolog genommen
Danke genau sowas haeb ich gesucht!
[...] [...]
[...] [...]