Referenz zu CSS-Features

Entdecken Sie neue Workflows in der folgenden umfassenden Referenz der Microsoft Edge DevTools-Features im Zusammenhang mit dem Anzeigen und Ändern von CSS.

Informationen zu den Grundlagen finden Sie unter Erste Schritte beim Anzeigen und Ändern von CSS.

Auswählen eines Elements

Mit dem Tool Elemente in DevTools können Sie jeweils die CSS eines Elements anzeigen oder ändern. Das ausgewählte Element ist in der DOM-Struktur hervorgehoben. Die Stile des Elements werden im Bereich Formatvorlagen angezeigt. Ein Tutorial finden Sie unter Anzeigen des CSS für ein Element.

In der folgenden Abbildung ist das h1 in der DOM-Struktur hervorgehobene Element das ausgewählte Element. Auf der rechten Seite werden die Stile des Elements im Bereich Formatvorlagen angezeigt. Auf der linken Seite ist das Element im Viewport hervorgehoben, aber nur, weil die Maus derzeit in der DOM-Struktur darauf zeigt:

Es gibt viele Möglichkeiten, ein Element auszuwählen:

• Klicken Sie auf einer gerenderten Webseite mit der rechten Maustaste auf ein Seitenelement, und klicken Sie dann auf Untersuchen.

• Klicken Sie in DevTools auf Element auswählen (), oder drücken Sie STRG+UMSCHALT+C (Windows, Linux) oder BEFEHL+UMSCHALT+C (macOS), und klicken Sie dann im Viewport auf das Element.

• Klicken Sie in DevTools auf das -Element in der DOM-Struktur.

• Führen Sie in DevTools eine Abfrage wie document.querySelector('p') in der Konsole aus, klicken Sie mit der rechten Maustaste auf das Ergebnis, und wählen Sie dann Im Bereich Elemente anzeigen aus.

Anzeigen des externen Stylesheets, in dem eine Regel definiert ist

Klicken Sie im Bereich Formatvorlagen auf den Link neben einer CSS-Regel, um das externe Stylesheet zu öffnen, das die Regel definiert. Das Stylesheet wird im Bereich Editor des Tools Quellen geöffnet.

Wenn das Stylesheet minimiert ist, klicken Sie unten im bereich Editor auf die Schaltfläche Format (). Weitere Informationen finden Sie unter Neuformatieren einer verkneinigten JavaScript-Datei mit pretty-print.

In der folgenden Abbildung gelangen Sie nach dem Klicken https://learn.microsoft.com/_themes/docs.theme/master/en-us/_themes/styles/b66bc881.site-ltr.css:2 zur Zeile 2 von https://learn.microsoft.com/_themes/docs.theme/master/_themes/styles/b66bc881.site-ltr.css, in der die .content h1:first-of-type CSS-Regel definiert ist.

Nur das CSS anzeigen, das tatsächlich auf ein Element angewendet wird

Im Bereich Formatvorlagen werden alle Regeln angezeigt, die für ein Element gelten, einschließlich überschriebener Deklarationen. Wenn Sie nicht an überschriebenen Deklarationen interessiert sind, verwenden Sie den Bereich Berechnet , um nur die CSS anzuzeigen, die tatsächlich auf ein Element angewendet wird.

1. Wählen Sie ein Element aus.

2. Wechseln Sie im Tool Elemente zum Bereich Berechnet.

   In einem breiten DevTools-Fenster ist der Bereich Berechnet nicht vorhanden. Der Inhalt des Bereichs "Berechnet " wird im Bereich Formatvorlagen angezeigt.

   Geerbte Eigenschaften sind nicht transparent.

3. Aktivieren Sie das Kontrollkästchen Alle anzeigen , um alle geerbten Werte anzuzeigen.

   In der folgenden Abbildung zeigt der Bereich Berechnet die CSS-Eigenschaften, die auf das aktuell ausgewählte h1 Element angewendet werden:

   

Anzeigen von CSS-Eigenschaften in alphabetischer Reihenfolge

Verwenden Sie den Bereich Berechnet . Weitere Informationen finden Sie unter Anzeigen nur des CSS, das tatsächlich auf ein Element angewendet wird.

Anzeigen geerbter CSS-Eigenschaften

Aktivieren Sie das Kontrollkästchen Alle anzeigen im Bereich Berechnet . Weitere Informationen finden Sie unter Anzeigen nur des CSS, das tatsächlich auf ein Element angewendet wird.

Anzeigen des Feldmodells eines Elements

Wechseln Sie zum Bereich Formatvorlagen, um das Feldmodell eines Elements anzuzeigen. Wenn Ihr DevTools-Fenster schmal ist, befindet sich das Box Model-Diagramm am unteren Rand des Bereichs.

Um einen Wert zu ändern, doppelklicken Sie darauf.

In der folgenden Abbildung zeigt das Feldmodelldiagramm im Bereich Formatvorlagen das Feldmodell für das aktuell ausgewählte h1 Element.

Suchen und Filtern der CSS eines Elements

Verwenden Sie das Textfeld Filter in den Bereichen Formatvorlagen und Berechnet, um nach bestimmten CSS-Eigenschaften oder -Werten zu suchen.

Um auch geerbte Eigenschaften im Bereich Berechnet zu durchsuchen, aktivieren Sie das Kontrollkästchen Alle anzeigen .

In der folgenden Abbildung wird der Bereich Formatvorlagen so gefiltert, dass nur Regeln angezeigt werden, die die Suchabfrage colorenthalten.

In der folgenden Abbildung wird der Bereich Berechnet so gefiltert, dass nur Deklarationen angezeigt werden, die die Suchabfrage 100%enthalten.

Umschalten einer Pseudoklasse

So schalten Sie eine Pseudoklasse wie :active, :focus, :hoveroder :visitedum:

1. Wählen Sie ein Element aus.

2. Wechseln Sie im Tool Elemente zum Bereich Formatvorlagen .

3. Klicken Sie auf :hov.

4. Wählen Sie die Pseudoklasse aus, die Sie aktivieren möchten.

   Die folgende Abbildung zeigt das Umschalten der :hover Pseudoklasse. Im Viewport wird die background-color: cornflowerblue Deklaration auf das Element angewendet, obwohl das Element nicht mit dem Mauszeiger darauf gezeigt wird.

   

Ein interaktives Tutorial finden Sie unter Hinzufügen eines Pseudozustands zu einer Klasse.

Anzeigen einer Seite im Druckmodus

So zeigen Sie eine Seite im Druckmodus an:

1. Öffnen Sie das Befehlsmenü.

2. Beginnen Sie mit renderingder Eingabe von , und wählen Sie dann Rendering anzeigen aus.

3. Klicken Sie auf die Dropdownliste CSS-Medien emulieren , und wählen Sie dann Drucken aus.

Anzeigen verwendeter und nicht verwendeter CSS-Dateien mit dem Abdeckungstool

Das Abdeckungstool zeigt Ihnen, welche CSS eine Seite tatsächlich verwendet.

1. Öffnen Sie das Befehlsmenü , indem Sie STRG+UMSCHALT+P (Windows, Linux) oder BEFEHL+UMSCHALT+P (macOS) drücken, während DevTools den Fokus hat.

2. Beginnen Sie mit coverageder Eingabe von , und wählen Sie dann Abdeckung anzeigen aus:

   

   Das Abdeckungstool wird angezeigt:

   

3. Klicken Sie auf Instrumentierungsabdeckung starten, und aktualisieren Sie die Seite (). Die Seite wird aktualisiert, und das Abdeckungstool bietet eine Übersicht darüber, wie viel CSS (und JavaScript) von jeder Datei verwendet wird, die der Browser lädt. Grün steht für verwendetes CSS. Rot stellt nicht verwendete CSS-Dateien dar.

   Eine Übersicht darüber, wie viel CSS (und JavaScript) verwendet und nicht verwendet wird:

   

4. Um eine zeilenweise Aufschlüsselung der verwendeten CSS-Dateien anzuzeigen, klicken Sie auf eine CSS-Datei.

   In der folgenden Abbildung werden die Zeilen 145 bis 147 und 149 bis 151 von nicht verwendet, während die b66bc881.site-ltr.css Zeilen 163 bis 166 verwendet werden:

   

Druckvorschaumodus erzwingen

Weitere Informationen finden Sie unter Erzwingen von DevTools in den Druckvorschaumodus.

Zwei Möglichkeiten zum Hinzufügen einer CSS-Deklaration zu einem Element

Die Reihenfolge der Deklarationen wirkt sich auf die Formatierung eines Elements aus. Sie können Deklarationen entweder durch Hinzufügen einer Inlinedeklaration oder durch Hinzufügen einer Deklaration zu einer Stilregel hinzufügen. Diese beiden Ansätze werden in den folgenden Abschnitten beschrieben.

Hinzufügen einer Inline-CSS-Deklaration zu einem Element

Das Hinzufügen einer Inlinedeklaration entspricht dem Hinzufügen eines style Attributs zum HTML-Code eines Elements. In den meisten Szenarien möchten Sie wahrscheinlich Inlinedeklarationen verwenden.

Inlinedeklarationen weisen eine höhere Spezifität als externe Deklarationen auf, sodass die Verwendung von Inlinedeklarationen sicherstellt, dass die Änderungen in Ihrem spezifischen erwarteten Element wirksam werden. Weitere Informationen zur Spezifität finden Sie unter Selektortypen.

So fügen Sie eine Inlinedeklaration hinzu:

1. Wählen Sie ein Element aus.

2. Klicken Sie im Bereich Formatvorlagen zwischen den Klammern des Abschnitts element.style . Der Cursor konzentriert sich, sodass Sie Text eingeben können.

3. Geben Sie einen Eigenschaftsnamen ein, und drücken Sie die EINGABETASTE.

4. Geben Sie einen gültigen Wert für diese Eigenschaft ein, und drücken Sie die EINGABETASTE. In der DOM-Struktur wurde dem -Element ein style -Attribut hinzugefügt.

Alternativ können Sie den Wert in das Eigenschaftenfeld eingeben. DevTools schlägt dann eine Liste der übereinstimmenden Eigenschafts-Wert-Paare vor, aus der Sie auswählen können. Wenn Sie beispielsweise in das Eigenschaftenfeld eingebenbold, schlägt DevTools und font-weight: bolder als mögliche Regeln vorfont-weight: bold. Drücken Sie die EINGABETASTE , um die Regel anzuwenden.

In der folgenden Abbildung wurden die margin-top Eigenschaften und background-color auf das ausgewählte Element angewendet. In der DOM-Struktur werden die Deklarationen im -Attribut des style Elements wiedergegeben.

Hinzufügen einer CSS-Deklaration zu einer vorhandenen Stilregel

Wenn Sie die Stile eines Elements debuggen und speziell testen müssen, was geschieht, wenn eine Deklaration an verschiedenen Stellen definiert wird, fügen Sie einer vorhandenen Formatvorlagenregel eine Deklaration hinzu.

So fügen Sie einer vorhandenen Stilregel eine Deklaration hinzu:

1. Wählen Sie ein Element aus.

2. Klicken Sie im Bereich Formatvorlagen zwischen den Klammern der Formatvorlagenregel, der Sie die Deklaration hinzufügen möchten. Der Cursor konzentriert sich, sodass Sie Text eingeben können.

3. Geben Sie einen Eigenschaftsnamen ein, und drücken Sie die EINGABETASTE.

4. Geben Sie einen gültigen Wert für diese Eigenschaft ein, und drücken Sie die EINGABETASTE.

Ändern eines Deklarationsnamens oder -werts

Um den Namen einer CSS-Deklaration zu ändern, doppelklicken Sie auf den Namen der Deklaration.

Um den Wert einer CSS-Deklaration zu ändern, doppelklicken Sie auf den Wert der Deklaration. Der folgende Screenshot zeigt die Auswahl eines Werts aus einer Liste:

Um einen numerischen Wert zu ändern, geben Sie im nächsten Abschnitt den Wert ein, oder verwenden Sie die Pfeiltasten.

Numerische Deklarationswerte inkrementieren

Um einen numerischen Wert einer CSS-Deklaration zu ändern, geben Sie den Wert ein, oder verwenden Sie die Pfeiltasten, um den Wert um einen bestimmten Betrag zu erhöhen:

Tastenkombination	Inkrementierungen um
ALT+NACH-OBEN-TASTE (Windows, Linux) oder WAHL+NACH-OBEN-TASTE (macOS)	0,1
NACH-OBEN-TASTE	1 (oder 0,1, wenn der aktuelle Wert zwischen -1 und 1 liegt)
UMSCHALT+NACH-OBEN	10
UMSCHALT+BILD-AUF (Windows, Linux) oder UMSCHALT+BEFEHL+NACH-OBEN-TASTE (macOS)	100

Drücken Sie zum Verringern die NACH-UNTEN-TASTE (oder DIE BILD-NACH-UNTEN-TASTE) anstelle der NACH-OBEN - oder BILD-NACH-OBEN-TASTE.

Hinzufügen einer Klasse zu einem Element

So fügen Sie einem Element eine Klasse hinzu:

1. Wählen Sie das -Element in der DOM-Struktur aus.

2. Klicken Sie auf .cls.

3. Geben Sie den Namen der Klasse in das Textfeld Neue Klasse hinzufügen ein.

4. Drücken Sie EINGABE.

   

Umschalten einer Klasse

So aktivieren oder deaktivieren Sie eine Klasse für ein Element:

1. Wählen Sie das -Element in der DOM-Struktur aus.

2. Öffnen Sie den Bereich Elementklassen . Weitere Informationen finden Sie unter Hinzufügen einer Klasse zu einem Element. Unterhalb der Textfelder Neue Klasse hinzufügen befinden sich alle Klassen, die auf dieses Element angewendet werden.

3. Schalten Sie das Kontrollkästchen neben der Klasse um, die Sie aktivieren oder deaktivieren möchten.

Hinzufügen einer Stilregel

So fügen Sie eine neue Stilregel hinzu:

1. Wählen Sie ein Element aus.

2. Klicken Sie auf Neue Formatvorlagenregel (). DevTools fügt eine neue Regel unterhalb der Regel element.style ein.

   In der folgenden Abbildung fügt DevTools die h1.devsite-page-title Stilregel hinzu, nachdem Sie auf Neue Formatvorlagenregel geklickt haben.

   

Auswählen eines Stylesheets zum Hinzufügen einer Regel

Beim Hinzufügen einer Formatvorlagenregel erstellt DevTools standardmäßig ein neues Stylesheet mit dem Namen inspector-stylesheet im Dokument und fügt dann die neue Formatregel in diesem Stylesheet hinzu.

So fügen Sie stattdessen die Regel in einem vorhandenen Stylesheet hinzu:

• Klicken und halten Sie neue Formatvorlageregel () gedrückt, und wählen Sie dann ein Stylesheet aus der Liste aus, dem die Formatvorlagenregel hinzugefügt werden soll.

Hinzufügen einer Stilregel zu einem bestimmten Speicherort

Beim Hinzufügen einer Formatvorlagenregel durch Klicken auf Neue Formatvorlagenregel wird die neue Regel standardmäßig unterhalb der element.style-Regel in das inspector-stylesheet Stylesheet eingefügt.

So fügen Sie stattdessen eine Stilregel an einer bestimmten Stelle des Bereichs Formatvorlagen hinzu:

1. Zeigen Sie auf die Formatvorlagenregel, die sich direkt über der Stelle befindet, an der Sie Ihre neue Formatvorlagenregel hinzufügen möchten.

2. Klicken Sie unten auf Formatvorlagenregel einfügen ().

Umschalten einer Deklaration

So schalten Sie eine einzelne Deklaration ein oder aus:

1. Wählen Sie ein Element aus.

2. Zeigen Sie im Bereich Formatvorlagen auf die Regel, die die Deklaration definiert. Neben jeder Deklaration wird ein Kontrollkästchen angezeigt.

3. Aktivieren oder deaktivieren Sie das Kontrollkästchen neben der Deklaration. Wenn Sie eine Deklaration löschen, kreuzt DevTools sie aus, um anzugeben, dass sie nicht mehr aktiv ist.

   In der folgenden Abbildung wurde die margin-top Eigenschaft für das aktuell ausgewählte Element deaktiviert.

   

Ändern von Farben mit der Farbauswahl

Die Farbauswahl stellt eine Benutzeroberfläche zum Ändern color und background-color Deklarationen bereit.

So öffnen Sie die Farbauswahl:

1. Wählen Sie ein Element aus.

2. Suchen Sie im Bereich Formatvorlagen nach der colorDeklaration , background-coloroder einer ähnlichen Deklaration, die Sie ändern möchten. Links neben dem colorWert , background-coloroder einem ähnlichen Wert befindet sich ein kleines Quadrat, das eine Vorschau der Farbe darstellt.

   In der folgenden Abbildung ist das kleine Quadrat links von rgba(0, 0, 0, 0.7) eine Vorschau dieser Farbe.

   

3. Klicken Sie auf die Vorschau, um die Farbauswahl zu öffnen.

   

In der folgenden Abbildung und Liste werden die einzelnen Ui-Elemente der Farbauswahl beschrieben.

Beschriftung	Komponente	Beschreibung
1	Sonnenbrille
2	Pipette	Beispiel für eine Farbe außerhalb der Seite mit dem Piper
3	In Zwischenablage kopieren	Kopieren Sie den Anzeigewert in die Zwischenablage.
4	Anzeigewert	Die RGBA-, HSLA- oder Hex-Darstellung der Farbe.
5	Farbpalette	Klicken Sie auf ein Quadrat, um die Farbe zu ändern.
6	Farbton
7	Transparenz
8	Anzeigewertwechsel	Schalten Sie zwischen den RGBA-, HSLA- und Hexadezimaldarstellungen der aktuellen Farbe um.
9	Farbpalettenumschalter	Wechseln Sie zwischen der Materialentwurfspalette, einer benutzerdefinierten Palette oder einer Seitenfarbenpalette. DevTools generiert die Seitenfarbpalette basierend auf den Farben, die in Ihren Stylesheets gefunden werden.

Beispiel für eine Farbe außerhalb der Seite mit dem Piper

So ändern Sie die ausgewählte Farbe auf der Seite in eine andere Farbe:

1. Klicken Sie auf das Pipettensymbol (). Der Cursor ändert sich in eine Lupe.

2. Zeigen Sie auf das Pixel, das die Farbe aufweist, die Sie verwenden möchten, an einer beliebigen Stelle auf dem Bildschirm.

3. Klicken Sie auf diese Option, um dies zu bestätigen.

   In der folgenden Abbildung zeigt die Farbauswahl einen aktuellen Farbwert von , der rgba(0,0,0,0.7)nahe an Schwarz liegt. Die spezifische Farbe ändert sich in die Version von Schwarz, die derzeit im Viewport hervorgehoben ist, nachdem Sie darauf geklickt haben.

   

Siehe auch:

• Testen des Text-Farbkontrasts mit der Farbauswahl

Ändern des Winkelwerts mit der Winkeluhr

Die Angle Clock bietet eine Benutzeroberfläche zum Ändern der Winkelmengen in CSS-Eigenschaftswerten.

So öffnen Sie die Angle Clock

1. Wählen Sie ein Element aus, das eine Winkeldeklaration enthält.

2. Suchen Sie im Bereich Formatvorlagen die - oder background -transformDeklaration, die Sie ändern möchten. Klicken Sie neben dem Winkelwert auf das Feld Winkelvorschau .

   In der folgenden Abbildung ist die kleine Uhr links von 100deg eine Vorschau des Winkels.

3. Klicken Sie auf die Vorschau, um die Angle Clock zu öffnen:

   

4. Ändern Sie den Winkelwert, indem Sie auf den Winkeluhrkreis klicken, oder scrollen Sie mit der Maus, um den Winkelwert um 1 zu erhöhen oder zu verringern.

Es gibt weitere Tastenkombinationen zum Ändern des Winkelwerts. Weitere Informationen finden Sie in den Tastenkombinationen im Bereich Formatvorlagen.

Ändern von Feld- und Textschatten mit dem Schatten Editor

Verwenden Sie die Schatten-Editor, um den Wert der CSS-Eigenschaft oder text-shadow der box-shadow CSS-Eigenschaft für ein HTML-Element zu ändern:

1. Wählen Sie ein Element mit einer - oder text-shadow -box-shadowDeklaration aus.

   Öffnen Sie beispielsweise die 1DIV-Demoseite auf einer neuen Registerkarte oder einem neuen Fenster, klicken Sie mit der rechten Maustaste auf die Seite, und wählen Sie Untersuchen aus, um DevTools zu öffnen, und wählen Sie dann im Tool Elemente das <div class="demos"> Element aus.

2. Suchen Sie im Bereich Formatvorlagen in der .demos CSS-Regel nach der box-shadow Deklaration, und klicken Sie dann auf die Schaltfläche Schatten-Editor öffnen (").

   Die Schatten-Editor wird geöffnet:

   

3. Ändern Sie die Schatteneigenschaften wie folgt:

   Eigenschaft	So ändern Sie
   Typ	Wählen Sie Outset oder Inset aus. Nur für box-shadow.
   X-Offset	Geben Sie einen Wert im Textfeld an, oder ziehen Sie den blauen Punkt.
   Y-Offset	Geben Sie einen Wert im Textfeld an, oder ziehen Sie den blauen Punkt.
   Blur	Geben Sie einen Wert im Textfeld an, oder ziehen Sie den Schieberegler.
   Verbreitung	Geben Sie einen Wert im Textfeld an, oder ziehen Sie den Schieberegler. Nur für box-shadow.

   Die Änderungen werden in Echtzeit auf das -Element auf der gerenderten Webseite angewendet:

   

Bearbeiten von Animationen und Übergangszeiten mit dem Beschleunigungs-Editor

Verwenden Sie die Easing-Editor, um den Wert der Eigenschaft animation-timing-function oder transition-timing-function für ein HTML-Element zu ändern:

1. Wählen Sie ein Element aus , auf das eine CSS-Animation oder ein Übergang angewendet wurde.

   Öffnen Sie beispielsweise die Demoseite der animierten Eigenschaft in einer neuen Registerkarte oder in einem neuen Fenster, klicken Sie mit der rechten Maustaste auf die Seite, und wählen Sie Untersuchen aus, um DevTools zu öffnen. Drücken Sie dann im Tool ElementeSTRG+F , suchen Sie nach "Spinner", und wählen Sie dann das <div class="spinner"> Element aus.

   Die roten und grünen Felder auf dieser Demoseite sind zwei verschiedene CSS-Animationen. Beide Animationen werden mithilfe der animation CSS-Eigenschaft mit CSS ausgeführt und definieren eine ease-in-out Zeitsteuerungsfunktion.

2. Suchen Sie im Bereich Formatvorlagen die animation Deklaration in der .bad .spinner CSS-Regel, und klicken Sie auf die Schaltfläche Kubik-Bézier-Editor öffnen (Symbol für die ).

   Das Easing-Editor wird geöffnet:

   

3. Ändern Sie die Eigenschaften der Animationszeitsteuerungsfunktion:

   • Wählen Sie eine der vordefinierten Zeitsteuerungsfunktionen aus der Liste aus.
   • Erstellen Sie Ihre eigene Zeitsteuerungsfunktion, indem Sie die Ziehpunkte der Kubik-Bézierkurve ziehen.

   Die Änderungen werden in Echtzeit auf das -Element auf der gerenderten Webseite angewendet:

   

Hinweis

Teile dieser Seite sind Änderungen, die auf Arbeiten basieren, die von Google erstellt und geteilt und gemäß den in der Creative Commons Attribution 4.0 International License beschriebenen Bedingungen verwendet werden. Die originale Seite finden Sie hier und wird von Kayce Basques geschrieben.

Dieses Werk ist unter einer Creative Commons Attribution 4.0 International License lizenziert.