Allgemeine CSS-Eigenschaften

Häufig verwendete CSS-Eigenschaften

☛ In Bezug auf CSS-Eigenschaften empfehle ich, das Handbuch für weitere Details und Bequemlichkeit zu lesen. Hier klassifiziere ich mehrere allgemeine Eigenschaften und nehme einfach ein paar allgemeine Eigenschaftswerte -End-Lernen wie ich. Leute nutzen es als Einführung.

1. Schriftart

Die Abkürzung der Schriftart, geschrieben als Schriftart:font-style||font-variant ||font-weight||font-size| |. / line-height||font-family, muss in der Reihenfolge geschrieben werden

♣Schriftart kursiv (Schriftart): normal ||. Häufig verwendete Sonderschriftart schräg ohne Kursivschrift

♣Kleiner Großbuchstabe t (Schriftart): normal || Körper leichter ||. Direkt mit Zahlen ausdrücken (Wert 100-900)

♣Schriftgröße (font-size): Hier sind nur einige Stammeinheiten, die verwendet werden können. Repräsentiert (px, em, rem)

♣Zeilenhöhe der Schriftart: Sie können die Länge px || verwenden. (basierend auf der Höhengröße der Schriftart) || Geben Sie die Zeilenhöhe mit einem numerischen Wert (Produktfaktor) an

♣Schriftfamilie (Schriftfamilie): Geben Sie den Text an, der eine bestimmte Schriftart oder Schriftartenfolge verwenden soll. Der Wert ist in einfache Anführungszeichen gesetzt. Der Standardwert ist Song Dynasty. 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 die 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 (Schrifttyp);

}

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 die Schriftart des Nachrichtendialogs Textschriftart (CSS2)

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

♣status-bar: Verwenden Sie die Schriftart des Fensterstatus bar (CSS2)

2. Textstil

♦Textfarbfarbe

●Farbname Die 16 Grundfarben sind Aqua, Schwarz, Blau, Fuchsia, Grau, Grün, Limette, Kastanienbraun, Marine, Oliv, Lila, Rot, Silber, Blaugrün, Weiß 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 || konvertieren In Kleinbuchstaben umwandeln

3. Listenstil list-style

▶list-style-image:url(/dot .gif), wählen Sie das aus Bild als Führungssymbol für das Listenelement

▶list-style-position: Position des Listensymbols

♥außerhalb (Standardwert, Liste und Symbol liegen nahe beieinander)

♥ innen (Liste eingerückt, von Symbolen getrennt)

▶list-style-type: Symboltyp (hier sind einige häufig verwendete, wenn Sie japanische Wohnungen, Feiertage, Katakatsu usw. benötigen. Schauen Sie im Handbuch nach)

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

♥ Englische Kleinbuchstaben (Kleinbuchstaben) ♥ Englische Großbuchstaben (Großbuchstaben) ♥ Römische Kleinbuchstaben (Kleinbuchstaben) ♥ Römische Großbuchstaben (Großbuchstaben)

4. Hintergrundstil Hintergrund

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

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

♠ Hintergrundfarbe

♠Perspektivischer Hintergrundhintergrund:transparent;

♠Hintergrundbild background-image:url (Bilddateipfad);

♠Hintergrundkachelmethode Hintergrundwiederholung: wiederholen (alles gekachelt, Standard) ||. no-repeat (nicht gekachelt) ||. Repeat-y (vertikale Kachel)

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

♠Hintergrundbild-Scrolling-Hintergrundanhang: scroll 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 . Randstil-Rahmen

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

Demo: die gleichen Ränder auf allen vier Seiten: {border:1px solid #00F};

Wenn Sie möchten, dass nur eine Seite vorhanden ist, können Sie die Richtung auswählen: {border-[left||right||top||bottom]:border-width border-style border- Farbe;🎜>

♜Border style border-style: none (keine Randlinie, Standard) ||. dotted (gepunktete Linie) || gepunktete Linie, häufig verwendet)

durchgezogen (durchgezogene Linie, häufig verwendet) ||. Nut (helle durchgezogene Linie) ||. Durchgezogene Linie mit tiefem linken oberen Rand und hellem unteren rechten Rand) ||. Der Wert ist ein Wert in px.

♜Die Farbe der Grenzlinie border-color, der Wert ist Das englische Wort der Farbe oder die hexadezimale Farbe

♜inherit: Gibt das an Die Einstellung des Rahmenattributs sollte vom übergeordneten Element geerbt werden.

Weitere Artikel zu allgemeinen CSS-Eigenschaften finden Sie auf der chinesischen PHP-Website!