CSS Webdesign Regeln

Direkt zum Inhalt Home Kontakt CSS Workshop zurück  weiter

Beim erstellen von Webseiten mittels CSS gibt es einige Regeln zu beachten, die zu den Grundlagen gehören.

• selector {declaration; property; value;}
  selector: hier wird selektiert z.B.: body, #wrapper, #kopfbereich, ...
  

• declaration: hier wird die Gestaltung der Elemente des jeweiligen Selectors beschrieben, wobei declaration jeweils ein Werte-Paar darstellt z.B.: text-decoration: underline;

• property: hier wird die Eigenschaft des jeweiligen Elements festgelegt, wie Farbe, Schriftart ...  Die zu gestaltende Eigenschaft wie Farbe, Schriftart ... steht vor dem Doppelpunkt, z.B.:
  body {font-size:small;}

• value: Das entspricht dem Wert, welcher zugewiesen wird, z.B. small

Verschachtelte Selektoren

Bereiche wie DIV in CSS verschachteln

Beispiel im <div id="kopfbereich"> befindet sich:
oben das Logo, der Hintergrund soll weiss sein
darunter eine Überschrift mit H1, der Hintergrund soll orange sein
dann erweitern Sie die Regel:
#kopfbereich {font-family: arial; font-size: .8em; color: black; background-color: #f3c600;}
um die Regel für das Bild bzw. Logo
#kopfbereich img {background-color: white;}
Zum ansehen Beispiel (im neuen Fenster)

Listen in CSS verschachteln

ul li { list-style-type: square; } beschränkt die Darstellung von quadratischen Aufzählungszeichen auf den Typ ungeordnete Listen.

Beispiel für eine nummerierte Liste
   1. Dieser Punkt hat eine arabische Ziffer
         a. Dieser Punkt hat einen Kleinbuchstaben
         b. Dieser Punkt hat einen Kleinbuchstaben
   2. Dieser Punkt hat wieder eine arabische Ziffer
Die Definition per CSS erfolgt so:
ol li { list-style-type : decimal; }   
ol ol li {  list-style-type : lower-alpha; }
Und im Quelltext der HTML-Seite:
<ol>
  <li>Dieser Punkt hat eine arabische Ziffer
         <ol>  Bezug auf ol ol li ... in der Styleangabe.
                 <li>Dieser Punkt hat einen Kleinbuchstaben</li>   
                 <li>Dieser Punkt hat einen Kleinbuchstaben</li>           
         </ol> Das <ol> für lower-alpha wird hier geschlossen
  </li> ebenso die  erste Aufzählung
  <li>Dieser Punkt hat wieder eine arabische Ziffer</li>
</ol>

Die Schriftgröße für Überschrift ändern

Nehmen wir an, Sie haben im Body global die Schriftgröße mit small definiert und wollen den Überschriften H1 und H2 eine andere Regel für die Schriftgröße zuweisen, das funktioniert so:
h1 { font-size:150%; }
h2 { font-size:135%;}

CSS-Regeln für Hyperlinks

Damit das Aussehen Ihrer Hyperlinks auch funktioniert, müssen Sie die reihenfolge einhalten, in denen diese definiert werden:

1. a:link
2. a:visited
3. a:hover oder a:focus
4. a:active

Wollen Sie die Unterstreichung in Hyperlinks unterbinden, beginnen Sie Ihre CSS-Regel mit:
a { text-decoration: none; outline: none; } /* Unterstreichung entfernen */a
a:link { color: #d90000; }
a:visited { color: #cc6666; }
a:hover, a:focus { border-bottom: 1px solid #d90000; }
a:active { color: white; background-color: #d90000; }

Wollen Sie die Hyperlinks in der Navigation und die z.B. im Text oder einem textblock unterschiedlich gestalten, dann definieren Sie am besten einen eigenen Bereich für die Navigation mit <div id="navibereich"> un dim Stylesheet definieren Sie nun wie die Hyperlinks gestaltet werden sollen:
#navibereich a{ color:#353535; background-color:transparent;} z.B. durchsichtig

Die Anleitung orientiert sich an dem Buch little boxes Webseiten gestalten mit CSS Grundlagen.
Von dem Autor sind die nachfolgenden Titel verfügbar:

Nach oben