Wenn Sie eine Webanwendung mit Django erstellen, besteht eine wichtige Aufgabe darin, Ihrer Website ein schönes Design und Stile hinzuzufügen. Dazu können Sie CSS-Dateien verwenden, die Ihnen helfen, das Aussehen Ihrer Website zu bestimmen. In diesem Artikel werden wir uns ansehen, wie Sie Django CSS-Dateien hinzufügen können.
Wenn es darum geht, CSS zu Django hinzuzufügen, gibt es mehrere Möglichkeiten. Eine Möglichkeit besteht darin, der Seite mithilfe eines Tags innerhalb des Tags Ihrer HTML-Vorlage Stile hinzuzufügen. Diese Methode ist einfach zu verwenden, wird jedoch nicht für große Projekte empfohlen, da die Stile in jede Seite eingebettet werden, was zu einer größeren Seitengröße und einer schlechteren Leistung führen kann.
Der beste Weg, CSS-Dateien zu Django hinzuzufügen, besteht darin, statische Dateien zu verwenden. Statische Dateien in Django sind Dateien, die unabhängig von einer bestimmten Seite sind und für die gesamte Site freigegeben werden können. Diese können CSS-Stile, JavaScript-Skripte, Bilder und andere Ressourcen enthalten.
Um CSS-Dateien zu Django hinzuzufügen, müssen Sie einen Ordner namens "static" im Stammordner Ihres Django-Projekts erstellen. Im Ordner "static" können Sie einen weiteren Ordner mit dem Namen Ihrer Django-Anwendung erstellen, z. B. "myapp". Im Ordner Ihrer Anwendung erstellen Sie einen Ordner für die CSS-Dateien und legen Ihre Dateien dort ab. Jetzt können Sie diese CSS-Dateien in Ihrem Django-Projekt verwenden.
Verbinden einer CSS-Datei in Django
Folgen Sie den folgenden Schritten, um eine CSS-Datei zu Django hinzuzufügen:
- Erstellen Sie ein "static" -Verzeichnis im Stammordner des Django-Projekts. Wenn sie bereits vorhanden ist, überspringen Sie diesen Schritt.
- Erstellen Sie im Verzeichnis "static" ein Unterverzeichnis mit dem Namen Ihrer Django-Anwendung. Wenn Ihre Anwendung beispielsweise "myapp" heißt, erstellen Sie das Verzeichnis "myapp" innerhalb von "static".
- Speichern Sie Ihre CSS-Datei im erstellten Verzeichnis. Erstellen Sie beispielsweise eine Styles-Datei.css" innerhalb von "myapp".
- Öffnen Sie die Datei "settings.py " im Verzeichnis Ihres Django-Projekts.
- Suchen Sie nach der Variablen "STATIC_URL", und fügen Sie den folgenden Code hinzu:
STATIC_URL = '/static/'STATICFILES_DIRS = [os.path.join(BASE_DIR, "static")]Danach sucht Django nach statischen Dateien im "static" -Verzeichnis Ihres Projekts.
- Öffnen Sie die HTML-Datei, in der Sie CSS-Stile verwenden möchten.
- Fügen Sie im Header der Datei den folgenden Code hinzu, um die CSS-Datei zu verbinden:
Hier ist "myapp" der Name Ihrer Django-App und "styles.css" ist der Name Ihrer CSS-Datei.
Jetzt wird Ihre CSS-Datei angehängt und auf Ihre Django-Webseite angewendet.
Die zweite Methode ist das Hinzufügen zu einer Vorlage
Die zweite Möglichkeit, eine CSS-Datei zu Django hinzuzufügen, besteht darin, sie direkt in die Vorlage einzufügen.
Fügen Sie dazu ein Tag am Anfang der Vorlage hinzu. Mit diesem Tag können Sie statische Dateien verwenden.
Sie können dann eine CSS-Datei mit einem Tag hinzufügen. Zum Beispiel, wenn Sie eine Datei mit dem Namen "styles.css" im Verzeichnis "static/css/" können Sie es auf diese Weise hinzufügen:
Das Tag generiert den korrekten Dateipfad, der in das href-Attribut des Tags eingefügt wird.
Auf diese Weise wird die CSS-Datei mit Ihrer Vorlage verbunden und wird auf alle Seiten angewendet, die diese Vorlage verwenden.
Die zweite Methode ist die Verwendung statischer Dateien
Die zweite Möglichkeit, eine CSS-Datei zu Django hinzuzufügen, basiert auf der Verwendung statischer Dateien. Statische Dateien sind Dateien, die sich während der Ausführung einer Anwendung nicht ändern. Dies können CSS-Dateien, JavaScript-Dateien, Bilder und andere Dateien sein, die für das Design und die Funktionalität der Anwendung verwendet werden.
Um statische Dateien zu verwenden, müssen Sie einen Ordner namens "static" im Verzeichnis Ihres Django-Projekts erstellen. Innerhalb dieses Ordners können Sie Unterordner erstellen, um Ihre statischen Dateien nach Typ zu kategorisieren (z. B. css, js, img).
Nachdem Sie die Ordner erstellt haben, können Sie Ihre CSS-Datei innerhalb des CSS-Ordners platzieren. Dann müssen Sie den Pfad zu Ihrer CSS-Datei in der HTML-Vorlage angeben. Um dies zu tun, müssen Sie das Tag im Abschnitt Ihrer HTML-Datei verwenden. Hier ist ein Beispielcode:
Im obigen Code verwenden wir ein Tag mit dem Attribut "rel", das auf "stylesheet" gesetzt ist und das Attribut "href" auf den Pfadwert Ihrer CSS-Datei gesetzt ist. In diesem Fall verwenden wir ein integriertes Template-Tag, das einen absoluten Pfad zu Ihrer Datei im Ordner "static" erstellt.
Nach diesen Schritten wird Ihre CSS-Datei erfolgreich mit der HTML-Seite verbunden.
Erstellen einer CSS-Datei für ein Django-Projekt
Um den Webseiten Ihres Django-Projekts Stile hinzuzufügen, müssen Sie eine CSS-Datei erstellen und sie mit HTML-Vorlagen verknüpfen. Hier ist, wie man es macht:
1. Erstellen Sie ein neues Verzeichnis im Stammordner Ihres Projekts und nennen Sie es "static". In diesem Ordner werden die statischen Dateien Ihres Projekts, einschließlich CSS, gespeichert.
2. Erstellen Sie im Ordner "static" ein weiteres Verzeichnis mit dem Namen "css". In diesem Ordner werden die CSS-Dateien gespeichert.
3. Erstellen Sie eine neue Datei mit der Erweiterung ".css" im Ordner "css". Zum Beispiel nennen wir es "styles.css". In dieser Datei können Sie Ihre eigenen Stile schreiben.
4. Um eine CSS-Datei mit HTML-Vorlagen zu verknüpfen, fügen Sie das folgende Tag im Abschnitt ` ein
Erster Schritt: Erstellen eines Static-Ordners
- mkdir static
Der Befehl mkdir erstellt einen neuen Ordner namens static.
Nachdem Sie den static-Ordner erstellt haben, können Sie Ihre CSS-Dateien hinzufügen. Erstellen Sie mit dem folgenden Befehl einen neuen Ordner namens css im static-Ordner:
Jetzt haben Sie einen static/CSS-Ordner, in dem Sie Ihre CSS-Dateien platzieren können. Sie können diesem Ordner je nach Ihren Bedürfnissen mehrere CSS-Dateien hinzufügen.
Fünfter Schritt: Erstellen einer CSS-Datei
Um CSS-Stile zu Django hinzuzufügen, müssen Sie eine spezielle Datei erstellen, die den gesamten Stilcode enthält. Diese Datei hat normalerweise eine Erweiterung .css. Erstellen Sie eine neue Datei mit einem Namen, der ihren Inhalt beschreibt, z. B., style.css.
In der CSS-Datei können Sie alle erforderlichen Stile für Ihre Webanwendung beschreiben. Sie können Stile für verschiedene HTML-Elemente festlegen, Farben, Schriftarten, Einrückungen, Größen und andere Eigenschaften festlegen. CSS ist ein sehr leistungsfähiges Werkzeug, mit dem Sie Ihre Website attraktiver und benutzerfreundlicher gestalten können.
Damit die CSS-Stile auf Ihre Django-Webanwendung angewendet werden können, müssen Sie die erstellte Datei mit der HTML-Vorlage verknüpfen. Dies kann mit einem speziellen Tag erfolgen und die Verwendung des Attributs href im Tag . Weitere Informationen zum Einbinden von CSS-Dateien in Django finden Sie in der Dokumentation des Django-Frameworks.
Nachdem Sie die CSS-Datei erstellt und mit einer HTML-Vorlage verbunden haben, können Sie mit dem Hinzufügen von Stilen zu Ihrer Webanwendung beginnen. Verwenden Sie Selektoren, um die gewünschten HTML-Elemente auszuwählen und die gewünschten Stile für sie festzulegen. Jede CSS-Regel besteht aus einem Selektor und einem Eigenschaftenblock mit Werten.
Beispiel für die Anwendung von CSS-Stilen:
body h1 pIn diesem Beispiel werden die Stile für die Elemente und festgelegt. Der Hintergrund der Seite ist hellblau, die Schriftart des Haupttextes ist Arial, die Titelfarbe ist dunkelblau und die Farbe der Absätze ist grau.
Nachdem Sie jetzt die Datei erstellt und Stilregeln hinzugefügt haben, können Sie Ihre Webanwendung aktualisieren und die neuen Stile in Aktion sehen.
Django-Konfiguration für die Verwendung einer CSS-Datei
Um eine CSS-Datei zu Django hinzuzufügen, müssen Sie die folgenden Schritte ausführen:
1. Erstellen Sie einen statischen Ordner in Ihrem Projekt. Erstellen Sie dazu im Stammordner des Projekts einen neuen Ordner mit dem Namen "static".
2. Erstellen Sie im Ordner "static" ein Verzeichnis mit dem Namen "css". In diesem Ordner wird Ihre CSS-Datei gespeichert.
3. Erstellen Sie die CSS-Datei selbst im Ordner "css". Der Dateiname kann beliebig sein, z. B. "styles.css".
4. Aktivieren Sie statische Dateien in den Django-Einstellungen. Öffnen Sie dazu die Einstellungsdatei settings.py suchen Sie nach der Liste "STATICFILES_DIRS". Wenn es keinen gibt, fügen Sie eine Zeile hinzu:
5. Fügen Sie den Pfad zum Ordner "static" Ihres Projekts zur Liste "STATICFILES_DIRS" hinzu. Wenn sich Ihr Projekt beispielsweise im Ordner "myproject" befindet, fügen Sie die folgende Zeile hinzu:
STATICFILES_DIRS = [os.path.join(BASE_DIR, 'static')]
6. Fügen Sie in Ihrer HTML-Datei, in der Sie die CSS-Datei verwenden möchten, den folgenden Code hinzu:
7. Jetzt werden Ihre CSS-Stile auf Ihre HTML-Datei angewendet.
Das ist alles! Jetzt können Sie Django einfach eine CSS-Datei hinzufügen und diese zum Stylen Ihrer Seiten verwenden.
