Start > Einleitung > CSS einbinden > CSS-Angaben 1 > CSS-Angaben 2 > Phase5

CSS einbinden

 

CSS-Angaben in HTML einbinden
a) Vorbemerkung b) CSS im HTML-Kopf c) Separate CSS-Datei
d) Schnellformatierungen e) CSS-Unterklassen f) CSS verschachteln

 

Vorbemerkung  

Um die folgenden Beispiele praxisbezogen darstellen zu können werden hier (ohne nähere Erläuterungen) die folgenden Angaben verwendet.

{ color: #FF0000 } stellt den Text rot dar
{ font-style: italic } stellt Text kursiv dar

Weitere Informationen dazu finden Sie dann in den entsprechenden Abschnitten zu CSS-Angaben.

CSS wirken immer auf HTML-Tags, denen sie zugeordnet werden.
Die Angaben werden in geschweiften Klammern {} notiert. Sie können mehrere Angaben zusammenfassen.

{ color: #FF0000; font-style: italic } Text in rot und kursiv

Dann werden die CSS-Angaben durch ein Semikolon ; getrennt.

CSS im Kopf der HTML-Datei nach oben

Wenn Sie CSS-Angaben im Kopf der HTML-Datei einbinden, wirken Sie sich auf alle entsprechenden HTML-Befehle dieser Datei aus.

Text Bedeutung
...
<style type="text/css">
<!--
h3 { color: #FF0000 }
p  { font-style: italic }
-->
</style>
...		 alle Überschriften dritter Ordnung werden rot dargestellt;
Standardabsätze werden kursiv dargestellt

Diese Eigenschaften können sie in der Datei durch die u.g. Schnellformatierungen überschreiben/ergänzen (selektiv ändern).

Separate CSS-Datei verwenden nach oben

Sie können Ihre CSS-Angaben in einer separaten CSS-Datei notieren. Diese Datei enthält reinen Text, wird mit der Datei-Erweiterung *.css gespeichert. 

Text Bedeutung
/* Das ist ein Kommentar */
h3 { color: #FF0000 }
p  { font-style: italic } 		alle Überschriften dritter Ordnung sind rot;
Absätze <p> werden kursiv dargestellt

Diese Formate wirken in allen HTML-Dateien, in die Sie im Container <head> ...</head> einen Verweis auf die CSS-Datei einbinden.

Text Bedeutung
...
<link rel="stylesheet"
      type="text/css"
      href="formate.css">
... 		formate.css ist hier die externe CSS-Datei im gleichen Verzeichnis (ansonsten Pfadangabe)

Notieren Sie im Kopf der Datei noch lokale CSS-Angaben, so überschreiben oder ergänzen diese die globalen Angaben. 

Schnellformatierungen nach oben

Sie können einzelnen Bereichen Ihrer Datei durch CSS Formatierungen zuweisen. Dazu verwenden Sie das Attribut style, welcher als Wert die notwendigen CSS-Angaben enthält. 

Text Bedeutung
...
<h2 style="color: "#FF0000">Text</h2>
... 		Diese Überschrift ist rot

Sollen zusammenhängende Bereiche der Datei formatiert werden, verwenden Sie die Container <span style="[CSS]"></span> ('Aufspannen') oder  <div style="[CSS]"></div>. div erzeugt hier einen eigenen Absatz, span nicht.

Text Bedeutung
...
<span style="color: #FF0000">
  ... Quelltext ...
</span>
... 		Der gesamte Text im Container ist rot.

Schnellformatierungen ergänzen oder ändern wieder lokale Angaben im Dateikopf oder angaben einer externen CSS-Datei.

Vor allem bei Mehrfachformatierungen werden so z.T. deutliche Verkürzungen des Quelltextes erreicht.

Format-Unterklassen nach oben

Sie können sich Unterklassen von HTML-Befehlen schaffen, die Sie neben den Standard-Befehlen verwenden können.

Definition Aufruf im Text
p.rot { color: #FF0000 } <p class="rot">Roter Text</p>
<p>Standardtext</p>

Damit haben Sie zwei Arten von Standardabsätzen zur Verfügung.

Definition Aufruf im Text
.krsv { font-style: italic } <h3 class="krsv">Text</h3>
<p class="krsv">Text</p>

So definierte Unterklassen können Sie auf verschiedene Tags anwenden.

Verschachteln von CSS-Angaben nach oben

CSS-Angaben können verschachtelt werden. Neben den genannten Auswirkungen (externe CSS-Datei > CSS im Dateikopf > Schnellformatierungen) können Sie bei der Definition auch mehrere HTML-Befehle vor den Angaben notieren.

Definition Bedeutung
h3, sub  { font-style: italic } Beide Befehle werden um das Format kursiv ergänzt.

Beachten Sie:

Definition Aufruf im Text
h3 sub  { font-style: italic } Der Befehl sub wird kursiv interpretiert, wenn er in einer Überschrift 3. Ordnung steht, sonst nicht.

nach oben

Ein Service von http://www.hechtnetz.de

Start > Einleitung > CSS einbinden > CSS-Angaben 1 > CSS-Angaben 2 > Phase5