CSS-Debugging

Browserbasiertes CSS-Debugging

Wenn Sie zu Ihrem Browser gehen und den Abschnitt "Inspect" öffnen, indem Sie mit der rechten Maustaste auf den Browser klicken, landen Sie in einem unten gezeigten Abschnitt. Hier finden Sie unter der Registerkarte „Elemente“ sowohl Ihren HTML- als auch Ihren CSS-Code.

CSS-Debugging

Benutze einfach diesen Button Element prüfen Bewegen Sie den Mauszeiger und wählen Sie ein Element auf der Benutzeroberfläche aus, für das Sie CSS anzeigen/ändern möchten.

In unserem Fall werden wir unseren Subheader ändern. Daher wählen wir „The God of Cricket“ über die oben genannte Schaltfläche aus. Sobald wir darauf klicken, erhalten wir einen Bildschirm:

Anwenden von CSS aus dem Browser

Was wir herausgefunden haben, egal für welchen CSS-Code wir geschrieben haben tag wird hier reflektiert. Jetzt können Sie hier einfach Code direkt hinzufügen. Diese Codes gelten nur für die aktuelle Instanz der Webseite und werden nach der Aktualisierung auf den alten Code zurückgesetzt. Wenn Sie also den gewünschten Stil erreicht haben, müssen Sie denselben Code in unsere CSS-Codedatei einfügen.

Hier haben wir gerade die Farbe und den Schriftstil für das H2-Tag in kursiv geändert und dasselbe wird im Ausgabebildschirm wiedergegeben:

CSS über Inspect Element ändern

Hinterlassen Sie eine Nachricht

Diese Seite verwendet Akismet, um Spam zu reduzieren. Erfahren Sie, wie Ihre Kommentardaten verarbeitet werden.