In vier Schritten zur ersten CSS-Kopie
So nutzen Sie One-Click CSS Copy für ein einzelnes Element – ohne Konto oder zusätzliche Einrichtung.
Öffnen Sie zuerst eine normale Webseite. Auf chrome://-Seiten oder im Chrome Web Store darf die Erweiterung keine Elemente auswählen. Fehlt das Symbol in der Symbolleiste, finden Sie es im Erweiterungsmenü mit dem Puzzleteil.
So lesen und kopieren Sie CSS eines Elements
- 01
Seite und Erweiterung öffnen
Eine unterstützte HTTP/HTTPS-Seite öffnen und auf One-Click CSS Copy klicken.
- 02
„Select an element“ auswählen
Der Auswahlmodus markiert das Element unter dem Mauszeiger.
- 03
Ein Element anklicken
In der Ergebnisanzeige die ausgewählten berechneten CSS-Eigenschaften prüfen.
- 04
„Copy CSS“ drücken
Den Ausschnitt in den Editor einfügen, .copied-element ersetzen und bei Bedarf „Inspect another“ wählen.
Ein guter erster Test
Nehmen Sie einen einfachen Button. Vergleichen Sie background-color, padding und border-radius mit dem Bereich „Berechnet“ in den Chrome DevTools. So sehen Sie den Unterschied zwischen Ausschnitt und vollständiger Analyse.
.copied-element {
background-color: #2563eb;
color: #ffffff;
padding: 12px 18px;
border-radius: 10px;
font-weight: 600;
}Illustration · tatsächliche Werte hängen vom Element ab
Gut zu wissen
Fünf erfolgreiche Kopien sind pro lokalem Tag kostenlos. Sollte das automatische Kopieren blockiert werden, markieren Sie den CSS-Text selbst. Mit Escape oder Cancel verlassen Sie den Auswahlmodus.
Free: 5 erfolgreiche CSS-Kopien pro Tag
Bei Schwierigkeiten
Auswahl startet nicht
Auf einer normalen HTTP/HTTPS-Seite erneut versuchen. Interne Chrome-Tabs sind gesperrt.
Das Ergebnis sieht anders aus
Prüfen Sie Elternlayout, Schriften, externe Ressourcen und den verwendeten Selektor.
Noch ein Element auswählen
Im Ergebnisfenster auf „Inspect another“ klicken.