Am 14. September 2017 haben wir eine überarbeitete Fassung unserer Datenschutzrichtlinie veröffentlicht. Wenn Sie video2brain.com weiterhin nutzen, erklären Sie sich mit diesem überarbeiteten Dokument einverstanden. Bitte lesen Sie es deshalb sorgfältig durch.

Grundlagen der Webprogrammierung: Meine erste Website

CSS einbinden

LinkedIn Learning kostenlos und unverbindlich testen!

Jetzt testen Alle Abonnements anzeigen
Durch die Verlinkung einer extern gelegenen Datei mit den einzelnen Dokumenten ist sichergestellt, dass diese auf die Inhalte der CSS-Datei zugreifen können.
07:05

Transkript

So, jetzt habe ich also meine ersten Stil-Angaben gemacht. Und diese Stil-Angaben, dadurch, dass sie eben innerhalb der betroffenen HTML-Datei untergebracht sind, finden auch nur innerhalb dieser HTML-Datei Anwendung. Das heißt, wenn ich zum Beispiel hier meine Ausflugsseite öffne, kann es schon sein, dass ich hier dieselbe Klasse für den Container verwende. Aber wenn ich mir die Seite anzeigen lasse, kommen hier jetzt natürlich keine Gestaltungselemente zum Tragen, die eben in der HTML von Index untergebracht wurden. Ich müsste also hier ebenfalls im Head-Bereich eine neue Style-Tag öffnen und genau dieselben Anweisungen nochmal schreiben, wenn ich genau dieselben Anweisungen zur Anwendung bringen möchte. Und nachdem Entwickler versuchen möglichst nicht doppelt zu moppeln, muss es also einen Weg geben, wie ich dieses Vorgehen vereinfachen kann. Und die gibt es nämlich, indem ich eine extern gelegene Datei erzeuge. Idealerweise im Verzeichnis CSS, um einigermaßen für Ordnung zu sorgen und dann diese Datei mit den einzelnen Dokumenten verlinke. Und dafür können dann alle anderen HTML-Seiten, mit denen diese CSS-Datei verknüpft wurde, ebenfalls auf die Inhalte der CSS-Datei zugreifen. Ich gehe also hier zurück in meine Index-HTML und werde jetzt diesen ganzen Style-Bereich nehmen, markieren, mit "STRG+X" ausschneiden. Und dann klicke ich mit der rechten Maustaste hier auf mein CSS-Verzeichnis, sage "Neue Datei" und nenne sie "main.css". Und hier füge ich mit "STRG+V" diese paar Style-Angaben wieder ein. Nachdem das jetzt eine genau definierte CSS-Datei ist, sagt die Endung "css" dem Browser dann schon, dass es sich hier um CSS-Ansetzungen handelt. Das heißt, ich kann diesen Style-Tag entfernen, wenn ich direkt in einer eigenen CSS-Datei bin. Mit "STRG+S" speichere ich das Ganze und muss jetzt in einem weiteren Schritt dafür sorgen, dass diese CSS-Datei tatsächlich auch im HTML eingebunden wird. Denn im Moment haben wir jetzt quasi alles verloren, was uns schon einmal zu so einer Formatierung verholfen hat. Sehen Sie, jetzt ist davon natürlich nichts mehr da. Um ein externes Dokument, vor allem ein externes CSS-Dokument einzubinden, brauchen wir einen Tag, der nennt sich "Link". Und dann sagen wir als allernächstes, dass es sich dabei um ein Style-Sheet handelt. Und in einer weiteren Folge, nur um auf der sicheren Seite zu sein, sagen wir jetzt auch noch, dass es sich dabei um CSS handelt. Diese "Type"-Angabe kann man rein theoretisch sogar schon weglassen, aber lieber etwas mehr und alle verstehen was ich meine. Und jetzt muss ich noch sagen wo diese Datei zu finden ist. Sie ist im Verzeichnis CSS zu finden und heißt "Main.css". Das "Link"-Tag braucht jetzt kein schließendes Tag, sondern es reichen genau diese Angaben. Und was Sie hier mit diesem "href" sehen, ist eine sogenannte Pfadangabe. Und zwar eine relative Pfadangabe. Relativ zum Verzeichnis Bergwelt. Alles innerhalb dieses Bergwelt-Verzeichnisses, versucht sich im Verhältnis zueinander zu definieren. Und Index liegt also auf der obersten äußeren Ebene. Und wenn ich jetzt von der Index auf diese "Main.css" zugreifen will, muss ich eben zuerst in das Verzeichnis "css" hineinhüpfen und darin liegt dann "Main.css" und das spiegelt sich hier in dieser Pfadangabe wieder. "css" als das Verzeichnis und "Main.css" dann als die Datei. Und wenn ich jetzt hier meine Seite speichere und hier nochmal refreshe, dann sehen Sie, dass nun die CSS-Anweisungen tatsächlich zum Tragen gekommen sind, auch wenn ich hier jetzt nur noch Verweise und nicht mehr selbst die Anweisungen hier auf der Seite stehen habe. Diese Zeile kann ich jetzt so wie sie ist nehmen, mit "STRG+C" kopieren und auf jeder weiteren Seite einfügen. Und zwar noch innerhalb des Head-Bereichs. Und bei "Gedanken" mache ich das auch. Innerhalb des Head-Bereichs. Beim Impressum. Einfach so, dass wir es in jeder Datei haben, um dann eben ein einheitliches Erscheinungsbild garantieren zu können. "STRG+V", so. Hier habe ich ein "div wrapper", das schaut von der Farbe her seltsam aus. Vielleicht weil da noch ein Ist-Gleich-Zeichen fehlt. So, jetzt haben wir hier sogar noch einen Fehler ausgebessert. Gut, wir haben jetzt überall diese Stylesheet-Angaben eingefügt. Das heißt, wenn ich jetzt, zum Beispiel, die Ausflugsseite aufrufe, hier habe ich sie ja schon offen, und neu laden lasse, habe ich tatsächlich zumindest schon einmal die Zentrierung und den Rahmen. Weil alle anderen Angaben sind ja speziell an Header- und Footer-Bereiche gekoppelt, die ich hier so nicht habe oder noch nicht habe. Es ist also möglich, dass man CSS nicht nur direkt in einem HTML-Dokument selbst hinterlegen muss, sondern man kann es auslagern in eine eigene CSS-Datei. Und diese CSS-Datei dann im Head-Bereich in die HTML-Datei einfügen. Würde ich jetzt, nichtsdestotrotz, hier im Head-Bereich trotzdem noch spezielle Style-Angaben machen, dann würden die wieder nur in diesem einen HTML-Dokument zur Geltung kommen. Und sie würden eventuell anders lautende Instruktionen aus der "Main.css" überschreiben. Denn css wird wirklich zeilenweise abgearbeitet. Und zuerst eben kommt diese externe Datei dran, die wird abgearbeitet. Und würden Sie jetzt unterhalb noch einmal eine Style-Angabe machen, dann würde diese eben diese "Main.css" überschreiben.

Grundlagen der Webprogrammierung: Meine erste Website

Gestalten Sie in wenigen Stunden Ihre erste Website und lassen Sie sich dabei von der Idee über die Auswahl der Werkzeuge bis zur Veröffentlichung Ihrer Web-Präsenz begleiten.

2 Std. 53 min (29 Videos)
Derzeit sind keine Feedbacks vorhanden...
 
Software:
Exklusiv für Abo-Kunden
Erscheinungsdatum:09.05.2017

Dieser Online-Kurs ist als Download und als Streaming-Video verfügbar. Die gute Nachricht: Sie müssen sich nicht entscheiden - sobald Sie das Training erwerben, erhalten Sie Zugang zu beiden Optionen!

Der Download ermöglicht Ihnen die Offline-Nutzung des Trainings und bietet die Vorteile einer benutzerfreundlichen Abspielumgebung. Wenn Sie an verschiedenen Computern arbeiten, oder nicht den ganzen Kurs auf einmal herunterladen möchten, loggen Sie sich auf dieser Seite ein, um alle Videos des Trainings als Streaming-Video anzusehen.

Wir hoffen, dass Sie viel Freude und Erfolg mit diesem Video-Training haben werden. Falls Sie irgendwelche Fragen haben, zögern Sie nicht uns zu kontaktieren!