1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
|
---
title: Style Editor
slug: Tools/Style_Editor
translation_of: Tools/Style_Editor
---
<div>{{ToolsSidebar}}</div>
<p>Die Stilbearbeitung ermöglicht:</p>
<ul>
<li>alle Stylesheets einer Seite anzuschauen und zu bearbeiten</li>
<li>komplett neue Stylesheets zu erstellen und diese auf eine Seite anzuwenden</li>
<li>bestehende Stylesheets zu importieren und auf eine Seite anzuwenden</li>
</ul>
<p>{{EmbedYouTube("7839qc55r7o")}}</p>
<p>Um die Stilbearbeitung zu öffnen, wählen Sie die Option "Stilbearbeitung" aus dem Menü "Webentwickler" (ein Untermenü im Menü "Werkzeuge" auf dem Mac). Die <a href="/de/docs/Tools/Tools_Toolbox">Toolbox </a>erscheint am unteren Rand des Browser-Fensters, wobei die Stilbearbeitung aktiviert ist:</p>
<p><img alt="" src="https://mdn.mozillademos.org/files/5651/style-editor.png" style="display: block; margin-left: auto; margin-right: auto;"></p>
<p>Links (oder oben, wenn Ihr Fenster sehr schmal ist) befindet sich eine Liste aller vom Dokument verwendeten Stylesheets, und rechts (oder unten, wenn Ihr Fenster sehr schmal ist) ist die Quelle für das Stylesheet, das Sie gerade in diesem Stylesheet-Fenster ausgewählt haben.</p>
<h2 id="Die_Stylesheet-Ansicht">Die Stylesheet-Ansicht</h2>
<p>Die Ansicht der Stylesheets auf der linken Seite listet alle Stylesheets auf, die vom aktuellen Dokument verwendet werden. Sie können die Verwendung eines bestimmten Stylesheets schnell ein- und ausschalten, indem Sie auf das Augesymbol links neben dem Stylsheetnamen klicken. Sie können alle Änderungen, die Sie am Stylesheet vorgenommen haben, auf Ihrem lokalen Computer speichern, indem Sie auf die Schaltfläche "Speichern" in der rechten unteren Ecke jedes Eintrags in der Liste klicken.</p>
<h2 id="Das_Bearbeitungsfenster">Das Bearbeitungsfenster</h2>
<p>Auf der rechten Seite befindet sich das Bearbeitungsfenster. Hier steht Ihnen die Quelle für das ausgewählte Stylesheet zum Lesen und Bearbeiten zur Verfügung. Alle Änderungen, die Sie vornehmen, werden in Echtzeit auf die Seite angewendet. Dadurch ist es wirklich einfach, mit dem Aussehen Ihrer Seite zu experimentieren, sie zu überarbeiten und zu testen. Wenn Sie mit Ihren Änderungen zufrieden sind, können Sie eine Kopie lokal speichern, indem Sie auf die Schaltfläche Speichern am Eintrag des Blattes im Blattfenster klicken.</p>
<p>Der Editor bietet Zeilennummern und Syntaxhervorhebung, um das Lesen Ihres CSS zu erleichtern. Siehe <a href="/en/Tools/Using_the_Source_Editor">Verwendung des Quelltexteditors</a> für die Dokumentation über den Editor selbst, einschließlich nützlicher Tastaturkürzel.</p>
<p>Eine besonders praktische Funktion der Stilbearbeitung: Sie minimiert automatisch die von ihr erkannten Stilvorlagen, ohne das Original zu beeinflussen. Dies erleichtert die Arbeit auf optimierten Seiten erheblich.</p>
<h2 id="Erstellen_und_Importieren_von_Stylesheets">Erstellen und Importieren von Stylesheets</h2>
<p>Sie können ein neues Stylesheet erstellen, indem Sie auf die Schaltfläche Neu in der Symbolleiste klicken. Dann können Sie einfach mit der Eingabe von CSS in den neuen Editor beginnen und beobachten, wie die neuen Stile in Echtzeit angewendet werden, genau wie die Änderungen in den anderen Sheets.</p>
<p>Sie können ein Stylesheet von der Festplatte laden und auf die Seite anwenden, indem Sie auf die Schaltfläche Importieren klicken.</p>
<h2 id="Siehe_auch">Siehe auch</h2>
<ul>
<li><a href="/en/Tools/Page_Inspector" title="Page Inspector">Page Inspector</a></li>
<li><a href="/en/Tools/Page_Inspector/3D_view" title="3D view">3D view</a></li>
<li><a href="/en/Tools/Page_Inspector/HTML_panel" title="HTML panel">HTML panel</a></li>
<li><a href="/en/Tools" title="Tools">Tools</a></li>
<li><a class="external" href="http://hacks.mozilla.org/2011/12/new-developer-tools-in-firefox-11-aurora/">New Developer Tools in Firefox 11 Aurora</a> (blog post)</li>
</ul>
<p>{{ languages( { "ja": "ja/Tools/Style_Editor"} ) }}</p>
|
