Icon für RSS-Feed Link zum XING-Profil
Wählen Sie eine Hintergrundfarbe:
Schwarzer Hintergrund Blauer Hintergrund Hellblauer Hintergrund Rose Hintergrund Grüner Hintergrund Grüner Hintergrund Olivfarbener Hintergrund Gelber Hintergrund Sandfarbiger Hintergrund Beiger Hintergrund Weisser Hintergrund
Texthintergrund:
Schwarzer Hintergrund Weisser Hintergrund Transparenter Hintergrund


Ladebild
Brick in the Wall

CSS Blitztutorial

Von Matu am 20. Mai, 2009 (17:15 Uhr) unter Kategorie: CSS

Cascading Style Sheets (CSS) haben die Aufgabe, die HTML-Seite bzw. die HTML-Elemente zum einen zu gestalten und zum anderen zu strukturieren.

Hierbei gibt es mehrere Möglichkeiten, Style-Informationen in eine HTML-Datei einzubringen.

1. Per direktem Inline-Style (Style-Definition befindet sich DIREKT am HTML-Element):

BEISPIEL

<table style="background-color: #ff0000; color: #0000ff;">
  

2. Per Style im head-Tag der Seite:

Beispiel

<html>
<!DOCTYPE ... >
<meta ... />

<head>
...
<style type='text/css' media='screen'>
table {
	background-color: #ff0000;
	color: #0000ff;
	width: 80%;
	border: 1px 5px 10px 20px solid #00ff00;
  }
</style>
...
</head>
<body>
...

3. Per externer Datei (Dateiname zum Beispiel »style.css«):

BEISPIEL

  table {
	background-color: #ff0000;
	color: #0000ff;
	width: 80%;
	border: 1px 5px 10px 20px solid #00ff00;
  }

  h1, h2, h3, h4 {
	font-family: "Trebuchet MS", Verdana, Arial, sans-serif;
	font-weight: bold;
	font-style: italic;
	color: #000000;
  }
  usw.
  

Die Datei »style.css« wird dabei an einer Stelle abgespeichert, die mit ihrem Pfad im <head>-Tag der HTML-Datei eingetragen wird:

BEISPIEL

<html>
  <head>
    <meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
    <title></title>
    <link rel="stylesheet" type="text/css" href="pfadangabe/style.css">

	...

So können die Style-Definitionen zur Laufzeit Ihrer HTML-Seite automatisch in das Rendern (Berechnung der Darstellung) mit einbezogen werden.
Merke: Die dritte (externe) Variante stellt die gebräuliche Methode dar. Denn sollte mal etwas geändert werden müssen, so muss lediglich die externe CSS-Datei bearbeitet werden und nicht jede einzelne HTML-Seite.

Man kann so für jedwedes HTML-Tag eine eigene Style-Information hinterlegen. Der Nachteil dabei ist, dass, wenn man beispielsweise den Tag <table> mit Styles belegt, jede Tabelle auf der HTML-Seite so dargestellt wird, wie der Style dies vorgibt. So würde eine Übersichtstabelle über Telefonnummern genau so aussehen wie eine, die Kochrezepte darstellen soll.

Um dies zu verhindern und einzelne HTML-Objekte eben einzeln ansprechen zu können, hat man ein System integriert, das per
Klassenangabe (class=…) das jeweilige Element genau spezifiziert. Im Grunde wird dabei einem HTML-Element eine Art Name
vergeben, über den es angesprochen wird:

BEISPIEL

  <table class="irgendeinwort"> ... </table>

Im Stylesheet (»style.css«) wird dann definiert, wie diese Klasse gestaltet werden soll.
Da es sich um eine Klasse handelt, muss dies auch im Stylesheet berücksichtigt werden. Schließlich ist “irgendeinwort” ja kein HTML-Tag.

Klassendefinitionen werden im Stylesheet mit einem Punkt (.) begonnen und direkt danach wird der Begriff notiert, den man
im Klassenaufruf in der HTML-Datei benutzt hat:

BEISPIEL

(Stylesheet)
...

.irgendeinwort {
	background-color: #ff0000;
	color: #0000ff;
}

...

Mit dieser Klassendefinition ist es nun möglich, JEDEM HTML-Element, dem diese Klasse zugeordnet wird, genau diese Gestaltung zu geben. Mit anderen Worten: wenn Sie in Ihrem HTML-Code eine Headline <h1> mit der Klasse “irgendeinwort” belegen,

BEISPIEL

<h1 class="irgendeinwort"> ... </h1>

dann wird (auch) diese Headline mit rotem Hintergrund hinterlegt, sowie der Text mit blauer Farbe dargestellt. Dies gilt für (fast) alle anderen HTML-Elemente auch. Probieren Sie dies bitte aus.

Analog zu den Klassen können auch IDs benutzt werden:

Aufruf HTML:

<p id="andereswort"> ... </p>

Defininition CSS:

#andereswort {...}

Wie man sehen kann, beginnen ID-Definitionen im Stylesheet im Gegensatz zum Punkt der Klasse mit einer Raute (#).
IDs sind dominanter als Klassen und überschreiben diese.
Merke: Eine ID darf (pro Begriff) im Gegensatz zu einer Klasse nur EINMAL innerhalb einer HTML-Seite vorkommen!

Es lassen sich natürlich nicht nur Farben und Schrifttypen definieren.

Ein besonders wichtiges Gestaltungswerkzeug sind die Ränder und Abstände, die unsere HTML-Elemente umgeben und die da heißen:

  margin   →  Außenabstand um ein Element herum
  padding  →  Innenabstand innerhalb eines Elementes
  border   →  Rand um ein Element herum

Die Gesamtbreite eines Objektes ergibt sich damit durch folgende Formel:

margin + border + padding + width + padding + border + margin
------   ------   -------           -------   ------   ------
                        |           |
             |          +-----------+          |
    |        +---------------------------------+         |
    +----------------------------------------------------+

BEISPIEL

(Stylesheet)
...

.irgendeinwort {
	background-color: #ff0000;
	color: #0000ff;
	margin: 20px;
	padding: 10px;
	border: 5px solid #ff3366;
}

...

Folgende Schreibweisen sind dabei möglich:

margin [padding] [border]: 10px;
→ rund um das Objekt 10 Pixel

margin [padding] [border]: 10px 20px;
→ 10 Pixel oben und unten, 20 Pixel rechts und links

margin [padding] [border]: 10px 20px 5px;
→ 10 Pixel oben, 20 Pixel rechts und 20 Pixel links, 5 Pixel unten

margin [padding] [border]: 10px 20px 5px 1px;
→ 10 Pixel oben, 20 Pixel rechts, 5 Pixel unten, 1 Pixel links

Läuft also im Uhrzeigersinn und beginnt oben.


Als abschließende Information sollte man die unten aufgeführten Tags von vorne herein mit Definitionen versehen:

body {
	schriftfamilie;
	schriftgröße;
	zeilenabstand;
	farbe;
	hintergrundfarbe;
	außenabstand;
	innenabstand;
}

p {
	farbe;
	einzug;
	zeilenabstand;
}

h1, h2, h3, h4, h5, h6 {
	farbe;
	auszeichnung;
	border?;
	hintergrundfarbe?;
}

a {
	farbe;
	text-decoration;
	größe;
}

a:hover {
	farbe;
	fett?;
}

a:visited {
	.....
}

a:focus {
	.....
}

Damit haben Sie erst einmal die grundsätzlichen Elemente einer HTML-Datei optisch definiert.
Wer jetzt “Blut geleckt” hat, kann tiefer greifende Informationen über Cascading Stylesheets unter css4you, selfhtml.org, peterkropff … nachgelesen.

1 Star2 Stars3 Stars4 Stars5 Stars (No Ratings Yet)
Loading ... Loading ...

Deine Meinung ist mir wichtig!

Es besteht die Möglichkeit, Kommentare nachträglich innerhalb einer Zeitspanne von 5 Minuten zu ändern (Keine werblichen Kommentare)
Jeder 1. Kommentar muss freigeschaltet werden!

Smileys:spy:

Nach oben