bortolottiwebdesigngmbh
Marktgasse 1
CH-4950 Huttwil
Telefon: +41 62 962 08 82
info(at)bortolotti-webdesign.ch
www.bortolotti-webdesign.ch
© 2013 Bortolotti Webdesign GmbH
Webdesign Sofortberatung
Die meisten kennen sicherlich Formatvorlagen in Textverarbeitungsprogrammen, wie Word, mit denen Formatierungen zentral festgelegt werden, die dann für das gesamte Dokument gelten. Die Vorteile liegen auf der Hand: Eine einheitliche Gestaltung und Änderungen können an einer Stelle vorgenommen werden. Cascading Style Sheets oder CSS sind Formatvorlagen für Webseiten.
Auf den folgenden Seiten erhalten Sie einige Grundkenntnisse wie CSS aufgebaut ist, und wie man damit arbeitet. Viele Tricks und Tipps waren auf den Tüftler!
CSS oder Cascading Style Sheets ist eine Sprache zum Formatieren von HTML/XHTML-Elementen. Verglichen mit den HTML-Formatierungen bietet CSS erheblich mehr Möglichkeiten, wie z.B. Schriftgestaltung, Rahmen, Innen- und Aussenabstände, Listen, Hintergründe, Positionieren, ... Da der Umfang der CSS regelmäßig erweitert wird, darf man auf zukünftige Gestaltungsmöglichkeiten gespannt sein.
Ein wichtiger Punkt ist die Möglichkeit, Formate zentral festzulegen, d.h. entweder im <head>-Bereich eines Dokuments (siehe Stylesheets zentral im Dokument deklarieren) oder ausgelagert in einer separaten Datei (siehe Stylesheets in eine externen Datei auslagern). Dies hat den Vorteil, dass Du Formate nur einmal festlegen musst und diese für das gesamte Dokument, bzw. das gesamte Projekt gültig sind. Damit erreichst Du ein über alle Seiten einheitliches Erscheinungsbild, was für einen gelungenen Webauftritt besonders wichtig ist. Natürlich lassen sich einzelne Tags auch direkt formatieren (siehe HTML-Tags formatieren).
CSS ist bis zu dem Zeitpunkt, an dem diese Seite entstanden ist, in der Version 2 verabschiedet. D.h. es gibt CSS 1 und CSS 2 und es werden in Zukunft auch CSS 3 und sicherlich weitere Versionen veröffentlicht. Dies ist in sofern wichtig, weil CSS 1 und CSS 2 in den Browsern unterschiedlich umgesetzt wird.
In der CSS-Referenz findest Du eine Übersicht sämtlicher CSS 1 und CSS 2 Stylesheet-Angaben inkl. Beispielen. Zu jeder Angabe gibt es u.a. auch Hinweise welcher der obengenannten Browser die Angabe interpretiert.
Eine Stylesheet-Angabe besteht aus der Eigenschaft und dem Wert, getrennt durch einen Doppelpunkt. Die Eigenschaft ist das, was du formatieren möchtest. Z.B.: color für die Schriftfarbe, border-width für die Rahmenbreite oder text-decoration für Unterstreichungen. Als Wert sind Farbangaben, Einheiten oder Schlüsselworte möglich.
Hier einige Beispiele:color:#ff0000;font-weight:bold;text-decoration:underline;height:100px;Ein XHTML-Dokument ist in einer Baumstruktur aufgebaut. Jedes Element hat Vor- und evtl. Nachfahren, die man als Eltern- und Kind-Elemente bezeichnet. Formatierst du ein Element mit Stylesheets, so übernehmen nachfolgende Kindelemente einige dieser Formatierungen. Diesen Vorgang bezeichnet man als Vererbung.
Der Quellcode sieht vereinfacht so aus:
<body> <div> <h1>...</h1> <div> <h2>...</h2> <p> <span>...</span> </p> </div> </div> </body>
| Eigenschaft | Beschreibung | Werte |
|---|---|---|
| font | Schrift | font-family, font-weight, font-size, font-style, font-variant, line-height caption, icon, menu, message-box, small-caption, status-bar, icon, menu, message-box, small-caption, caption, Inherit |
| font-family | Schriftfamilie | Schriftart, Inherit |
| font-size | Schriftgröße | Längenangabe, Prozentangabe, xx-small, x-small, small, smaller, medium, large, x-large, xx-large, larger, Inherit |
| font-style | Schriftstil | italic, oblique, normal, Inherit |
| font-variant | Kapitälchen | small-caps, normal, Inherit |
| font-weight | Schriftgewicht | normal, bold, bolder, lighter, 100 - 900, Inherit |
| font-size-adjust | in CSS 2.1 entfallen | |
Marktgasse 1
CH-4950 Huttwil
Telefon: +41 62 962 08 82
info(at)bortolotti-webdesign.ch
www.bortolotti-webdesign.ch
© 2013 Bortolotti Webdesign GmbH