Ich bin der Text und ich bin ein roter Link
| CSS für Schreibfaule: Schlanke Webprogrammierung |
|
Gutes Webdesign ist eine Frage von vielen Faktoren. Aber auch unter der Motorhaube macht sich die Beherschung von HTML, JavaScript und CSS bemerkbar. In diesem Tutorial werdet Ihr keine Anleitung zu phänomelanen CSS-Tricks finden sondern einen Weg, die Style-Sheet Formatierungen schlau zu strukturieren. Das sorgt für schlanken Quellcode und dem damit verbundenen schnelleren Seitenaufbau und einem verringerten Traffic Elemente definieren Für die grundlegenden Formatierungen der Seite werden erst einmal HTML-Elemente formatiert.
body {
margin: 0;
padding: 0;
}
p, div, ul, td, li {
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
}
a {
color: #5BA41D;
text-decoration: underline;
}
Damit haben wir schon mal die Schrift sowie die Schriftgröße für den kompletten Text der Webseite festgelegt. Durch die Anweisungen für den Bereich body sparen wie uns leftmargin, marginheight usw. für den Browserrand von 0 Pixeln. Und weil der Opera mit margin nichts anfangen kann und mehr auf padding steht wird das gleich noch mit definiert. Natürlich können hier noch weitere Formatierungen für Überschriften (h1, h2...) oder input-Elemente eingefügt werden.Der Schreibfaule gewinnt Mit den oberen Definitionen kommen wir natürlich nicht weit, vor allen nicht,
wenn wir für li ein paar Besonderheiten vorgesehen haben.
p, div, ul, td {
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
}
li {
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
font-style: italic
}
Und hier die Einsparung von 2 Zeilen:
p, div, ul, td, li {
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
}
li {
font-style: italic
}
Die kursive Formatierung wird zu den bereits bestehenden Formatierungen addiert. Wir arbeiten uns also von einer allgemeinen zu einer sehr spezifischen Formatierungen der Elemente vor. Eine aufgeräumte Navigation Für die Aufteilung der Seite in einzelne Bereich wie Navigation, Header und Footer sollten IDs verwendet werden. Für die Navigation, der Bereich der oft ein einziger Quellcode Müllhaufen ist, arbeiten wir mit einer ID #navigation und der Formatierung von HTML-Elementen. Hier der entsprechenede CSS-Part::
#navigation a {
text-decoration: none;
color: #333333;
display: block;
background-color: #E4E4E4;
width: 250px;
}
#navigation a:hover {
background-color: #FFFFF;
}
Zuerst mussten wir die Eigenschaften text-decoration und color überschreiben, die wir weiter oben bereits für a definiert haben. Die Navigation bildet in unserem Beispiel die einzigste Ausnahme aus der oben gemachten Definition. Andernfalls muss erwägt werden ob eine separate Definition via #content a {}, #footer a{} usw. weniger Text bedeutet. Mit der Anweisung display: block sorgen wir erstmal dafür, dass sich das Element a wie ein Block Element (z.B. div) verhält. Wodurch aber auch width definiert werden muss, da ein div Element ja bekanntlich 100% breit ist. Mit weiteren Eigenschaften wie height, padding, background-color usw. und dem entsprechenden Hover Zustand kann eine sehr schöne Textnavigation im Buttonstil erzeugt werden. Beispiel contenido CMS Demoseite Und hier noch der HTML Quellcode dazu: Neben umständlichen Tabellenkonstruktionen haben wir uns noch alle möglichen style und class Attribute sowie noch zusätzlich die br´s gespart. Wer noch weniger schreiben will muss HTML weglassen oder auf Inhalt verzichten ;-) Für tiefere Navigationsebenen muss zwischen die Hauptrubriken noch ein div mit einer
eigenen ID (z.B. #subnavigation) eingefügt und formatiert werden.
#subnavigation a{
padding-left: 10px;
}
Hier haben wir uns die Vererbung von Elementen zunutze gemacht. Die 2. Ebene der Navigation soll lediglich eingerückt aber Hintergrundfarbe und Hover Zustand beibehalten werden, also brauchen wir auch nur padding zu definieren, da #subnavigation ein child-Element #navigation ist und alle Eigenschaften von #navigation a auch für #subnavigation a gelten Der Inhaltsbereich Befassen wir uns nun mit dem oft gesuchten und manchmal schwer zu findenden Content. Die Typographie ist auch für gutes Webdesign wichtig und sollte nicht das unbekannte Fremdwort des 300-dpi Künstlers sein. Also werden Zeilen- und Absatzabstände bearbeitet:
#content p {
line-height: 125%;
margin: 10px 0px 0px 0px;
}
Schriftart und Farbe werden in diesem Fall auch von der oben gemachten Definition von p geerbt. Nun braucht man natürlich Klassen für diverse Auszeichnungen im Text oder irgendwelche Boxen auf der rechten Seite usw. Um weiterhin Schreibfaul zu bleiben wird ein Baukastenprinzip angewendet. Gehen wir mal davon aus wir brauchen 3 verschieden Boxen mit gleicher Umrandung aber unterschiedlicher Hintergrundfarbe. Der Schreibwütige definiert erst mal drei Klassen:
.box1 {
border: 1px solid #CCCCCC;
background-color: #FFFFFF;
}
.box2 {
border: 1px solid #CCCCCC;
background-color: #E4E4E4;
}
.box3 {
border: 1px solid #CCCCCC;
background-color: #333333;
}
Wer nur einmal am Tag border schreiben will, definiert Bausteine:
.rahmen {
border: 1px solid #CCCCCC;
}
.bg1 {
background-color: #FFFFFF;
}
.bg2 {
background-color: #E4E4E4;
}
.bg3 {
background-color: #333333;
}
Nun kann man im class Attribute mehrere CSS-Klassen mit Leerzeichen getrennt einem HTML Element zuweisen. Wenn ich also eine Box mit Hintergrund 1 erstellen will schreibe ich:
Die Vorteile dieser Schreibweise liegen auf der Hand: Die Rahmeneigenschaften werden nicht redundant
sondern zentral in der Klasse .border definiert. Füht man dieses Baukastensystem konsequent fort, wird die Seite absolut leicht zu pflegen und zu warten.
Mit weiteren separaten Klassen z.B. für Aussen- und Innenabstand potenziert sich die Anzahl der Kombinationsmöglichkeiten
ohne dass die css-Datei bis ins Unendliche anschwillt.
Noch ein Tipp am Rande: Benennt Eure Klassen nicht nach dem Aussehen, sondern nach dem Zweck. Also .newsbox anstatt .boxblau. Es könnte nämlich gut sein, dass die blaue Box vielleicht mal rot wird und wer will schon durch den ganzen Quellcode, um Klassennamen umzubenennen nur damit .boxblau jetzt .boxrot heissen kann. Weitere Tipps Für die Gestaltung der gesamten Webseite gelten die bereits erwähnten Grundsätze der Vererbung und des Baukastenprinzips. Der HTML Quellcode wird mit ID´s unterteilt und die darin enthaltenen HTML Elemente unterschiedlich formatiert. So spart man sich mindestens etliche class und style Attribute. Man kann sich das DOM Modell von HTML noch weiter zunutze machen indem man Verschachtelungen definiert:
#content p a {
color: red;
}
Für große Webseiten kann man mehrere css-Dateien anlegen z.B. für Navigation, Content und Elementdefinitionen. Das ist aber Geschmackssache und dient lediglich einer gewissen Übersichtlichkeit. Falls einzelne Seite wie z.B. die Sitemap viele Klassen und ID´s erfordern sollte man diese CSS-Anweisungen auch auf der HTML Seite selber platzieren. Sie werden nur dort gebraucht und sorgen nur für mehr Traffic falls Sie bei jedem Aufruf der globalen CSS-Datei geladen werden. Alternativ können diese Anweisungen auch in einer eigenen Datei ausgelagert werden, welche dann nur auf der entsprechenden Seite eingebunden wird. Smarte Browserweiche Da die meisten Nicht-Internet-Explorer-Browser auf Mozilla basieren kann man mit einem ganz simplen Trick Webseiten für die beiden Browserarten optimieren. Erst einmal wird die Anweisung für alle gemacht:
.klasse {
margin-top: 10px;
}
Diese spezielle Schreibweise versteht nur der IE:
* html .klasse {
margin-top: 12px;
}
Damit wird nur für den Internet Explorer die .klasse überschrieben, sofern sie im Quellcode unterhalb platziert wird. In vielen Fällen kommt man mit diesem Trick zu einer browserkompatiblen Webseite ohne komplizierte Browserweichen. Wem das alles zu umständlich ist, kann seine Webseiten natürlich auch von einer netten, kleinen Werbeagentur aus dem Kreis Giessen erstellen lassen. Spezialisiert auf kleine mittelständische Unternehmen aus dem Bereich Industrie und Investitionsgüter kann mark-up als ein ebenso kleines Unternehmen flexibel und schnell reagieren und produzieren. Und dass die Webdesigner von mark-up schreibfaul sind, macht sich in Eurer Traffic-Abrechnung positiv bemerkbar. Der Autor: |
| < zurück | weiter > |
|---|