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.

JavaScript Grundkurs

CSS

LinkedIn Learning kostenlos und unverbindlich testen!

Jetzt testen Alle Abonnements anzeigen
Ganz wichtig in modernen Webseiten sind Style Sheets, die im Web meist in Form von CSS zum Einsatz kommen. Lernen Sie die verschiedenen Formen der Verwendung (Inline-Style, internes Style Sheet und externes Style Sheet) und wichtige Selektoren kennen.
06:24

Transkript

Neben HTML und XHTML, sowie JavaScript sind Style Sheets die dritte Technologie, die bei modernen Webseiten in Client auf jeden Fall verwendet wird. Sie sehen hier eine typische HTML Seite und wir wollen es kurz anschauen wie Sie die mit Style Sheet formatieren können. Ich gehe davon aus, dass Sie schon mit Style Sheet gearbeitet haben und es wird nur eine sehr knappe Erläuterung sein, aber Sie sollen diese Cascading Style Sheets zumindestens in Ansätzten hier vorgestellt bekommen. Grundsätzlich können Sie jedes Element mit einer sichtbaren Repräsentation der Webseite über ein Attribut style mit einem sogenannten Inline-Style versehen und da beispielsweise eine Hintergrundfarbe zuweisen. Mit einem Semikolon getrennt können Sie auch weitere Eigenschaften zuweisen. Sie sehen hier auch die Hilfe, die Ihnen Aptana bietet. Wenn wir uns diese Seite jetzt im Browser ansehen, wird das entsprechend so umgesetzt. Dieses Inline-Style ist eigentlich aber nicht zu empfehlen. Man möchte in modernen Seiten die Strukturen des Layout möglichst komplett trennen. Der erste Schritt zur Trennung wäre hier im Header ein Element style anzulegen, dem Sie normalerweise noch ein MIME-Typ zuweisen sollten, Text CSS. Und hier können sie Regeln für bestimmte Elemente, bestimmte Strukturen der Webseite angeben, auch das ist noch keine vollständige Trennung, aber der erste Schritt in die richtige Richtung. Um das jetzt allerdings machen zu können, brauchen Sie sogenannte Selektoren, um festzulegen was für Elemente in der Webseite Sie genau formatieren wollen. Es gibt beispielsweise Elementselektoren. Sie können hier zum Beispiel ein Element h1 hinschreiben in geschweifte Klammer an, welche Regeln für alle Elemente von Typ h1 gelten sollen. Zum Beispiel die Hintergrundfarbe wieder. Und von mir aus die Textfarbe. Und wenn wir uns das ansehen, dann sieht das so aus. Das ist ein Überschrift der Ordnung 1, das auch, und offensichtlich gibt es hier einen blauen Hintergrund und eine gelbe Schriftfarbe. Nun sehen sie, dass ich hier auch eine sogenannte ID vergeben habe, die sogenannten ID-Selektoren beginnen immer mit einem #-Symbol und dann den Namen für ein Attribut id vergeben wurde. ID sollte eine eindeutige Kennung darstellen. Wenn Sie eine ID mehrfach vergeben werden die Browser nach dem Prinzip Fehlertoleranz reagieren und nicht vorhersehbare Reaktion zeigen. Das sollten Sie tunlichst vermeiden. Ja, aber jetzt können Sie bei diesen Selektor genau diesen div ansprechen und ich werde auch hier nur eine Hintergrundfarbe auswählen. Auch das können wir uns wieder ansehen. Und Sie sehen, dass es hier in diesem div auswirkt. Die dritte Form von Selektor die ich Ihnen vorstellen möchte ist der Klassenselektor. Sie können bei Elementen, ein Attribut class setzen und dieses Attribut kann bei mehreren Elementen den gleichen Wert haben, das unterscheidet es von einer ID, es ist eine Klasse, die sie damit angeben. Und das würde bedeuten, dass Sie bestimmte Regeln auf verschiedene Elemente anwenden können, die im Grunde erstmal gar nichts miteinander zu tun haben, außer das die gleiche Klasse zugeordnet wurde. Eine Klasse beginnt im Selektor mit einem Punkt und dann legen Sie deren Regeln fest, zum Beispiel font-size:42px, auch das gucken wir uns wieder an. Und Sie sehen, dass sowohl diese Überschrift als auch diese Überschrift die gleiche Schriftgröße haben, obwohl diese eigentlich von Browser unterschiedlich groß dargestellt werden, sofern Sie nicht mit Style Sheets formatiert werden. Weitere Selektoren, wie Generation Selekoten möchte ich hier nicht behandeln, da wir auch CSS nur als Randthema in diesem Tutorium behandeln wollen, aber ich möchte natürlich zeigen, wie sie sogenannte externe Style Sheet Dateien benutzen können. Externe Style Sheet Dateien bedeuten, dass man das Layout vollständig von der Webseite trennt und nur noch eine Referenz auf diese Datei notiert. Dazu legen wir eine neue Datei an, diese hat in der Regel die Dateierweiterung CSS, aber das ist nicht zwingend und kopieren einfach was hier steht in diese Datei hinein. Und ein bisschen formatiert, dann ist das etwas schöner dargestellt. Das ich das jetzt auslage, soll nicht bedeuten, dass sie nicht gleichzeitig interne Style Sheets, Inline-Style Sheets und externe Style Sheets benutzen können. Die werden dann in einer gewissen Priorität zueinander auch verwendet, wenn Sie sich widersprechen, muss man natürlich eine Regel haben, was von widersprechenden Aussagen wirklich benuztz wird, aber soweit wollen wir garnicht gehen, ich möchte hier nur zeigen, wie die Verknüpfung erfolgt und die ist dummerweise nicht über den style Tag, sondern über den link Tag gegeben indem Sie drei Attribute setzen. Es bleibt wieder der MIME-Type, dann kommt href, was entsprechend die Referenz auf die Datei ist und dann müssen Sie noch ein Attribut rel setzen und dort Style Sheet hinschreiben. Das ist ein leeres Element, dass sollten Sie zur Sicherheit mit so ein Slash abschießen. Und wenn Sie jetzt diese Datei wieder in den Browser laden, dann sehen Sie, dass es vollkommen Analog wie das interne Style Sheet benutzt, nur wir haben eine saubere Trennung der Strukturen des Layouts. Wenn Sie jetzt Firebug nehmen, dann können Sie auch durchaus diese Strukturen sehen und Sie sehen, dass die externe Style Sheet Datei in die Webseite eingebunden wird von Browser. Es wird so getan, als wäre es ein interte Style Sheet und wenn Sie bestimmte Elemente hier angucken, dann sehen Sie hier auch welche Style Sheets sich auf dieses Element beziehen. Auch hier hilft Firebug sehr viel.

JavaScript Grundkurs

Lernen Sie die Möglichkeiten der universellen Sprache JavaScript kennen und machen Sie sich mit der Syntax vertraut, um Ihre Web-Applikationen durch effektive Skripts zu ergänzen.

8 Std. 20 min (134 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!