JavaScript lernen

Farbe und Auszeichnung anpassen

LinkedIn Learning kostenlos und unverbindlich testen!

Jetzt testen Alle Abonnements anzeigen
Die Anwendung von verschiedenen CSS-Befehlen verändert die Farbe sowie die Auszeichnung der auf einer Website dargestellten Informationen und erstellt im Bedarfsfall einen passenden Rahmen.
06:23

Transkript

Mit Javascript können wir den Inhalt von Webseiten beeinflussen. Ich möchte jetzt aber mal das Aussehen verändern und dafür brauche ich hier CSS wenn ich mit der Maus hin gehe dann geht's wieder weg, also Sie sehen es rechts oben: CSS. Schauen wir zunächst einmal diese Seite hier an. Hier haben wir die Überschrift "Ihr Alter" mit H1, damit es hier auch groß zu sehen ist, und dann steht hier "div ID Alter" und dann "...", weil wir ja erst den Inhalt hier mit Javascript einfügen. Das machen wir mal weg, dass das hier immer so bleibt und auch dieses "Prompt" mal weg und die Berechnung auch, und jetzt schreiben wir hier mal dauerhaft rein "Sie sind 29 Jahre", nenne ich mal jung, denn das Schöne ist wenn es hier immer so bleibt, dann bin ich bis ans Ende meiner Tage 29 Jahre jung. Probieren wir mal kurz aus, ob es passt, jawoll, "Sie sind 29 Jahre jung" und jetzt geht's darum, dass wir das Ganze mal ein bisschen aufhübschen mit CSS. Hier sage ich, ich möchte dieses Alter, also diesen "div-Container", der den Namen oder die ID Alter hat. Deswegen schreibe ich hier auch wieder mein Rautezeichen. Ich möchte, dass dieser Inhalt hier eine Farbe bekommt und diese Farbe soll rot sein. Achten Sie darauf, das hier sind keine runden Klammern wie wir es von Javascript gelernt haben, sondern in CSS geschweifte Klammern. Das ist jetzt vielleicht alles ein bisschen kompliziert und viel, aber das war's dann im Wesentlichen schon mit den unterschiedlichen Klammern; bei HTML haben wir spitze Klammern, bei CSS haben wir geschweifte Klammern, in JavaScript haben wir meistens runde Klammern. Schauen wir uns mal das ganze mal an. Ich gehe auf RUN. Und Sie sehen hier jetzt ist der Text in rot Wir können ja natürlich beliebige Farben eintragen: blue beispielsweise, brauche jetzt nicht ausprobieren. Wir können auch hier z.B. sagen: ich möchte, dass das Fettdruck sein soll, dann schreibe ich "font-weight: bold" Wenn ich das Ganze jetzt ausprobiere, mit Control-Return, und Sie sehen jetzt ist das Ganze hier unten Fettdruck. Wir können noch weitere Sachen machen, zum Beispiel "border" soll ein Pixel sein, also ein Rahmen außenrum soll die Dicke von 1 Pixel haben. Das soll eine durchgezogener Rahmen sein und nicht punktierte oder sowas, also Leerzeichen "solid" und dann gebe ich hier noch die Farbe an. Das Ganze nehme ich jetzt mal "blue", mit Control-Return kann ich das ausführen. Sie sehen, jetzt habe ich einen Rahmen außenrum gezeichnet. Es gibt dann auch so Tricks, dass Sie zum Beispiel sagen nur der untere Rahmen, also "border-bottom" und Sie sehen jetzt habe ich hier zwar einen Rahmen rum aber ich sehe hier nur die untere Hälfte dieses Rahmens. Es gibt Unmengen solcher CSS-Befehle. Ich will gar nicht so sehr in die Tiefe gehen, zwei oder drei möchte ich Ihnen noch zeigen. Einer heißt "background" und es soll jetzt zum Beispiel "red" sein, und dann sage ich dieser ganze Bereich, der geht der momentan hier über die gesamte Breite, der soll nicht so breit sein, sondern der soll eine Breite eine "width" von 100 Pixel haben. Probieren wir das Ganze mal aus. Sie sehen jetzt hier haben wir einen roten Hintergrund, dieser Balken ist gar nicht breit genug, dass der ganze Text da rein passt, also machen wir den mal breiter, indem ich einfach hier diese Breite von 100 auf 200 setze und dieses Blau gefällt mir nicht, da machen wir mal ein "white" draus und dann führen wir das ganze mal aus und Sie sehen jetzt ist der Balken hier breit genug und jetzt möchte ich noch ein bisschen mehr Abstand von Text zum Balkenrand hier einfügen und dieser Befehl für einen Abstand der heißt hier "padding" und sagen wir mal 10 Pixel soll es hier als padding geben, RUN, und jetzt sehen Sie ist hier noch mal der Balken größer geworden nach oben, nach unten, nach links, auch nach rechts ist der Balken hier eben etwas größer durch dieses "padding". Wir können nicht nur diesen Text verändern, sondern z.B. auch die Überschrift und da ist es sinnvoll dass wir der Überschrift zunächst einmal eine ID geben: ID = Anführungszeichen und Schlusszeichen und jetzt können wir hier einen freien Namen vergeben, wichtig ist, dieser Name, diese ID, darf keine deutschen Umlaute haben, also ä,ü,ö und scharfes s die sind nicht erlaubt, auch keine Leerzeichen und Sie dürfen zwar eine Zahl verwenden, die darf aber nicht am Anfang stehen. also nenne wir das einfach mal Überschrift, und zwar mit einem Ue und jetzt gehe ich hier wieder in dieses CSS rein, außerhalb von den geschweiften Klammern, weil ich auf die ID zugreife, muss ich Rautezeichen tippen und dann schreibe ich Überschrift, geschweifte Klammer, weil wir sind in CSS, geschweifte Klammer auf, und geschweifte Klammer zu, und jetzt sage ich beispielsweise die Überschrift soll die Farbe Rot haben, probieren wir es aus, funktioniert. Wenn Sie hier einen Tippfehler haben und die ID nicht mit dieser ID übereinstimmt, dann ist HTML oder eine Webseite im Endeffekt ziemlich genügsam, sie ignoriert das einfach. Sie sagt, wenn es diese ID "Uerschrift" gäbe dann wäre sie rot, gibt es aber nicht, also mache ich mir nichts draus, und mache diese Überschrift ganz normal schwarz. Wenn also die Seite nicht so ausschaut, wie Sie sich das wünschen, dann schauen Sie mal drauf, ob Sie hier nirgendwo einen Tippfehler haben und ob sie bspw. hier immer diese Rautezeichen haben, ob Sie die geschweiften Klammern auf und zu haben und auch ob Sie jede Zeile hier mit einem Strichpunkt beenden. Wenn sie das nicht tun, auch dann kommt es zu einem Fehler, weil der Browser nicht weiß, ist hier dieses Wort "white" zu Ende, fängt hier schon dieses "font-weight" an? Zeilenumbrüche erkennt der Browser nicht. Wir müssen uns immer damit behelfen, dass wir am Ende einer Zeile in aller meisten Fällen immer einen Strichpunkt schreiben.

JavaScript lernen

Sehen, lernen und üben Sie das Schreiben von kleinen Programmen, die allesamt mit der Programmiersprache JavaScript erstellt werden.

2 Std. 6 min (37 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!