Heim  >  Artikel  >  Web-Frontend  >  Detaillierte Erläuterung der Verwendung des Schreibmodus in CSS

Detaillierte Erläuterung der Verwendung des Schreibmodus in CSS

黄舟
黄舟Original
2017-06-20 09:38:552594Durchsuche

Wenn ich beim Erstellen einer Webseite p{Schreibmodus:tb-rl;} verwende, sind die auf der Seite angezeigten chinesischen Schriftzeichen solide und werden normal angezeigt, aber wenn ich meine Schulwebsite erstelle, Füge diesen Code *textrea{writing-mode:tb-rl;} zu meinem Graffiti-Board hinzu. Ich hoffe, dass mein Message-Board stabil ist, aber das Ergebnis ist, dass die Wörter fest angeordnet sind, aber wenn ich sie ansehe, lügen sie nach unten, das heißt, chinesische Schriftzeichen werden um 90 Grad im Uhrzeigersinn gedreht. Warum ist das so und was ist zu tun?

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:

p{
writing-mode: tb-rl;
}

kann mit Richtungslayout kombiniert werden.

Führen Sie das Codefeld aus

<style>
p{
writing-mode: tb-rl;
}
</style>
<p>

Zu den Aufzählungszeichen in CSS gehören Scheibe (durchgezogener Punkt), Kreis (leerer Kreis), Quadrat (durchgezogenes Quadrat), Dezimalzahl (arabische Zahl) und niedriger -roman (römische Kleinbuchstaben), Upper-Roman (römische Großbuchstaben), Lower-Alpha (englische Kleinbuchstaben), Upper-Alpha (englische Großbuchstaben), none (keine). Setzen Sie beispielsweise die Aufzählungspunkte einer Liste (ul oder ol) auf Quadrate, z. B.:

li{
list-style: square;
}

Darüber hinaus hat der Listenstil auch einige Werte, z. B. Sie können einige kleine Bilder als Elementsymbol verwenden. Schreiben Sie einfach die URL („Bildadresse“) direkt unter „Listenstil“. Beachten Sie, dass, wenn der linke äußere Patch (margin-left) einer Elementliste auf Null gesetzt ist, die Aufzählungszeichen für list-style-position: Outside (die Standardeinstellung ist Outside) wird nicht angezeigt. Leider scheinen die oben genannten Aufzählungszeichen die Größe nicht einstellen zu können, und die Punkte und Quadrate sind immer gleich. Und die vertikale Ausrichtung kann nicht eingestellt werden

lr-tb: Standardwert. Der Inhalt des Objekts fließt horizontal von links nach rechts, wobei die nächste Zeile unter der vorherigen Zeile liegt. Alle Glyphen sind vertikal und nach oben gerichtet. Dieses Layout wird in romanischen Sprachen verwendet
tb-rl: oben-unten, rechts-links. Der Inhalt eines Objekts fließt vertikal von oben nach unten und von rechts nach links. Die nächste vertikale Reihe befindet sich links von der vorherigen vertikalen Reihe. Zeichen voller Breite zeigen vertikal nach oben und Zeichen halber Breite wie lateinische Buchstaben oder Katakana werden um 90 Grad im Uhrzeigersinn gedreht. Dieses Layout wird häufig in ostasiatischen Sprachen verwendet.

Beschreibung:
Legt die inhärente Schreibrichtung des Inhaltsblocks des Objekts fest oder ruft sie ab. Westliche Sprachen verwenden tatsächlich die Schreibweise von links nach rechts und von oben nach unten. Aber in asiatischen Sprachen gibt es oft einen Auf-Ab-Rechts-Links-Schreibstil.
Wenn sich der Wert dieses Attributs ändert, ändern sich auch die Funktionen des Attributs text-align und des Attributs vertical-align.
Stylesheet-Eigenschaften sind für die folgenden Elemente nicht vererbbar:
BUTTON CAPTION INPUT INPUT type=button INPUT type=file INPUT type=password INPUT type=reset INPUT type=submit INPUT type=text ISINDEX OPTION TEXTAREA

Die Wirkung dieses Attributs ist nicht kumulativ. Wenn beispielsweise der Wert dieser Eigenschaft des übergeordneten Objekts auf tb-rl festgelegt ist, führt das Festlegen des Werts dieser Eigenschaft des untergeordneten Objekts auf tb-rl nicht zu einer Drehung des untergeordneten Objekts.
Wenn die Schreibmoduseigenschaft des Objekts anders eingestellt ist als die seines übergeordneten Objekts, erhält es sein eigenes Layout. Die Breite eines solchen Objekts wird anhand der Höhe seines ersten angeordneten übergeordneten Objekts bestimmt.
Wenn Sie Objekte mit unterschiedlichen Schreibmodus-Eigenschaftswerten verwenden, erhalten Sie durch die Angabe bestimmter Größen für jedes Objekt eine bessere Gesamtkontrolle über deren Layout.
Diese Eigenschaft ist für das currentStyle-Objekt schreibgeschützt. Es ist für andere Objekte lesbar und beschreibbar.
Die entsprechende Skriptfunktion ist writingMode.

Ein Beispiel für vertikales Textlayout:

.verticle-mode {   
    writing-mode: tb-rl;   
    -webkit-writing-mode: vertical-rl;         
    writing-mode: vertical-rl;   
}   
/* IE7比较弱,需要做点额外的动作 */  
.verticle-mode {   
    *width: 120px;   
}   
.verticle-mode h4,   
.verticle-mode p {   
    *display: inline;   
    *writing-mode: tb-rl;   
}   
.verticle-mode h4 {   
    *float:rightright;   
}

Der HTML-Code lautet wie folgt:

<div class="verticle-mode">  
    <h4>咏柳</h4>  
    <p>碧玉妆成一树高,<br>万条垂下绿丝绦。<br>不知细叶谁裁出,<br>二月春风似剪刀。</p>  
</div>

Das obige ist der detaillierte Inhalt vonDetaillierte Erläuterung der Verwendung des Schreibmodus in CSS. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme:
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn