CSS ansehen und ändern

Kayce Basques

Sofia Emelianova

In diesen interaktiven Anleitungen erfahren Sie, wie Sie mit Chrome-Entwicklertools das CSS einer Seite ansehen und ändern.

CSS eines Elements ansehen

1. Klicken Sie mit der rechten Maustaste auf den Text Inspect me! unten und wählen Sie Untersuchen aus. Das Steuerfeld Elemente der Entwicklertools wird geöffnet.

   Sieh mich an!

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 werden die CSS-Regeln aufgeführt, die auf das im DOM-Baum ausgewählte Element angewendet werden. Das sollte immer noch das Inspect me!-Element sein.

6. Mit der Klasse aloha wird ein Wert für padding deklariert. Geben Sie diesen Wert und seine Einheit ohne Leerzeichen in das Textfeld unten ein.

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

CSS-Deklaration zu einem Element hinzufügen

Auf dem Tab Styles können Sie CSS-Deklarationen für ein Element ändern oder hinzufügen.

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

   Füge 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 eine Inline-Stildeklaration auf das Element angewendet wurde.

Einem Element 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 mit der rechten Maustaste auf das Add a class to me!-Element unten und wählen Sie Untersuchen aus.

   Füge mir einen Kurs hinzu!

2. Klicken Sie auf .cls. In den Entwicklertools 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, mit dem Sie die Klasse aktivieren und deaktivieren können. Wenn dem Add a class to me!-Element andere Klassen zugewiesen sind, können Sie diese auch hier 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 Hover over me!-Text 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 Styles auf :hov.

4. Aktivieren Sie das Kästchen :hover. Die Hintergrundfarbe ändert sich wie zuvor, obwohl Sie das Element nicht berühren.

Weitere Informationen finden Sie unter Pseudoklasse ein- oder ausblenden.

Dimensionen eines Elements ändern

Verwenden Sie das interaktive Diagramm Box Model auf dem Tab Styles, um die Breite, Höhe, den Innenabstand, den Außenabstand oder die Rahmenlänge eines Elements zu ändern.

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

   Ändere meinen Margin!

2. Klicken Sie auf dem Tab Stile in der Aktionsleiste auf die Schaltfläche  Seitenleiste einblenden, um das Box-Modell aufzurufen.

3. Bewegen Sie den Mauszeiger im Diagramm Box Model auf dem Tab Styles auf padding. Die Innenabstände des Elements werden im Darstellungsbereich hervorgehoben.

4. Doppelklicken Sie im Box Model (Box-Modell) auf den linken Rand. Das Element hat derzeit keine Ränder, daher hat margin-left den Wert -.

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

Das Box-Modell verwendet standardmäßig Pixel, akzeptiert aber auch andere Werte wie 25% oder 10vw.