Erste Schritte beim Anzeigen und Ändern von CSS

Informationen zu den Grundlagen der Verwendung von DevTools zum Anzeigen und Ändern des CSS für eine Seite finden Sie in den interaktiven Tutorialabschnitten in diesem Artikel.

Anzeigen des CSS für ein Element

1. Öffnen Sie die Demoseite für CSS-Beispiele in einem neuen Fenster oder einer neuen Registerkarte. (Klicken Sie mit der rechten Maustaste auf den Link, um einen Link in einem neuen Fenster oder einer neuen Registerkarte zu öffnen. Oder halten Sie STRG (für Windows, Linux) oder Befehl (für macOS) gedrückt, und klicken Sie dann auf den Link.)

2. Klicken Sie mit der rechten Maustaste auf den Inspect Me! Text, und wählen Sie dann Untersuchen aus.

   Im DOM-Strukturbereich unter dem Tool Elemente ist das Inspect Me! Element hervorgehoben:

   

3. Suchen Sie im Inspect Me! -Element den Wert des data-message Attributs, und kopieren Sie ihn.

4. Geben Sie in der Seitenansicht den Wert ein, den data-message Sie in das Textfeld Wert der Datennachricht kopiert haben.

5. Klicken Sie mit der rechten Maustaste auf den Inspect Me! Text, und wählen Sie dann Untersuchen aus.

6. Wählen Sie in DevTools im Tool Elemente den Bereich Formatvorlagen aus. Das Inspect Me! -Element ist im Bereich Formatvorlagen hervorgehoben.

7. Suchen Sie im Inspect Me! -Element nach der aloha Klassenregel. Diese Regel wird angezeigt, da sie auf das Inspect Me! -Element angewendet wird.

8. Suchen Sie in der aloha -Klasse den Wert für die padding Formatvorlage, und kopieren Sie ihn:

   

9. Fügen Sie in der Seitenansicht den padding Wert in das Textfeld Wert der Auffüllung ein.

Hinzufügen einer CSS-Deklaration zu einem Element

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

1. Zunächst wird empfohlen, das obige Tutorial Zum Anzeigen des CSS für ein Element zu verwenden.

2. Öffnen Sie die Demoseite für CSS-Beispiele in einem neuen Fenster oder einer neuen Registerkarte.

3. Klicken Sie mit der rechten Maustaste auf den Add A Background Color To Me! Text, und wählen Sie dann Untersuchen aus.

4. Klicken Sie element.style oben im Bereich Formatvorlagen auf .

5. Geben Sie background-color ihn in der Dropdownliste ein, oder wählen Sie sie aus, und drücken Sie dann die EINGABETASTE.

6. Geben Sie ihn in der Dropdownliste der Farben ein honeydew , oder wählen Sie sie aus, und drücken Sie dann die EINGABETASTE. Nachdem Sie eine Farbe ausgewählt haben, wird eine Auf das Element angewendete Inlineformatdeklaration in der DOM-Struktur angezeigt.

   Die background-color:honeydew Deklaration wird mithilfe des Abschnitts des Bereichs Formatvorlagen auf das element.style -Element angewendet:

   

Hinzufügen einer CSS-Klasse zu einem Element

Informationen dazu, wie ein Element aussieht, wenn eine CSS-Klasse auf ein Element angewendet oder daraus entfernt wird, finden Sie im Bereich Formatvorlagen .

1. Zunächst wird empfohlen, das obige Tutorial Zum Anzeigen des CSS für ein Element zu verwenden.

2. Öffnen Sie die Demoseite für CSS-Beispiele in einem neuen Fenster oder einer neuen Registerkarte.

3. Klicken Sie mit der rechten Maustaste auf den Add A Class To Me! Text, und wählen Sie dann Untersuchen aus.

4. Klicken Sie auf die Schaltfläche Elementklassen (CLS). DevTools zeigt ein Textfeld an, in dem Sie css-Klassen zu dem seitenelement hinzufügen können, das Sie überprüfen.

5. Geben Sie color_me in das Textfeld Neue Klasse hinzufügen ein, und drücken Sie dann die EINGABETASTE. Unter dem Textfeld Neue Klasse hinzufügen wird ein Kontrollkästchen angezeigt, in dem Sie die Klasse ein- und ausschalten können. Wenn auf das Add A Class To Me! Element andere Klassen angewendet werden, können Sie hier auch jede Klasse umschalten.

   Die color_me -Klasse wird mithilfe des CLS-Abschnitts des Bereichs Formatvorlagen auf das -Element angewendet:

   

Hinzufügen eines Pseudostatus zu einer Klasse

Verwenden Sie den Bereich Formatvorlagen , um einen CSS-Pseudozustand dauerhaft auf ein Element anzuwenden. DevTools unterstützt :active, :focus, :hoverund :visited.

1. Zunächst wird empfohlen, das obige Tutorial Zum Anzeigen des CSS für ein Element zu verwenden.

2. Öffnen Sie die Demoseite für CSS-Beispiele in einem neuen Fenster oder einer neuen Registerkarte.

3. Zeigen Sie auf den Hover Over Me! Text. Die Hintergrundfarbe ändert sich.

4. Klicken Sie mit der rechten Maustaste auf den Hover Over Me! Text, und wählen Sie dann Untersuchen aus.

5. Klicken Sie im Bereich Formatvorlagen auf die Schaltfläche Elementzustand umschalten (:hov).

6. Aktivieren Sie das Kontrollkästchen :hover . Die Hintergrundfarbe ändert sich wie im ersten Schritt, auch wenn Sie nicht mit dem Mauszeiger auf das Element zeigen.

   Der nächste Screenshot zeigt das Ergebnis des Umschaltens des :hover Pseudozustands für ein Element.

   

Ändern der Dimensionen eines Elements

Verwenden Sie das interaktive Box Model-Diagramm im Bereich Formatvorlagen , um die Breite, Höhe, Auffüllung, Ränder oder Rahmenlänge eines Elements zu ändern.

1. Zunächst wird empfohlen, das obige Tutorial Zum Anzeigen des CSS für ein Element zu verwenden.

2. Öffnen Sie die Demoseite für CSS-Beispiele in einem neuen Fenster oder einer neuen Registerkarte.

3. Klicken Sie mit der rechten Maustaste auf den Change My Margin! Text, und wählen Sie dann Untersuchen aus.

4. Zeigen Sie im Feldmodelldiagramm im Bereich Formatvorlagen mit dem Mauszeiger auf die Auffüllung. Der Abstand des Elements ist im Viewport hervorgehoben.

   Abhängig von der Größe ihres DevTools-Fensters müssen Sie möglicherweise zum unteren Rand des Bereichs Formatvorlagen scrollen , um das Box Model anzuzeigen.

5. Doppelklicken Sie im Box Model auf den linken Rand, der derzeit den Wert aufweist -. Bedeutet - , dass das -Element keinen Wert für margin-lefthat.

6. Geben Sie ein 100px , und drücken Sie die EINGABETASTE. Das Box-Modell verwendet standardmäßig Pixel, akzeptiert aber auch andere Werte, z 25%. B. oder 10vw.

   Zeigen Sie mit dem Mauszeiger auf den Abstand des Elements:

   

   Ändern des linken Rands des Elements:

   

Debuggen von Medienabfragen

CSS-Medienabfragen sind eine Möglichkeit, Ihre Website auf Änderungen in den Konfigurationseinstellungen für jeden Benutzer zu reagieren. Der häufigste Anwendungsfall besteht darin, ihrer Seite je nach Größe des Viewports ein anderes CSS-Layout zu geben.

Die Verwendung separater Layouts ermöglicht ein einspaltiges Layout für mobile Geräte und mehrspaltige Layouts, wenn mehr Bildschirmimmobilien verfügbar sind.

So debuggen oder testen Sie die Medienabfragen, die Sie in Ihrem CSS definiert haben:

1. Öffnen Sie die Demoseite für CSS-Beispiele in einem neuen Fenster oder einer neuen Registerkarte.

2. Klicken Sie zum Öffnen von DevTools mit der rechten Maustaste auf die Webseite, und wählen Sie dann Untersuchen aus.

3. Klicken Sie auf die Schaltfläche Geräteemulation umschalten ("). Wenn DevTools den Fokus hat, drücken Sie STRG+UMSCHALT+M (Windows, Linux) oder BEFEHL+UMSCHALT+M (macOS).

   Die Gerätesymbolleiste wird auf der Webseite geöffnet, und die Webseite wird jetzt im Bereich Geräteemulation gerendert:

   

4. Klicken Sie bei geöffneter Gerätesymbolleiste oben rechts auf die Schaltfläche Weitere Optionen (), und wählen Sie dann Medienabfragen anzeigen aus:

   

   Die farbigen Balken über der Webseite stellen die verschiedenen Medienabfragen dar.

5. Zeigen Sie auf die Grenzen in den Balken, um die Werte der verschiedenen Medienabfragen anzuzeigen. Klicken Sie auf jeden Medienabfragewert, um die Größe der Webseite entsprechend zu ändern.

   

6. Um die CSS-Datei zu öffnen, die Ihre Medienabfragen enthält, und den Quellcode zu bearbeiten, klicken Sie mit der rechten Maustaste auf einen der farbigen Balken, und wählen Sie dann Im Quellcode anzeigen aus. Das Tool Quellen wird angezeigt, und die entsprechende Medienabfrage ist in der CSS-Datei hervorgehoben:

   

Hinweis

Teile dieser Seite sind Änderungen, die auf von Google erstellten und freigegebenen Werken basieren und gemäß den in der Creative Commons Attribution 4.0 International License beschriebenen Bestimmungen 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.