Wichtige Tools für das Webdesign: Tutorial zum CSS-Tool-Set für das Firefox Web Developer-Plugin

Das Plugin wird im Firefox-Browser installiert. Die leistungsstarken Funktionen des Web Developer-Plugins übersteigen Ihre Vorstellungskraft. Die Verwendung für die Entwicklung und das Debuggen von CSS-Webseitenlayouts ist nur ein Teil seiner leistungsstarken Funktionen. Es bietet auch sehr leistungsstarke Hilfsdesignfunktionen für die Entwicklung von Netzwerkprogrammen. Wir werden es nicht vollständig besprechen, wir werden es nur für die Entwicklung und das Debuggen von CSS-Webseitenlayouts verstehen. Interessierte Freunde können seine leistungsstarken Funktionen im Detail studieren.

CSS-Tools sind die wichtigsten Punkte, die wir verstehen müssen. Sie bieten viele Funktionen, die uns beim Anzeigen von Webseiten helfen. Lassen Sie uns ohne weitere Umschweife tiefer gehen und uns zunächst die Bilder ansehen:

1. Stil deaktivieren　　Kann verwendet werden, um die Anzeige einiger oder aller Stile für die aktuelle Seite zu deaktivieren.

Alle Stile　　Deaktivieren Sie alle Stile. Es werden keine Stile auf die Seite angewendet.

· „Browser-Standardstile“ wendet den Browser-Standardstil an, eine Funktion von geringer Bedeutung.

Eingebettete Stile deaktivieren die Platzierung auf der Seite Das interne Stylesheet von hat keine Auswirkungen auf andere.

Inline Styles deaktiviert Inline-Stylesheets, d. h. diejenigen im Format style="" werden nicht angezeigt.

Verknüpfte Stylesheets: Deaktivieren Sie die Verknüpfung externer Stylesheets mit dem Link-Tag.

Druckstile: Deaktivieren Sie Druckstilblätter.

Individuelles Stylesheet: Legen Sie fest, ob das verknüpfte externe Stylesheet angezeigt wird oder nicht. Beispiel: Die aktuelle Seite verlinkt auf drei externe Stylesheets, 1.css, 2.css und 3.css. Mit dieser Funktion können wir ein bestimmtes Stylesheet deaktivieren. Bitte beachten Sie, dass diese Funktion tatsächlich sehr nützlich ist. Sie kann uns beim Debuggen helfen, das Problem zu finden. Wir deaktivieren einen bestimmten Stil, um zu sehen, ob das Problem weiterhin besteht. Wenn das Problem verschwindet, wenn Sie einen bestimmten Stil deaktivieren, liegt ein Problem mit einigen Einstellungen in der deaktivierten Stylesheet-Datei vor.

2. CSS nach Medientyp anzeigen　Anzeigestile nach Medientyp. Diese Funktion ist dieser ähnlich. Derzeit werden jedoch nur zwei Medientypen unterstützt: Handheldgeräte und Drucken.

3. CSS anzeigen　Wird verwendet, um CSS-Dateicode anzuzeigen . Wenn Sie auf diesen Befehl klicken, wird eine neue FF-Registerkarte geöffnet und das CSS der aktuellen Seite angezeigt. Wenn der aktuelle Seitenlink mehrere CSS-Dateien enthält, wird die URL der Datei angegeben oder sie wird als Inline-Stil oder interner Stil angezeigt. Wie unten dargestellt:

4. Stilinformationen anzeigen　Stilinformationen anzeigen. Eine sehr praktische Lern- und Hilfsfunktion zum Gestalten. Nach dem Aktivieren dieser Option werden mir in der FF-Statusleiste die Stilinformationen der aktuellen Mausposition angezeigt. Wenn die Maus auf einem Element verweilt, wird zusätzlich die Hierarchie des Elements im aktuellen CSS-Stylesheet angezeigt. Diese Funktion kann sehr praktisch sein, um das CSS-Layoutdesign anderer Leute zu lernen. Wenn wir die Arbeiten anderer Leute durchsehen und nicht wissen, wie wir einen bestimmten Effekt erzielen können, können wir diese Funktion verwenden, um sofort den angewendeten Stil zu finden, seine hierarchische Beziehung zu erfahren und den entsprechenden Code in der CSS-Datei zu finden. Die Wirkung dieser Funktion ist wie folgt:

5. Benutzer-Stylesheet hinzufügen　Benutzerstile hinzufügen. Wir können beim Browsen den Stil der aktuellen Seite festlegen und die aktuelle Seite der Website kann entsprechend dem von uns geschriebenen Stil angezeigt werden. Wenn wir die Arbeit anderer studieren, können wir auf Grundlage unserer Erkenntnisse Verbesserungen vornehmen oder andere Optimierungen durchführen. Wenn wir unsere eigenen Seiten gestalten, können wir dadurch auch temporäre Änderungen an den Dateien vornehmen und die Auswirkungen sofort sehen. Optimieren und gestalten Sie die Details.

6. CSS bearbeiten　Bearbeiten Sie das CSS. Dies ist eines der größten Highlights des Web Developer-Plugins und die Funktion, die wir am häufigsten verwenden. Klicken Sie auf diesen Befehl, und auf der linken Seite von FF öffnet sich ein Bearbeitungsfenster, in dem die vorhandenen CSS-Stile platziert werden. Wenn N CSS-Dateien vorhanden sind, werden Registerkarten mit Registerkarten aufgelistet und wir können nach Belieben wechseln. Im angezeigten CSS-Editor können wir es in diesem Fenster nach Belieben ändern und bearbeiten, und die Webseite auf der rechten Seite wird in Echtzeit entsprechend dem geänderten Stil angezeigt. Wenn wir den Stil von h1 ändern, können wir den Bearbeitungseffekt sofort im Webseitenfenster rechts sehen! Wie unten dargestellt:

Zu dieser Funktion des Web Developer Plugins muss ich nicht viel sagen, man versteht, was es kann. Beim Entwickeln einer Website können wir diese Funktion verwenden, um die CSS-Datei direkt zum Bearbeiten zu öffnen, während wir die Auswirkungen betrachten und die Ergebnisse der Änderung jederzeit verfolgen können. Wenn wir mit der Änderung zufrieden sind, klicken wir oben im Fenster auf die Schaltfläche Speichern, um das aktuelle Stylesheet am angegebenen Speicherort zu speichern. Realisieren Sie wirklich praktisches Hilfsdesign und -entwicklung. Wir können aus der Arbeit anderer lernen und sie nutzen, um die CSS-Dateien auf den Webseiten anzuzeigen, den Code anderer anzuzeigen, zu versuchen, den Code anderer zu ändern und die Auswirkungen der Änderungen sofort anzuzeigen und darüber nachzudenken, warum andere ihn so geschrieben haben, warum sie ihn so eingerichtet haben und was der Grund dafür ist. Auf diese Weise können wir die Anwendung der CSS-Technologie auf hervorragenden Websites bequemer erlernen.

7. Verwenden Sie das Border-Box-Modell　Verwenden Sie das Border-Box-Modell . Dies ist eine selten verwendete Funktion. Sie können auf diesen Befehl klicken, um die Änderungen auf der Seite anzuzeigen.