Detaillierte Einführung in CSS-Schrift-, Text- und Listeneigenschaften

1. Schrifteigenschaften

Farbe, gibt die Farbe des Textes an, z. B. div{color:red;}

font-style, gibt die Art der Textanzeige an, z. B. p.normal {font-style: normal;}, was normal (normale Anzeige), italic (kursive Anzeige mit einigen Änderungen in der Schriftstruktur) und oblique (schräge Anzeige, die einfach eine schräge Version des Textes ist) umfasst.

font-variant, setze kleine Großbuchstaben, kleine Großbuchstaben unterscheiden sich von normalen Großbuchstaben und sind keine Kleinbuchstaben. Beispiel p {font-variant: small-caps; }, Attributwert: normal (Standardwert), small-caps (kleine Großbuchstaben), inherit (vom übergeordneten Element geerbt)

font-weight, legt die Schriftstärke des Textes fest, einschließlich 4 Attributwerten: normal (normal, Standardwert), fett (fett), fetter (fetter), leichter (leichter), und kann auch 9 numerische Stufen von "100 bis 900" festlegen, 400 entspricht normal, 700 entspricht fett

font-size, legt die Schriftgröße des Textes fest, z. B. div {font-size: 30px; }. Pixel werden normalerweise als Einheit zum Festlegen absoluter Größen verwendet, und em wird als Einheit zum Festlegen relativer Größen verwendet. Die Standardschriftgröße des Textes im Browser ist 16px = 1em.

font-family, definiert die Schriftfamilie des Textes, z. B. h1 {font-family:宋体, serif;}. Um zu verhindern, dass der Benutzeragent die festgelegte Schriftart nicht installiert, kann dieses Problem durch die Verwendung eines bestimmten Schriftnamens + einer universellen Serifenschriftfamilie gelöst werden

Ähnlich wie bei der Hintergrundabkürzung können Sie auch die Schriftabkürzung verwenden

Im Gegensatz zur Hintergrundabkürzung müssen die Attributwerte der Schriftabkürzung jedoch in der durch die offiziellen Vorschriften festgelegten Reihenfolge geschrieben werden (die oben aufgeführte Reihenfolge, Farbe gehört nicht zu den Schriftattributen), und der Größenattributwert und der Familienattributwert müssen in der durch die offiziellen Vorschriften festgelegten Reihenfolge stehen.

2. letter-spacing, Zeichenabstand festlegen, Beispiel: div {letter-spacing: 3px; }

3. Opazität, legen Sie die Farbtransparenz für das gesamte Element fest (einschließlich Text, Hintergrund usw.). Der Attributwertebereich liegt zwischen "0 und 1", 1 ist undurchsichtig, 0 ist vollständig transparent, ähnlich dem "a" in rgba

4. Überlauf, legt den Anzeigemodus fest, wenn der Inhalt das Elementfeld überläuft. Wird durch Festlegen des Attributwerts gesteuert: sichtbar (Standardwert, der Inhalt wird nicht verarbeitet, Überlaufanzeige), ausgeblendet (versteckt), automatisch (automatisch, Bildlaufleiste bei Überlauf anzeigen), scrollen (Bildlaufleiste anzeigen).

5.text-overflow, legt den Anzeigemodus fest, wenn Text über das enthaltene Element hinausläuft, Attributwerte: clip (Text abschneiden), ellipse (ellipse anzeigen, um den abgeschnittenen Text darzustellen), string (eine bestimmte Zeichenfolge verwenden, um den abgeschnittenen Text darzustellen)

6.white-space, legt fest, wie mit Leerzeichen und Zeilenumbrüchen innerhalb eines Elements umgegangen werden soll

Eigenschaftswert:

normal, Leerzeichen und Zeilenumbrüche werden vom Browser ignoriert

Pre-, Leerzeichen und Zeilenumbrüche werden vom Browser beibehalten

Nowrap, der Text wird in der gleichen Zeile angezeigt und nicht umbrochen

vorab umbrechen, Leerzeichen beibehalten, aber normal umbrechen (Zeilenumbrüche und Zeilenumbruch beibehalten)

vor der Zeile, Leerzeichen zusammenführen, aber Zeilenumbrüche beibehalten

erben, erbt den Leerzeichen-Eigenschaftswert vom übergeordneten Element

7.text-align, Textausrichtung, Attributwert: links, zentriert, rechts, Beispiel: p {text-align: center; }

8.text-decoration, gibt an, ob der Text Dekorationen hat oder nicht, Attributwerte: none (Standard, keine), underline (Textdekoration unterstreichen), overline (Textdekoration überstreichen), line-through (Textdekoration durch Linie, ähnlich wie durchgestrichen), blink (Text blinkt)

9. Texttransformation, legt die Groß-/Kleinschreibung der Buchstaben im Text fest, Attributwerte: keine (Standard, keine), Großschreibung (wandelt den ersten Buchstaben jeder Reihenfolge in Großbuchstaben um), Großbuchstaben (wandelt alle Buchstaben in Großbuchstaben um), Kleinbuchstaben (wandelt alle Buchstaben in Kleinbuchstaben um)

10. Texteinzug: Legen Sie den Einzug für die erste Textzeile fest. Der Attributwert ist eine Zahl. Beispiel: p {text-indent: 2em; } Der Attributwert kann auch in Pixeln (px) ausgedrückt werden.

11. Zeilenumbruch, legen Sie fest, ob die aktuelle Zeile umgebrochen wird, wenn sie die Grenzen des angegebenen Containers überschreitet, Attributwert: normal (Standard, nur an zulässigen Silbentrennungspunkten umbrechen), Wortumbruch (innerhalb langer Wörter oder URL-Adressen umbrechen)

12.vertical-align, legt die vertikale Ausrichtung des Textes fest, also die Ausrichtung der Elemente im Container relativ zum Inhalt im übergeordneten Element.

Gemeinsame Attributwerte: top (oben ausgerichtet), middle (zentriert ausgerichtet), bottom (unten ausgerichtet), super (vertikale Ausrichtung von hochgestelltem Text), sub (vertikale Ausrichtung von tiefgestelltem Text)

Testcode:

<!DOCTYPE html>
<html lang="de">
<Kopf>
    <meta charset="UTF-8">
    <title>CSS-Import</title>
    <Stil>
        div{
            Breite: 500px;
            Höhe: 300px;
            Hintergrundfarbe: Aquamarin;
        }
        A{
            Anzeige: Inline-Block; Höhe: 150px; Breite: 100px; Hintergrundfarbe: blanchedalmond;
            vertikale Ausrichtung: unten; Rand: 3em 0em 0em 0em;
        }
    </Stil>
</Kopf>
<Text>
    <div>
        Test der vertikalen Ausrichtung vertikale Ausrichtung <a href="">leerer Link</a>
    </div>
</body>
</html>

Testergebnisse:

13. Zeilenhöhe, legen Sie die Zeilenhöhe des Objekts fest (negative Werte sind nicht zulässig), Attributwert: normal (Standard), Zahl (legen Sie eine Zahl fest, diese Zahl wird mit der aktuellen Schriftgröße multipliziert, um den Zeilenabstand/die Zeilenhöhe festzulegen), Länge (legen Sie einen Zeilenabstand auf einen festen Wert fest)

Wir verwenden im Allgemeinen die Zeilenhöhe, um eine Textzeile vertikal zu zentrieren. Wenn die Zeilenhöhe der Containerhöhe entspricht, ist der Text vertikal zentriert.

14.list-style-image, legt das Bild (Aufzählungszeichen) des Listenelementmarkers fest. Es gibt nur ein URL-Attribut zur Führung des Bildes. Die Syntax lautet: ul {list-style-image: url("markimg.jpg"); }

Das Zurücksetzen des gesamten Aufzählungspunkts muss auf <ul> angewendet werden, und die einzelnen Einstellungen werden auf <li> angewendet.

15.list-style-position, legt fest, wie die Listenelementmarkierungen und der Textinhalt angeordnet werden, Attributwert: outside (Standard, Aufzählungspunkte werden außerhalb des Textes platziert), inside (Aufzählungspunkte werden innerhalb des Textes platziert), Syntax: ul {list-style-position: inside; }

16.list-style-type, legt die vom Listenelement verwendete voreingestellte Markierung fest (die Wirkung ist ähnlich dem Style-Attribut in der ul-Zeile in HTML), Attributwert: none (kein Symbol), disc (ausgefüllter Kreis), circle (hohler Kreis), square (ausgefülltes Quadrat), Syntax: ul {list-style-type:disc; }

17. Abkürzung für „list-style“. Die vorherigen Attribute werden zu einem zusammengesetzten Attribut zusammengeführt. Über das Attribut „list-style“ können mehrere Attributwerte definiert werden. Die Schreibreihenfolge der Attributwerte ist nicht streng: list-style-image list-style-position list-style-type

Syntaxbeispiel: ul {list-style: url ("markimg.jpg") outside disc; } . Der Aufzählungspunkt am Ende dient dazu, das Bild zu ersetzen, wenn es nicht richtig angezeigt wird.

Dies ist das Ende dieses Artikels über CSS-Schriftarten, Text und Listenattribute. Weitere relevante Inhalte zu CSS-Schriftarten, Text und Listenattributen finden Sie in den vorherigen Artikeln von 123WORDPRESS.COM oder in den folgenden verwandten Artikeln. Ich hoffe, dass jeder 123WORDPRESS.COM in Zukunft unterstützen wird!