CSS ansehen und ändern

Kayce Basques
Sofia Emelianova
Sofia Emelianova
GitHub

In diesen interaktiven Anleitungen lernen Sie die Grundlagen zum Anzeigen und Ändern der CSS einer Seite mithilfe der Chrome-Entwicklertools kennen.

CSS eines Elements ansehen

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

    Sieh nach!

  2. Sehen Sie sich das Inspect me!-Element an, das in der DOM-Baumstruktur blau hervorgehoben ist.

    Hervorgehobenes Element.

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

  4. Geben Sie den Attributwert in das Textfeld unten ein.

  5. Suchen Sie im Bereich Elemente > Stile nach der Klassenregel aloha.

    Im Bereich Styles werden die CSS-Regeln aufgelistet, die auf das in der DOM-Baumstruktur ausgewählte Element angewendet werden. Das Element sollte auch weiterhin das Inspect me!-Element sein.

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

Wenn Sie das Fenster „Entwicklertools“ rechts neben Ihrem Darstellungsbereich andocken möchten, wie auf dem Screenshot aus Schritt 1, lesen Sie den Artikel Placement der Entwicklertools ändern.

CSS-Deklaration zu einem Element hinzufügen

Verwenden Sie den Bereich Styles, wenn Sie CSS-Deklarationen zu einem Element ändern oder hinzufügen möchten.

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

    Füge mir eine Hintergrundfarbe hinzu!

  2. Klicken Sie oben im Bereich 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. In der DOM-Struktur sehen Sie, dass auf das Element eine Inline-Stildeklaration angewendet wurde.

CSS-Deklaration über den Bereich „Styles“ zum Element hinzufügen

Einem Element eine CSS-Klasse hinzufügen

Im Bereich Styles können Sie sehen, 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 Add a class to me!-Element und wählen Sie Untersuchen aus.

    Füge mir einen Kurs hinzu!

  2. Klicken Sie auf .cls. In den Entwicklertools wird ein Textfeld eingeblendet, in dem du dem ausgewählten Element Klassen hinzufügen kannst.

  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 auf das Element Add a class to me! andere Klassen angewendet wurden, können Sie sie hier ebenfalls aktivieren oder deaktivieren.

Die Klasse „color_me“ wird auf das Element angewendet.

Pseudostatus zu einer Klasse hinzufügen

Im Bereich Styles können Sie einen CSS-Pseudostatus auf ein Element anwenden. Die Entwicklertools unterstützen :active, :focus, :focus-within, :target, :hover, :visited und focus-visible.

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

    Bewege die Maus über mich!

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

  3. Klicken Sie im Bereich Stile auf :hov.

  4. Klicken Sie das Kästchen :hover an. Die Hintergrundfarbe ändert sich wie zuvor, auch wenn der Mauszeiger nicht auf das Element bewegt wird.

Pseudostatus des Mauszeigers auf ein Element umschalten.

Abmessungen eines Elements ändern

Verwenden Sie das interaktive Diagramm Box Model im Bereich Styles, um die Breite, Höhe, Abstand, Rand oder Rahmenlänge eines Elements zu ändern.

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

    Ändere meinen Rand!

  2. Um das Box-Modell aufzurufen, klicken Sie im Bereich Styles in der Aktionsleiste auf Seitenleiste anzeigen. Seitenleiste einblenden. Die Schaltfläche „Seitenleiste anzeigen“

  3. Bewegen Sie den Mauszeiger im Diagramm Box Model im Bereich Styles auf Padding. Der Abstand des Elements wird im Darstellungsbereich hervorgehoben. Abstand des Elements

  4. Doppelklicken Sie unter Box Model 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. Ändern des linken Rands des Elements

Für Box Model wird standardmäßig Pixel verwendet, es werden aber auch andere Werte wie 25% oder 10vw akzeptiert.