Wenn Sie eine Webanwendung mit Java Server Pages (JSP) entwickeln, müssen Sie wahrscheinlich Stile hinzufügen, um Ihre Seiten zu dekorieren und zu gestalten. In diesem Artikel erfahren Sie, wie Sie CSS richtig zu JSP hinzufügen und ein schönes und modernes Aussehen für Ihre Anwendung erstellen.
Der erste Schritt besteht darin, eine CSS-Datei zu erstellen, die alle erforderlichen Stile enthält. Es ist am besten, eine separate Datei mit einer Erweiterung zu erstellen .css zum Beispiel styles.css. In dieser Datei können Sie alle gewünschten Stile für verschiedene Seitenelemente definieren, z. B. Überschriften, Absätze, Tabellen usw.
Nachdem Sie die CSS-Datei erstellt haben, müssen Sie sie an Ihre JSP-Datei anhängen. Dazu müssen Sie das Tag verwenden mit Attribut rel="stylesheet" und den Pfad zur CSS-Datei im Attribut angeben href. Zum Beispiel, .
Jetzt wird Ihre CSS-Datei mit Ihrer JSP-Datei verknüpft und alle darin angewendeten Stile werden auf Ihre Seite angewendet. Sie können auf Klassen und IDs aus Ihrer CSS-Datei zugreifen, indem Sie die entsprechenden Attribute in die HTML-Tags Ihrer JSP-Datei schreiben.
Programmiersprache Java Server Pages
Das Grundprinzip von JSP besteht darin, dass ein Entwickler JSP-Dateien erstellt, die normalen HTML-Code enthalten, der mit Java-Code gemischt ist. Wenn eine Anforderung von einem Client verarbeitet wird, führt der Java-Server den Code auf der JSP aus und generiert eine HTML-Seite, die auf dem Bildschirm des Benutzers angezeigt wird.
Um CSS-Stile zu JSP-Seiten hinzuzufügen, können Sie ein Tag innerhalb eines Elements verwenden . Sie können CSS-Regeln für Seitenstile festlegen, z. B. Farben, Schriftarten, Einrückungen und vieles mehr.
| Element | Die Beschreibung |
|---|---|
| Definiert einen Stilblock für das Dokument. | |
| Definiert Informationen über ein Dokument, einschließlich des Titels, der Metainformationen und anderer Daten. |
In Kombination mit JSP kann CSS verwendet werden, um ein schönes und ansprechendes Design von Webseiten zu erstellen. Dies ermöglicht die Trennung von Programmierlogik und visueller Darstellung, wodurch die Entwicklung und Wartung von Webanwendungen vereinfacht wird.
Als Ergebnis der Verwendung von JSP und CSS können Entwickler dynamische Webseiten mit Java erstellen und diese mit CSS gestalten, um die Benutzeroberfläche für die Benutzer interaktiver und attraktiver zu gestalten.
CSS-Grundlagen
Die Hauptkomponenten von CSS sind Selektore, Eigenschaften und Versuchswerte. Selektoren geben an, auf welche HTML-Elemente der Stil angewendet wird. Eigenschaften legen bestimmte Eigenschaften von Elementen fest, z. B. die Schriftgröße oder die Hintergrundfarbe. Werte definieren bestimmte Eigenschaftswerte, z. B. Rot oder Fett.
CSS-Stile können angegeben werden:
- innerhalb eines HTML-Dokuments mit einem Tag innerhalb eines Blocks ;
- in einer externen CSS-Datei, die mit einem Tag an ein HTML-Dokument angehängt wird .
Beispielcode zum Festlegen des Stils für ein Tag
innerhalb eines HTML-Dokuments:
Beispielcode zum Anfügen einer externen CSS-Datei:
In beiden Fällen werden die Stile auf alle Tags angewendet
in einem Dokument, indem sie eine Schriftgröße von 16 Pixeln und eine blaue Farbe angeben.
Zusätzlich zum Festlegen von Stilen direkt auf HTML-Elemente können Sie CSS verwenden Klassen und Kennzeichnungsnummern für eine flexiblere und punktgenauere Definition von Stilen. Klassen werden mit dem class–Attribut und Bezeichner mit dem id-Attribut angewendet.
Beispielcode zum Festlegen von Stilen für eine Klasse und eine ID:
.red #header In diesem Beispiel wird ein Stil mit einem Selektor verwendet .red wird auf Elemente angewendet, die ein class="red" –Attribut haben, und der Stil mit dem #header-Selektor wird auf das Element mit dem id="header" -Attribut angewendet.
Wenn Sie die Grundlagen von CSS kennen, können Sie ästhetisch ansprechende und verständliche Webseiten erstellen und sie leichter entwickeln und pflegen.
Struktur der CSS-Datei
Selektore: Selektoren bestimmen, welche HTML-Elemente die Stile anwenden. Es gibt verschiedene Arten von Selektoren, z. B. einen Elementselektor, einen Klassenselektor und einen ID-Selektor.
Anzeigen: Die Deklarationen enthalten CSS-Eigenschaften und -Werte, die auf die ausgewählten HTML-Elemente angewendet werden. Jede Deklaration muss in geschweifte Klammern eingeschlossen werden <>.
Eigenschaften: Eigenschaften definieren die spezifischen Attribute eines Elements, das durch Stile geändert werden soll. Einige Beispiele für Eigenschaften umfassen Textfarbe, Schriftgröße und Einzug.
Versuchswerte: Werte definieren spezifische Einstellungen für Eigenschaften. Beispielsweise kann "Gelb" ein Wert für die Eigenschaft "Hintergrundfarbe" sein. Mehrere Werte werden durch Kommas getrennt.
Kommentare: Die Kommentare in der CSS-Datei werden verwendet, um Erklärungen und Erklärungen für den Code hinzuzufügen. Kommentare beginnen mit "/*" und enden mit "*/". Kommentare werden vom Browser ignoriert und werden nicht auf der Webseite angezeigt.
Hier ist ein Beispiel für eine einfache CSS-Dateistruktur:
/* Это комментарий описания CSS-файла *//* Селектор */h1 /* Еще один селектор */p
Dies ist nur die grundlegende Struktur der CSS-Datei und Sie können komplexere Hierarchien erstellen und Ihre Stile mit verschiedenen Selektoren und Eigenschaften organisieren.
