CSS ansehen und ändern

Kayce Basques

Sofia Emelianova

In diesen interaktiven Anleitungen erfahren Sie die Grundlagen zum Ansehen und Ändern des CSS einer Seite mit Chrome DevTools.

CSS eines Elements ansehen

1. Klicken Sie unten mit der rechten Maustaste auf den Text Inspect me! und wählen Sie Untersuchen aus. Der Bereich Elemente in den DevTools wird geöffnet.

   Prüfen Sie mich!

2. Beachten Sie das Inspect me!-Element, das im DOM-Baum blau hervorgehoben ist.

   

3. Suchen Sie im DOM-Baum nach dem Wert des Attributs data-message für das Element Inspect me!.

4. Geben Sie den Wert des Attributs in das Textfeld unten ein.

5. Suchen Sie auf dem Tab Elemente > Stile nach der Klassenregel aloha.

   Auf dem Tab Styles sind die CSS-Regeln aufgeführt, die auf das Element angewendet werden, das im DOM-Baum ausgewählt ist. Das sollte weiterhin das Inspect me!-Element sein.

6. Die Klasse aloha deklariert einen Wert für padding. Geben Sie diesen Wert und die Einheit ohne Leerzeichen in das Textfeld unten ein.

Wenn Sie das DevTools-Fenster rechts neben dem Darstellungsbereich andocken möchten, wie auf dem Screenshot in Schritt 1, lesen Sie den Hilfeartikel Platzierung der DevTools ändern.

Elementen eine CSS-Deklaration hinzufügen

Verwenden Sie den Tab Styles, wenn Sie die CSS-Deklarationen für ein Element ändern oder hinzufügen möchten.

1. Klicken Sie unten mit der rechten Maustaste auf den Text Add a background color to me! und wählen Sie Untersuchen aus.

   Fügen Sie mir eine Hintergrundfarbe hinzu.

2. Klicken Sie oben auf dem Tab Stile auf element.style.

3. Geben Sie background-color ein und drücken Sie die Eingabetaste.

4. Geben Sie honeydew ein und drücken Sie die Eingabetaste. Im DOM-Baum sehen Sie, dass auf das Element eine Inline-Stildeklaration angewendet wurde.

Elementen eine CSS-Klasse hinzufügen

Auf dem Tab Styles sehen Sie, wie ein Element aussieht, wenn eine CSS-Klasse auf ein Element angewendet oder daraus entfernt wird.

1. Klicken Sie unten mit der rechten Maustaste auf das Element Add a class to me! und wählen Sie Untersuchen aus.

   Fügen Sie mir einen Kurs hinzu.

2. Klicken Sie auf .cls. In den DevTools wird ein Textfeld angezeigt, in dem Sie dem ausgewählten Element Klassen hinzufügen können.

3. Geben Sie color_me in das Textfeld Neuen Kurs hinzufügen ein und drücken Sie die Eingabetaste. Unter dem Textfeld Neue Klasse hinzufügen wird ein Kästchen angezeigt, über das Sie die Klasse aktivieren und deaktivieren können. Wenn dem Add a class to me!-Element andere Klassen zugewiesen wurden, können Sie diese hier ebenfalls aktivieren und deaktivieren.

Pseudostatus zu einer Klasse hinzufügen

Auf dem Tab Styles können Sie einem Element einen CSS-Pseudostatus zuweisen.

1. Bewegen Sie den Mauszeiger auf den Text Hover over me! unten. Die Hintergrundfarbe ändert sich.

   Bewegen Sie den Mauszeiger auf mich.

2. Klicken Sie mit der rechten Maustaste auf den Text Hover over me! und wählen Sie Untersuchen aus.

3. Klicken Sie auf dem Tab Stile auf :hov.

4. Setzen Sie ein Häkchen in das Kästchen :hover. Die Hintergrundfarbe ändert sich wie zuvor, auch wenn Sie nicht den Mauszeiger auf das Element bewegen.

Weitere Informationen finden Sie unter Pseudoklassen ein- und ausschalten.

Abmessungen eines Elements ändern

Verwenden Sie das interaktive Diagramm Box-Modell auf dem Tab Stile, um die Breite, Höhe, den Abstand, den Rand oder die Rahmenlänge eines Elements zu ändern.

1. Klicken Sie unten mit der rechten Maustaste auf das Element Change my margin! und wählen Sie Untersuchen aus.

   Ändern Sie meinen Rand!

2. Wenn Sie das Box-Modell sehen möchten, klicken Sie auf dem Tab Stile in der Aktionsleiste auf die Schaltfläche Seitenleiste anzeigen.

3. Bewegen Sie den Mauszeiger im Diagramm Box-Modell auf dem Tab Stile auf Abstand. Die Ränder des Elements sind im Darstellungsbereich hervorgehoben.

4. Klicken Sie im Box-Modell doppelt auf den linken Rand. Das Element hat derzeit keine Ränder, sodass margin-left den Wert - hat.

5. Geben Sie 100 ein und drücken Sie die Eingabetaste.

Im Box-Modell werden standardmäßig Pixel verwendet, aber auch andere Werte wie 25% oder 10vw sind zulässig.