In welche Kategorien werden CSS-Attribute eingeteilt?-Front-End-Fragen und Antworten-php.cn

Klassifizierung von CSS-Eigenschaften: Animationseigenschaften, Konvertierungseigenschaften, Übergangseigenschaften, Box-Eigenschaften, Marquee-Eigenschaften, Größeneigenschaften, Randeigenschaften, Fülleigenschaften, Randeigenschaften, Positionierungseigenschaften, mehrspaltige Eigenschaften, skalierbare Boxeigenschaften, Listeneigenschaften, Raster Eigenschaften, Tabelleneigenschaften, Texteigenschaften, Schriftarteigenschaften, Farbeigenschaften, Hintergrundeigenschaften usw.

In welche Kategorien werden CSS-Attribute eingeteilt?

Die Betriebsumgebung dieses Tutorials: Windows 7-System, CSS3-Version, Dell G3-Computer.

CSS-Attributklassifizierung

Animationsattributklassifizierung	CSS3-Animationsattribut (Animation)	2D/3D-Transformationsattribut (Transformation)	Übergangsattribut (Übergang)	Box-Attribut	Marquee-Eigenschaften
Größe/Position –	CSS-Dimensionseigenschaft (Dimension)	CSS-Margin-Eigenschaft (Margin)	CSS-Padding-Eigenschaft (Padding)	CSS-Border-Eigenschaft (Rand und Umriss)	CSS-Positionierung
--Liste/Tabelle	Mehrspaltig	Flexible Box	CSS-Listeneigenschaft	Rastereigenschaft	CSS-Tabelleneigenschaften (Tabelle)
Textschriftfarbe	CSS-Texteigenschaften (Text)	CSS Schriftarteigenschaften (Schriftart)	Farbeigenschaften	CSS-Hintergrundeigenschaften (Hintergrund)

Attribute sparsam verwenden ly	Hyperlink-Attribute	Inhaltsgenerierung (Generiert Inhalt)	Inhalt für ausgelagerte Medienattribute	Benutzeroberflächenattribute (Benutzeroberfläche)	Ausgelagerte Medienattribute
	CSS-Druckattribut (Drucken)

CSS3-Animationsattribut (Animation)

Attribute	Description	CSS
@keyframes	Gibt die Animation an.	3
animation	Abkürzungseigenschaft für alle Animationseigenschaften, mit Ausnahme der Eigenschaft „animation-play-state“.	3
Animationsname	Gibt den Namen der @keyframes-Animation an.	3
animationsdauer	Gibt die Sekunden oder Millisekunden an, die die Animation benötigt, um einen Zyklus abzuschließen.	3
animation-timing-function	Gibt die Geschwindigkeitskurve der Animation an.	3
animation-delay	Gibt an, wann die Animation beginnt.	3
animation-iteration-count	gibt an, wie oft die Animation abgespielt wird.	3
animation-direction	Gibt an, ob die Animation im nächsten Zyklus rückwärts abgespielt wird.	3
animation-play-state	Gibt an, ob die Animation ausgeführt oder angehalten wird.	3
animation-fill-mode	Gibt den Zustand außerhalb der Objektanimationszeit an.	3

CSS-Hintergrundeigenschaft (Background)

Property	Description	CSS
background	Setzt alle Hintergrundeigenschaften in einer Anweisung.	1
Hintergrundanhang	Legen Sie fest, ob das Hintergrundbild fest ist oder mit dem Rest der Seite scrollt.	1
Hintergrundfarbe	Legen Sie die Hintergrundfarbe des Elements fest.	1
Hintergrundbild	Legen Sie das Hintergrundbild des Elements fest.	1
Hintergrundposition	Legen Sie die Startposition des Hintergrundbilds fest.	1
Hintergrundwiederholung	Legen Sie fest, ob und wie das Hintergrundbild wiederholt werden soll.	1
background-clip	Gibt den Zeichenbereich des Hintergrunds an.	3
background-origin	Gibt den Positionierungsbereich des Hintergrundbilds an.	3
Hintergrundgröße	Gibt die Größe des Hintergrundbilds an. 3 Eigenschaften des Anweisungsrahmens.	1

border-bottom

Legen Sie alle Eigenschaften des unteren Randes in einer Anweisung fest.

border-bottom-color

Legen Sie die Farbe des unteren Randes fest.

border-bottom-style

Legen Sie den Stil des unteren Randes fest.

border-bottom-width

Legen Sie die Breite des unteren Randes fest.

border-color

Legen Sie die Farbe der vier Ränder fest.

border-left

Legen Sie alle Eigenschaften für den linken Rand in einer Anweisung fest.

border-left-color

Legen Sie die Farbe des linken Randes fest.

border-left-style

Legen Sie den Stil des linken Randes fest.

border-left-width

Legen Sie die Breite des linken Randes fest.

border-right

Legen Sie alle rechten Randeigenschaften in einer Anweisung fest.

border-right-color

Stellen Sie die Farbe des rechten Randes ein.

border-right-style

Legen Sie den Stil des rechten Rahmens fest.

border-right-width

Legen Sie die Breite des rechten Randes fest.

border-style

Legen Sie den Stil von vier Rändern fest.

border-top

Legen Sie alle Eigenschaften des oberen Randes in einer Anweisung fest.

border-top-color

Legen Sie die Farbe des oberen Randes fest.

border-top-style

Legen Sie den Stil des oberen Randes fest.

border-top-width

Legen Sie die Breite des oberen Randes fest.

border-width

Legen Sie die Breite der vier Ränder fest.

outline

Legen Sie alle Gliederungseigenschaften in einer Anweisung fest.

outline-color

Legen Sie die Farbe des Umrisses fest.

outline-style

Legen Sie den Stil der Gliederung fest.

outline-width

Legen Sie die Breite des Umrisses fest.

border-bottom-left-radius

definiert die Form der unteren linken Ecke des Randes.

border-bottom-right-radius

Definiert die Form der unteren rechten Ecke des Rahmens.

border-image

Abkürzungseigenschaft, legt alle border-image-*-Eigenschaften fest.

border-image-outset

Gibt den Betrag an, um den der Randbildbereich über den Rand hinausragt.

border-image-repeat

Gibt an, ob der Bildrand wiederholt, abgerundet oder gestreckt werden soll.

border-image-slice

Gibt den Versatz des Bildrandes nach innen an.

border-image-source

Gibt das als Rahmen verwendete Bild an.

border-image-width

Gibt die Breite des Bildrandes an.

border-radius

Kurzform-Eigenschaft, legt alle vier border-*-radius-Eigenschaften fest.

border-top-left-radius

Definiert die Form der oberen linken Ecke des Rahmens.

border-top-right-radius

Definiert die Form der unteren rechten Ecke des Rahmens.

box-decoration-break

box-shadow

Fügt der Box einen oder mehrere Schatten hinzu.

Box-Attribut

3 das Farbprofil der Quelle. 3

Attribute	Description	CSS
overflow-x	Wenn der Inhalt über den Elementinhaltsbereich hinausgeht, ob der linke/rechte Rand des Inhalts zugeschnitten werden soll.	3
overflow-y	Wenn der Inhalt über den Elementinhaltsbereich hinausläuft, wird angegeben, ob der obere/untere Rand des Inhalts zugeschnitten werden soll.	3
overflow-style	Gibt die bevorzugte Scrollmethode für Überlaufelemente an.	3
rotation	Dreht ein Element um einen Punkt, der durch die Eigenschaft rotation-point definiert wird.	3
rotation-point	definiert den Versatzpunkt vom oberen linken Randrand.

opacityGibt den Deckkraftgrad des Elements an.

3Rendering-Intent Ermöglicht die Verwendung von Farbprofilen für andere Rendering-Intent-Spezifikationen als die Standardeinstellung. 3333

		3
	bookmark-level	Gibt die Ebene des Lesezeichens an.
	bookmark-target	Gibt das Ziel des Lesezeichen-Links an.
	float-offset	platziert das Element in die entgegengesetzte Richtung, in der das Float-Attribut normalerweise platziert würde.

hyphenate-after

Gibt die Mindestanzahl von Zeichen nach dem Bindestrich in einem getrennten Wort an. 3333333 CSSheightElementhöhe festlegen . 1max-heightLegen Sie die maximale Höhe des Elements fest. 2max-width Legen Sie die maximale Breite des Elements fest. 2min-height Legen Sie die Mindesthöhe des Elements fest. 2min-width Legen Sie die Mindestbreite des Elements fest. 2widthLegen Sie die Breite des Elements fest. 1 So richten Sie die untergeordneten Elemente der Box aus. 3box-directionGibt die Anzeigerichtung der untergeordneten Elemente der Box an. 3

	hyphenate-before	gibt die Mindestanzahl von Zeichen vor dem Bindestrich in einem getrennten Wort an.
	hyphenate-character	gibt die Zeichenfolge an, die bei der Silbentrennung angezeigt wird.
	hyphenate-lines	gibt die maximale Anzahl aufeinanderfolgender Silbentrennungszeilen in einem Element an.
	hyphenate-resource	Gibt externe Ressourcen (durch Kommas getrennte Liste) an, die dem Browser bei der Bestimmung von Silbentrennungspunkten helfen.
	Bindestriche	Legen Sie fest, wie Wörter aufgeteilt werden, um das Absatzlayout zu verbessern.
	image-resolution	Gibt die korrekte Auflösung des Bildes an.
	Markierungen	Fügen Sie Schnittmarken oder Kreuzmarken zu Ihrem Dokument hinzu. 3

box-flexGibt an, ob die untergeordneten Elemente der Box skalierbar sind.

3box-flex-groupFlexible Elemente einer Flex-Gruppe zuweisen. 3box-lines gibt an, ob die Anzeige umbrochen werden soll, wenn der Platz in der Box des übergeordneten Elements überschritten wird. 3box-ordinal-group gibt die Anzeigereihenfolge der untergeordneten Elemente der Box an. 3box-orientGibt an, ob die untergeordneten Elemente der Box horizontal oder vertikal ausgerichtet werden sollen. 3box-packGibt die horizontale Position in einem horizontalen Feld oder die vertikale Position in einem vertikalen Feld an. 3

CSS-Schrifteigenschaften (Font)

Property	Description	CSS
font	Legen Sie alle Schriftarteigenschaften in einer Anweisung fest.	1
font-family	Gibt die Schriftfamilie des Textes an.	1
font-size	Gibt die Schriftgröße des Textes an.	1
font-size-adjust	Gibt den Seitenwert für das Element an.	2
font-stretch	Verkleinern oder strecken Sie die aktuelle Schriftfamilie.	2
font-style	Gibt den Schriftartstil des Textes an.	1
font-variant	Gibt an, ob Text in Kapitälchenschrift angezeigt werden soll.	1
font-weight	Gibt die Dicke der Schriftart an.	1

Generierter Inhalt

Attribute	Beschreibung	CSS
Inhalt	Verwendung mit :before und. :after Pseudoelemente, um generierte Inhalte einzufügen.	2
Zählererhöhung	Erhöht oder verringert einen oder mehrere Zähler.	2
Zähler-Reset	Erstellen oder setzen Sie einen oder mehrere Zähler zurück.	2
Anführungszeichen	Legen Sie den Zitattyp für verschachtelte Anführungszeichen fest.	2
crop	ermöglicht, dass das ersetzte Element nur ein rechteckiger Bereich des Objekts und nicht das gesamte Objekt ist.	3
move-to	Entfernen Sie ein Element aus dem Stream und fügen Sie es an einer späteren Stelle im Dokument wieder ein.	3
page-policy	Bestimmt, ob das Element basierend auf dem Vorkommen der Seite auf einen Zähler oder einen Zeichenfolgenwert angewendet werden soll.	3

Gittereigenschaften

Eigenschaft	Beschreibung	CSS
grid-columns	Gibt die Breite der einzelnen Spalten an Spalte im Raster.	3
grid-rows	Gibt die Höhe jeder Spalte im Raster an.	3

Hyperlink-Attribut (Hyperlink)

Zielnametarget-newtarget-positionCSS

Attribute	Beschreibung	CSS
Ziel-Attribut, eingestellt Eigenschaften „target-name“, „target-new“ und „target-position“. .	3
Gibt an, wo der Link geöffnet werden soll (das Ziel des Links).	3
Gibt an, ob der Ziellink in einem neuen Fenster oder in einem neuen Tab eines vorhandenen Fensters geöffnet werden soll.	3
gibt an, wo der neue Ziellink platziert werden soll.列3	CSS-Listenattribute (Listenattribute)	Beschreibung

List-Style

legt alle Listenattribute in einer Anweisung fest. 1111... CSSMargin in einem Set alle Margin-Eigenschaften in der Deklaration. 1margin-bottomLegen Sie den unteren Rand des Elements fest. 1margin-left Legt den linken Rand des Elements fest. 1

	list-style-image	Legen Sie ein Bild als Listenelementmarkierung fest.
	list-style-position	Legen Sie die Platzierungsposition der Listenelementmarkierung fest.
	list-style-type	Legen Sie den Typ des Listenelement-Markups fest.

margin-right

Legt den rechten Rand des Elements fest. 1margin-top Legt den oberen Rand des Elements fest. 1Marquee-Eigenschaften Eigenschaft BeschreibungCSSMarquee-RichtungLegen Sie die Richtung des mobilen Inhalts fest. 3marquee-play-countLegen Sie fest, wie oft der Inhalt verschoben wird. 3Marquee-GeschwindigkeitLegen Sie fest, wie schnell der Inhalt scrollt. 3

Marquee-Stil

Legen Sie Stile für mobile Inhalte fest. 3

Multi-column

3 ein Anweisungsdistanzattribut. 1

Property	Description	CSS
column-count	Gibt die Anzahl der Spalten an, durch die Elemente getrennt werden sollen.	3
column-fill	gibt an, wie die Spalte gefüllt werden soll.	3
column-gap	Gibt die Lücke zwischen Spalten an.	3
column-rule	Legen Sie das Kurzschriftattribut für alle columns-rule-*-Attribute fest.	3
column-rule-color	Gibt die Farbe der Regeln zwischen Spalten an.	3
column-rule-style	Gibt den Stil der Regeln zwischen Spalten an.	3
column-rule-width	Gibt die Breite der Regel zwischen den Spalten an.	3
column-span	Gibt die Anzahl der Spalten an, die das Element umfassen soll.	3
column-width	Gibt die Breite der Spalte an.	3
columns	gibt die Kurzeigenschaften zum Festlegen von Spaltenbreite und Spaltenanzahl an.

padding-bottomLegen Sie die untere Polsterung des Elements fest.

1padding-leftLegen Sie den linken Abstand des Elements fest. 1padding-rightStellen Sie die richtige Polsterung des Elements ein. 1padding-topLegen Sie die obere Polsterung des Elements fest. 1 und Höheneigenschaften Keines davon wird ersetzt Elemente von Auto zum Zoomen. 3fit-position definiert die Ausrichtung von Objekten innerhalb der Box. 3image-orientation gibt die Drehung im Uhrzeigersinn an, die der Benutzeragent auf das Bild anwenden soll. 3SeiteGibt den spezifischen Seitentyp an, auf dem das Element angezeigt werden soll. 3

Größe

Gibt die Größe und Richtung des Seiteninhalts an, der das Feld enthält. 3. 2clearGibt an, welche Seite eines Elements keine anderen schwebenden Elemente zulässt. 1clipClip absolut positionierte Elemente. 2cursorGibt den Typ (die Form) des anzuzeigenden Cursors an. 2displayGibt die Art der Box an, die das Element generieren soll. 1floatGibt an, ob die Box schweben soll. 1linksLegen Sie den Versatz zwischen der linken Randkante des positionierten Elements und der linken Kante des enthaltenden Blocks fest. 2

overflow

gibt an, was passiert, wenn Inhalt die Elementbox überläuft. 2position gibt den Positionierungstyp des Elements an. 2right Legen Sie den Versatz zwischen der rechten Randgrenze des positionierten Elements und der rechten Grenze des enthaltenden Blocks fest. 2topLegen Sie den Versatz zwischen der oberen Randgrenze des positionierten Elements und der oberen Grenze des enthaltenden Blocks fest. 2vertical-alignLegt die vertikale Ausrichtung eines Elements fest. 1visibilityGibt an, ob das Element sichtbar ist. 2z-indexLegen Sie die Stapelreihenfolge der Elemente fest. ?? innerhalb des Elements Mindestanzahl der Zeilen, die am unteren Rand beibehalten werden müssen die Seitenzahl. 2page-break-afterLegen Sie das Paging-Verhalten nach dem Element fest. 2page-break-beforeLegen Sie das Paging-Verhalten vor dem Element fest. 2page-break-insideLegen Sie das Paging-Verhalten innerhalb des Elements fest. 2widowsLegt die Mindestanzahl an Zeilen fest, die am oberen Rand der Seite verbleiben müssen, wenn die Paginierung innerhalb eines Elements erfolgt. 2

CSS-Tabellenattribut (Tabelle)

Eigenschaft	Beschreibung	CSS
border-collapse	Gibt an, ob Tabellenränder zusammengeführt werden sollen.	2
border-spacing	Gibt den Abstand zwischen benachbarten Zellrändern an.	2
caption-side	Gibt die Position des Tabellentitels an.	2
empty-cells	Gibt an, ob Ränder und Hintergründe auf leeren Zellen in der Tabelle angezeigt werden sollen.	2
table-layout	Legt den für Tabellen verwendeten Layout-Algorithmus fest.	2

CSS-Texteigenschaft (Text)

Eigenschaft	Beschreibung	CSS
Farbe	Legen Sie die Farbe des Textes fest.	1
Richtung	Gibt die Richtung/Schreibrichtung des Textes an.	2
letter-spacing	Stellen Sie den Zeichenabstand ein.	1
Linienhöhe	Legen Sie die Linienhöhe fest.	1
text-align	Gibt die horizontale Ausrichtung des Textes an.	1
text-decoration	Gibt dekorative Effekte an, die dem Text hinzugefügt werden sollen.	1
text-indent	Gibt den Einzug der ersten Zeile eines Textblocks an.	1
text-shadow	Gibt den dem Text hinzugefügten Schatteneffekt an.	2
Texttransformation	Kontrollieren Sie die Groß-/Kleinschreibung von Text.	1
unicode-bidi	Textrichtung festlegen.	2
white-space	gibt an, wie mit Leerzeichen in Elementen umgegangen wird.	1
Wortabstand	Wortabstand festlegen.	1
hanging-punctuation	Gibt an, ob Satzzeichen außerhalb des Drahtmodells liegen.	3
punctuation-trim	gibt an, ob Satzzeichen abgeschnitten werden sollen.	3
text-align-last	Legen Sie fest, wie die letzte Zeile oder die Zeile unmittelbar vor dem erzwungenen Zeilenumbruch ausgerichtet werden soll.	3
text-emphasis	Wenden Sie eine Hervorhebungsmarkierung und die Vordergrundfarbe der Hervorhebungsmarkierung auf den Text des Elements an.	3
text-justify	Gibt die Ausrichtungsmethode an, die verwendet wird, wenn text-align auf „justify“ eingestellt ist.	3
text-outline	Gibt den Umriss des Textes an.	3
text-overflow	Gibt an, was passiert, wenn Text das enthaltende Element überläuft.	3
Textschatten	Schatten zum Text hinzufügen.	3
text-wrap	Gibt die Zeilenumbruchregeln für Text an.	3
Wortumbruch	Gibt Zeilenumbruchregeln für nicht-chinesischen, japanischen und koreanischen Text an.	3
Wortumbruch	ermöglicht das Teilen langer unteilbarer Wörter und das Umbrechen in die nächste Zeile. Transformation oder 3D-Konvertierung.	3

transform-origin

ermöglicht es Ihnen, die Position des transformierten Elements zu ändern.

33 . 3transition-propertyGibt den Namen der CSS-Eigenschaft an, die den Übergang anwendet. 3ÜbergangsdauerDefinieren Sie, wie lange der Übergangseffekt dauert. 3transition-timing-function gibt den zeitlichen Verlauf des Übergangseffekts an. 3

transform-style	gibt an, wie verschachtelte Elemente im 3D-Raum angezeigt werden.	3
Perspektive	Gibt den perspektivischen Effekt von 3D-Elementen an.	3
perspective-origin	Gibt die untere Position des 3D-Elements an.	3
backface-visibility	Definiert, ob das Element sichtbar ist, wenn es nicht auf den Bildschirm blickt.

transition-delayGibt an, wann der Übergangseffekt beginnt.

3Eigenschaften der Benutzeroberfläche

Box-Sizing

ermöglicht es Ihnen, genau zu definieren, was an einen bestimmten Bereich angepasst wird. bietet Erstellern die Möglichkeit, Elemente mithilfe ihrer ikonifizierten Entsprechungen zu gestalten. Gibt an, wohin bei Verwendung der Pfeil-nach-unten-Navigationstaste navigiert werden soll. Legen Sie die Reihenfolge der Tabulatortastensteuerung der Elemente fest. Gibt an, wohin bei Verwendung der Pfeil-nach-links-Navigationstaste navigiert werden soll. Gibt an, wohin bei Verwendung der Pfeil-rechts-Navigationstaste navigiert werden soll. Gibt an, wohin bei Verwendung der Pfeil-nach-oben-Navigationstaste navigiert werden soll. versetzt den Umriss und zeichnet den Umriss über den Rand des Rahmens hinaus. Gibt an, ob die Größe des Elements vom Benutzer angepasst werden kann. (Teilen von Lernvideos: CSS-Video-Tutorial)

3		icon
3		nav-down
3		nav-index
3		nav-left
3		nav-rechts
3		nav-up
3		outline-offset
3		resize
3

Das obige ist der detaillierte Inhalt vonIn welche Kategorien werden CSS-Attribute eingeteilt?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!