So wenden Sie CSS mit dem Browser-Entwicklertool an

Suchen Sie nach Möglichkeiten, Ihre Website mit ein wenig CSS zu gestalten? Dazu gibt es verschiedene Möglichkeiten. In diesem Leitfaden zeigen wir Ihnen, wie Sie CSS mit dem Browser-Entwicklertool anwenden, zusammen mit einigen Beispielen für Dinge, die Sie tun können.

Bei der Entwicklung einer Anwendung oder Website verwenden Entwickler eine Vielzahl von Tools, die ihnen bei ihrer Arbeit helfen. Eines der beliebtesten ist das Browser Developer Tool. Ohne sie wäre die Arbeit an einer Website viel komplizierter.

Die meisten Browser bieten ihr eigenes integriertes Entwicklertool. Die meisten von ihnen sind ähnlich, haben aber ein paar verschiedene Optionen. In Anbetracht der Tatsache, dass fast 66 % der Benutzer Chrome verwenden, konzentrieren wir uns in diesem Leitfaden auf die Chrome-Entwicklertool. Es ist eines der vollständigsten und hebt sich von den Browsern durch seine Leistung und Funktionsvielfalt ab.

Bevor wir uns mit der Anwendung von CSS mit dem Browser-Entwicklertool befassen, machen wir uns zunächst mit dem Chrome-Entwicklertool vertraut und was Sie damit tun können.

HINWEIS : Wir werden hier einige Konzepte erklären, aber um dieser Anleitung zu folgen, empfehlen wir Ihnen, ein grundlegendes Verständnis von CSS und seiner Funktionsweise zu haben.

Das Chrome-Entwicklertool

Zuerst müssen Sie das Tool in Chrome öffnen. Dafür gibt es 3 Möglichkeiten:

• Drücken Sie F12 für Ihr Schlüsselwort
• Klicken Sie mit der rechten Maustaste auf eine beliebige Stelle auf dem Bildschirm und wählen Sie Inspizieren aus
• Drücken Sie das Drei-Punkte-Symbol oben rechts neben Ihrem Benutzeravatar und gehen Sie zu Weitere Tools > Entwicklertool

Jede dieser drei Optionen öffnet die DevTools, die so aussehen sollten. Ihr Entwicklertool sieht möglicherweise etwas anders aus, aber die Elemente sind dieselben.

Wie Sie sehen, gibt es mehrere Registerkarten. Stellen Sie sicher, dass Sie sich auf der Registerkarte Elemente befinden, auf der die HTML-Ausgabe der Website angezeigt wird. Beachten Sie, dass das Tool alle Informationen zum aktuellen Fenster übernimmt, d. h. die aktive Registerkarte im Browser, als Sie die DevTools geöffnet haben.

Sie können mehrere Developer Tool-Fenster gleichzeitig geöffnet haben, wobei jedes die Informationen einer anderen Registerkarte im Browser anzeigt.

So finden Sie ein HTML-Element im Browser-Entwicklertool

Wenn Sie sich die Elemente im Tool genauer ansehen, werden Sie feststellen, dass Sie die meisten Elemente öffnen können, indem Sie darauf klicken. Darüber hinaus werden die in anderen Elementen verschachtelten Elemente im Frontend hervorgehoben, wenn Sie mit der Maus darüber fahren.

Wenn Sie sich die verschiedenen Elemente ansehen, können Sie die übergeordneten HTML-Elemente sehen. Sie können in die HTML-Struktur eintauchen, indem Sie jedes Element mit einem Klick öffnen. Auf den meisten Websites ist der HTML-Code ziemlich lang, sodass es mühsam sein kann, ein bestimmtes Element zu finden. Dies gilt umso mehr, wenn das gesuchte Element tief in einer großen Liste von übergeordneten HTML-Elementen verschachtelt ist.

Es gibt jedoch eine viel einfachere Möglichkeit, ein bestimmtes Element zu finden.

Finden bestimmter Elemente

Klicken Sie einfach mit der rechten Maustaste auf das Element, das Sie analysieren möchten, und wählen Sie Inspect aus .

Wenn der Inspektor geöffnet wird, wird dieses Element ausgewählt und in den DevTools hervorgehoben angezeigt.

Wie Sie in den obigen Screenshots sehen können, haben wir auf ein Logo geklickt. Wenn wir also das Element im Entwicklertool untersuchen, ist das Bild des Logos bereits ausgewählt und hervorgehoben. Dies hilft uns, die Tiefe des Elements innerhalb des vollständigen HTML-Quellcodes der Website zu verstehen.

Nachdem Sie nun wissen, wie Sie bestimmte Elemente mit dem Entwicklertool auswählen, gehen wir noch einen Schritt weiter und fügen ein wenig benutzerdefiniertes CSS hinzu.

Bearbeiten Sie das CSS-Skript live

Wenn Sie einen Blick auf die rechte Seite des Dev-Tool-Fensters werfen, sehen Sie alle CSS-Regeln, die auf das ausgewählte Element angewendet werden, sortiert nach Vererbung.

Vererbung ist eines der wichtigsten CSS-Konzepte, das die CSS-Funktionalität beschreibt. Machen Sie sich keine Sorgen, wenn Sie nicht vollständig verstehen, was es ist, wir erklären es im nächsten Abschnitt.

Um Ihre eigenen CSS-Regeln auf das Entwicklungstool anzuwenden, müssen Sie sie dort direkt nach der Deklaration des Elementstils eingeben oder einfügen:

In diesem Fall haben wir unserem Beispiel folgend Breite, Hintergrundfarbe und Rahmen des zuvor ausgewählten Logos geändert.

Sie können Ihre Skripte auch in eine der CSS-Regeln in der Seitenleiste einfügen, anstatt dies im element.style- Wrapper zu tun.

CSS-Vererbung im Browser-Entwicklertool

Sie fragen sich vielleicht, was es bringt, all diese CSS-Regeln dort zu haben, wenn Sie Ihren CSS-Code auf eine von ihnen anwenden können und es keinen Unterschied macht.

Wie bereits erwähnt, sind dies alle CSS-Regeln, die auf das ausgewählte Element angewendet werden, sortiert nach Vererbung.

Das Vererbungskonzept beschreibt, wie CSS auf ein HTML-Dokument angewendet wird . Grundsätzlich steuert es, was passiert, wenn für eine Eigenschaft eines bestimmten Elements kein Wert angegeben ist.

Wenn Sie sich den folgenden Screenshot genauer ansehen, werden Sie sehen, dass alle CSS-Selektoren in der Seitenleiste auf dasselbe Element abzielen: das Element, das Sie im Hauptbereich ausgewählt haben.

Wenn Sie zwei oder mehr Regeln auf dasselbe Element anwenden, wird die spezifischere angewendet. Dies würde das Vererbungsverhalten deaktivieren, das für Eigenschaften ohne Definition gilt.

Im obigen Screenshot wird die Eigenschaft background-color des <body> -Elements durch die folgende Regel angegeben:

 body.custom-Hintergrund {
Hintergrundfarbe: #d8d7e2;
}

Dadurch werden alle anderen Regeln überschrieben, die für <body> gelten, da es einen spezifischeren Selektor hat, der die Klasse .custom-background enthält.

Wenn Sie mehr über CSS-Vererbung erfahren möchten, können Sie sich diese Dokumentation ansehen.

Nachdem Sie nun die Elemente besser verstanden haben, sehen wir uns an, wie Sie CSS mit dem Browser-Entwicklertool anwenden können.

So wenden Sie ein CSS-Skript mit dem Browser-Entwicklertool an

Nachdem Sie mit dem Entwicklertool gearbeitet und Ihr CSS-Skript geschrieben haben, müssen Sie den CSS-Code aus dem Entwicklertool kopieren und zu den CSS-Dateien Ihrer Website hinzufügen. In diesem Abschnitt zeigen wir Ihnen Schritt für Schritt, wie das geht.

1) Holen Sie sich den CSS-Selektor

Zuerst müssen Sie den Selektor greifen. Öffnen Sie das Entwicklertool und klicken Sie auf das HTML-Element, das Sie bearbeiten möchten, damit es hervorgehoben wird. Klicken Sie dann mit der rechten Maustaste auf das markierte Element und gehen Sie zu Kopieren > CSS-Selektor .

2) Verfeinern Sie den Selektor

Im obigen Screenshot lautet der CSS-Selektor, den wir in die Zwischenablage kopiert haben:

 .site-branding > div:nth-child(1) > span:nth-child(1) > img

In einigen Fällen funktioniert dieser Selektor möglicherweise nicht, daher müssen Sie ihn verfeinern, um ihn spezifischer zu machen. Sie können beispielsweise den folgenden Selektor verwenden, der viel spezifischer ist und den vorherigen überschreibt:

 div.site-branding > div.site-logo > span.custom-logo-link > img.custom-logo

3) Kopieren Sie die CSS-Regel

Nachdem Sie den Selektor angepasst und bestätigt haben, dass er funktioniert, kopieren Sie die benötigten Deklarationen aus der rechten Seitenleiste des Entwicklertools.

Klicken Sie dazu mit der rechten Maustaste auf die CSS-Regel, die Sie dem Entwicklertool hinzugefügt haben, und wählen Sie Regel kopieren aus.

4) Fügen Sie Ihren CSS-Code zu Ihrer Website hinzu

Der letzte Schritt besteht darin, den benutzerdefinierten CSS-Code, den Sie gerade mit dem Browser-Entwicklungstool erstellt haben, zu Ihren Website-Style-Dateien hinzuzufügen, indem Sie den Selektor und die Deklaration zusammenstellen.

Abhängig von Ihrer Einrichtung gibt es möglicherweise mehrere Möglichkeiten, Ihr benutzerdefiniertes CSS in Ihre Website einzubinden. Viele Plugins und Themes bieten ihre eigene CSS-Editor-Box, und Sie können die Skripte auch direkt in die CSS-Dateien des Themes einfügen. Werfen wir einen Blick auf ein paar verschiedene Optionen.

4.1) Zusätzlicher CSS-Editor des Theme-Customizers

Eine einfache Methode zum Anwenden von CSS mithilfe des zusätzlichen CSS -Editors des Design-Anpassers. Dies ist eine Option, die WordPress Ihnen standardmäßig zur Verfügung stellt, um benutzerdefiniertes CSS hinzuzufügen, und es ist auf allen Websites vorhanden.

Um Ihren CSS-Code zu Ihrer Website hinzuzufügen, gehen Sie in Ihrem Dashboard zu Darstellung > Anpassen > Zusätzliches CSS. Fügen Sie Ihre CSS-Regeln in den Editor ein und klicken Sie auf Veröffentlichen .

Der Vorteil dieser Methode ist, dass Sie keine zusätzlichen Tools benötigen und eine Live-Vorschau des Codes sehen können, bevor er live geht.

4.2) CSS-Datei des Child-Themes

Wenn Sie ein untergeordnetes Design verwenden, können Sie die benutzerdefinierten Skripts zur style.css -Datei hinzufügen. Dies ist eine gute Option, wenn Sie viel CSS-Code haben.

Öffnen Sie dazu die Datei style.css des Child-Themes und fügen Sie dort Ihre CSS-Regeln ein. Abhängig von Ihrem untergeordneten Thema kann die Datei einen anderen Namen haben oder es können andere Dateien vorhanden sein. Stellen Sie in jedem Fall sicher, dass die Datei die Erweiterung .css hat und dass Sie die richtige Datei bearbeiten.

Eine weitere Alternative zum Bearbeiten der WordPress-Dateien Ihres Child-Themes ist die Verwendung des Theme-Editors auf der Registerkarte „Darstellung“ des WordPress-Dashboards.

Die CSS-Skripte, die Sie hier hinzufügen, funktionieren genauso wie das Hinzufügen zum Design-Anpasser, aber sie haben möglicherweise eine etwas bessere Leistung.

Überprüfen Sie die CSS-Dateien im Browser-Entwicklertool

Im vorherigen Abschnitt haben wir erklärt, wie Sie CSS-Skripte zu Ihrer WordPress-Site hinzufügen. Wie Sie sich vorstellen können, stammen alle CSS-Regeln, die Sie im Entwicklertool sehen, aus einer CSS-Datei. Diese Dateien können von der Website dynamisch erstellt, vom Server oder aus einer zwischengespeicherten Datei des Client-Browsers geladen werden.

Wenn Sie genauer hinsehen, sehen Sie, dass der Name der Datei, die eine CSS-Regel enthält, direkt nach der Regel in der CSS-Seitenleiste des Entwicklertools angezeigt wird.

Wenn Sie auf den Dateinamen ( style.css ) klicken, gelangen Sie zum Style-Editor-Bildschirm des Dev-Tools, wo Sie alle aktiven CSS-Dateien und deren Inhalt sehen.

Dies kann nützlich sein, um alle auf Ihrer Website vorhandenen CSS-Dateien besser zu verstehen.

Fazit

Alles in allem enthalten die meisten Browser sehr leistungsfähige Entwicklertools, die Entwickler täglich verwenden. In diesem Leitfaden haben wir Ihnen eine der Hauptfunktionen des Browser-Entwicklertools gezeigt. Wir haben gesehen, wie man bestimmte HTML-Elemente im Entwicklertool findet und wie man CSS live bearbeitet. Außerdem haben wir die CSS-Vererbung erklärt und erklärt, warum sie wichtig ist.

Schließlich haben wir Ihnen Schritt für Schritt gezeigt, wie Sie ein CSS-Skript mit dem Browser-Entwicklertool anwenden und es auf verschiedene Arten zu Ihrer Website hinzufügen können.

Wenn Sie dieses Tutorial interessant fanden, teilen Sie es mit Ihren Freunden in den sozialen Medien. Weitere nützliche Anleitungen zur Verbesserung Ihrer Website finden Sie in den folgenden Artikeln:

• So passen Sie das Divi-Menü mit CSS an
• So bearbeiten Sie die WooCommerce-Shop-Seite mit PHP und CSS