Grundlagen in CSS

Cascading Style Sheets oder CSS sind Formatvorlagen für Webseiten

Allgemeines

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!


Was sind Style Sheets?

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.

Aufbau der Stylesheet-Angabe

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:
  • Schriftfarbe rot: color:#ff0000;
    color ist die Eigenschaft für die Schriftfarbe und #ff0000 ist der Wert als hexadezimale Farbangabe für Rot
  • Schriftgewicht fett: font-weight:bold;
    font-weight ist die Eigenschaft für das Schriftgewicht und bold ist der Wert als Schlüsselwort für fett
  • Unterstrichen: text-decoration:underline;
    text-decoration ist die Eigenschaft für Unter- und Überstreichungen und underline ist der Wert als Schlüsselwort für unterstrichen
  • Elementhöhe: height:100px;
    height ist die Eigenschaft für die Höhe und 100px ist der Wert als Zahl mit der Einheit Pixel. Wichtig! Zwischen der Zahl und der Einheit darf kein Leerzeichen stehen.

Vererbung

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>

CSS-Referenz: Schrifteigenschaften

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

Weitere Infos erhalten Sie hier:

Websitekosten online berechnen


Module im Überblick:



Immer auf neuestem Stand

Sparen Sie teure Agenturkosten und verwalten Sie Ihren Internetauftritt selbst: Mit unseren massgeschneiderten CMS-Systemen können Sie Ihre Informationen schnell einfach und ohne Umwege im Internet publizieren.



Alles aus einer Hand

Internetkomplettlösungen, exakt auf Ihre Wünsche zugeschnitten.


bortolottiwebdesigngmbh

Marktgasse 1
CH-4950 Huttwil
Telefon: +41 62 962 08 82
info(at)bortolotti-webdesign.ch
www.bortolotti-webdesign.ch


Google+  Facebook  Twitter


© 2014 Bortolotti Webdesign GmbH

Webdesign Sofortberatung

Contrexx-Spezialist und Platin Partner. Ihr Webseiten-Spezialist in Huttwil