suchen
HeimWeb-FrontendCSS-TutorialDetaillierte Erläuterung der Verwendung des Schreibmodus in CSS

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 id="咏柳">咏柳</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
Wie viel Spezifität haben @Rules wie @Keyframes und @Media?Wie viel Spezifität haben @Rules wie @Keyframes und @Media?Apr 18, 2025 am 11:34 AM

Ich habe diese Frage neulich bekommen. Mein erster Gedanke ist: seltsame Frage! Bei der Spezifität geht es um Selektoren, und Rules sind keine Selektoren, also ... irrelevant?

Können Sie @Media und @Support -Abfragen nisten?Können Sie @Media und @Support -Abfragen nisten?Apr 18, 2025 am 11:32 AM

Ja, Sie können, und es ist nicht wirklich wichtig in welcher Reihenfolge. Ein CSS -Präprozessor ist nicht erforderlich. Es funktioniert in regulären CSS.

Schnellschluck -Cache -BustingSchnellschluck -Cache -BustingApr 18, 2025 am 11:23 AM

Sie sollten auf jeden Fall weitausgestellte Cache-Header auf Ihren Vermögenswerten wie CSS und JavaScript (und Bilder und Schriftarten und was auch immer) festlegen. Das sagt dem Browser

Auf der Suche nach einem Stapel, der die Qualität und Komplexität von CSS überwachtAuf der Suche nach einem Stapel, der die Qualität und Komplexität von CSS überwachtApr 18, 2025 am 11:22 AM

Viele Entwickler schreiben darüber, wie sie eine CSS -Codebasis pflegen können, aber nicht viele von ihnen schreiben darüber, wie sie die Qualität dieser Codebasis messen. Sicher, wir haben

Datalist dient dazu, Werte vorzuschlagen, ohne Werte durchzusetzenDatalist dient dazu, Werte vorzuschlagen, ohne Werte durchzusetzenApr 18, 2025 am 11:08 AM

Haben Sie jemals ein Formular gehabt, das ein kurzes, willkürliches Stück Text akzeptieren musste? Wie ein Name oder was auch immer. Das ist genau das, wofür es ist. Es gibt viele

Frontkonferenz in ZürichFrontkonferenz in ZürichApr 18, 2025 am 11:03 AM

Ich bin so aufgeregt, nach Zürich, der Schweiz, zur Frontkonferenz zu gehen (liebe diesen Namen und diese URL!). Ich war noch nie in der Schweiz, also bin ich aufgeregt

Erstellen einer serverlosen Full-Stack-Anwendung mit Cloudflare-MitarbeiternErstellen einer serverlosen Full-Stack-Anwendung mit Cloudflare-MitarbeiternApr 18, 2025 am 10:58 AM

Eine meiner Lieblingsentwicklungen in der Softwareentwicklung war das Aufkommen von Serverless. Als Entwickler, der die Tendenz hat, sich in den Details festzuhalten

Erstellen dynamischer Routen in einer Nuxt -AnwendungErstellen dynamischer Routen in einer Nuxt -AnwendungApr 18, 2025 am 10:53 AM

In diesem Beitrag werden wir eine E -Commerce -Store -Demo verwenden, die ich für Netlify erstellt und bereitgestellt habe, um zu zeigen, wie wir dynamische Routen für eingehende Daten erstellen können. Es ist fair

See all articles

Heiße KI -Werkzeuge

Undresser.AI Undress

Undresser.AI Undress

KI-gestützte App zum Erstellen realistischer Aktfotos

AI Clothes Remover

AI Clothes Remover

Online-KI-Tool zum Entfernen von Kleidung aus Fotos.

Undress AI Tool

Undress AI Tool

Ausziehbilder kostenlos

Clothoff.io

Clothoff.io

KI-Kleiderentferner

AI Hentai Generator

AI Hentai Generator

Erstellen Sie kostenlos Ai Hentai.

Heißer Artikel

R.E.P.O. Energiekristalle erklärten und was sie tun (gelber Kristall)
1 Monate vorBy尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. Beste grafische Einstellungen
1 Monate vorBy尊渡假赌尊渡假赌尊渡假赌
Will R.E.P.O. Crossplay haben?
1 Monate vorBy尊渡假赌尊渡假赌尊渡假赌

Heiße Werkzeuge

MinGW – Minimalistisches GNU für Windows

MinGW – Minimalistisches GNU für Windows

Dieses Projekt wird derzeit auf osdn.net/projects/mingw migriert. Sie können uns dort weiterhin folgen. MinGW: Eine native Windows-Portierung der GNU Compiler Collection (GCC), frei verteilbare Importbibliotheken und Header-Dateien zum Erstellen nativer Windows-Anwendungen, einschließlich Erweiterungen der MSVC-Laufzeit zur Unterstützung der C99-Funktionalität. Die gesamte MinGW-Software kann auf 64-Bit-Windows-Plattformen ausgeführt werden.

Dreamweaver CS6

Dreamweaver CS6

Visuelle Webentwicklungstools

WebStorm-Mac-Version

WebStorm-Mac-Version

Nützliche JavaScript-Entwicklungstools

ZendStudio 13.5.1 Mac

ZendStudio 13.5.1 Mac

Leistungsstarke integrierte PHP-Entwicklungsumgebung

Notepad++7.3.1

Notepad++7.3.1

Einfach zu bedienender und kostenloser Code-Editor