Detaillierte Erläuterung einiger häufig verwendeter Eigenschaften von CSS

Häufig verwendete CSS-Eigenschaften

☛ In Bezug auf CSS-Eigenschaften empfehle ich Ihnen, das Handbuch für weitere Details und Bequemlichkeit zu lesen. Ich werde hier einige häufig verwendete Eigenschaften klassifizieren Wählen Sie einfach einige aus. Allgemeine Attributwerte sind nur für Anfänger wie mich gedacht, die gerade erst das Front-End lernen.

1. Schriftstil

Die Abkürzung der Schriftart, geschrieben als font:font-style||.font-weight||font - Größe |. Sonderschrift schräg

♣Kleiner Großbuchstabe t (Schriftartvarian): normal || Kleine Großbuchstabenschrift Kapitälchen

♣Schriftstärke (Schriftstärke): Normal || Häufig verwendet: Fett, Fett || um (px, em, rem) auszudrücken

♣Die Zeilenhöhe der Schriftart: Sie können die Länge px || verwenden (basierend auf der Höhe der Schriftart) ||. Produktfaktor) gibt die Zeilenhöhe an

♣Schriftfamilie (Schriftfamilie): Gibt den Text an, der eine bestimmte Schriftart oder Schriftartenfolge verwenden soll. Der Wert ist in einfache Anführungszeichen gesetzt

demo: body{font-family:helvetica,verdana,sans-serif;}

/*Notizen*/: Nach Priorität geordnet. Mit Kommas trennen. Wie in der Schriftartendefinition oben gezeigt, wird Ihr Text in Verdana angezeigt, vorausgesetzt, Sie haben nicht die Schriftart Helvetica, sondern Verdana auf Ihrem Computer.

❤@font-face eingebettete Schriftart (außerschulische Erweiterung)

@font-face kann die Schriftartdatei auf der Serverseite laden, damit der Browser sie anzeigen kann Schriftartdatei, die sich nicht auf dem Computer des Benutzers befindet. Installierte Schriftarten.

Syntax: @font-face {

font-family: benutzerdefinierter Schriftartname;

src: URL (Schriftartdatei auf dem Server) Relativ oder absoluter Pfad) Format (Schriftart);

}

Beispiel:

@font-face {/*Diese Schreibmethode ist mit allen Browsern kompatibel*/

font-family : bgg;

src: url('fonts/fontawesome-webfont.eot'), /* IE9+ */

url('fonts/fontawesome- webfont .eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */

url('fonts/fontawesome-webfont.woff') format('woff'), / * chrome, Firefox */

url('fonts/fontawesome-webfont.ttf') format('truetype'), /* chrome, Firefox, Opera, Safari, Android, iOS 4.2+*/

url('fonts/fontawesome-webfont.svg') format('svg'); /* iOS 4.1+ */

}

p{ Font-Familie: bgg }

★Andere, weniger häufig verwendete Schriftarten:

♣Beschriftung: Verwenden Sie Textschriftarten für Systemsteuerelemente mit Titeln (z. B. Schaltflächen, Menüs usw.) (CSS2)

♣icon: Verwenden Sie die Schriftart der Symbolbeschriftung (CSS2)

♣menu: Verwenden Sie die Schriftart des Menüs (CSS2)

♣message-box: Verwenden Sie die Textschriftart der Nachricht Dialog (CSS2)

♣small-caption: Verwenden Sie die Schriftart des kleinen Steuerelements (CSS2)

♣status-bar: Verwenden Sie die Schriftart der Fensterstatusleiste (CSS2)

2. Textstil

♦Textfarbfarbe●Farbname Die 16 Grundfarben sind Aqua, Schwarz, Blau, Fuchsia , Grau, Grün, Limette, Kastanienbraun, Marine, Oliv, Lila, Rot, Silber, Blaugrünweiß und Gelb.●Hexadezimale (hex) Farbsteuerung (6 Ziffern), das Format ist #336699. Unterstützt Shortcut-Zählmethoden für bestimmte Hexadezimalwerte. #336699 könnte beispielsweise #369 heißen.

●RGB-Wert Der RGB-Wert reicht von 0 bis 255, R steht für Rot, G steht für Grün und B steht für Blau. Demo: { color: rgb(51,204,0) }

♦Text-indent, der Wert ist der Wert in em, 1em entspricht der Breite eines Wortes.

♦Text Horizontal Ausrichtung text-align: left (linke Ausrichtung) ||. right (rechte Ausrichtung) ||. right (rechte Ausrichtung)

♦Text vertikale Ausrichtung: sub (vertikale Ausrichtung). für ausgerichteten Text) ||. super (hochgestellt für vertikal ausgerichteten Text) ||. Es gibt andere Handbücher

♦Buchstabenabstand, der Wert ist normal und der Wert in px.

♦Textumbruch Zeilenumbruch: normal (Inhalt öffnen oder überlaufen lassen) ||. Zeilenumbruch (Inhalt wird innerhalb der Grenzen umbrochen. Zeilenumbrüche sind bei Bedarf innerhalb von Wörtern zulässig)

♦Unterstreichungskontrolle Textdekoration: keine (Nr Unterstreichen, Standard), Unterstreichen (Unterstreichen), Blinken, Überstreichen (Überstreichen), Durchstreichen (Durchstreichen)

♦ Der Fall der Texttransformation: Der erste Buchstabe wird großgeschrieben ||. In Großbuchstaben umwandeln || In Kleinbuchstaben umwandeln

3. Listenstil list-style

▶list-style- image:url(/dot.gif); -style-Symbol, wählen Sie das Bild als Führungssymbol für das Listenelement aus ▶list-style-position: Position des Listensymbols ♥außerhalb (Standardwert, Die Liste befindet sich in der Nähe des Symbols )

♥inside (die Liste ist eingerückt und vom Symbol getrennt)

▶list-style-type: Symboltyp (hier sind einige häufig verwendete, wenn Sie eine japanische Ebene benötigen) Sie können Schauen Sie im Handbuch nach, ob gefälschte Filme vorhanden sind)

♥Keine (keine) ♥Arabische Ziffern (dezimal) ♥Voller Kreis (Scheibe) ♥Hohler Kreis (Kreis) ♥Volles Quadrat (Quadrat)

♥Kleine englische Buchstaben (Kleinbuchstaben) ♥Große englische Buchstaben Buchstaben (Großbuchstaben) ♥Kleine römische Ziffern (kleine römische Ziffern) ♥Große römische Ziffern (große römische Ziffern)

4. Hintergrundstil Hintergrund

Die Abkürzung für Hintergrundstil, geschrieben als {background-color||background-image||background-repeat||background-attachment||background-position;}

background : Hintergrundfarbe, Hintergrundbild, Hintergrundkachelmethode, Hintergrundpositionierung sollten in Ordnung sein. Beispielhintergrund: #F00 url(header_bg.gif) no-repeat behoben links oben;

♠Hintergrundfarbe

♠ Perspektivischer Hintergrundhintergrund:transparent;

♠Hintergrundbild backgroung-image:url (Bilddateipfad);

♠Hintergrundkachelmethode Hintergrundwiederholung: wiederholen (alle gekachelt, Standard) | |. no-repeat (keine Kachelung) ||. Repeat-y (vertikale Kachelung)

rund (das Hintergrundbild wird automatisch skaliert, bis es in den gesamten Container passt) || Leerzeichen (das Hintergrundbild wird im gleichen Abstand gekachelt und füllt den gesamten Container oder eine bestimmte Richtung aus)

♠Hintergrundbild scrollen, Hintergrundanhang: scrollen Standardwert. Das Hintergrundbild bewegt sich, während der Rest der Seite scrollt.

behoben: Das Hintergrundbild bewegt sich nicht, wenn der Rest der Seite gescrollt wird. ||inherit gibt an, dass die Einstellung der Eigenschaft „background-attachment“ vom übergeordneten Element geerbt werden soll.

♠Hintergrundpositionierung Hintergrundposition: Linke und rechte Ausrichtung (links||Mitte||) Ausrichtung oben und unten (oben||unten);

Sie können die Ausrichtung auch als schreiben numerischer Wert (oder Prozentsatz %): Linker Wert (%) Oberer Wert (%)

♠Hintergrundgröße Hintergrundgröße

Hintergrundgröße: Automatisch ist die Standardgröße die Bildgröße

Hintergrundgröße: px oder Prozentsatz Wenn nur ein Wert festgelegt ist, wird der zweite Wert auf „auto“ gesetzt.

background-size: cover; Skaliert das Hintergrundbild proportional, um den Container vollständig abzudecken.

background-size: include; Erweitert das Bild auf seine maximale Größe, sodass seine Breite und Höhe vollständig in den Inhaltsbereich passen. Aber es überschreitet nicht den Container

Hintergrundgröße: 100px 100 %; Ändern Sie das Breiten- und Höhenverhältnis

♠Die Startposition des Hintergrundhintergrunds

Schreiben {background-origin:padding-box-Hintergrund beginnt hinter dem Rand (Standard)||border-box-Hintergrundbild beginnt am Rand||content-box-Hintergrund beginnt am Inhalt}

5 . Rahmen im Grenzstil

Abkürzung der Grenzlinie: {border:border-width border-style border-color;}

Demo: Die Der vierseitige Rand ist derselbe: {border:1px solid #00F};

Wenn Sie eine separate Seite wünschen, wählen Sie die gewünschte Richtung: {border-[left||right||top||bottom ]:border-width border-style border-color;}

♜Border style border-style: none (kein Rand, Standard) ||. gepunktet (gepunktete Linie). (gepunktete Linie, häufig verwendet)

durchgezogen (durchgezogene Linie, häufig verwendet) ||. Rille (helle durchgezogene Linie) || Einschub (tiefe linke obere linke und hellere durchgehende untere rechte Linie)||. Anfang (durchgezogene Linie mit heller oberer linker und tiefer rechter unterer)

♜Die Breite der Randlinie, der Wert ist der Wert in px.

♜Die Farbe der Randlinie border-color, der Wert ist das englische Wort der Farbe oder die hexadezimale Farbe

♜inherit: Gibt die Einstellung des Randes an Das Attribut sollte vom übergeordneten Element geerbt werden.

Das obige ist der detaillierte Inhalt vonDetaillierte Erläuterung einiger häufig verwendeter Eigenschaften von CSS. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!