Detaillierte Einführung in CSS-Seitenlayouttechniken

Das Folgende ist eine detaillierte Einführung in CSS-Seitenlayouttechniken, die ich für Sie zusammengestellt habe. Interessierte Studenten können einen Blick darauf werfen.

Textstil festlegen

1. Schriftart

Die von den meisten Benutzersystemen standardmäßig unterstützten chinesischen Schriftarten sind Song, Hei, Youyuan und Kai; die standardmäßig unterstützten englischen Schriftarten sind Arial, Arial Black, Arial Narrow, Century Gothic, Comic SansMS, Times New Roman, usw. . Im Gebrauch werden am häufigsten Song-Dynastie und Arial verwendet.

CSS stellt die Eigenschaft „font-family“ zum Festlegen des Schriftarttyps bereit.
Beispiel: p{font-family: 宋体;}
Hinweis: Wenn mehrere Schriftartattribute gleichzeitig festgelegt werden, ist die Priorität in Ordnung.

2. Schriftgröße

CSS bietet das Attribut „font-size“ zum Festlegen der Schriftgröße.
Beispiel: p{font-size: 12px;}

Relative Größe
px, em, 10 %, größer, kleiner (die letzten beiden sind relativ zum übergeordneten Element)

Absolute Größe
pt, pc, in cm, mm

Schlüsselwörter
xx-klein, x-klein, klein, groß, x-groß,xx-groß

3. Schriftart fett

CSS bietet das Attribut „font-weight“, um die Schriftart fett einzustellen.
Beispiel: p{font-weight: fett;}

Zahlen: 100, 200,…,900

Schlüsselwörter: fett, fetter, heller, normal

4. Textfarbe

CSS stellt das Farbattribut zum Festlegen der Textfarbe bereit.
Beispiel: p{color: red;}

Farbname: rot, grün,……

RGB-Wert: (255,255,255),…….

十Hexadezimaler Wert: #ff0000,…

5. Kursiv

CSS stellt das Attribut „font-style“ zur Verfügung, um die Schriftart kursiv einzustellen. Es gibt drei Attributwerte: normal, kursiv und schräg.
Beispiel: p{font-style: kursiv;}

6. Unterstrichen, oben, durchgestrichen

CSS bereitgestellt Die Schriftart- Dekorationsattributsätze unterstreichen, unterstreichen und durchgestrichen. Es gibt vier Attributwerte: underline (unterstrichen), blink (blinkender Text), overline (obere Zeile) und line-through (durchgestrichen).
Beispiel: p{font-decoration: underline;}

7. Englische Groß-/Kleinschreibung

CSS stellt das Attribut „font-transform“ bereit Legen Sie die Groß- und Kleinschreibung englischer Buchstaben fest. Es gibt vier Attributwerte: „none“, „capitalize“ (der erste Buchstabe wird großgeschrieben), „uppercase“ (alles in Großbuchstaben) und „lowercase“ (alles in Kleinbuchstaben).
Beispiel: p{font-transform: none;}

8. Textabsatzstil

Horizontale Ausrichtung
CSS bereitstellen text-align-Attribut zum Festlegen der horizontalen Ausrichtung. Es gibt vier Attributwerte: left (linksbündig), right (rechtsbündig), center (zentriert) und justify (an beiden Enden ausgerichtet).
Beispiel: p{text-align: left;}

Vertikale Ausrichtung
CSS bietet Schreibmodus- und Layoutflussattribute zum Festlegen der vertikalen Ausrichtung.

Grammatik: Schreibmodus: lr-tb; (links und rechts – oben und unten)
Schreibmodus: tb-rl; ; (horizontale Anordnung)
layout-flow: Vertical-ideographic; (vertikale Anordnung)

Einrückung der ersten Zeile

CSS stellt das Attribut text-indent bereit, um den Einzug der ersten Zeile festzulegen. Attributwerte können Pixelwerte oder Prozentsätze sein.
Beispiel: p{text-indent: 12px;}

Zeilenabstand

CSS bietet das Attribut line-height, um den Zeilenabstand festzulegen. Der Attributwert kann ein Längenwert sein.
Beispiel: p{line-height: 12px;}

Zeichenabstand

CSS bietet das Attribut „letter-spacing“ zum Festlegen des Zeichenabstands. Der Attributwert kann ein Längenwert sein.
Beispiel: p{letter-spacing: 12px;} (Buchstabenabstand)
p{word-spacing: 12px;} (Wortabstand)

Das Obige ist die CSS-Seite, die ich für alle zusammengestellt habe Ich hoffe, dass Ihre Layout-Kenntnisse in Zukunft für alle hilfreich sein werden.

Verwandte Artikel:

Detaillierte Erläuterung grundlegender CSS-Wissenspunkte

Welche Möglichkeiten gibt es, js/css dynamisch zu betreiben? Dateien

CSS-Implementierung von Sprites und Schriftsymbolen

Das obige ist der detaillierte Inhalt vonDetaillierte Einführung in CSS-Seitenlayouttechniken. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!