| ... |
... |
@@ -1,5
+1,9 @@ |
| 1 |
1 |
{{content/}} |
| 2 |
2 |
|
|
3 |
+{{figure image="designer_advanced_css_example_de.png" width="500"}} |
|
4 |
+Im CSS-Bereich kann eigenes CSS geschrieben werden. Hier werden Textfelder ohne Umrandung und die Beschreibungstexte in der Farbe blau dargestellt. |
|
5 |
+{{/figure}} |
|
6 |
+ |
| 3 |
3 |
CSS wurde entworfen, um Darstellungsvorgaben weitgehend von den Inhalten zu trennen. Elemente eines Dokumentes können mit sogenannten CSS-Selektoren aufgrund verschiedener Eigenschaften identifiziert werden, zum Beispiel über ihre Klasse, über ihre Attributen oder über ihrer Position im Dokument. Mittels CSS-Eigenschaften wird dann die Darstellung der so selektierten Elemente geändert, etwa um eine andere Schriftart oder Farbe zu setzen. |
| 4 |
4 |
|
| 5 |
5 |
Im CSS-Bereich kann eigenes CSS geschrieben werden, um die visuelle Darstellung des Formulars zu ändern. |
| ... |
... |
@@ -18,6
+18,15 @@ |
| 18 |
18 |
* https://wiki.selfhtml.org/wiki/CSS/Eigenschaften |
| 19 |
19 |
* http://www.mediaevent.de/css/tabelle-csseigenschaften.html |
| 20 |
20 |
|
|
25 |
+== Editor == |
|
26 |
+ |
|
27 |
+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]]. Im folgenden seien kurz einige wesentliche Funktionalitäten erwähnt: |
|
28 |
+ |
|
29 |
+{{figure image="designer_advanced_css_colorpicker.png" width="500" float="none"}} |
|
30 |
+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. |
|
31 |
+{{/figure}} |
|
32 |
+ |
|
33 |
+ |
| 21 |
21 |
== Beispiele == |
| 22 |
22 |
|
| 23 |
23 |
Hier werden Standardwerte für das Formular gesetzt. In dem für das Formular eine Schriftgröße in Pixel gesetzt wird, können für alle anderen Elemente die CSS-Einheiten //em //bzw. //rem// verwendet werden. Wird später die Schriftgröße des Formulars geändert, ändern sich alle anderen Schriftgrößen proportional. |
| ... |
... |
@@ -41,3
+41,4 @@ |
| 41 |
41 |
text-align: center; /* Richtet den Text mittig aus. */ |
| 42 |
42 |
} |
| 43 |
43 |
{{/code}} |
|
57 |
+{{/figure}} |