Cabanova umgehen? Homepagedateien sind vorhanden

**VeN0m** · 01.05.2009, 18:00

Moin moin,

Einmal das von mir verlinkte Tutorial für CSS:
http://de.html.net/tutorials/css/
Und:
http://www.csstutorial.net/
http://de.selfhtml.org/css/
Auch nice ist das hier:
http://www.pagetutor.com/button_designer/index.html - Ein Button-Designer, der Dir dann den Code ausspuckt.

Im Grunde sind CSS-Dateien aber nicht sonderlich kompliziert. Die Dateiendung ist schlicht und einfach *.css. style.css wird am häufigsten verwendet. Aber die Datei kann heißen, wie sie will. CSS kommt übrigens von "Cascading style sheet (document)". Die Abkürzung hat nichts mit Counter Strike Source zu tun ^^.
Einbinden in Deine Dateien tust Du sie so:

Code:

<html>
<head>
<title>Meine erste CSS gestylte Seite ^^</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<p class="hello">Hallo Welt ^^</p>
</body>
</html>

Das "<link rel..." bindet die Style-Datei ein. Als Wert bei rel="" muss halt stylesheet angegeben werden. href="" ist der Pfad zum Dokument. Z.B "/styles/dark/style.css".
Wie man sieht kommt es in den Head-Bereich der Seite. Das liegt daran, dass im Head aufgerufene Tags vor dem eigentlichen Laden der Seite (dem Body-Bereich) bereits geladen werden und schon von Anfang an zur Verfügung stehen. Auch JavaScripte, Meta-Angaben etc. stehen im Head.
Außerdem habe ich hier auch gleich schon ein Beispiel mitgegeben: Ich habe dem "P"-Element im Body, in dem das "Hallo Welt" steht die Klasse "hello" zugewisen (class="hello"). Wenn Du das per CSS stylen möchtst sähe das so aus (Dateiname: style.css, dann kannst Du beide Dokumente testweise einfach aufrufen).

Code:

.hello {

font-size:20px;
color:#cc0033;
font-weight:bold;

}

Eine Klasse wird mit einem "." eingeleitet. Also: .klasse { }. Das können mehrere Elemente sein. Eine ID hat eine Raute ("#") vor sich. Also #id { }. ID's sind immer einzelnde Elemente und können nie mehrere sein. ID kommt ja von Identifikationsnummer. Standardtags, wie z.B body, td, tr, table etc. können auch direkt gestylet werden: body { }. Das, was in den geschweiften Klammern steht ist der Style.
In diesem Fall habe ich der Klasse "hello" zugewiesen, dass die Schriftgröße 20 Pixel betragen soll, die Farbe ist #cc0033 (sonen Weinrot) und das "Gewicht" der Schrift ist "bold" (entspricht <b></b> in HTML bzw. bei BB-Codes). Es ist also fett, 20 Pixel groß und weinrot.
Styles können aber auch auf zwei andere Weisen eingebunden werden. Die zeige ich auch nochmal.

Code:

<style type="text/css">
.hello {

font-size:20px;
color:#cc0033;
font-weight:bold;

}
</style>

Auch dieser Code stünde im "Head" der Seite. Der Unterschied ist, dass der Style nur in dieser Datei aufrufbar ist. Das Style type blabla kann in CSS-Dokumenten aber weggelassen werden. Das wird nur bei direktem Einbinden benötigt.

Code:

<p style="font-size:20px; font-weight:bold; color:#cc0033;">Hallo Welt</p>

Hier wird dem Element keine Klasse zugewiesen und auch befindet sich kein Style im Head (kann natürlich gemacht werden, aber dieses Element wird dadurch nicht beeinflusst, da der Style direkt im Element steht).
Die einzelnden Befehle werden mit Semikola getrennt, wie man sieht.

Ich hoffe mal das hilft erstmal. Viel Spaß dabei und have fun.

Thema: Cabanova umgehen? Homepagedateien sind vorhanden

Themen-Optionen

Anzeige

Hybrid-Darstellung

Stichworte

Berechtigungen