Seitengestaltung: Eine Stilvorlage erstellen

In dieser Einheit lernen Sie, eine eigene CSS-Stilvorlage für Ihre Seite zu erstellen, um das Aussehen Ihrer Seite zu bestimmen.

In einer Stilvorlage (englisch: Stylesheet) werden mittels einer festgelegten Notation die Layout-Eigenschaften und Formatierungen einzelner Bereiche und Elemente einer Internet-Seite bestimmt. Zu den einstellbaren Layout-Eigenschaften zählen Ränder, Abstände, Farben, Schriftschnitte und Größen, Hintergrundbilder und Aufzählungssymbole.

Bei der CSS-Notation folgen auf den Namen eines Elements immer geschweifte Klammern und darin eine Liste von Eigenschaften, die auf einen Wert festgelegt werden und voneinander mit Semikolon getrennt werden:

  Element { Eigenschaft: Wert;
            Eigenschaft: Wert;
            ...                }

• Besuchen Sie vor Beginn der Übung die Seite MusterStilvorlage um sich einige Möglichkeiten zur Formatierung am Beispiel zu vergegenwärtigen.

• Fügen Sie am Ende Ihrer Benutzerseite einen Link auf Ihr zukünftiges Stylesheet ein:

  Layout: [{Benutzer}.css]

• Fügen Sie bei den Seiten-Eigenschaften einen Verweis auf Ihr zukünftiges Stylesheet ein:

  pagestyle={Benutzer}.css

• Speichern Sie Ihre Benutzerseite und springen Sie über das blaue Fragezeichen direkt zur Bearbeitung der (noch leeren) Stilvorlage.

• Fügen Sie in der ersten Zeile einen /* Kommentar */ ein, in dem in eckigen Klammern auf ihre Seite zurückverwiesen wird:

 /* Gestaltungselemente für Xaver, Oktober 2006 */

• Wählen Sie für den Textbereich ".page" eine eigene Schrift, eine helle Hintergrundfarbe und einen Rand aus:

 .page  { font-family: "Arial"; font-size: 120%;
          background-color: snow;
          border: 3px ridge gold;               }

1. Schreiben Sie abschließend Ihre Änderungen mit 'Speichern' zurück und kehren zu Ihrer Seite zurück, um das Ergebnis zu überprüfen.

 

---

Haben Sie noch Fragen zu dieser Seite? Wir helfen Ihnen jederzeit gerne weiter.