Spielt Overwatch vom 22.-25. September kostenlos auf PC, PlayStation 4® und Xbox One

Hallo, Gast! Anmelden Registrieren

Nachricht verbergen
Lieber Besucher, herzlich willkommen auf marked-for-death.de Falls dies dein erster Besuch auf dieser Seite ist, lies dir bitte die Hilfe durch. Dort wird dir die Bedienung dieser Seite näher erläutert.
Darüber hinaus solltest du dich registrieren (natürlich Kostenlos), um alle Funktionen dieser Seite nutzen zu können.


Themabewertung:
  • 0 Bewertung(en) - 0 im Durchschnitt
  • 1
  • 2
  • 3
  • 4
  • 5
CSS - Cascading Style Sheets - Basis und Aufbauwissen
#1
Der Artikel besteht aus 1973 Wörtern. Geschätzte Lesezeit: 7 Minuten, 53 Sekunden

Was sind Style Sheets?

CSS oder Cascading Style Sheets ist eine Sprache zum Formatieren von HTML/XHTML-Elementen. Verglichen mit den HTML-Formatierungen bietet CSS erheblich mehr Möglichkeiten, wie z.B. Schriftgestaltung, Rahmen, Innen- und Aussenabstände, Listen, Hintergründe, Positionieren, usw...

Ein wichtiger Punkt ist die Möglichkeit, Formate zentral festzulegen, d.h. entweder im < head> - Bereich eines Dokuments. Oder ausgelagert in einer separaten Datei.

In der Regel sollten die Formate für das gesamte Dokument gültig sein. Damit du nun aber nicht in jedem HTML-Tag die Angaben wiederholen musst, hast du die Möglichkeit die Formatierungen an einer Stelle im Dokument zentral zu deklarieren. Sie sind dann für das gesamte Dokument gültig.

Im < head> - Bereich:

Code:
<html>
< head>

<style type="text/css"><!--

Cascading Style Sheets Angaben

//--></style>

<title>Irgendein Titel</title>
</head><body>
</body>
</html>


Im < head> - Bereich, d.h. zwischen dem einleitenden < head> - und dem abschließenden -Tag, wird der Bereich, in dem die Stylesheet-Angaben stehen, mit <style type="text/css"> </style>. Das <style> - und </style> -Tag schließt den Stylesheet - Bereich ein. Die Kommentar - Tags sollen verhindern, dass Browser, die CSS nicht verstehen, und diese Angaben als normalen Text anzeigen.

Ausgelagert in einer separaten Datei:

Code:
<link rel="stylesheet" type="text/css" href="dateiname.css">

Dafür wird eine Textdatei benötigt, die die Stylesheet - Angaben enthält und an der Endung .css zu erkennen ist. Der - Tag, das, wie im Beispiel oben, an einer beliebigen Stelle im < head> - Bereich eingefügt wird, verweist auf diese externe Datei. Dafür gibst du im Attribut href= Pfad und Name der Datei an. Liegt diese Datei auf einem anderen Server, kannst du auch die komplette URL - Adressen angeben. Der einzige Unterschied zu den zentralen Deklarationen im < head> - Bereich ist, dass die Angaben nicht mit dem <style> - Tag eingeschlossen werden. Es reicht einfach eine Auflistung der Stylesheet - Angaben.

Aufbau der Stylesheet-Angabe:

Eine Stylesheet - Angabe besteht aus der Eigenschaft und dem Wert, getrennt durch einen Doppelpunkt. Die Eigenschaft ist das, was du formatieren möchtest. z.B.: color für die Schriftfarbe, border-width für die Rahmenbreite oder text-decoration für Unterstreichungen. Als Wert sind Farbangaben, Einheiten oder Schlüsselworte möglich.

Hier einige Beispiele:

   Schriftfarbe rot: color:#ff0000;
   color ist die Eigenschaft für die Schriftfarbe und #ff0000 ist der Wert als hexadezimale Farbangabe für Rot

   Schriftgewicht fett: font-weight:bold;
   font-weight ist die Eigenschaft für das Schriftgewicht und bold ist der Wert als Schlüsselwort für fett

   Unterstrichen: text-decoration:underline;
   text-decoration ist die Eigenschaft für Unter- und Überstreichungen und underline ist der Wert als Schlüsselwort für unterstrichen

   Elementhöhe: height:100px;
   height ist die Eigenschaft für die Höhe und 100px ist der Wert als Zahl mit der Einheit Pixel. Wichtig! Zwischen der Zahl und der Einheit darf kein Leerzeichen stehen.



HTML - Tags mit CSS formatieren:

HTML-Tags lassen sich durch ein Attribut mit Stylesheets direkt formatieren. Das folgende Beispiel formatiert die Textfarbe einer Überschrift 1 in rot:

Code:
<h1 style="color:#ff0000;">Dies ist eine Ueberschrift</h1>

Dies ist eine Ueberschrift



Und dieses Beispiel formatiert für eine Tabellenzelle die Textfarbe in weiß und die Hintergrundfarbe in schwarz:

Code:
<table>
<tr>
<td style="color:#ffffff; background-color:#000000;">
Irgendein Text in dieser Zelle
</td>
</tr>
</table>

Irgendein Text in dieser Zelle

Ein HTML-Tag mit Stylesheets zu formatieren ist recht einfach. Du brauchst in dem HTML-Tag nur das Attribut style="" mit den Stylesheet-Angaben in Anführungszeichen einzufügen.
Der Aufbau der Stylesheet-Angaben ist immer gleich: Die Eigenschaft, ein Doppelpunkt, der Wert und als Abschluß ein Semikolon.


Abschnitte eines Dokuments mit < span> formatieren:

Das folgende Beispiel formatiert die Worte "irgendein Text" fett und mit roter Textfarbe:

Code:
Dies ist <span style="color:#ff0000; font-weight:bold;">
irgendein Text</span> und der soll formatiert werden.

Dies ist
irgendein Text
und der soll formatiert werden.

Zur Formatierung ganzer Abschnitte innerhalb eines Absatzes eignet sich das - Tag, da es sich um ein sogenanntes Inline-Element handelt, dass keinen eigenen Absatz erzeugt. Die Formatierung führst du wie in dem vorherigen Absatz beschrieben durch, in dem du das Attribut style="..." mit den Stylesheet - Angaben in Anführungszeichen in das - Tag einfügst. Diese Formatierungen sind dann für alle Elemente innerhalb des - Tags gültig.

Zum Aufbau der Stylesheet-Angaben gilt Gleiches wie im vorherigen Absatz: Die Eigenschaft, ein Doppelpunkt, der Wert und als Abschluß ein Semikolon.


Kommentare in Stylesheet-Bereichen:

In Stylesheet Bereichen darfst Du auch Kommentare einfügen. Sie beginnen mit /* und enden mit */ diese werden nicht Angezeigt.

Code:
<style type="text/css"><!--

/* Überschrift der 1. Ebene */
h1 {color:#ffffff; font-weight:bold;font-size:12pt;}

//--></style>

Selektoren:


Selektoren stellen die Verbindung zwischen den zentralen Formaten im < head>-Bereich oder der externen Datei und den Elementen innerhalb der Seite dar, die formatiert werden sollen.
Der Aufbau ist immer gleich: Selektor, geschweifte Klammer auf, Stylesheet-Angaben, geschweifte Klammer zu:


Code:
Selektor { Stylesheet - Angabe;}
Selektor
{
Stylesheet - Angabe;
Stylesheet - Angabe;
...
}


Die nun folgenden Erläuterungen sind am Beispiel zentrale Formate im < head> - Bereich dargestellt. Um sie in eine externe Datei auszulagern, brauchst Du nur die Stylesheet-Angaben innerhalb des <style> - Tags in eine Datei zu speichern!

Universal - Selektor

Universal - Selektoren verknüpfen jedes vorhandene Element mit Stylesheet - Angaben.

Code:
<html>< head>
<style type="text/css">

* {
font-size:14px;
color:#ff0000;}

</style>

<title>Irgendein Titel</title>
</head><body>

<h1>Ein "h1"-Tag mit roter Schrift</h1>
<h2>Ein "h2"-Tag mit roter Schrift</h2>
<h3>Ein "h3"-Tag mit roter Schrift</h3>
<p>Ein "p"-Tag mit roter Schrift</p>
<div>Ein "div"-Tag mit roter Schrift</div>

</body></html>


Dieses Beispiel legt für diverse Tags eine Schriftgröße von 14 Pixel und eine rote Schriftfarbe fest. Der Universal- Selektor ist nur ein *


Typ - Selektor

Typ - Selektoren verknüpfen einen Elementtyp, also ein HTML - Tag mit einer Formatierung.

Code:
<html>< head>
<style type="text/css">

h1
{
font-size:14px;
font-style:italic;
}
p {color:#ff0000;}

</style>

<title>Irgendein Titel</title>
</head><body>

<h1>Eine kursive Ueberschrift</h1>
<p>Und roter Text</p>

</body></html>

Dieses Beispiel legt für das < h1> - Tag eine Schriftgröße von 14 Pixel und einen kursiven Schriftstil fest. Für das < p> - Tag ist die Schriftfarbe rot deklariert.

Um Formate für HTML - Tags zentral zu deklarieren, brauchst Du als Selektor nur das HTML-Tag ohne spitze Klammern (< >) anzugeben.

class - Selektor (Klassen)

Klassen sind Selektoren mit beliebigen Namen.

Code:
<html>< head>
<style type="text/css">

h1 { font-size:14px; font-style:italic; }
h1.gerahmt { border:1px solid #aaaaaa; }

</style>

<title>Irgendein Titel</title>
</head><body>

<h1>Eine kursive Ueberschrift</h1>
<h1 class="gerahmt">Eine kursive Ueberschrift mit Rahmen</h1>

</body></html>

In diesem Beispiel wird mit h1 { font-size:14px; font-style:italic; } für das < h1> - Tag eine Schriftgröße von 14 Pixel und ein kursiver Schriftstil festgelegt. Die nächste Zeile h1.gerahmt { border:1px solid #aaaaaa; } deklariert eine Klasse mit dem Namen gerahmt. Um diese zu verwenden, musst Du in einem < h1>-Tag das Attribut class mit dem Namen als Wert in Anführungszeichen einfügen. In diesem Beispiel ist das < h1 class="gerahmt">.

Das Beispiel oben deklariert eine Klasse, die nur in einem < h1> - Tag verwendet werden kann. Trägst Du die Klasse in einem anderen Tag ein, wird sie dort ignoriert. Du darfst das Tag vor dem Punkt aber auch weglassen, sodass die Klasse für alle Tags gültig ist, wie in dem folgenden Beispiel:

Code:
<html>< head>
<style type="text/css">

h1 { font-size:14px; font-style:italic; }
.gerahmt { border:1px solid #aaaaaa; }

.einfachertext { font-size:14px;}

</style>

<title>Irgendein Titel</title>
</head><body>

<h1>Eine kursive Ueberschrift</h1>
<h1 class="gerahmt">Eine kursive Ueberschrift mit Rahmen</h1>
<p>Ein Text</p>

<p class="gerahmt">Ein Text mit Rahmen</p>

<p class="einfachertext">Ein Text, 14 Pixel groß</p>

<div class="einfachertext">Ein Text, 14 Pixel groß</div>
</body></html>

Diese Beispiel deklariert zwei Klassen: gerahmt und einfachertext. Da vor dem Punkt kein Tag angegeben ist, können diese Klassen in jedem Tag verwendet werden. Wichtig ist, dass Du bei der Deklaration vor dem Namen den Punkt verwendest, als Wert in dem class-Attribut jedoch nicht.

Das nächste Beispiel weist einem Element mehrere Klassen zu:

Code:
<html>< head>
<style type="text/css">

.rot{color:#ff0000;}
.ul {text-decoration:underline}
.fett{font-weight:bold}

</style>

<title>Irgendein Titel</title>
</head><body>

<p class="rot">Ein roter Text</p>
<p class="fett">Ein fetter Text</p>
<p class="ul">Ein unterstrichener Text</p>
<p class="ul rot">Ein Text, rot und unterstrichen</p>
<p class="fett ul">Ein Text, fett und unterstrichen</p>
<p class="rot fett ul">Ein Text, rot, fett und unterstrichen</p>

</body></html>

Diese Beispiel deklariert die drei Klassen: rot, ul und fett. Um diese Klassen nun für ein Element zu kombinieren, brauchst du sie nur in dem class-Attribut durch Leerzeichen getrennt anzugeben.

ID-Selektor

ID-Selektoren verknüpfen Elemente über das ID-Attribut mit einer Formatierung.

Code:
<html>< head>
<style type="text/css">

div {background-color:#efefef;border:1px solid #aaaaaa;}
div#a
{
position:absolute;
top:100px; left:100px;
width:120px; height:80px;
}
#b
{
position:absolute;
top:150px; left:300px;
width:120px; height:80px;
}

</style>

<title>Irgendein Titel</title>
</head><body>

<div id="a">100 Pixel von oben und 100 Pixel von links</div>
<div id="b">150 Pixel von oben und 300 Pixel von links</div>

</body></html>

ID-Selektoren beginnen mit einem #. In diesem Beispiel sind zwei ID-Selektoren deklariert: a mit div#a und b mit #b. Im Dokument werden diese Formate jeweils einem
-Tag zugeordnet, indem das id-Attribut in das Tag mit dem Namen des Selektors als Wert in Anführungszeichen eingefügt wird.

Der Unterschied zwischen div#a und #b ist, ähnlich wie bei den class-Selektoren, dass der Selektor a nur mit einem
-Tag verwendet werden kann.

Damit ein Element innerhalb der Dokumentenstruktur eindeutig ist, darf eine ID nur einmal verwendet werden.

Groß-/Kleinschreibung von Selektoren

CSS und HTML schreiben keine Unterscheidung zwischen Groß-/Kleinschreibung vor, XHTML ja. Bei Verwendung von XHTML hat dies Auswirkung auf Selektoren, das es ein Unterschied ist, ob du z.B. class="selektor" oder class="Selektor" schreibst!
Durchschnittliche Nährwerte dieses Posts:
Brennwert: 2192kJ/526kcal | Eiweiß: 5,1g | Kohlenhydrate: 50,9g - davon Zucker 47,2g | Fett: 33,5g - davon gesättigte Fettsäuren: 18,6g | Ballaststoffe: 6,8g 
Enthält Spuren von Nüssen und Spam.




Zitieren




Benutzer, die gerade dieses Thema anschauen:
1 Gast/Gäste