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.
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
Artikel empfehlen
So verwenden Sie JSX zum Implementieren von Karussellkomponenten (Front-End-Komponentenbildung)
Bevor wir JSX zum Erstellen eines Komponentensyst...
Dieser Artikel zeigt Ihnen, wie die Speicherbereinigung in JavaScript funktioniert
Inhaltsverzeichnis 1. Übersicht 2. Speicherverwal...
Fallstricke basierend auf MySQL-Standardsortierregeln
Der Standardtyp varchar in MySQL ist case-insensi...
Es ist Jahresende, ist Ihr MySQL-Passwort sicher?
Vorwort: Das Jahr neigt sich dem Ende zu. Ist es ...
Lösung für Docker-Container, der Schriftarten wie Songti nicht erkennt
Problemhintergrund: Wenn Sie Docker zum Bereitste...
Unterschied zwischen varchar- und char-Typen in MySQL
Inhaltsverzeichnis vorgenannt VARCHAR-Typ VARCHAR...
Detaillierte JavaScript-Rekursion
Inhaltsverzeichnis 1. Was ist Rekursion? 2. Mathe...
Tiefgreifendes Verständnis der dynamischen und asynchronen Komponenten von Vue
1. Dynamische Komponenten <!DOCTYPE html> &...
Eine kurze Diskussion über die Farbabstimmungsfähigkeiten von Webseiten (ein Muss für Front-End-Entwickler)
Im Allgemeinen sollte die Hintergrundfarbe einer W...
Nach dem Neustart des Baota-Panels wird die Meldung -ModuleNotFoundError: Kein Modul mit dem Namen „geventwebsocket“ angezeigt.
Hintergrund: Da der Server das Flask-Projekt bere...
Beispiel für die Konvertierung eines flachen JavaScript-Arrays in eine Baumstruktur
Inhaltsverzeichnis 10.000 Daten gingen im Hinterg...
Installieren Sie MySQL offline mit RPM unter CentOS 6.4
Verwenden Sie das RPM-Installationspaket, um MySQ...
Einführung in die grundlegenden Konzepte und Technologien der Webentwicklung
Heute stellt dieser Artikel Anfängern einige grun...
So verwenden Sie die Wurmreplikation in einer MySQL-Datentabelle
Einfach ausgedrückt besteht die MySQL-Wurmreplika...
Vue.js verwendet Element-ui, um das Navigationsmenü zu implementieren
In diesem Artikel wird der spezifische Code zur I...