CSS Editor

Sie können professionelle CSS-Editoren verwenden, um CSS zu bearbeiten. Hier sind einige häufig verwendete Editoren, die wir Ihnen empfehlen:

Sie können die entsprechende Software von den offiziellen Websites der oben genannten Software herunterladen und gemäß den Schritten installieren.

Sie können auch unseren Online-Editor verwenden:https://www.jyshare.com/front-end/61/

Als Nächstes zeigen wir, wie Sie mit dem VS Code-Tool CSS-Dateien erstellen.

VS Code

Visual Studio Code (kurz VS Code) ist ein von Microsoft entwickelter Open-Source-Code-Editor, der Betriebssysteme wie Windows, Linux und macOS unterstützt und über eine integrierte Erweiterungsverwaltungsfunktion verfügt.

Referenz zur VS Code-Installationsanleitung:https://www.example.com/vscode/vscode-tutorial.html

Installieren Sie die erforderlichen Plugins (Extensions):
Klicken Sie auf das quadratische Symbol (Extensions) in der linken Seitenleiste von VS Code, suchen Sie nach den folgenden zwei Plugins und installieren Sie sie. Sie sind für Anfänger entscheidend:

  • Live Server:Ermöglicht es Ihnen, Webseiten in Echtzeit im Browser in der Vorschau anzuzeigen. Nach dem Speichern des Codes wird der Browser automatisch aktualisiert.
  • HTML CSS Support:Erweitert intelligente CSS-Vorschläge.

Schritt 1: Richten Sie die Projektstruktur ein

Erstellen Sie auf Ihrem Computer einen Ordner mit dem Namenmy-first-cssden Ordner

In VS Code öffnen: Klicken Sie oben links in VS Code auf File -> Open Folder..., und wählen Sie dann den soeben erstellten Ordner aus.

  • Klicken Sie mit der rechten Maustaste auf den leeren Bereich des Ressourcen-Managers auf der linken Seite und erstellen Sie eine neue Datei index.html (dies ist das Skelett der Webseite).

  • Klicken Sie erneut mit der rechten Maustaste und erstellen Sie eine neue Datei style.css (dies ist die Haut der Webseite).

Schritt 2: Schreiben Sie das HTML-Skelett

CSS muss mit HTML verknüpft sein. Das Folgende ist der Code der Datei index.html.

In<body>Geben Sie den folgenden Code innerhalb des Tags ein, undFügen Sie ihn unbedingt hinzu<link>Verwenden Sie ein Tag, um die CSS-Datei zu verknüpfen：

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Meine CSS-Übung</title> <link rel="stylesheet" href="style.css"> </head> <body> <div class="card"> <h1>Hallo, CSS!</h1> <p>Dies ist die erste Style-Karte, die ich mit VS Code geschrieben habe.</p> <button>Klick mich</button> </div> </body> </html>

Schritt 3: Schreibe die CSS-Stile

Gib den folgenden Code in die Datei style.css ein:

Beispiel

/* Füge eine Hintergrundfarbe für die gesamte Seite hinzu */
body {
    background-color: #f0f2f5;
    font-family: 'Segoe UI', sans-serif;
    display: flex;
    justify-content: center; /* Horizontale Zentrierung */
    align-items: center;     /* Vertikale Zentrierung */
    height: 100vh;           /* Füllt die volle Bildschirmhöhe aus */
    margin: 0;
}

/* Karten-Design-Stile */
.card {
    background-color: white;
    width: 300px;
    padding: 30px;
    border-radius: 15px;      /* Abgerundete Ecken */
    box-shadow: 0 4px 15px rgba(0,0,0,0.1); /* Schatten */
    text-align: center;
}

/* Titelfarbe */
h1 {
    color: #333;
}

/* Button-Stile */
button {
    background-color: #007bff;
    color: white;
    border: none;
    padding: 10px 20px;
    border-radius: 5px;
    cursor: pointer;
    transition: background 0.3s; /* Übergangsanimation */
}

/* Hover-Effekt auf dem Button */
button:hover {
    background-color: #0056b3;
}

Schritt 4: Ausführen und Vorschau

  1. Zurückindex.htmlDatei.
  2. Klicken Sie an eine beliebige Stelle im BearbeitungsbereichRechtsklick。
  3. Auswählen"Open with Live Server"。

An diesem Punkt öffnet sich Ihr Standardbrowser automatisch, und Sie sollten eine zentrierte weiße Karte mit einem Titel und einer Schaltfläche darauf sehen. Wenn Sie den Mauszeiger über die Schaltfläche bewegen, wird die Farbe dunkler.

Das Ausführungsergebnis sieht wie folgt aus:

Weitere Erweiterungen