Toptals schneller und praktischer CSS-Spickzettel

Syntax

Box-Modell

/* Bemerkungen */

@Medientyp {

Selektor {

Eigentumswert;

}

}

Hinweis: Medientyp ist optional

Inline-Stil

<Tag>

Eingebetteter Stil

<Kopf>

<style type="text/css">

Selektor { Eigenschaft: Wert; }

</style>

</head>

Externes Stylesheet

<Kopf>

<link rel="stylesheet"

type="text/css" href="style.css" />

</head>

Boxen

Rand

Rand-oben
Rand rechts
Rand unten
Rand links

Selektoren

Polsterung

Polsterung oben
Polsterung-rechts
Polsterung unten
Polsterung-links

*

Alle Elemente

Schild

Alle Tag-Elemente

Rand

Rand-oben
Grenzrecht
Rand unten
Rand links

Schild *

Alle Elemente innerhalb des Tags

tagtag2

tag2-Elemente innerhalb von tag

Randfarbe

Rand-Oberseite-Farbe
Rand-rechte-Farbe
Rand-Unterseite-Farbe
Rand-links-Farbe

Tag, Tag2

Alle Tag- und Tag2-Elemente

Tag > Tag2

tag2 ist ein untergeordnetes Element von tag

Grenzstil

Border-Top-Stil
Border-Right-Stil
Border-Bottom-Style
Border-Links-Stil

Tag + Tag2

Tag2 mit vorangestelltem Tag

.Klasse

Elemente mit der Klasse 'class'

Rahmenbreite

Rahmen-Oberseiten-Breite
rand-rechts-breite
Rahmenbreite unten
linke Randbreite

tag.klasse

Alle Tags mit der Klasse 'class'

#Ich würde

Element mit der ID 'id'

Größe und Farben

tag#id

Tag mit der ID 'id'

Relative Größen

em | rem | ab | CH

vw | vh | vmin | vmax | %

Pseudo-Selektoren

:aktiv

Fügt dem aktiven Element Stil hinzu

Absolute Größen

cm | Millimeter | in

px | Punkt | Stk

:nach dem

Fügt Inhalt nach dem Element hinzu

:Vor

Anzeigeninhalt vor dem Element

Farben

Hex #ff00ff

:erstes Kind

Fügt dem ersten Kind Stil hinzu

RGB-rgb(255,0,255)

:erster Brief

Fügt dem ersten Zeichen Stil hinzu

Positionierung

:erste Linie

Fügt der ersten Zeile Stil hinzu

Position

absolut | fest | relativ | statisch | Erben

:Fokus

Fügt dem fokussierten Element Stil hinzu

:schweben

Fügt Stil hinzu, wenn die Maus drüber ist

schweben

links | rechts | Keine | Erben

:Verknüpfung

Fügt Stil zu nicht besuchten Links hinzu

:hat besucht

Fügt dem besuchten Link Stil hinzu

oben rechts,
unten links

Legt den Versatz von der Kante fest

Text

Schriftfamilie

Gibt die Schriftfamilie an

klar

links | rechts | beide | Keine | Erben

Schriftgröße

Gibt die Schriftgröße an

Schriftstil

normal | kursiv | schräg | Erben

Anzeige

Gibt die Elementplatzierung im Dokumentenfluss an

Schriftart-Variante

normal | Kapitälchen | Erben

Überlauf

sichtbar | versteckt | blättern | automatisch | Erben

Schriftart

-Gewicht

normal | fett | mutiger | leichter | int (100-900) | Erben

Sichtweite

sichtbar | versteckt | Zusammenbruch | Erben

Farbe

Legt die Textfarbe fest

Zeilenhöhe

normal | int | % | Erben

z-index

automatisch | int | Erben

Textausrichtung

links | rechts | Mitte | rechtfertigen | Erben

Maße

Höhe

automatisch | int | % | Erben

Text-

Dekoration

Keine | unterstreichen | überstreichen | durchstreichen | blinken | Erben

maximale Höhe

Keine | int | % | Erben

maximale Breite

Keine | int | % | Erben

Texteinzug

int | % | Erben

Mindesthöhe

int | % | Erben

Text-

verwandeln

Keine | groß schreiben | Großbuchstaben | Kleinbuchstaben | Erben

Mindestbreite

int | % | Erben

Breite

automatisch | int | % | Erben

vertikal

-ausrichten

int | % | Grundlinie | unter | super | Nach oben | Text oben Mitte | unten | Text unten | Erben

Andere

Hintergrund

Format:

Hintergrund (Farbe) (Bild)

(wiederholen) (Position)

Weiß

-Platz

normal | jetztrap | vor | Vorlinie | vorwickeln| Erben

Mauszeiger

Legen Sie den Cursortyp fest

Wortabstand

normal | Länge | Erben

Zitate

Legen Sie die Art der Anführungszeichen fest