Jun 2010

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.

Vorgegebene Darstellung durch den Browser

Die Browser bringen auch ohne CSS ihre eigenen Stile für die Darstellung von Elementen mit. Die Stile der Browser lassen sich z.B. durch Reset CSS von Eric Meyer ausschalten.

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;
   
Copyright © 2000 - 2010 Media Engineering Alle Rechte vorbehalten
Design + Programmierung Media Engineering U. Häßler 47506 Neukirchen-Vluyn • Impressum und Nutzungsbestimmungen