Deklaration eigene Klassen
    
HOME
ZURÜCK SITEMAP  

 eigene CSS-Klassen

Das kennen sie nun bereits: CSS-Formatierungen für Texte eines bestimmten HTML-Tags.

Beispiel: <h1>-Texte mit CSS formatiert. Dazu haben sie im Head-Bereich des HTML-Dokuments CSS-Angaben notiert, die dann für die Darstellung aller <h1>-Texte in dieser Datei gültig sind. 

<style type="text/css">
<!--
h1{
      font-size: 18px;
      font-family: Verdana,Arial,Helvetica;
      color: #846ADD;
      font-weight: bold;
      text-align: center;
      }
-->
</style>


Sie können aber auch eigene CSS-Klassen definieren, die nicht an vorhandene HTML-Tags gebunden sind. Diese eigenen Klassen werden ebenfalls im HEAD-Bereich, innerhalb einer CSS-Deklaration notiert. Dem Namen der Klasse wird ein Punkt vorangestellt. Der Name sollte aus Buchstaben bestehen und nicht die gleiche Bezeichnung wie ein HTML-Befehl haben. 

<style type="text/css">
<!--
.rot {
      font-family: Verdana,Arial,Helvetica;
      color: #FF0000;
      }
-->
</style>
Die Einbindung erfolgt mit dem <span>-Befehl. Für die Bezeichnung der Klasse wird der Name der selbst definierten Klasse (ohne Punkt) eingetragen.

Das ist ein roter Text 

Das ist ein <span class="rot">roter Text</span>



   Klassen kombinieren

Wenn sie mehrere eigene Klassen definiert haben, können sie diese Formatierungen (auch innerhalb eines <span>-Befehls) kombinieren! 

Das ist ein <span class="rot gross kursiv">formatierter Text</span>



Das ist normaler Text mit einer Vergößerung von 140%.
Dieses ist ein großer roter Bus.
Hier steht ein kleines blaues Fahrrad.
Wie sie sehen können, ist es möglich viele (eigene) Klassen zu kombinieren und zu verschachteln so oft sie möchten, so lange die Verschachtelung logisch bleibt. Das bedeutet ein einleitender Befehl sollte auch einen schließenden Befehl haben.


<span class="vergroessert">

Das ist normaler Text mit einer Vergößerung von 140%.<br> Dieses ist ein <span class="gross">großer</span> <span class="rot">roter</span> <span class="gross rot bold">Bus</span>.<br> Hier steht ein <span class="small">kleines</span> <span class="blau">blaues</span> <span class="small blau bold">Fahrrad</span>.<br> Wie sie sehen können, <span class="gruen">ist es möglich</span> viele (eigene) Klassen <span class="gross blau bold italic">zu kombinieren</span> und zu verschachteln <span class="gross rot bold">so oft</span> sie möchten, so lange <span class="mittel gruen">die Verschachtelung</span> <span class="gross orange bold italic">logisch</span> bleibt. Das <span class="rot bold italic">bedeutet</span> ein einleitender Befehl sollte auch einen schließenden Befehl haben.

</span>


   Die CSS-Anweisungen im Head 


<style type="text/css">

.vergroessert {
font-size:140%;
}

.gross {
font-size:30px;
}

.mittel {
font-size:20px;
}

.small {
font-size:10px;
}

.rot {
color:#FF0000;
}

.orange {
color:#FFBF00;
}

.gruen {
color:#00BF00;
}

.blau {
color:#00c;
}

.italic {
font-style:italic;
}

.bold {
font-weight:bold;
}

</style>





Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum.

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.


Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum.

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.





text


Zur Anpassung folgende Änderungen im Aufruf:

Element    hier im Beispiel   ersetzen mit  
Dateiname foto-gross.jpg Dateiname 
Breite 240 Wert in Pixel
Höhe 180 Wert in Pixel









NACH OBEN