Was sind die Haupteigenschaften von CSS-Texteinstellungen?

Die Hauptattribute der CSS-Texteinstellungen sind: Schriftfamilie, Schriftgröße, Farbe, Textausrichtung, Textdekoration, Rahmen, Textschatten, Wortkrümmung, Wortumbruch, Richtung usw.

Die Betriebsumgebung dieses Tutorials: Windows7-System, CSS3- und HTML5-Version, Dell G3-Computer.

Eine Sammlung verschiedener CSS-Textattribute Schriftgröße.

font-weight: Legen Sie die Dicke des Textes fest.

font-style: Legen Sie die Schriftneigung fest. Mögliche Attribute sind normal, kursiv, schräg.
line-height: Legen Sie den Zeilenabstand fest Schriftart;
Farbe Schriftfarbe
• 2. Textattribute

• text-align: Steuern Sie die Ausrichtung des Textes

• text-indent: Steuern Sie den Einzug der ersten Textzeile, entweder px oder %;

white-space: Leerzeichen im Dokument Attributwert:

• noraml: Standardmäßig werden mehrere Leerzeichen ignoriert und nur ein Leerzeichen ausgegeben

• nowrap: Erzwingen keine Zeilenumbrüche

• pre: Leerzeichen/Einrückungen/Zeilenumbrüche bleiben erhalten

  pre-line: Leere Tabellen zusammenführen (mehrere Leerzeichen geben nur ein Leerzeichen aus)
  pre-warp: Leerzeichen/Einrückungen bleiben erhalten bleiben erhalten, Zeilenumbrüche sind normal;

  • letter-spacing: Steuert den Abstand zwischen Buchstaben;

  • text-overflow: Was passiert, wenn Text über das enthaltende Element hinausgeht;

  • Clip Text zuschneiden.

  • Ellipse Zeigt Ellipsen zur Darstellung von zugeschnittenem Text an.

string Verwenden Sie die angegebene Zeichenfolge, um den zugeschnittenen Text darzustellen.

• Wortabstand: Kontrollieren Sie den Abstand der Leerzeichen zwischen Wörtern. Verwenden Sie Leerzeichen, um Wörter zu unterscheiden. Sowohl Chinesisch als auch Englisch sind in Ordnung.

  • 3. Unterstreichungsattribut: Kontrollieren Sie, ob die Text ist unterstrichen. Mögliche Werte sind

  • none Keine Unterstreichung

  • overline Definiert eine Zeile im Text.

  • line-through definiert eine Linie, die unter dem Text verläuft.
• underline definiert eine Zeile unter dem Text.

4. Groß-/Kleinschreibung umwandeln

• keine Konvertierung;

• capitalize: Der erste Buchstabe jedes Wortes wird großgeschrieben;

Großbuchstaben: In Großbuchstaben umwandeln;
[Empfohlenes Tutorial:
• CSS-Video-Tutorial]

Attribut Beschreibung

border

abgekürztes Attribut, das zum Festlegen der Attribute für vier Seiten in einer Anweisung verwendet wird.
border-style

• wird verwendet, um den Stil aller Ränder eines Elements festzulegen oder den Rahmenstil für jede Seite einzeln festzulegen.

• border-width

Abkürzungsattribut, mit dem die Breite aller Ränder eines Elements oder die Breite jedes Rahmens einzeln festgelegt werden kann.
border-color

Kurzschriftattribut, legen Sie die Farbe der sichtbaren Teile aller Ränder des Elements fest, oder legen Sie die Farbe für jede der 4 Seiten fest.

border-bottomAbkürzungsattribut, mit dem alle Attribute des unteren Rands in einer Anweisung zusammengefasst werden.

z. B.:

box-shadow: 10px 5px 10px red inset;

box-shadow:盒子阴影;

可以有五个值 (h-shadow水平阴影位置,v-shadow垂直阴影位置,blur模糊距离,spread阴影尺寸, color， inset/outset内外阴影 )

eg:

{
  overflow:hidden;
  white-space:nowrap;
  text-overflow:ellipsis;
}

7、文本超出换行

• Word-warp:允许长单词转换到下一行

• Word-break:允许在单词内转行(自动换行)

8、文字摆放形式

direction

Wortverzerrung: Lang zulassen Wörter, die in die nächste Zeile umgewandelt werden sollen
Wortumbruch: Zeilenumbrüche innerhalb von Wörtern zulassen (automatischer Zeilenumbruch)

Richtung: Textplatzierung Richtung

Attributwert:
ltl: Von links nach rechts
rtl: Von rechts nach links

9. Der Text überschreitet den Zeilenumbruch

• Wortverzerrung: Lang zulassen Wörter, die in die nächste Zeile umgewandelt werden sollen

11. Eine einzelne Textzeile überschreitet die Anzeige von Auslassungspunkten

{
  overflow:hidden;
  word-break: break-all;
  display: -webkit-box;
  -webkit-line-clamp: 3; /*限制在一个块元素显示的文本的行数*/
  -webkit-box-orient: vertical;
  text-overflow:ellipsis;
}

12. Wenn die Anzahl der Zeilen mehrzeiligen Textes den Grenzwert überschreitet, ersetzen Sie ihn durch Auslassungspunkte
rrreee

Programmiervideo! !

Das obige ist der detaillierte Inhalt vonWas sind die Haupteigenschaften von CSS-Texteinstellungen?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!