Html mit CSS einbinden

von **noel_rnd** » 25.08.2009, 22:52

Also.. meine ersten Html tags:D Es ist geil, wenn man es im Browser öffnet und man sieht, das sich was tut;)

Was ich erreichen will ist (siehe bild) http://www.pic-upload.de/view-2918942/Struktur.jpg.html
Lasst euch nicht von den Vielen Head, Main, Footer Text irritieren:) mir war langweilig..
Die Codes habe ich wie folgt zusammen gestellt:

Code: Alles auswählen: <html> <body> <div id="Head">Oberkörper </div> <div id="Main">körper </div> <div id="Footer">Unterkörper </div> </html> </body>

Wenn ich jetzt eine CSS Datei erstelle und sie dann auch öffne, muss ich was? eingeben, um beispielsweise Head zu formatieren? so wie es auf dem bild ist?

Ich habe herausgefunden das ich im <head></head> was eingeben muss damit es auf Css zugreifen kann. Aber nur wie?

von **sejuma** » 26.08.2009, 06:46

Wie man CSS-Angaben generell einbindet, findest du hier erklärt:
http://www.ohne-css.gehts-gar.net/0053.php

Um den Head zu formatieren gibt es mehrere Möglichkeiten.

Zunächst solltest du durchgängig Kleinschreibweise verwenden, um späteren Flüchtigkeitsfehlern vorzubeugen.
Besser also:

<div id="head">Oberkörper
</div>

In der CSS-Datei kannst du z.B. folgende Formatierung vornehmen:
Der ID wird mit einer vorangestellten Raute aufgerufen. Die Styleangaben erfolgen innerhalb einer geöffneten und geschlossenen, geschweiften Klammer.
Danach werden die einzelnen Eigenschaften aufgerufen (width:)
und es folgt die Angabe des Wertes (800), ggf. der Einheit (px).
jede Angabe wird mit Semikolon beendet.

Code: Alles auswählen: #head { width: 800px; background-color: #ccc; color: #f00; }

Wenn in deinem Fall abgerundete Ecken verwendet werden sollen, dann müsstest du mit einer entsprechenden Hintergrundgrafik arbeiten und diese einbinden.
Das alles zu erklären sprengt jetzt aber den Rahmen. Hierzu gibt es Tutorials oder Bücher.

von **Laus** » 26.08.2009, 07:20

Hallo

Ich würde dir raten dich mal ernsthaft mit HTML und CSS auseinanderzusetzen.
Einen kleinen Workshop für CSS findest du Hier.

Gruß Xaver

von **noel_rnd** » 26.08.2009, 12:47

@Sejuma
Danke für den Link! Wusste nicht das ich bei möglichkeit 2 (externe Css datei erstellen) den Pfad im Head bereich anpassen muss, wenn es einen unterschied zwischen XHtml und Html gibt.. Da muss ich bisschen rumforschen mit Onkelgoogle.. wenn ich nichts finde poste ich hier die kleine frage um euch natürlich zu nerven:P

Hier im Forum gibt es ja auch eine schöne erklärung, unter CSS Einführung. Es ist zwar sehr ausführlich, doch verstehen tut man sich schwer, also an manchen stellen..

Fazit:
Es gibt also drei möglichkeiten.. die beste variante ist also den Html mit einer externen CSS datei zu verlinken. Dafür muss ich den Pfad eingeben, unzwar im Head bereich meines docts.. Bevor ich das aber mache.. muss ich wissen ob es ein XHtml oder ein Html-doct ist, um entsprechend den Code zu erstellen.. So weit so gut..

"Der ID wird mit einer vorangestellten Raute aufgerufen."
Auf der seite, Das du mir verlinkt hast, steht nichts mit einer raute.. Ich habe diesbezüglich eine Theorie, da ich bisschen im internet vergleicht habe.. Kann es also sein.. das es je nach mögleichkeit (1,2,3) ankommt. (wie du Css einbinen willst?).

Was ich bis jetzt mit euch gelernt habe.. und auch noch fragen diesbezüglich habe:)

1. Erstelle eine Css datei (beispiel mit editor, mit der endung .css) (beispiel: Muster.css)
2. unter <head> folgendes eingeben:<link rel="stylesheet" type="text/css" href="muster.css">

Warum <link rel="stylesheet" type="text/css" href="muster.css"> ?
Weil:
<link: Verweist auf die Css datei
rel="": teilt den Browser mit, dass es sich um ein Stylesheet handelt das eingebunden werden soll

type="": muss ich eingeben um den Mimetyp einzugeben, ja.. was heißt Mimetyp?

href""": href gibt den Pfad zur CSS-Datei an, (wobei auch hier wieder die allgemeinen Regeln für Pfade gelten.) was sind die allgemeinen Regeln für pfade denn?

von **Laus** » 26.08.2009, 13:56

Also, auch wenn du jetzt sejuma angesprochen hast werde ich dennoch antworten

Die Anpassung der Styleinbindung bei HTML und XHTML besteht lediglich darin das bei XHTML immer eine "Wohlgeformte" Dokumentenstruktur vorhanden sein muss. Das heißt unter anderem alle Elemente müssen geschlossen werden
<link rel="stylesheet" type="text/css" href="style.css" />
<img src="bild.gif" alt="Alternativtext des Bildes" />
<br />
<ul>
<li>Listenpunkt 1</li>
<li>Listenpunkt 2</li>
</ul>
Was im HTML nicht zwingend erforderlich ist

Fazit:
Es gibt also drei möglichkeiten.. die beste variante ist also den Html mit einer externen CSS datei zu verlinken. Dafür muss ich den Pfad eingeben, unzwar im Head bereich meines docts.. Bevor ich das aber mache.. muss ich wissen ob es ein XHtml oder ein Html-doct ist, um entsprechend den Code zu erstellen.. So weit so gut..

Das hat mit der Einbindung der CSS Datei wie oben bereits gezeigt wenig zu tun. Ein XHTML Dokument ist wie bereits gesagt von der Struktur her etwas anders aufgebaut.

"Der ID wird mit einer vorangestellten Raute aufgerufen."
Auf der Seite, Das du mir verlinkt hast, steht nichts mit einer raute.. Ich habe diesbezüglich eine Theorie, da ich bisschen im internet vergleicht habe.. Kann es also sein.. das es je nach mögleichkeit (1,2,3) ankommt. (wie du Css einbinen willst?).

Nein hat es nicht. (und eigentlich doch)
Wenn du in Html (oder Xhtml schreibst

Code: Alles auswählen: <div id="links"> hier kommt der Inhalt </div>

So musst du im Externen oder auch im Head eigebundenen Stylsheet schreiben

Code: Alles auswählen: #links{ hier kommen deine angaben rein}

wenn du aber schreibst

Code: Alles auswählen: <div class="links"> hier kommt der Inhalt </div>

So musst du im Externen oder auch im Head eigebundenen Stylsheet schreiben

Code: Alles auswählen: .links{ hier kommen deine angaben rein}

also id im html = # im Style, class im html = . im Style
nur wenn du die Styles direkt in den HTML Code schreibst brauchst du Raute und Punkt nicht, da die Angaben ja sowieso beim jeweiligen Element stehen.

type="": muss ich eingeben um den Mimetyp einzugeben, ja.. was heißt Mimetyp?

Der Mimetyp sagt dem Browser wie er diese Datei verarbeiten soll

href""": href gibt den Pfad zur CSS-Datei an, (wobei auch hier wieder die allgemeinen Regeln für Pfade gelten.) was sind die allgemeinen Regeln für pfade denn?

In HTML unterscheidet man relative und absolute Pfade. Das ganze ist zusammenfassend Hier schön beschrieben.

von **sejuma** » 26.08.2009, 19:15

Noch eine kleine Ergänzung:
Das Beispiel in meinem Link bezeiht sich auf den "body".
Dieser ist ein "allgemeines Element" wie ebenso auch h1 bis h6 oder p, ul, li und wird ohne Raute aufgerufen.
Derartige Elemente ohne Raute findest du hier erklärt: http://de.selfhtml.org/html/referenz/elemente.htm
Du kannst es dir vielleicht so merken: Alle Elemente in dieser Liste werden per CSS ohne Raute formatiert.
Alles andere, was du individuell bezeichnest (Divs) werden mit Raute formatiert. Diese dürfen nur einmal je Seite vorkommen.
Dann gibt es noch sogenannte "Klassen". Die dürfen mehrmals je Seite vorkommen. Sie werden in der CSSdatei mit einem vorangestellten "Punkt" formatiert.
Beispiel:

Code: Alles auswählen: .rot { color: #ff0000; }

HTML:

Code: Alles auswählen: <p class="rot">Absatz mit roter Schrift</p>

Alles klar, oder ist die Verwirrung jetzt noch größer?

von **noel_rnd** » 26.08.2009, 21:53

Zu aller erst.. möchte ich mich in aller öffentlichkeit, an Laus "nachträglich" bedanken.. :oops:

und Hut ab.. das er dennoch was geschrieben hat..

@Laus:
Irrgendwie verstehe ich den unterschied zwischen Html und XHtml nicht. Außer.. das XHtml irrgendwas mit XML zu tun hat. Das Html eine etwas ältere sprache ist als die XHtml. Und das man jedes Code in Xhtml schließen b.z auch etwas anders codieren muss als in Html. Nja.. mit der zeit werde ich es genauer verstehen:P ich will euch nicht mit solch kleine fragen bombadieren..

Also zurück zum verlinken von einem Html doct zu einer externe Css doct datei.

Ich erstelle einen Ordner beispiel "Muster" auf dem Desktop. Im verzeichniss erstelle ich eine Index.php datei.
Jetzt will ich eine css datei erstellen, die erstelle ich im unterverzeichnis von Muster. (ich lege mir einen neuen ordner (CSS) im ordner "muster" an.

So jetzt öffne ich das Index.php

Code: Alles auswählen: <html> <head> </head> <body> <div id="head">Oberkörper </div> <div id="main">körper </div> <div id="footer">Unterkörper </div> </body> </html>

So müsste ich doch im head den Link-tag wie folgt angeben
<link rel="stylesheet" type="text/css" href="css/muster.css">

Also

Code: Alles auswählen: <html> <head> <link rel="stylesheet" type="text/css" href="css/muster.css"> </head> <body> <div id="head">Oberkörper </div> <div id="main">körper </div> <div id="footer">Unterkörper </div> </body> </html>

Wenn ich jetzt es mit Css bearbeiten will, muss ich folgende Codes eingeben um z.b Head zu formatieren

Und durch Laus´s perfeckte erklärung

[zitat]
also id im html = # im Style, class im html = . im Style
nur wenn du die Styles direkt in den HTML Code schreibst brauchst du Raute und Punkt nicht, da die Angaben ja sowieso beim jeweiligen Element stehen.
[/zitat]

Und durch das beispiel von Sejuma müsste es so aussehen

Code: Alles auswählen: #head { width: 800px; background-color: #ccc; color: #f00; }

ODER??

von **sejuma** » 27.08.2009, 06:23

So müsste ich doch im head den Link-tag wie folgt angeben
<link rel="stylesheet" type="text/css" href="css/muster.css">

Das ist korrekt so.
Beachte später, wenn du einmal Hintergrundgrafiken in der CSS-Datei verwendest, dass du dann deren Pfad vom Standort der CSS-Datei aus wieder angeben musst.

#head { width: 800px; background-color: #ccc; color: #f00; }

Auch das ist korrekt.

In deinem HTML-Teil solltest du noch unbedingt in die erste Zeile einen qualifizierten Doctype schreiben, damit der IE das CSS-Boxmodell richtig darstellen kann.
Im Headbereich kannst du noch einige Meta-Angaben einfügen, insbesondere die Zeichensatzangabe und den title, z.B. mit

Code: Alles auswählen: <title>Meine erste CSS-Homepage</title> <meta content="text/html; charset=ISO-8859-1" http-equiv="content-type">

von **noel_rnd** » 28.08.2009, 23:53

woher kommt denn das jetzt?? "qualifizierten Doctype" :shock:

hören diese kleinen dingen nicht auf die so wichtig sind aber fast schon übersehbar:P

Sejuma.. du bist einer große hilfe.. könntest du mir erklären.. was das genau ist? oder mir einen link schicken?.. oder ich google einfach.. und lese darüber, nachdem ich gelesen habe es hier aufschreibe so wie ich es verstanden habe und du mich eventuell dann demnach berichtigst?..

von **sejuma** » 29.08.2009, 08:29

Alles halb so dramatisch:

Ausgangspunkt, warum der Doctype unter anderem eine so bedeutende Rolle spielt ist das CSS-Boxmodell, das festlegt, wie sich Abstände bzw. Gesamtbreiten und -höhen ermitteln und definiert sind: http://www.ohne-css.gehts-gar.net/0006.php mit weiteren Verweisen.

Damit der IE das Boxmodell korrekt darstellt, reicht es nicht aus, lediglich den Doctype anzugeben, z.B. mit

Code: Alles auswählen: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

Dieser einfache und auch veraltete DT schickt den IE in den sogenannten "Quirksmode", d.h. er missachtet die verbindlichen Normen und stellt das Boxmodell falsch dar.

Ein qualifizierter oder standardkonformer DT muss dehalb zusätzlich die sogenannte DTD-URL enthalten und sieht dann z.B. so aus:

Code: Alles auswählen: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

Dieser zusätzliche "Link" enthält sozusagen die Spezifikationen, nach denen die Seite gecodet ist.
So ähnlich wie ein "Wörterbuch", das dem Browser sagt, wie er deinen verwendeten code übersetzen soll.

Falls du dich also unbedingt noch mehr verwirren willst :shock:

http://www.carsten-protsch.de/zwischennetz/doctype/einleitung.html#doctype
http://www.carsten-protsch.de/zwischennetz/doctype/index.html
http://de.selfhtml.org/html/allgemein/grundgeruest.htm#dokumenttyp

Html mit CSS einbinden

Html mit CSS einbinden

Re: Html mit CSS einbinden

Re: Html mit CSS einbinden

Re: Html mit CSS einbinden

Re: Html mit CSS einbinden

Re: Html mit CSS einbinden

Re: Html mit CSS einbinden

Re: Html mit CSS einbinden

Re: Html mit CSS einbinden

Re: Html mit CSS einbinden

Ähnliche Beiträge zu "Html mit CSS einbinden"

Wer ist online?