Lernen Sie Webstandards kennen und befolgen Sie Webstandards für Entwicklung und Produktion. 52CSS.com hat mit Ihnen viele Probleme im Zusammenhang mit dem Layout besprochen, und der Hauptinhalt der Seite besteht aus Bildern und Text. Heute werden wir mit Ihnen die Probleme im Zusammenhang mit dem Textlayout im CSS-Webseitenlayout besprechen.
So legen Sie Schriftart, Farbe, Größe, Absatzabstand, Initiale und Einzug der ersten Zeile fest. Abschließend werden wir über einige häufig verwendete chinesische Layouts auf Webseiten sprechen, z. B. das Abschneiden chinesischer Schriftzeichen, den Zeilenumbruch mit fester Breite (Wortumbruch und Wortumbruch) usw. Da ich nur einige Anwendungserfahrungen schreibe, können Sie sich gerne auf weitere Tutorials auf 52CSS.com beziehen, wenn Sie eine vollständige Einführung in die CSS-Eigenschaften und ein tiefergehendes Studium benötigen.
1. Legen Sie mithilfe der Schriftart usw. Schriftart, Farbe, Größe usw. des Textes fest.
„font-style“ legt Kursivschrift fest, z. B. „font-style: italic“;
Schriftstärke legt die Textstärke fest, z. B. Schriftstärke: fett;
„font-size“ legt die Textgröße fest, z. B. „font-size: 12px“ (oder 9pt, Informationen zu Anzeigeproblemen in anderen Einheiten finden Sie im CSS-Handbuch).
Zeilenhöhe legt den Zeilenabstand fest, z. B. Zeilenhöhe: 150 %;
Farbe legt die Textfarbe fest (Hinweis, nicht die Schriftfarbe), z. B. Farbe: Rot;
Schriftfamilie legt die Schriftart fest, z. B. Schriftfamilie: „Lucida Grande“, Verdana, Lucida, Arial, Helvetica, Song Dynasty, serifenlos (dies ist eine gängige Schreibmethode);
2. Absatzlayout: Verwenden Sie Rand, Abstand und Textausrichtung.
Chinesische Absätze verwenden das <p>-Tag (oder andere Container) für den linken und rechten Rand (entspricht dem Einzug) und den Leerraum vor und nach dem Absatz. Zum Beispiel:
Beispiel-Quellcode [www.downcodes.com]
P{
Rand: 18px 6px 6px 18px;
/*Sie sind oben, rechts, unten, links, im Uhrzeigersinn, beginnend bei zwölf Uhr*/
}
Verwenden Sie text-align zur Textausrichtung, zum Beispiel:
Beispiel-Quellcode [www.downcodes.com]
P{
text-align: center; /*zentrierte Ausrichtung*/
}
Zu den Ausrichtungsmethoden gehören „links“, „rechts“ und „Blocksatz“ (beide Enden ausrichten).
Es gibt viele Anfänger, die mit Rand und Polsterung nicht sehr vertraut sind. Die Darstellung finden Sie im Bild unten.
3. Vertikaler Text: Verwenden Sie den Schreibmodus.
Das Schreibmodus-Attribut hat zwei Werte: lr-tb und tb-rl. Ersteres ist die Standardeinstellung links-rechts, oben-unten und letzteres ist oben-unten-rechts-links.
Zum Beispiel:
Beispiel-Quellcode [www.downcodes.com]
P{
Schreibmodus: tb-rl;
}
Kombinierbar mit Richtungssatz.
4. Aufzählungsproblem: Verwendung des Listenstils
Zu den Aufzählungszeichen in CSS gehören Scheibe (voller Punkt), Kreis (offener Kreis), Quadrat (gefülltes Quadrat), Dezimalzahl (arabische Ziffern), niederromanische Zahl (römische Kleinbuchstaben), obere römische Zahl (römische Großbuchstaben) und Kleinalphabet (englische Kleinbuchstaben), Großbuchstaben (englische Großbuchstaben), keine (keine). Setzen Sie beispielsweise die Aufzählungszeichen einer Liste (ul oder ol) auf Quadrate, wie zum Beispiel:
Beispiel-Quellcode [www.downcodes.com]
li{
Listenstil: quadratisch;
}
Darüber hinaus hat der Listenstil auch einige Werte. Sie können beispielsweise einige kleine Bilder als Aufzählungspunkte verwenden und einfach die URL („Bildadresse“) direkt unter den Listenstil schreiben. 52CSS.com rät jedoch dringend von diesem Ansatz ab. Es wird empfohlen, das Bild als Hintergrund für li festzulegen.
5. Drop-Cap-Effekt
Pseudoobjekt: Der erste Buchstabe kann mit Schriftgröße und Gleitkommazahl verwendet werden, um einen Drop-Cap-Effekt zu erzeugen.
Zum Beispiel:
Beispiel-Quellcode [www.downcodes.com]
p:Anfangsbuchstabe{
Polsterung: 6px;
Schriftgröße: 32pt;
schweben: links;
}
6. Texteinzug: Verwenden Sie Texteinzug
Texteinzug kann die erste Zeile im Container um eine bestimmte Einheit einrücken. Beispielsweise stehen in chinesischen Absätzen in der Regel vor jedem Absatz zwei chinesische Schriftzeichen. Es kann so geschrieben werden:
Beispiel-Quellcode [www.downcodes.com]
P{
text-indent: 2em; /*em ist eine relative Einheit, 2em ist die doppelte Größe eines Wortes*/
}
Wenn die Schriftgröße 12 Pixel beträgt, wird text-indent: 2em um 24 Pixel eingerückt.
7. Kürzung chinesischer Zeichen mit fester Breite: Textüberlauf verwenden (Auslassungseffekt anzeigen)
Die Hintergrundsprache kann verwendet werden, um den Feldinhalt in der Datenbank zu kürzen, z. B. 12 chinesische Zeichen (anschließend werden Ellipsen verwendet). Manchmal ist es jedoch erforderlich, HTML-Tags usw. zu filtern. Bei Verwendung von CSS zur Steuerung tritt dieses Problem jedoch nicht auf. Wenden Sie beispielsweise den folgenden Stil auf eine Liste an:
Beispiel-Quellcode [www.downcodes.com]
li{
Überlauf:versteckt;
Textüberlauf: Auslassungspunkte;
Leerraum:nowrap;
}
8. Zeilenumbruch für chinesische Zeichen (Wörter) mit fester Breite: Verwenden Sie einen Wortumbruch
Wenn Sie beispielsweise viele Ortsnamen (angenommen durch Leerzeichen getrennt) in einem Container mit fester Breite anzeigen möchten, um zu vermeiden, dass die Ortsnamen in der Mitte unterbrochen werden (d. h. ein Wort steht oben und ein anderes Wort). wird in die nächste Zeile umgebrochen). Dann können Sie Wortumbruch verwenden. Zum Beispiel:
Beispiel-Quellcode [www.downcodes.com]
<div style="width:210px;height: 200px;background: #ccc;word-break:keep-all">
Nanjing Shanghai Shanghai Nanjing Shanghai Nanjing Shanghai Shanghai Shanghai Nanjing Shanghai Shanghai Nanjing Shanghai Shanghai Nanjing Shanghai Nanjing Shanghai Nanjing Shanghai Nanjing Shanghai Nanjing Shanghai Nanjing Shanghai Nanjing Shanghai Shanghai Nanjing Shanghai Shanghai
</div>
Es ist zu beachten, dass die Leerzeichen im Inneren nicht durch ersetzt werden können (es muss mindestens ein Softspace vorhanden sein). .
9. Chinesische phonetische Notation: Verwendung von Ruby-Tags und Ruby-Align-Attributen
Beispielsweise können Sie für <ruby>Zhuyin<rt style="font-size: 11px;">zhu yin</rt></ruby> ruby-align verwenden, um die Ausrichtung festzulegen. Dies ist im CSS-Handbuch zu sehen. Weitere Informationen finden Sie im Ruby-Align-Element.