Anzeige
Tutorialbeschreibung

CSS Tutorial - Teil 2

CSS Tutorial - Teil 2

So, heute Teil 2 des Tutorials. Es geht in diesem Teil um den

Aufbau der Formate


Am Anfang noch kurz einen Punkt, den ich im ersten Teil vergessen habe. Tim hatte in einem Kommentar gesagt, ich habe den Doctype vergessen, wegen dem validen Code, den ich angesprochen habe. Ich hatte vergessen, reinzuschreiben, dass gute Grundkenntnisse in HTML von Vorteil wären. Und auch dazu gehören die verschiedenen DOCTYPES. Wenn es viele wünschen, werde ich demnächst dazu ein eigenes Tutorial dazu schreiben. Aber kommen wir zur Sache.

Die Varianten, die ich hier beschreibe, kann man zentral in der HTML-Datei sowie in einer separaten CSS-Datei einsetzen.

Das Grundmuster sieht folgenrdermaßen aus:

<html>
<head>
<title></title>
<style type="text/css">
h1 { color: blue; font-size: 45pt; }
</style>

</head>
<body>
<h1>Ueberschrift in blau und mit einer Größe von 45pt!</h1>
</body>
</html>

Selektor: Das ist das, was vor den geschweiften Klammern steht. In diesem Fall h1. Das ist noch eine einfache Art, jedoch gibt es         
                  komplexere ineinander verschachtelte Selektoren, die wir später noch kennen lernen.

Formatdefinintionen: Diese stehen innerhalb der Klammern. Es können meherere Formate pro HTML-Element definiert werden. Im Beispiel wird der Überschrift eine blaue Farbe und eine Größe von 45pt zugewiesen. Mehrere Formate werden durch ein Semikolon getrennt und bei dem letzten Format kann der Semikolon auch weggelassen werden.

Wenn man jetzt z. B. für eine Überschrift h1und h2 die gleiche Farbe und Schriftart formatieren möchte, kann man das so tun:
                  
                   h1 { color: red; font-family: Helvetica,sans-serif; }
                   h2 { color: red; font-family: Helvetica,sans-serif; }


Oder auch so wie hier beschrieben, dass zwischen den beiden Selektoren einfach ein Komma steht:
               
                   h1, h2 { color: red; font-family: Helvetica,sans-serif; }

Formate für verschachtelte HTML-Elemente


Sie können mittels CSS bestimmen, dass ein HTML-Element bestimmte Eigenschaften nur dann haben soll, wenn es innerhalb eines anderen HTML-Elements vorkommt. Zum Beispiel, dass in einem Text bestimmte Wörter kursiv geschrieben werden.

Das sieht dann so aus wie im folgenden Beispiel:

<html>
<head>
<title></title>
<style type="text/css">
h1 { color: blue; fontsize:  45pt; }
h1 i { font-family: Helvetica,sans-serif; }
</style>

</head>
<body>
<h1>CSS-Tutorial <i>Teil 2</i></h1>
<p>Autor:<i>Hagbard666</i></p>

</body>
</html>

Formate für Klassen definieren

Wie ihr wisst, kann man HTML-Elemente mit Klassen versehen. Bei Klassen setzt man vor die Formatdefinition einen Punkt. So wird dieses Format nur der Klasse mit dem jeweiligen Wert zugewiesen. Wenn in einem Dokument mehrere Überschriften in der Größe h1 sind und man ein mit der Klasse blabla versieht, gilt das Format nur für diese Überschrift.

<html>
<head>
<title></title>
<style type="text/css">
h1 { color: blue; fontsize:  45pt; }
h1.ueberschrift { text-decoration: underline; color: red; }
h1 i { font-family: Helvetica,sans-serif; }
</style>

</head>
<body>
<h1 class="ueberschrift">CSS-Tutorial <i>Teil 2</i></h1>
<h1>CSS-Tutorial <i>Teil 2</i></h1>
<p>Autor:<i>Hagbard666</i></p>

</body>
</html>


Pseudoformate

Man kann mit Pseudoformaten HTML-Bestandteile definieren, die sich nicht durch ein eindeutiges HTML-Element
ausdrücken lassen. Zum Beispiel ein Link, der noch nicht "besucht" wurde oder in einem Absatz der erste Buchstabe.
Pseudoformate haben eine spezielle Syntax, die ich unten zeige.

<html>
<head>
<title>Pseudoformate</title>
<style type="text/css">
a:link {
    color: #000000;
    text-decoration: none;
    font-weight: bold;}
a:visited {
    color: #EEAA00;
    text-decoration: none;
    font-weight: bold;}
a:hover {
    color: #EE0000;
    text-decoration: underline;
    font-weight: bold;}
a:active{
    color: #0000EE;
    background-color: #FFFF99;
    font-weight: bold;}
</style>

</head>
<body>

In diesem Tutorial geht es um <a href=".../index.html">Pseudoformate</a>.<br>
Fahrt doch mal mit der <a href="..index.html">Maus über die Links</a>.<br>
Dann seht ihr die <a href="...index.html">verschiedenen Effekte</a>.
</body>
</html>

So, das war der 2. Teil - ich hoffe ich habe nichts vergessen. Falls doch, werde ich es im nächsten Teil erwähnen.

Dann viel Spaß beim Lernen.

Gruß
Peter

Kommentare
Achtung: Du kannst den Inhalt erst nach dem Login kommentieren.
Portrait von Daddaaff
  • 19.04.2012 - 10:21

Sehr gut! Passende Fortsetzung!

Portrait von DrNormal
  • 24.11.2011 - 18:11

Danke für die Hilfe!

Portrait von DaNino
  • 14.07.2011 - 16:45

verständlich erklärt, wenn man html kenntnisse hat!

Portrait von bruzeD
  • 22.09.2010 - 13:50

vielen dank, hat mir sehr geholfen und ist einfach gut verständlich

Portrait von Silentuser
  • 11.09.2010 - 00:25

Vielen Dank für das Tut, hat mir geholfen!!!

Portrait von KingSmerg
  • 08.04.2010 - 07:15

colle danke...für die hilfe

Portrait von michundich
  • 17.03.2010 - 14:54

Vielen Dank. Jeder fängt mal klein an...huiii

Portrait von Susanne_1108
  • 19.02.2010 - 11:00

Vielen Dank, das ist genau das richtig für mich als Anfägerin.
Servus Susanne

Portrait von Susan99
  • 03.12.2009 - 12:24

Dankeschön, gut beschrieben!

LG Susan

Portrait von NefasSuavis
  • 08.09.2009 - 15:35

wunderbar, wie Teil 1 auch schon!

Portrait von Darweis
  • 10.07.2009 - 08:39

Ebenfalls gut zu lesen und eine Orientierhilfe für "uns" Anfänger

Portrait von BloodyMirror
Portrait von Flip_p
  • 23.06.2009 - 12:52

ja, ich bin einsteiger, und es ist gut erklärt!

Portrait von Harald_Kersting
  • 23.06.2009 - 09:35

Vielen Dank für das Tutorial. Für Einsteiger sehr gut erklärt.

Portrait von roger1
  • 20.06.2009 - 14:39

gut erklärt. Danke nun weiss ich wenigstens was ich tue :-)

Portrait von paarweise
  • 23.09.2008 - 23:00

...wird schon etwas schwieriger.

Portrait von sabine67
  • 13.09.2008 - 22:01

vielen Dank für dieses TUT

Portrait von scully81
  • 12.06.2008 - 10:32

sehr gelungenes Tut, vielen Dank für deine Arbeit!

Alternative Portrait
-versteckt-(Autor hat Seite verlassen)
  • 20.02.2008 - 08:17

super erklährt!
danke

Portrait von inesmausi
  • 21.01.2008 - 00:57

Hallo
Ich finds echt gut!

lg von ines

x
×
×