Auszeichnungssprache - CSS-Stile für Text festlegen

Klicken Sie hier, um zum Abschnitt „HTML-Tutorial“ von 123WORDPRESS.COM zurückzukehren. Um das CSS-Tutorial anzuzeigen, klicken Sie hier.
Oben: Auszeichnungssprache – CSS-Layout . Kapitel 13 Textgestaltung Ich dachte, es wäre eine gute Idee, ein Kapitel der Textgestaltung mit CSS zu widmen. Textinhalte sind wahrscheinlich der häufigste Bereich, in dem CSS verwendet wird, selbst bei Websites, die sich nicht vollständig an Standards halten. Die sich wiederholenden <font>-Tags auf einer Seite loszuwerden, war (und ist immer noch) für Designer sehr attraktiv, und es ist nicht schwer, den großen Vorteil der Verwendung von CSS zur Steuerung der Typografie zu erkennen, nämlich eine stärkere Trennung von Inhalt und Präsentation.
Aus vielen der vorherigen Beispiele wissen wir, dass CSS viele Situationen bewältigen kann und dass das Festlegen von Textstilen die einfachste Möglichkeit ist, selbst den einfachsten Webseiten Designelemente hinzuzufügen. Gleichzeitig kann uns die Verwendung von CSS zum Formatieren von Text auch dabei helfen, das Hinzufügen unnötiger Bilder zur Seite zu vermeiden.
In diesem Kapitel werden wir sehen, wie man mit CSS einen langweiligen, gewöhnlichen Text auf eine neue Ebene bringen kann (mit neuen Farben, Größen und Schriftarten). Wie können wir Hypertext cool aussehen lassen?
Das Festlegen von Textstilen ist eine der besten Möglichkeiten von CSS, selbst in älteren Browsern, die die erweiterten Funktionen von CSS nicht vollständig unterstützen. In der Vergangenheit wollten Designer und Entwickler möglicherweise Text so gestalten, dass er andere Effekte als Größe und Fettschrift erzielt, was zu einer Webseite geführt hätte, die nach heutigen Maßstäben unerträglich und schwer zu verwenden ist (haben Sie schon einmal eine Webseite gesehen, auf der der Großteil des Textes durch Bilder dargestellt wird? Aber Sie verwenden zufällig einen Textbrowser...)
Um Ihnen einige Alternativen zur Verwendung von Bildern zu bieten und die obige Frage zu beantworten, beginnen wir in diesem Kapitel mit einem Textstück, das noch nicht formatiert wurde, und fügen ihm nach und nach verschiedene CSS-Regeln hinzu, um ein auffälliges Design daraus zu machen.
Beginnen Sie damit, den Text, den Sie verarbeiten möchten, in der Standardschriftart des Browsers anzuzeigen. In meinem Fall ist die Standardschriftart Times 16 Pixel. Ich verwende den Safari-Browser unter Mac OS X, daher wird der Text mit Antialiasing gezeichnet. Wenn Sie Windows XP verwenden und ClearType aktiviert haben, können Sie einen ähnlichen Effekt sehen.
Times (oder die Variante Times New Roman) ist die Standardschriftart vieler Browser. Benutzer können diese jedoch problemlos in ihre bevorzugte Schriftart ändern, sodass Sie sich nicht auf diese Standardeinstellung verlassen können.
Abbildung 1301 zeigt den unformatierten Text, den wir in diesem Kapitel verwenden: einen einfachen Titel, der mit einem <h1>-Tag gekennzeichnet ist, gefolgt von drei Absätzen mit Tipps zur Inneneinrichtung.

Abbildung 13-1 Browser zeigt Titel, Textvorgaben an Zeilenhöhe ändern Einer der einfachsten und effektivsten Effekte zur Textgestaltung ist die Eigenschaft „line-height“. Wenn Sie zwischen den einzelnen Textzeilen etwas mehr Platz lassen, können Sie Absätze leichter lesbar und attraktiver gestalten und Ihrer Seite außerdem wunderbare Effekte verleihen.
Um diesen Trick zu erreichen, fügen Sie einfach die folgende CSS-Regel zum <body>-Tag hinzu. Sie können diese Regel auch zu anderen Tags hinzufügen, wenn Sie beispielsweise nur die Zeilenhöhe von <p> ändern möchten.

Körper {
Zeilenhöhe: 1,5em;
}

Dieser Code bedeutet: Die Zeilenhöhe des Textes auf der Seite sollte das 1,5-fache der Texthöhe betragen. Ich verwende gerne em-Einheiten, wenn ich die Zeilenhöhe angebe, da sie sich mit der Schriftgröße ändern.
Abbildung 13-2 zeigt den Effekt nach dem Hinzufügen der Zeilenhöhe.

Abbildung 13-2 Die Wirkung der voreingestellten Text- und Zeilenhöhe sieht bereits großartig aus. Es ist erstaunlich, was eine kleine Zeilenhöhe bewirken kann.

Vorherige Seite 1 2 3 4 5 Nächste Seite Mehr lesen

<<: Detaillierte Erläuterung der kombinierten MySQL-Abfrage

>>: Detaillierte Erklärung der Komponentenkommunikation in React

Über den Startfehler, der durch Inkompatibilität zwischen VMware-Workstations und Gerät/Anmeldeinformationen verursacht wird

VMware-Workstations starten den virtuellen Maschi...

Auszeichnungssprache - CSS-Stile für Text festlegen

So installieren Sie Nginx in CentOS7

Implementierung der Kommunikation zwischen Vue und Flask

Warum sind die Bilder in mobilen Web-Apps nicht klar und sehr verschwommen?

Beispiel für die Zuweisung von Werten zu ActiveX-Steuerelementeigenschaften anhand des Parameternamens in einer Webseite

Installation und Daemon-Konfiguration von Redis unter Windows und Linux

Tutorial zur Installation und Konfiguration der kostenlosen Installationsversion von MySQL 5.7.20\5.7.21

Lösung zur Installation von Vim im Docker-Container

Eine detaillierte Einführung in die Speicherverwaltung und -adressierung unter Linux

Schritte zum Erstellen eines Vite-Projekts

CSS-Ansichtsfenstereinheiten für schnelles Layout

Artikel empfehlen

JavaScript-Operationselemente zeigen Ihnen, wie Sie den Seiteninhaltsstil ändern

Lösung für das MySQL-Fehlerproblem 1045 (28000)

Lösung für Tomcat zum externen Speichern von Konfigurationsdateien

Linux verwendet den Binärmodus zur Installation von MySQL

Ubuntu20.04 VNC-Installation und Konfigurationsimplementierung

Über den Startfehler, der durch Inkompatibilität zwischen VMware-Workstations und Gerät/Anmeldeinformationen verursacht wird

Verwenden Sie JavaScript, um Seiteneffekte zu erstellen

Beispiele für die Interaktion zwischen MySQL und Python

Eine kurze Diskussion über die richtige Haltung der Tomcat-Speicherkonfiguration

MySQL-Platzhalter (erweiterte SQL-Filterung)

Zusammenfassung der Verwendung von Element-Formularelementen

nuxt.js Konfiguration mehrerer Umgebungsvariablen

Detaillierte Erklärung zum MySQL-Datenarchivierungstool mysql_archiver

Detailliertes Tutorial zur Installation und Konfiguration der komprimierten Version der MySQL-Datenbank

So verwenden Sie gdb zum Debuggen von Kerndateien in Linux