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

Details zu benutzerdefinierten Vue3-Anweisungen

Auszeichnungssprache - CSS-Stile für Text festlegen

Details zu benutzerdefinierten Vue3-Anweisungen

Detailliertes Tutorial zur Tomcat-Installation und -Bereitstellung in Windows 10

CSS Sticky Footer-Implementierungscode

Detaillierte Erläuterung des Vorgangs zum Löschen der integrierten Version von Python in Linux

Vue3 (Teil 2) Integration von Ant Design Vue

Tutorial zur Remote-Verbindung mit einer MySQL-Datenbank unter Linux

So erstellen Sie eine kontinuierliche Integrationsumgebung mit Jenkins+Maven+Git auf CentOS7

So kompilieren und installieren Sie OpenCV unter Ubuntu

Vue implementiert Funktionen zum Hinzufügen, Löschen und Ändern des lokalen Speichers

Beispielcode zur Implementierung des wellenförmigen Wasserballeffekts mit CSS

Artikel empfehlen

Warum MySQL die Verwendung von Unterabfragen und Verknüpfungen nicht empfiehlt

Wie kompliziert ist die Priorität von CSS-Stilen?

So implementieren Sie eine steuerbare gepunktete Linie mit CSS

So setzen Sie das MySQL-Root-Passwort unter Windows zurück

Vue+echarts realisiert Fortschrittsbalken-Histogramm

Verwenden Sie semantische Tags, um Ihr HTML kompatibel mit IE6,7,8 zu schreiben

Vue implementiert die Internationalisierung der Sprachumschaltung für Webseiten

So erlauben Sie den Remotezugriff auf offene Ports in Linux

Detaillierte Erklärung der dynamischen Linkbibliothek, die die C/C++-Methode in Python in Ubuntu aufruft

Interviewfragen: Der Unterschied zwischen dem Holy Grail-Layout und dem Double-Wing-Layout

JS verwendet Clip-Pfad, um eine dynamische Bereichs-Clipping-Funktion zu implementieren

CSS sorgt dafür, dass der Footer automatisch unten bleibt, wenn die Inhaltshöhe nicht ausreicht

Reines CSS-Problem mit benutzerdefinierten mehrzeiligen Auslassungspunkten (vom Prinzip bis zur Implementierung)

mysql erstellt Root-Benutzer und normale Benutzer sowie Änderungs- und Löschfunktionen

Vor- und Nachteile von bedingten Kommentaren im Internet Explorer