Heim >WeChat-Applet >Mini-Programmentwicklung >Eine kurze Analyse zur Verwendung der Textkomponente in Miniprogrammen

Eine kurze Analyse zur Verwendung der Textkomponente in Miniprogrammen

青灯夜游
青灯夜游nach vorne
2021-12-08 10:05:423158Durchsuche

Wie verwende ich eine Textkomponente in einem Miniprogramm? Der folgende Artikel stellt Ihnen vor, wie Sie die Textkomponente im Miniprogramm verwenden. Ich hoffe, er ist hilfreich für Sie!

Eine kurze Analyse zur Verwendung der Textkomponente in Miniprogrammen

Im WeChat-Applet wird der Komponententext zum Anzeigen von Text verwendet. Der grundlegende Verwendungscode lautet wie folgt:

<text >测试使用</text>

Eine kurze Analyse zur Verwendung der Textkomponente in Miniprogrammen

1. Grundlegende Stileinstellung

Die grundlegende Verwendung ist relativ einfach Lassen Sie uns als nächstes die Einstellung des Textstils besprechen. Legen Sie zunächst eine Klasse dafür fest und schreiben Sie dann den Stil in die entsprechende WXSS-Datei. Für Schriftarten ist die häufig verwendete Konfiguration die Konfiguration von Schriftgröße, Farbe. und Dicke

<text class="text">测试使用</text>

Eine kurze Analyse zur Verwendung der Textkomponente in MiniprogrammenSchriftstärke: Legen Sie die Dicke der Textschrift fest. Der Wertebereich liegt zwischen 100 und 900, Wert: normal: Normalgröße entspricht 400. fett: fett, entspricht 700

2. Rahmeneinstellungen

    Rahmenbreite: Legen Sie die Rahmenbreite fest: Allgemeine Werte: mittel: Standardwert, entspricht 3 Pixel. dünn: 1px. dick: 5px. Darf kein negativer Wert sein.
  • Rahmenfarbe: Legen Sie die Rahmenfarbe fest.
  • border-top: Legen Sie den oberen Rand fest.
  • border-top-width, border-top-style, border-top-color legen die Breite, den Stil und die Farbe fest.
  • border-right: Legen Sie den rechten Rand fest.
  • border-bottom: Legen Sie den unteren Rand fest.
  • border-left: Legt den linken Rand fest.
  • border-radius: Legt fest, dass das Objekt einen abgerundeten Rand verwendet. Der Wert ist eine Zahl oder ein Prozentsatz.
  • border-style (Rahmenstil) gängige Stile sind: (Rahmenfarbe, Rahmenbreite) Rahmenbezogene Einstellungen
  • gepunktet (gestrichelte Linie) |.


    .text {
      /* 字体大小 */
      font-size: 20px;
      /* 字体颜色 */
      color: red;
      /* 字体风格-粗细 */
      font-weight: bold;
    }

Eine kurze Analyse zur Verwendung der Textkomponente in MiniprogrammenZum Beispiel können Sie den Rand auch mit abgerundeten Ecken und inneren und äußeren Rändern einstellen

Eine kurze Analyse zur Verwendung der Textkomponente in Miniprogrammen

3. Kursivschrift setzen

durch Schriftart, Wert: Normal normale Schriftart , kursiv kursiv, schräge Schriftart.

.text {
  /* 字体大小 */
  font-size: 20px;
  /* 字体颜色 */
  color: red;
  /* 字体风格-粗细 */
  font-weight: bold;

  border-color: blue;
  border-width:3px;
  border-style: solid;
  
}

Eine kurze Analyse zur Verwendung der Textkomponente in Miniprogrammen

4. Unterstreichung setzen

.text {
  /* 字体大小 */
  font-size: 20px;
  /* 字体颜色 */
  color: red;
  /* 字体风格-粗细 */
  font-weight: bold;

  border-color: blue;
  border-width:3px;
  border-style: solid;

  
  /* 内边距 */
  padding: 10px;
  /* 外边距 */
  margin: 10px ;
  /* 设置边框圆角 从左向右 */
  /* 左上角 右上角 右下角 左下角 */
  border-radius: 2px 4px 10px 20px;

}
Textdekoration: durchgestrichen;

Eine kurze Analyse zur Verwendung der Textkomponente in Miniprogrammen

5. Satz von langen Textabsätzen

.text2{
/*文字排版--斜体*/
font-style:italic;
}

【Verwandtes Lernen Empfohlen: Eine kurze Analyse zur Verwendung der Textkomponente in MiniprogrammenMini-Tutorial zur Programmentwicklung

Das obige ist der detaillierte Inhalt vonEine kurze Analyse zur Verwendung der Textkomponente in Miniprogrammen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme:
Dieser Artikel ist reproduziert unter:juejin.cn. Bei Verstößen wenden Sie sich bitte an admin@php.cn löschen