Jun 2010

Webdesign mit CSS

HTML strukturiert Webseiten und zeigt eine sinngemäße Darstellung – nicht mehr und nicht weniger. Überschriften in h-Tags werden größer dargestellt als Fließtext in p-Tags. Die Schriftfarbe ist per Vorgabe Schwarz.

Cascading Stylesheets – CSS – überschreibt und erweitert die Darstellung von HTML-Elementen für das Layout und die Typografie.

Durch die Zweiteilung – HTML und CSS – werden Inhalt und Layout von Webseiten voneinander getrennt. Die HTML-Seite liegt in einer Datei, die Anweisung, wie die Seite formatiert werden soll, in einer anderen Datei. Das hält das Design konsistent über alle Seiten der Website.

Wenn das Design der Webseite aufgefrischt wird, reicht eine neue CSS-Datei. Die Inhalte in der reinen HTML-Datei müssen nicht angefasst werden.

HTML ohne Formatierung durch CSS HTML mit Formatierung durch CSS

CSS (Cascading Stylesheets) regelt die Darstellung von HTML-Elementen: CSS-Eigenschaften beschreiben die Schriftfamilie, Schriftgröße und -farben, den Hintergrund und die Platzierung von Blöcken für das Layout der Webseite im Browserfenster.

Aufbau von Stylesheet-Regeln

Eine CSS-Regel besteht aus dem Bezeichner für das Element, auf das die Regel abzielt (dem CSS-Selektor) und aus Eigenschaften, die dem Element zugewiesen werden. CSS-Regeln stehen in geschweiften Klammern und sind durch Semikolons voneinander getrennt. 

Selector { Eigenschaft: Wert; Eigenschaft: Wert; Eigenschaft: Wert; }

         +------> Eigenschaft (property)
         |
         |       +------> Wert (value)
         |       |
         
    p { color: darkgray; font-family: Arial; max-width: 400px; }
    
    |  ----------------------- Regel -----------------------
    |
    |
    +------> Selektor

In diesem Beispiel ist der Selektor der Name eines HTML-Tags wie p oder h1. CSS-Eigenschaften sind Bezeichnungen für Attribute (z.B. color für die Schriftfarbe und font-family für die Schrift). Eine CSS-Regel ist die Zuweisung eines Werts an eine Eigenschaft.

Mit dieser CSS-Regel werden die Browser angewiesen, die Texte in HTML-p-Tags dunkelgrau in der Schrift »Arial« und über eine maximale Breite von 400 Pixeln zu zeigen.

Eigenschaften und ihre Werte werden immer klein geschrieben. Wenn der Selektor wie in diesem Beispiel ein HTML-Tag ist, wird der Selektor ebenfalls immer klein geschrieben. Wenn ein Wert eine Maßangabe enthält wie max-width: 400px, wird die Maßeinheit ohne Leerzeichen direkt hinter den Wert gesetzt.

CSS in HTML-Seiten einbinden

CSS Inline-Stile | Fast alle CSS-Eigenschaften können in das style-Attribut direkt in das HTML-Tag geschrieben werden. 

<p style="color: darkgray; font-family: Arial">Hier wirkt der Stil direkt</p>

Das macht aber nur Sinn, wenn es sich bei den CSS-Stilen für das p-Tag um eine Ausnahme handelt.

style-Tag | Stylesheet-Regeln werden im Kopf des HTML-Dokuments in style-Tags notiert. 

<head>
   …
   <style type="text/css" media="all">
      p { color: white; background: green; width: 500px; }
   </style>
</head>

Externe CSS-Datei | Besser ist es allerdings, die CSS-Regeln in eine externe Datei auszulagern. So bleibt das Dokument übersichtlich und Änderungen wirken direkt auf allen Seiten, die durch das Stylesheet formatiert werden. 

<head>
   …
   <style type="text/css">
      @import url("style.css");
   </style>
</head>

		oder

<head>
   …
   <link rel="stylesheet" href="style.css" type="text/css" />
</head>

Die externe Stylesheet-Datei ist eine einfache Textdatei, in der die CSS-Regeln des Dokument notiert sind. Die Zeichenfolgen /* und */ schließen einen Kommentar ein, der vom Browser überlesen wird. Das style-Tag wird in einer externen Style-Sheet-Datei nicht notiert. 

/* Styleheet: mediaevent
Theme URI: http://www.mediaevent.de/
Version: 1 */

body { 
   background: gainsboro url(janbg2.gif) repeat-x; 
   }

p { 
   margin: 0p; color: rgb(60,60,60);
}

Selektoren

Alle HTML-Elemente innerhalb des body-Tags und auch das body-Tag können als Selektoren angegeben werden: p, div, a, …

class- und id-Attribute transportieren CSS-Eigenschaften in ausgewählte Elemente des Dokuments. Dieses Vorgehen ist das gebräuchlichste, wenn Stile nur auf spezielle Elemente angewendet werden sollen. 

<div id="headerBox"> … </div>
<ul class="ohneListenpunkte">
 …
</ul>

Die Namen von class- oder id-Attributen werden im Stylesheet durch einen ».« (Punkt) bzw. durch das »#«-Zeichen angeführt. Dabei kann die Bezeichnung des Elemets vorangesetzt werden – muss aber nicht. 

#headerBox { border: 3px solid silver; }
ul.ohneListenpunkte { list-style-type: none; }

Darüber hinaus können Element-Selektoren genauer angegeben werden – z.B. als Nachfahren-Selektoren:

h1 a
jedes a-Element innerhalb eines h1-Elements
a:hover
jedes a-Element wenn die Maus über das a-Element fährt (hoovert)

class- und id-Selektoren

Eine Klasse kann auf mehrere Elemente der HTML-Seite angewendet werden, während ein id-Attribut nur einmal im Dokument vorkommen darf. So eignet sich id gut dazu, Eigenschaften für das Layout und und die Positionierung in HTML-Elemente zu transportieren.

Ein class-Attribut hingegen darf beliebig oft im Dokument verwendet werden und kann darüber hinaus zur Formatierung unterschiedlicher Elemente dienen. 

<div id="page">

   <div id="header">
      <div id="headerimg">
         <h1><a href="…"><?php bloginfo('name'); ?></a></h1>
         <div class="description"><?php bloginfo('description'); ?></div>
      </div>
   </div> <!-- Ende header -->

   <div id="content" class="narrowcolumn">
      <div class="post" id="post-1">
       … 
      </div>
   </div>	 <!-- Ende content -->	

   <div id="sidebar">
   …
   </div>
   
</div> <!-- Ende page -->

Wertebereiche

Obwohl die Werte der Eigenschaft ganz unterschiedlicher Art sein können, gibt es einen Fundus an Werttypen.

color
Farben können als Hexwert (#cfcfcf), als RGB-Wert (rgb(200,200,200)), als Farbname (white, gray, black …) notiert werden
Breiten- und Höhenangaben
Können absolut in cm, relativ in px, ems, oder als Prozentangaben oder als Schlüsselwörter angegeben werden: thick, thin, medium. Prozentangaben beziehen sich auf den umfassenden Container.
URL/URI Adressen von Resourven
url(http://www.wisotop.de/assets/background.png)
Schriften
Als Schriftart oder generisch: font-family: Verdana, Arial, Helvetica; oder font-family: Times New Roman, serif;