Einführung in die Webprogrammierung

CSS erforschen

LinkedIn Learning kostenlos und unverbindlich testen!

Jetzt testen Alle Abonnements anzeigen
Mit CSS wird das Erscheinungsbild einer Webseite bestimmt. Ein CSS-Skript kann entweder eingebunden oder in einem eigenen Bereich der HTML-Seite hinterlegt werden.

Transkript

CSS kümmert sich um die optische Erscheinung einer Seite. Wir haben hier einen Text, der mit HTML strukturiert wurde. Im Hintergrund haben wir einen Browser, der den strukturierten Text ausgibt. Dabei interpretiert der Browser von sich aus, wie das optische Erscheinungsbild sein sollte. Wenn ich also meine eigenen Vorstellungen einbringen möchte, so habe ich die Möglichkeit dieses genau über CSS zu machen. Ich kann das CSS direkt in meiner HTML Seite verankern. Und zwar entweder indem ich von meiner HTML Seit aus auf eine Datei verweise, in der ich alle CSS Eigenschaften zusammen gefasst habe. Oder, und das ist in unserem Fall irgendwie praktischer, ich kann im Head-Bereich einen eigenen Bereich schaffen, in den ich all mein CSS hinterlegen kann. Dafür benötige ich einen eigenen Tag. Dieser Tag heißt "Style". Wie fast alle HTML Tags, muss auch dieser wieder geschlossen werden. Zwischen diesen beiden, kann ich jetzt mein CSS schreiben. Das CSS ist immer in der selben Weise aufgebaut. Ich habe zuerst ienen Selektor, das heißt, ich suche mir ein Element auf der sichtbaren Siete aus. In meinem ersten Element, wird das gleich der Bodyelement sein, das heißt, alles was innerhalb des Bodys passiert. und das was dann optisch verändert wird, befindet sich hinter geschwungenen Klammern. Ich habe mir angewöhnt die schließende Klammer gleich zu machen, da ich das gerne vergesse. und alles das, was zwischen den Klammern stehen wird, heißt "Deklaration". Die Deklaration besteht wiederum aus zwei Teilen, nämlich erstmal aus einer Eigenschaft, die ich beschreiben möchte. Wenn ich zum Beispiel etwas mit der Schriftfarbe machen möchte, so ist die Eigenschaft für die Schriftfarbe: "Color". Das heißt, ich schreibe "Color". Dann kommt ein Doppelpunkt. Und dann kommt ein Wert, den ich setzen möchte. In meinem Fall ist das jetzt eine Farbangabe. Ich möchte, dass die Schriftfarbe rot wird, also "red". Es gibt unterschiedliche Möglichkeiten Farben darzustellen. Die Bezeichnung von fünf, sechs Farben geht direkt mit der Namensnennung, "red" gehört dazu. Ich schließe diese Deklaration mit einem Strichpunkt ab. Wir speichern das Ganze und sehen uns an, ob mein CSS funktioniert indem ich die Seite neu lade. Und tatsächlich es funktioniert und die Schrift ist jetzt rot. Jetzt habe ich ein wenig Blut geleckt und möchte noch ein wenig genauer arbeiten. Das heißt, ich bleibe innerhalb meines Style-Tags und dage ich möchte zum Beispiel meine H1, also schon ein spezielleres Element meiner Webseite, anders haben. Geschwungene Klammer auf. Geschwungene Klammer zu. Dazwischen kommt nun, nicht nur eine Deklaration, sondern ich kann auch unterschiedliche Deklarationen machen. Meine erste Deklaration ist folgende: Ich möchte, dass mein Überschrift in einer anderen Schriftart dargestellt wird. Die Eigenschaft für Schriftart heißt: "Font Family" Meine "Font Family" soll "Arial" sein. Wenn ich nun meine Seite auf einer Maschine ausgebe, auf der es Arial als Schrift nicht gibt, dann möchte ich auf jeden Fall eine Schrift bekommen, die keine Serife beinhaltet, also nicht diese Schnörksel am Anfang beinhaltet. Damit nicht genug. Das war nun eine Deklaration. Ich möchte auch die Schriftgröße bestimmen können. das heißt, das Element heißt jetzt "Font Size" und bei der "Font Size"möchte ich, dass die Überschrift 42 Pixel Hochwert hat. Ich schließe das Ganze wieder mit einem Strichpunkt. Bei der Größenbezeichnung ist es ebenfalls so, dass es unterschiedliche Möglichkeiten gibt, um die Größe darzustellen. Wenn ich eine direkte Pixelangabe mache, ist es eine direkte Größe. Ich könnte auch mit Prozenten oder anderen Werten arbeiten, aber für den Anfang ist es gut, wenn Sie mit fixen Werten lernen umzugehen und somit die Größen einschätzen können. So. Und was brauche ich noch? Vielleicht eine andere Farbe. Ich möchte, dass die Überschrift jetzt schwarz wird. Das heißt, ich kann nun ganz speziell nur für die H1 sagen, dass es eine schwarze Farbe wird. Die Spannung steigt, ich speicher wieder. Und werde die Seite neu laden. Un dtatsächlich wurde meinem Wunsch nachgegeben. Das heißt, wir haben jetzt hier eine andere Schriftart, eine andere Schriftgröße und eine andere Schriftfarbe. Daraus können Sie schließen, warum die kaskadierenden Style Sheets, kasladierend heißen Ich habe die Möglichkeit, immer mehr ins Detail zu gehen. Wenn Body das übergeordnete Element ist, hier, dann habe ich die Möglichkeit den Einzelteilen ebenfalls noch einmal eigene Eigenschaften mitzugeben, die dann die generellere Eigenschaft überschreiben. Das ist das Geheimnis von CSS, manchmal die Krux von CSS. Und wie in HTML, ist die Schreibweise selbst zeimlich einfach, aber es gibt viele Eigenschaften, mit deren Hilfe Sie arbeiten können und sich diese anzueignen, braucht ienfach etwas Zeit. Nehmen Sie sich die Zeit, denn je umfassender Sie CSS einsetzen können, umso flexibler sind Sie in der Gestaltung Ihrer Webseite.

Einführung in die Webprogrammierung

Tauchen Sie ein in die vielfältige Welt von Webdesign und -entwicklung und lernen Sie die wichtigsten Technologien, Programmiersprachen und -tools kennen.

2 Std. 46 min (29 Videos)
Derzeit sind keine Feedbacks vorhanden...

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!