HTML Reference

CSS

CASCADING STYLE SHEET

Die "modernere" Art Texte in HTML zu formatieren sind CASCADING STYLE SHEETs. Diese können entweder

  1. direkt als Attribute zu TAGS oder
  2. im HEAD-Bereich der Datei eingefügt oder
  3. in eine "CSS"-Datei
ausgelagert werden.

Leider werden nicht alle style-sheet-Angaben von allen Browsern gleichermassen unterstützt (Beispiel: landscape), weswegen wohl noch eine Weile die "alten" neben "neuen" Formatierungen bestehen werden. Andrerseits können mit style-sheets schöne zusätzliche Effekte erzielt werden.

Beispiele für die etwas unterschiedliche Syntax :CSS-Datei

Demonstration am Beispiel >font bgcolor="#ff0000<"

herkömmliche Formatierung

Das ist ein herkömmlicher Text und ein Wort wird rot dargestellt.

Formatierung Version 1

span style:background-color="#ff0000"
Das ist ein mit span formatierter Text und ein Teil wird rot dargestellt.

Formatierung Version 2

Definition der Farbe rot im HEAD:
<style>
<!--
span.rouge {color: ff0000}
-->
</style>
Formatierung: <span class=rouge>
Das ist ein mit span class=rouge formatierter Text und ein Teil wird rot dargestellt, weil im head "rouge" als "rot" definiert worden ist.

Formatierung Version 3

Einbindung der CSS-Datei "website.css"
<link rel=stylesheet media="screen" href="website.css"> 

Definition der Farbe rot in CSS-Datei:
<style>
<!--
span.rosso {color: ff0000}
//-->
</style>
Formatierung: <span class=rosso>
Das ist ein mit span class=rosso formatierter Text und ein Teil wird rot dargestellt, weil in der zugeordneten CSS-Datei "rosso" als "rot" definiert worden ist.


In den letzten beiden Beispielen wurde das Universalattribut "class" verwendet, um die entsprechende in der Definition nach dem Punkt stehende Eigenschaft zuzuweisen.

Daneben besteht auch die Möglichkeit im STYLE "Bereiche" zu definieren und deren Eigenschaften einer "id" zuzuweisen. Damit kann ein Teil der Bildschirmdarstellung so gestaltet werden, wie mit herkömmlicher Methode nur eine ganze Datei:

Die Definition sieht dann etwa so aus:

#roterRand {
   position:absolute;
   top:130px;
   left:30px;
   width:320px;
   padding:10px;
   margin:0px;
   border:4px solid #EE0000;
}

Die Zuweisung dieser Eigenschaften erfolgt dann so:

<div id="roterRand"><h1>Die rot umrandete Überschrift</h1></div>


Allgemein zu beachten


einfaches Beispiel

<HTML>
<head>
<style type=txt>
<!--
body {background: white; color: black}
H1 {font: 8pt Arial bold}
P {font: 10pt Arial; text-indent: 0.5in}
A {text-decoration: none; color: blue}
-->
</style>
</head>
<body>
<h1>Die Hintergrundfarbe des Dokuments ist weiß.
    Die Farbe des Textes ist schwarz.
    Der Text, formatiert mit dem H1-Element ist in 8-Punkt Arial fett.</H1>
<p>Dieser Text ist formatiert mit 10-Punkt Arial und einem Rand von 0.5 inches.
<p>Hyperlinks im Text <a href=>hier klicken</a> werden blau angezeigt.
<body>
<html>

ein weiteres Beispiel: <style> <!-- BODY {font-family: "Verdana, Arial, Helvetica"; font-size: 8pt} H1 {font-family: "Verdana, Arial, Helvetica"; font-size:16pt; font-weight: bold} H2 {font-family: "Verdana, Arial, Helvetica"; font-size:14pt; font-weight: bold} H3 {font-family: "Verdana, Arial, Helvetica"; font-size:13pt; font-weight: bold} H4 {font-family: "Verdana, Arial, Helvetica"; font-size:12pt; font-weight: bold} A:link {font-family: "Verdana, Arial, Helvetica"; color: 0000B0; font-size: 8pt} A:visited {font-family: "Verdana, Arial, Helvetica"; color: CC3399; font-size: 8pt} STRONG {font-family: "Verdana, Arial, Helvetica"; font-size: 10pt; color: 003366; text-decoration: none} BIG {font-family: "Verdana, Arial, Helvetica"; font-size:10pt; color: 000000; text-decoration: none} SUP {font-family: "Verdana, Arial, Helvetica"; font-size:7pt; color: 000000} SUB {font-family: "Verdana, Arial, Helvetica"; font-size:7pt; color: 000000} SMALL,ADDRESS {font-family: "Verdana, Arial, Helvetica"; font-size:7pt; text-decoration: none} --> </style>

Mehr Details zu CSS bzw. Cascading-Style-sheets

----------------------------------------------------------

Wünsche, Anregungen, Kritiken oder einfach Kommentare an Grünwald