4 Möglichkeiten zum Erstellen von CSS

Inhaltsverzeichnis:

4 Möglichkeiten zum Erstellen von CSS
4 Möglichkeiten zum Erstellen von CSS
Anonim

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

CSS erstellen Schritt 1

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.

CSS erstellen Schritt 2

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

    .
CSS erstellen Schritt 3

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.

CSS erstellen Schritt 4

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.

CSS erstellen Schritt 5

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

CSS erstellen Schritt 6

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

CSS erstellen Schritt 7

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

CSS erstellen Schritt 8

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.

CSS erstellen Schritt 9

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.

CSS erstellen Schritt 10

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

CSS erstellen Schritt 11

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.

CSS erstellen Schritt 12

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.
CSS erstellen Schritt 13

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.

CSS erstellen Schritt 14

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

).

CSS erstellen Schritt 15

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

CSS erstellen Schritt 16

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.

CSS erstellen Schritt 17

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.

CSS erstellen Schritt 18

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.

CSS erstellen Schritt 19

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.

Video - Durch die Nutzung dieses Dienstes können einige Informationen an YouTube weitergegeben werden

Tipps

Beliebt nach Thema