So führen Sie CSS-Dateien im Sublime-Test aus

So führen Sie CSS-Dateien in Sublime Text aus: Verwenden Sie das WebKit Inspector-Plug-in und öffnen Sie die Registerkarte „Elemente“, um HTML und CSS über Befehl + Wahl + I (Mac) oder Strg + Alt + I (Windows/Linux) anzuzeigen. Verwenden Sie das LiveReload-Plugin, starten Sie LiveReload über Befehl + Wahl + L (Mac) oder Strg + Alt + L (Windows/Linux), überwachen Sie Dateiänderungen automatisch und aktualisieren Sie sie

So führen Sie CSS-Dateien in Sublime aus Text

Das Ausführen von CSS-Dateien in Sublime Text erfordert die Hilfe einiger externer Tools, wie zum Beispiel:

1. WebKit Inspector

• Installieren Sie das WebKit Inspector-Plug-in.
• Öffnen Sie die CSS-Datei und drücken Sie Befehl + Option + I (Mac) oder Strg + Alt + I (Windows/Linux) Öffnen Sie den WebKit-Inspektor. Command + Option + I (Mac) 或 Ctrl + Alt + I (Windows/Linux) 打开 WebKit Inspector。
• 选择 "Elements" 选项卡以查看 HTML 和 CSS。

2. LiveReload

• 安装 LiveReload 插件。
• 打开 CSS 文件后，按 Command + Option + L (Mac) 或 Ctrl + Alt + L (Windows/Linux) 启动 LiveReload。
• LiveReload 会自动监视文件更改并刷新浏览器窗口。

3. BrowserSync

• 安装 BrowserSync 插件。
• 打开 CSS 文件后，按 Command + Option + B (Mac) 或 Ctrl + Alt + B (Windows/Linux) 启动 BrowserSync。
• BrowserSync 会自动打开一个浏览器窗口并监视文件更改。

4. 实时预览工具

一些 Sublime Text 主题提供了实时预览功能，例如：

• Emmet：在 CSS 文件中按 Tab 键可以生成 HTML 预览。
• Stylus：安装 Stylus 插件并在 CSS 文件中使用.styl
Wählen Sie die Registerkarte „Elemente“, um HTML und CSS anzuzeigen.

2. LiveReload

• Installieren Sie das LiveReload-Plug-in.
• Drücken Sie nach dem Öffnen der CSS-Datei Befehl + Option + L (Mac) oder Strg + Alt + L (Windows/Linux) startet LiveReload.

🎜LiveReload überwacht automatisch Dateiänderungen und aktualisiert das Browserfenster. 🎜🎜🎜🎜3. BrowserSync🎜🎜🎜🎜Installieren Sie das BrowserSync-Plug-in. 🎜🎜Drücken Sie nach dem Öffnen der CSS-Datei Befehl + Option + B (Mac) oder Strg + Alt + B (Windows/Linux) startet BrowserSync. 🎜🎜BrowserSync öffnet automatisch ein Browserfenster und überwacht Dateiänderungen. 🎜🎜🎜🎜4. Live-Vorschau-Tool 🎜🎜🎜Einige Sublime Text-Designs bieten Live-Vorschaufunktionen, wie zum Beispiel: 🎜🎜🎜🎜Emmet🎜: Drücken Sie die Tabulatortaste in einer CSS-Datei, um einen HTML-Code zu generieren Vorschau. 🎜🎜🎜Stylus🎜: Installieren Sie das Stylus-Plugin und verwenden Sie die Erweiterung .styl in Ihren CSS-Dateien, um eine Live-Vorschau zu erhalten. 🎜🎜🎜🎜Hinweis: 🎜🎜🎜🎜Für das Live-Vorschau-Tool müssen Sie sicherstellen, dass sich die CSS-Datei und die HTML-Datei im selben Verzeichnis befinden. 🎜🎜Einige Methoden erfordern eine zusätzliche Einrichtung und Konfiguration. Weitere Details finden Sie in der Plugin-Dokumentation. 🎜🎜

Das obige ist der detaillierte Inhalt vonSo führen Sie CSS-Dateien im Sublime-Test aus. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!