| ... |
... |
@@ -48,7
+48,7 @@ |
| 48 |
48 |
|
| 49 |
49 |
== Editor == |
| 50 |
50 |
|
| 51 |
|
-Im CSS-Bereich steht ein intelligenter Editor bereit, der beim Schreiben von CSS unterstützt. Der Editor, welcher hier verwendet wird, nennt sich [[Monaco Editor>>url:https://microsoft.github.io/monaco-editor/index.html||target="_blank"]]. Im folgenden seien kurz einige wesentliche Funktionalitäten erwähnt: |
|
51 |
+Im CSS-Bereich steht ein intelligenter Editor bereit, der beim Schreiben von CSS unterstützt. Der Editor, welcher hier verwendet wird, nennt sich [[Monaco Editor>>url:https://microsoft.github.io/monaco-editor/index.html||rel="noopener noreferrer" target="_blank"]]. Im folgenden seien kurz einige wesentliche Funktionalitäten erwähnt: |
| 52 |
52 |
|
| 53 |
53 |
{{figure image="designer_advanced_css_colorpicker.png" width="700" float="none"}} |
| 54 |
54 |
Farben sind ein Grundmerkmal jeglicher Gestaltung. Wird mit der Maus über eine Farbe gefahren, öffnet sich der Farbwähler. Hier kann komfortabel eine Farbe ausgewählt werden. Zudem wird auch für jede Farbe immer eine Vorschau angezeigt. Dies ist wesentlich einfacher zu erkennen als ein hexadezimaler Farbcode. |
| ... |
... |
@@ -58,11
+58,11 @@ |
| 58 |
58 |
Für jeden Selektor können die zugehörigen Eigenschaften ein- und ausgeklappt werden. Hierzu wird links in der Leiste auf das + und - geklickt. |
| 59 |
59 |
{{/figure}} |
| 60 |
60 |
|
| 61 |
|
-{{figure image="designer_advanced_css_value_suggest.png" width="700" float="none"}} |
|
61 |
+{{figure image="designer_advanced_css_property_suggest.png" width="700" float="none"}} |
| 62 |
62 |
Wenn CSS-Eigenschaften eingegeben werden, schlägt der Editor selbständig mögliche Eigenschaften vor. Durch Drücken von Strg und Leertaste kann auch die Autovervollständigung angestoßen werden. Weiterhin gibt es für viele CSS-Eigenschaften auch eine kurze Beschreibung, die erklärt, worum es sich bei der Eigenschaft handelt. Wurde der Designer neu geladen, werden die Beschreibungen ausgeblendet. Sie können angezeigt werden, in dem in der Liste der Vorschläge rechts auf das blaue {{icon name="info-circle"/}} geklickt wird. |
| 63 |
63 |
{{/figure}} |
| 64 |
64 |
|
| 65 |
|
-{{figure image="designer_advanced_css_property_suggest.png" width="700" float="none"}} |
|
65 |
+{{figure image="designer_advanced_css_value_suggest.png" width="700" float="none"}} |
| 66 |
66 |
Auch für die Werte von CSS-Eigenschaften stehen sowohl die Autovervollständigung als auch erklärende Hilfetexte bereit. Wurde der Designer neu geladen, werden die Beschreibungen ausgeblendet. Sie können angezeigt werden, in dem in der Liste der Vorschläge rechts auf das blaue {{icon name="info-circle"/}} geklickt wird. |
| 67 |
67 |
{{/figure}} |
| 68 |
68 |
|