Lernen Sie, wie Sie in Dreamweaver mithilfe von CSS Farbe, Ausrichtung und andere Textmerkmale festlegen können.
Text für Web-Seiten mit CSS formatieren

 

Im Tutorial Typografie und Web finden Sie weitere Informationen darüber, wie Sie das Design Ihrer Web-Seiten typografisch perfektionieren können.

Wenn Sie die Struktur für Ihren Text in HTML anlegen, wird eine Standardschrift verwendet. Durch das Hinzufügen von CSS-Textstilen lassen sich Gliederung, Lesbarkeit und der optische Gesamteindruck Ihrer Web-Seiten deutlich verbessern.

Text für Web-Seiten mit CSS formatieren

Vorbereitung

Laden Sie die Projektdateien herunter, und extrahieren Sie sie. Öffnen Sie die Datei style-text.html in Dreamweaver, und zeigen Sie die CSS-Datei styles.css in der Ansicht „Teilen“ an. Passen Sie das Fenster mit der Code-Ansicht so an, dass der komplette Text im Design links neben der Saturngrafik angezeigt wird.

Scrollen Sie in der Code-Ansicht nach unten bis zum Kommentar „/* Start here */“.

Datei „style-text.html“ öffnen

Textgröße ändern

Um den H1-Text zu vergrößern, fügen Sie die Eigenschaft font-size unterhalb des H1-Selektors hinzu. Ein H1-Element beschreibt die Hauptüberschrift der Web-Seite.

CSS

h1 {
    margin: 0;
    font-size: 48px;
}

Textgröße ändern

Schriftart ändern

Die Standardschrift für HTML-Seiten ist meist Times New Roman. Sie können die Schriftart ändern, indem Sie die Eigenschaft font-family hinzufügen. Trennen Sie mehrere Schriftarten durch Kommata – der Webbrowser verwendet die erste Schriftart aus der Liste, die auf dem Computer des Endanwenders installiert ist. Fügen Sie immer „sans-serif“ oder „serif“ am Ende der Liste ein. Dann ist sichergestellt, dass der Browser eine geeignete Schrift wählt.

CSS

h1 {
   ...
    font-size: 48px;
    font-family: Gotham, Tahoma, sans-serif;
}

Schriftart ändern

Textausrichtung ändern

Text ist standardmäßig linksbündig. Das können Sie aber durch Hinzufügen der Eigenschaft text-align ändern. Mögliche Werte sind „left“, „right“, „center“ oder „justified“ (für linke, rechte oder zentrierte Ausrichtung bzw. Blocksatz). Fügen Sie die Eigenschaft text-align: center; zum H1-Selektor und zum H2-Selektor hinzu. Ein H2-Element definiert untergeordnete Überschriften auf der Web-Seite.

CSS

h1 {
    ...
    font-family: Gotham, Tahoma, sans-serif;
    text-align: center;
h2 {
    ...
    color: #282828;
    text-align: center;
}

Textausrichtung ändern

Textfarbe ändern

Die Standardfarbe für Text ist Schwarz, aber Sie können die Farbe für das H1-Element durch Hinzufügen der Eigenschaft color und Angabe eines HEX-Wertes ändern. Wenn Sie „color:“ eingeben, erscheint ein Kontextmenü. Machen Sie einen Doppelklick auf die Option für Farbe, und klicken Sie dann im Farbmenü auf die Pipette. Klicken Sie in den dunkelorangenen Bereich der Planetengrafik, um die Farbe auszuwählen. Drücken Sie dann die Eingabetaste. Der HEX-Wert dieser Farbe wird automatisch hinzugefügt. Sie können den HEX-Wert aber auch manuell eingeben. Beachten Sie, dass ein Semikolon folgen muss, um die Eigenschaft zu schließen.

CSS

h1 {
    ...
    text-align: center;
    color: #F47A53;
}  

Textfarbe ändern
Textfarbe ändern

Text kursiv setzen

Mithilfe der Eigenschaft font-style können Sie Text z. B. auch kursiv setzen. Ändern Sie den Textstil des H2-Elements in kursiv, indem Sie diese Eigenschaft mit dem Wert italic hinzufügen.

CSS

h2 {
    …
    text-align: center;
    font-style: italic;
}  

Text kursiv setzen

Schriftstärke ändern

Durch Hinzufügen der Eigenschaft font-weight können Sie Text dünner oder dicker setzen. Die Schriftstärke wird in einem Vielfachen von 100 ausgedrückt, wobei 100 die geringste und 900 die höchste Stärke darstellt. Verwenden Sie diese Eigenschaft, um die Schriftstärke des H2-Elements zu reduzieren.

CSS

h2 {
    …
    font-style: italic;
    font-weight: 300;
}  

Schriftstärke ändern

Weitere Texteigenschaften hinzufügen

Mit text-transform lässt sich Text in Groß- oder Kleinbuchstaben setzen. Mit letter-spacing können Sie den horizontalen Abstand zwischen allen Buchstaben vergrößern, die durch einen Selektor gesteuert werden. Probieren Sie diese Optionen am H1-Element aus.

CSS

h1 {
    ...
    color: #F67A53;
    text-transform: uppercase;
    letter-spacing: .08em;
}

Weitere Texteigenschaften hinzufügen

Beim Selektor p sehen Sie die Eigenschaft line-height. Sie bestimmt den Zeilenabstand im Text. Wenn Sie die Eigenschaft „line-height“ löschen, sehen Sie sofort, wie sich diese Änderung auf die Lesbarkeit des Textes auswirkt. Drücken Sie Befehl+Z (macOS) oder Strg+Z (Windows), um diese Änderung rückgängig zu machen.

Eigenschaft „line-height“ verwenden

Wählen Sie Vorschau in Browser, und überprüfen Sie den formatierten Text in Ihrem bevorzugten Webbrowser.

Speichern Sie die Datei, damit Ihre Änderungen angezeigt werden.

Vorschau in Browser
04/13/2018
War diese Seite hilfreich?