home  |  suche  |  kontakt/johner  |  institut 
studierende  |  tech-docs  |  mindmailer 

Auch diese Sektion erhebt nicht den Anspruch auf Vollständigkeit. Es sei daher besonders auf hervorragenden Quellen zu diesem Thema verwiesen.

CSS - Einführung

Wie im vorherigen Kapitel dargestellt, sollten Formatierungsanweisungen im HTML Code vermieden werden und statt dessen in Stylesheets ausgelagert werden. Zur Einführung seien zwei HTML Dokumente gezeigt, die einmal unformatiert und einmal mit CSS formatiert sind.

Dies ist das zugehörige CSS:

 

body {background-color: #CCF;}
h1, h2, h3, cite {font-family: Arial, sans-serif; color:green;}
h1 {text-transform: uppercase}
h2 {font-style: italic; text-align:center; color:blue;}
table {background-color:yellow; padding-top:20px;
vertical-align:bottom}
td {border-width:2px; border-style:dotted;
border-color:blue;padding-left:30px;background-color:white;}
em {color:red; text-size:xx-large;}
ul {text-align:center;}

 

 

Definition

Das CSS kann entweder im Head oder in einer eigenen Datei definiert werden:

     

  • In separater Textdatei, die im Head referenziert wird

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

  • Direkt im Head

    <head>
       <style type="text/css">
          <!--
             body {background-color: #CCF;}
             h1, h2, h3, cite {font-family: Arial,
    sans-serif; color:green;}
              ...
           -->
        </style>
      ...
    </head>

Schließlich ist es auch möglich, Styles direkt im HTML-Code zu definieren, beispielsweise

 

<p style="color:red;>Roter Text</p>

 

 

Anwenden von Styles

Um die Styles auf Bereiche des HTML-Dokuments anzuwenden, müssen wie oben dargestellt bestehende Tags (z.B. p, h1-6, table) eingesetzt werden. Weiterhin können auch eigendefinierte Klassen genutzt werden:

 

<P class="bodytext">Hier folgt der Text</P>

 

Im Stylesheet könnte dann eine Zeile den "bodytext" formatieren:

 

.bodytext {color:red;}

 

Diese Klasse könnte dann in allen Tags genutzt werden, beispielsweise

 

<H1 class="bodytext">Rote Überschrift</H1>

 

 

CSS Eigenschaften

Wichtige Eigenschaften zur Formatierung sind (mit Beispielen und Alternativen in rundne Klammern):

     

  • font-family: Arial, sans-serif (Times New Roman, Time, serif)
  • font-style: italic (normal)
  • font-size: x-large (xx-small, x-small, small, medium, large, x-large, xx-large) (Bitte keine absoluten Angaben z.B. in Pixel)
  • font-weight: bold (bolder, lighter, normal)
  • text-decoration: none (underline, over.ine, line-through)
  • text-transform: capitalize (uppercase, lowercase, none)
  • color: red (white, #CFF, #DA04A2)
  • vertical-align: top (middle, bottom) für Tabellenzellen
  • text-align: left (center, right, justigy)
  • margin-right:10px (genauso -left, -bottom, -top)
  • padding-right:10px (genauso -left, -bottom, -top) Abstand zu umschließenden Element
  • background-color: blue

Positionierung

Um Elemente zu positionieren empfiehlt sich das div-Tag, das wie folgt im HTML-Code stehen könnte:

 

<DIV class=box1>Ein kurzer Text</P></DIV>

 

Über die Stylesheetangabe

 

.box1 {position:absolute; top:220px; left:270px; width:200px; 
height:150px; background-color:red;}

 

lässt sich dieser Bereich nun positionieren. Und so sieht das aus.

Die div-Tags lassen sich auch schachteln:

 

  <div class="box1">
   <div class="box2"><p>Ein kurzer Text</p></div>
   <div class="box3"><p>Ein anderer Text</p></div>
  </div>

 

und über ein Stylesheet positionieren und formatieren:

 

  .box1 {position:absolute; top:220px; left:270px; width:400px; 
height:150px; background-color:#4FF;}
  .box2 {float:left; width:150px; height:100px;
background-color:#F4F;font-size:large;}
  .box3 {float:left; width:150px; height:100px;
background-color:#FF4;margin:20px;}

 

Und so sieht das Beispiel aus.