Ein Cascading Style Sheet (CSS) ist ein System zur Website-Codierung, das es Designern ermöglicht, mehrere Funktionen gleichzeitig zu bearbeiten, indem sie bestimmte Elemente Gruppen zuweisen. Durch die Verwendung eines Codes für den Website-Hintergrund können Designer beispielsweise die Hintergrundfarbe oder das Bild auf allen Seiten der Website mit einer Änderung an der CSS-Datei ändern. So erstellen Sie CSS für eine einfache Website.
Schritte
Teil 1 von 4: Inline-CSS schreiben
Schritt 1. Stellen Sie sicher, dass Sie ein grundlegendes Verständnis von HTML-Tags haben
Sie sollten wissen, wie Tags funktionieren und welche
src
und
href
Attribute.
Schritt 2. Lernen Sie einige der grundlegenden CSS-Eigenschaften kennen
Sie werden feststellen, dass es sehr viele Eigenschaften gibt. Es ist jedoch nicht notwendig, sie alle zu lernen.
-
Einige gute grundlegende CSS-Eigenschaften, die Sie kennen sollten, sind
Farbe
und
Schriftfamilie
- .
Schritt 3. Informieren Sie sich über die Werte für die jeweilige Eigenschaft
Alle Eigenschaften benötigen einen Wert. Für die
Farbe
-Eigenschaft können Sie beispielsweise die
rot
Wert.
Schritt 4. Erfahren Sie mehr über die
Stil
HTML-Attribut.
Es wird innerhalb eines Elements wie verwendet
href
oder
src
. Um es zu verwenden, setzen Sie innerhalb der Anführungszeichen nach dem Gleichheitszeichen das CSS-Attribut, einen Doppelpunkt und dann den Wert der Eigenschaft. Dies wird als CSS-Regel bezeichnet.
Schritt 5. Verstehen Sie, dass Inline-CSS normalerweise nicht von professionellen Webentwicklern für Websites verwendet wird
Inline-CSS kann einem HTML-Dokument unnötige Unordnung hinzufügen. Es ist jedoch eine großartige Möglichkeit, sich mit der Funktionsweise von CSS vertraut zu machen.
Teil 2 von 4: Grundlegendes CSS schreiben
Schritt 1. Starten Sie das gewünschte Programm
Es sollte Ihnen ermöglichen, HTML- und CSS-Dateien zu erstellen.
Wenn Sie kein spezielles Programm installiert haben, können Sie Notepad oder einen anderen Texteditor verwenden. Speichern Sie Ihre Datei einfach sowohl als Textdatei als auch als CSS-Datei
Schritt 2. Öffnen Sie die HTML-Datei für Ihre Website
Diese sollten Sie ebenfalls mit einem HTML-Editor öffnen, falls Sie einen installiert haben.
HTML-Editoren ermöglichen die gleichzeitige Bearbeitung von HTML und CSS
Schritt 3. Erstellen Sie ein Tag in Ihrem HTML-Kopf
Auf diese Weise können Sie CSS schreiben, ohne dass eine separate Datei erforderlich ist.
Schritt 4. Wählen Sie ein Element aus, dem Sie einen Stil hinzufügen möchten, und geben Sie den Namen des Elements gefolgt von einer Reihe von geschweiften Klammern ({ }) ein
Um Ihren Code lesbarer zu machen, setzen Sie die zweite geschweifte Klammer immer in eine eigene Zeile.
Schritt 5. Geben Sie zwischen den geschweiften Klammern Ihre CSS-Regeln so ein, wie Sie es mit der
Stil
Attribut.
Jede Zeile muss mit einem Semikolon (;) enden. Um Ihren Code lesbar zu machen, sollte jede Regel in einer eigenen Zeile beginnen und jede Zeile sollte eingerückt werden.
Es ist sehr wichtig zu beachten, dass sich dieser Stil auf alle Elemente des ausgewählten Typs auf der Seite auswirkt. Genaueres Styling wird im nächsten Abschnitt behandelt
Teil 3 von 4: Fortgeschritteneres CSS
Schritt 1. Erstellen Sie eine CSS-Datei, keine HTML-Datei und speichern Sie sie mit dem
.css
Verlängerung.
Öffnen Sie auch Ihre HTML-Datei.
Schritt 2. Erstellen Sie ein Tag in Ihrem HTML-Kopf
Auf diese Weise können Sie eine separate CSS-Datei mit Ihrem HTML-Dokument verknüpfen. Ihr Link-Tag benötigt drei Attribute:
rel
Typ
und
href
-
rel
bedeutet "Beziehung" und teilt dem Browser mit, welche Beziehung zum HTML-Dokument besteht. Hier sollte es einen Wert von haben
"Stylesheet"
- .
-
Typ
gibt an, mit welcher Art von Medien verknüpft ist. Hier sollte es einen Wert von haben
"Text/CSS"
-
href
- here wird ähnlich wie in einem Element verwendet, aber hier muss es auf eine CSS-Datei verweisen. Befindet sich die CSS-Datei im selben Ordner wie die HTML-Datei, muss nur der Dateiname in Anführungszeichen geschrieben werden.
Schritt 3. Wählen Sie Elemente verschiedener Typen aus, denen Sie das gleiche Styling hinzufügen möchten
Füge hinzu ein
Klasse
Attribut auf diese Elemente und setzen Sie sie gleich einem Klassennamen Ihrer Wahl. Dadurch erhalten Ihre Elemente das gleiche Styling.
Schritt 4. Weisen Sie zu, welches Styling eine Klasse erhält
Geben Sie den Klassennamen in Ihre CSS-Datei mit einem Punkt (.) davor ein (d. h.
. Klasse
).
Schritt 5. Wählen Sie einzelne Elemente aus, denen Sie ein spezielles Styling hinzufügen möchten, und fügen Sie ein. hinzu
Ich würde
Attribut.
IDs werden in CSS mit einem Pfund-Symbol (#) anstelle eines Punktes erstellt.
IDs sind spezifischer als Klassen, daher überschreibt eine ID alle Klassenstile, wenn sie ein Attribut mit einem anderen Wert als die Klasse hat
Teil 4 von 4: Mehr erfahren
Schritt 1. Besuchen Sie die w3-Schulen
Es ist eine offizielle Website, die darauf abzielt, Webentwicklungsfähigkeiten zu vermitteln. Das w3 enthält zahlreiche Referenzen für HTML und CSS sowie für andere Websprachen.
Schritt 2. Suchen Sie nach anderen Websites, die speziell auf das Erlernen und Lehren von HTML und CSS ausgerichtet sind
Websites wie CSS tricks.com zielen speziell darauf ab, CSS- und Webdesign-Fähigkeiten zu vermitteln. Die Suche nach seriösen Quellen wird Ihnen auf Ihrer Lernreise helfen.
Schritt 3. Nehmen Sie Kontakt mit Webdesignern und -entwicklern auf
Ihre Erfahrung und ihr Know-how können Ihnen wertvolle Kenntnisse und Fähigkeiten vermitteln.
Schritt 4. Sehen Sie sich den Quellcode der Websites an, auf die Sie stoßen
Das Anzeigen des CSS von gut entwickelten Websites kann Ihnen Wege aufzeigen, Teile von Websites zu gestalten. Wenn Sie es zum Üben nach unten kopieren und mit dem Code herumspielen, können Sie lernen, wie Sie verschiedene CSS-Attribute verwenden.
