PHP 5.4 & MySQL 5.6 Grundkurs

Formatierungen über CSS

LinkedIn Learning kostenlos und unverbindlich testen!

Jetzt testen Alle Abonnements anzeigen
Formatierungen von Websites realisieren Sie über Cascading Stylesheets, kurz CSS. Sehen Sie in diesem Video, wie solche CSS-Regeln aufgebaut sind und wie Sie CSS-Angaben in HTML integrieren.

Transkript

Für Formatierungen ist CSS vorgesehen. Diese Cascading Style Sheets können Sie verwenden, um Schriften zu definieren, Farben festzulegen und vieles mehr. Sehen wir ein kleines Beispiel hierfür. Sie haben hier ein Dokument mit einer Überschrift und zwei Absätzen. Diese sollen jetzt per CSS formatiert werden. Dafür habe ich im Kopfbereich ein Style Element eingefügt. Was hier type ist gleich text css hat, das könnten Sie in HTML 5 auch weglassen. Und dann sind hier Formatierungen angegeben. Wenn Formatierungen für alle Elemente gelten sollen, wie in diesem Fall, dann schreiben Sie einfach den Namen des Elements, hier h1, aber ohne spitze Klammern. Damit wählen Sie alle h1 Elemente aus. In CSS spricht man hier auch von Selektoren, die dazu dienen Elemente auszuwählen. Welche Formatierungen gelten sollen, stehen dann in geschweiften Klammern. Hier lege ich mir background color yellow eine gelbe Hintergrundfarbe fest. Und mit color red eine rote Textfarbe. Sie sehen, es gibt immer so Eigenschaften, den Sie bestimmte Werte zuweisen können. Die Eigenschaften hier dürfen kein Leerzeichen oder sonst was enthalten, aber haben oft einen Bindestrich. Dann kommt nach einem Doppelpunkt die Wertzuweisung, und dann wird das mit einem Strichpunkt beendet. Dann kommt hier eine weitere Eigenschaft mit einem weiterem Wert. In der zweiten Zeile hier definiere ich Farben für die Absätze. Deswegen ist hier p, als Selektor angegeben, und diese sollen eine grau Hintergrundfarbe haben und eine weiße Textfarbe. Wenn Sie sich das Beispiel einmal ansehen, dann ist es deutlich, dass die jetzt eingefärbt sind. Nun können Sie auch noch andere Selektoren definieren, als diese sogenannten Typselektoren. Sie können auch mit Klassenselektoren arbeiten. Was man häufig braucht sind Zebratabellen. Bei Zebratabellen ist jede zweite Zeile anders eingefärbt. Und das lässt sich über Klassen realisieren. Sie sehen hier eine Tabelle, immer mit dem tr Elementen für die Tabellenzeilen. Und bei jedem zweiten tr Element ist jetzt etwas ergänzt, nämlich das Attribut class, das ist in HTML vorgeschrieben, und ein Name, den ich mir selber ausgedacht habe, hier gerade. Wenn ich jetzt nur diese Zeilen der Tabelle ansprechen möchte, so kann ich das hier oben machen, indem ich den Namen schreibe, den ich hier unten vergeben habe, also gerade. Und ein Punkt davor. So schreiben Sie Klassenselektoren in CSS, und in geschweiften Klammern steht dann die Farbe, die die haben sollen. Wenn ich das jetzt hier ausführe, dann sehen Sie, dass jede zweite Zeile ein bisschen anders eingefärbt ist. CSS bietet natürlich viele, viele weitere Formatierungen. Das zeigt ein bisschen dieses Beispiel. Sie können über font-family die Schriftart definieren über font-style, dass etwas kursiv sein soll, über font-size die Schriftgröße, über font-weight machen Sie etwas fett, text-align zentriert, border gibt einen Ramen, padding sorgt für Innenabstand, width gibt die Breite vor, height die Höhe. Sie sehen da ist ganz viel möglich in dem Beispiel, habe ich hier immer den Elementen einzelne Klassen zugefügt, die hier oben über die entsprechenden Selektoren angesprochen werden, und wenn wir das mal ansehen, dann sehen Sie, dass es einfach zeigt, dass es mit CSS wesentlich mehr möglich ist. Sie haben gesehen, dass Sie über CSS HTML Dokumente formatieren können. CSS Angaben können Sie beispielsweise im Kopfbereich notieren, innerhalb des Teilelements, und es gibt verschiedene Arten Elemente auszuwählen. Sie können zum Einen den Namen von Elementen schreiben, das sind die sogenannten Typselektoren, oder auch Elemente auf Grund von Klassen ansprechen, wenn Sie den Elementen Klassen gegeben haben. Die Formatierungen stehen dann immer in geschweiften Klammern, und Eigenschaften werden immer Werte zugewiesen, dazwischen steht ein Doppelpunkt. Und zwischen diesen Eigenschaften Wert Paaren, steht jeweils ein Strichpunkt.

PHP 5.4 & MySQL 5.6 Grundkurs

Steigen Sie auch ohne Vorwissen in die Programmierung PHP- & MySQL-basierter Webseiten ein und lernen Sie die Sprachgrundlagen wie Bedingungen, Schleifen, Funktionen usw. kennen.

7 Std. 9 min (86 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!