Heim > Web-Frontend > CSS-Tutorial > Was sind die Haupteigenschaften von CSS-Texteinstellungen?

Was sind die Haupteigenschaften von CSS-Texteinstellungen?

青灯夜游
Freigeben: 2023-01-03 09:31:04
Original
6255 Leute haben es durchsucht

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

Was sind die Haupteigenschaften von CSS-Texteinstellungen?

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

Attributwert:

  • 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.

border-bottom-colorLegt die Farbe des unteren Randes des Elements fest. border-bottom-styleLegen Sie den Stil des unteren Rands des Elements fest. border-bottom-widthLegen Sie die Breite des unteren Rands des Elements fest. border-left Abkürzungsattribut, mit dem alle Attribute des linken Rands in einer Anweisung zusammengefasst werden. border-left-colorLegen Sie die Farbe des linken Randes des Elements fest. border-left-styleLegen Sie den Stil des linken Rands des Elements fest. border-left-widthLegt die Breite des linken Randes des Elements fest. border-right Abkürzungsattribut, mit dem alle Attribute des rechten Rands in einer Anweisung zusammengefasst werden. border-right-colorLegt die Farbe des rechten Randes des Elements fest. border-right-styleLegen Sie den Stil des rechten Rands des Elements fest. border-right-widthLegen Sie die Breite des rechten Randes des Elements fest. border-topAbkürzungsattribut, mit dem alle Attribute des oberen Rands in einer Anweisung zusammengefasst werden. border-top-colorLegen Sie die Farbe des oberen Randes des Elements fest. border-top-styleLegen Sie den Stil des oberen Randes des Elements fest. border-top-widthLegen Sie die Breite des oberen Rands des Elements fest. 6. Box-Schatten Unschärfe (Unschärfeabstand, Ausbreitungsschattengröße, Farbe, Innen- und Außenschatten)

z. B.:

box-shadow: 10px 5px 10px red inset;
Nach dem Login kopieren

7 Der Text überschreitet den Zeilenumbruch

box-shadow:盒子阴影;

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

eg:

{
  overflow:hidden;
  white-space:nowrap;
  text-overflow:ellipsis;
}
Nach dem Login kopieren

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)
8. Textplatzierungsformular

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;
}
Nach dem Login kopieren

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

Für weitere Informationen zur Programmierung Wissen, besuchen Sie bitte:

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!

Verwandte Etiketten:
css
Quelle:php.cn
Erklärung dieser Website
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
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage