Sep 2008

Webseiten mit CSS gestalten

 
 
HTML ohne Formatierung durch CSS

HTML-Tags wie <h1>, <p> oder <div> strukturieren das Dokument und zeigen eine sinngemäße Darstellung. Überschriften in h-Tags werden größer dargestellt als der Fließtext in p-Tags. h- und p-Tags haben einen kleinen Abstand gegen andere Blockelemente, den margin. Die Schriftfarbe ist per Vorgabe Schwarz.

HTML mit Formatierung durch CSS

CSS (Cascading Stylesheets) regelt die Darstellung von HTML-Elementen: CSS-Eigenschaften beschreiben die Schriftfamilie, Schriftgröße und -farben, die Größe und den Hintergrund von Elementen und die Platzierung von Elementen im Browserfenster. Damit überschreibt und erweitert CSS die Darstellung von HTML-Elementen.

Aufbau von Stylesheet-Regeln

Eine 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 geschweifte Klammern und sind durch Semikolons voneinander getrennt. 

Selector { Eigenschaft: Wert; Eigenschaft: Wert; Eigenschaft: Wert; }
CSS-Notation.gif
CSS-Eigenschaften sind Bezeichnungen für Attribute (z.B. color für die Schriftfarbe und background-color für die Hintergrundfarbe). Eine CSS-Regel ist die Zuweisung eines Werts an eine Eigenschaft.

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

Einbinden von CSS

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

Das klassische Wordpress-Design benutzt id-Attribute für einmalige Elemente der Seite (Kopf, Inhalt und Seitenleiste) und class-Attribute für die Artikel, da Artikel mehrfach auf einer Seite vorkommen können.

Eine Klasse kann auf mehrere Elemente der HTML-Seite angewendet werden, während ein id-Attribut immer eindeutig im Dokument stehen muss und nur in einem Element verwendet werden darf. So eignet sich id gut dazu, Eigenschaften in HTML-Elemente für das Layout der Seite zu transportieren. Ein class-Attribut hingegen darf beliebig oft im Dokument verwendet werden und kann zudem 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 Natur 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;
   

Galileo Design
Galileo Design – Spitzentitel für digitale Fotografie, Webdesign, Flash und Bildbearbeitung.

Copyright © 2000 - 2010 Media Engineering Alle Rechte vorbehalten
Design + Programmierung Media Engineering Ulrike Häßler 50226 Frechen-Königsdorf • Impressum und Nutzungsbestimmungen