CSS ansehen und ändern

Kayce Basques
Sofia Emelianova
Sofia Emelianova
GitHub

Mithilfe dieser interaktiven Anleitungen lernen Sie die Grundlagen zum Aufrufen und Ändern des CSS-Codes einer Seite mit den Chrome-Entwicklertools kennen.

CSS eines Elements ansehen

  1. Klicken Sie mit der rechten Maustaste auf den Text Inspect me! unten 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.

    Hervorgehobenes Element.

  3. Suchen Sie in der DOM-Baumstruktur den 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 im Screenshot in Schritt 1, lesen Sie den Hilfeartikel Platzierung der DevTools ändern.

Einem Element 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 mit der rechten Maustaste auf den Text Add a background color to me! unten 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.

Hinzufügen einer CSS-Deklaration zum Element über die Registerkarte Styles (Stile)

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.

Anwenden der color_me-Klasse auf das Element

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.

Aktivieren und Deaktivieren des Pseudozustands „Hover“ für ein Element.

Weitere Informationen finden Sie unter Pseudoklasse umschalten.

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.

    Ändere 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. Seitenleiste anzeigen. Die Schaltfläche „Seitenleiste einblenden“

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

  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. Ändern Sie den Wert für „margin-left“ des Elements.

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