Klicken Sie hier, um zur Spalte Wulin.com HTML Tutorial zurückzukehren. Wenn Sie das CSS -Tutorial durchsuchen möchten, klicken Sie bitte hier.
Oben: Markup Language-CSS-Layout . Kapitel 13 Geben Sie einen Stil für Text an
Ich denke, es ist eine gute Idee, die Praxis zu diskutieren, CSS zu verwenden, um Textstile in einem Kapitel festzulegen. Im Allgemeinen ist es wahrscheinlich der Ort, an dem CSS am meisten verwendet wird, selbst für Websites, die den Standards nicht vollständig entsprechen. Entfernen Sie die wiederkehrenden Tags auf Webseiten, die für Designer einst (und jetzt) sehr attraktiv waren, und es ist nicht schwierig, den großen Vorteil der Verwendung von CSS zur Steuerung des Textdrucks zu erkennen, dh den Inhalt und die Anzeigemethoden weiter zu trennen.
Aus vielen früheren Beispielen wissen wir, dass CSS mit vielen Situationen umgehen kann, und das Setzen von Textstilen ist der einfachste Weg, um Designelemente für die grundlegendsten Webseiten hinzuzufügen. Gleichzeitig kann das Hinzufügen von CSS in Text auch verhindern, dass wir unnötige Bilder auf der Seite hinzufügen.
In diesem Kapitel werden wir sehen, wie CSS ein langweiliges und gewöhnliches Text in eine andere Höhe (in neuen Farben, Größen und Schriftarten) bringt. Wie kann man Hypertext cooler aussehen?
Das Angeben von Textstilen ist einer der besten Jobs, in denen CSS gut ist, auch wenn sie sich den Browsern gegenübersehen, die etwas alt sind und unvollständige CSS -erweiterte Funktionen unterstützen. In der Vergangenheit möchten Designer und Entwickler möglicherweise Webseiten erstellen, die unerträglich und für heutige Standards schwer zu verwenden sind, wenn sie Texte entwerfen, um Größe und mutige Effekte zu erzielen (haben Sie jemals Webseiten gesehen, auf denen Texte hauptsächlich durch Bilder dargestellt werden?
Um Ihnen einige Alternativen zur Verwendung von Bildern zu bieten und die obige Frage zu beantworten, beginnen Sie in diesem Kapitel mit einem Absatz des Textes, der noch nicht gestylt wurde, und fügen ihm nach und nach verschiedene CSS -Regeln hinzu, was es zu einem überzeugenden Design macht. Die sich ständig verändernden Zeiten
Betrachten Sie zunächst einen Text, der in der voreingestellten Schriftart des Browsers verarbeitet wird. In meinem Fall beträgt die voreingestellte Schrift 16 Pixel -Mal. Verwenden Sie den Safari-Browser auf Mac OS X. Aus diesem Grund wird der von Ihnen angezeigte Text auf Anti-Aliasing-Weise dargestellt. Wenn Sie Windows XP verwenden und ClearType starten, können Sie einen ähnlichen Effekt erkennen.
Zeiten (oder variante Zeiten neuer Roman) sind für viele Browser voreingestellte Schriftarten. Dies kann jedoch von den Benutzern leicht in ihre eigenen Lieblings -Schriftarten geändert werden, sodass Sie sich sicherlich nicht auf diesen voreingestellten Wert verlassen können.
Abbildung 1301 zeigt den in diesem Kapitel verwendeten Textinhalt, der nicht mit Stil hinzugefügt wurde: Ein einfacher Titel mit <h1>, und hier sind drei Tipps für die Heimdekoration.
Abbildung 13-1 Der Browser zeigt den Titel an, und der voreingestellte Effekt des Textes ändert die Zeilenhöhe
Eine der einfachsten und effektivsten Effekte im Textstil ist das Zeilenhöheattribut. Wenn Sie einen zusätzlichen Platz zwischen jeder Textzeile hinzufügen, können Textabsätze das Lesen erleichtern, attraktiver und auch wunderbare Effekte auf Ihre Seite bringen.
Sie können diese Technik abschließen, indem Sie dem <body> -T -Tag die folgenden CSS -Regeln hinzufügen. Natürlich können Sie diese Regel auch anderen Tags hinzufügen, z. B. nur die Leitungshöhe von <p>.
Körper {
Linienhöhe: 1,5EM;
}
Die Bedeutung dieses Codes lautet: Die Zeilenhöhe des Textes auf der Seite sollte das 1,5 -fache der Texthöhe betragen. Ich benutze EM-Einheiten gerne bei der Angabe von Linienhöhe, da sie sich mit der Schriftgröße ändern.
Abbildung 13-2 zeigt den Effekt nach dem Hinzufügen von Zeilenhöhen.
Abbildung 13-2 Effekt nach voreingestellter Text plus Linienhöhe
Es sieht gut aus und die Ergebnisse, die eine kleine Linienhöhe erzielen kann, sind erstaunlich.
Vorherige Seite1 2 3 4 5 Nächste Seite Lesen Sie den vollständigen Text