Wiki-Quellcode von CSS-Bereich

Zeige letzte Bearbeiter
1 {{content/}}
2
3 {{figure image="designer_advanced_css_example_de.png" width="500"}}
4 Im {{smallcaps}}Css{{/smallcaps}}-Bereich kann eigenes {{smallcaps}}Css{{/smallcaps}} geschrieben werden. Hier werden Textfelder ohne Umrandung und die Beschreibungstexte in der Farbe blau dargestellt.
5 {{/figure}}
6
7 {{smallcaps}}Css{{/smallcaps}} wurde entworfen, um Darstellungsvorgaben weitgehend von den Inhalten zu trennen. Elemente eines Dokumentes können mit sogenannten {{smallcaps}}Css{{/smallcaps}}-Selektoren aufgrund verschiedener Eigenschaften identifiziert werden, zum Beispiel über ihre Klasse, über ihre Attributen oder über ihrer Position im Dokument. Mittels {{smallcaps}}Css{{/smallcaps}}-Eigenschaften wird dann die Darstellung der so selektierten Elemente geändert, etwa um eine andere Schriftart oder Farbe zu setzen.
8
9 Im {{smallcaps}}Css{{/smallcaps}}-Bereich kann eigenes {{smallcaps}}Css{{/smallcaps}} geschrieben werden, um die visuelle Darstellung des Formulars zu ändern.
10
11 Eine Liste von speziellen Selektoren innerhalb von {{formcycle case="dat"/}} findet sich unter [[Selektoren>>doc:Formcycle.Designer.Form.CodingPanel.Selector]].
12
13 == Hilfeseiten und Tutorials zu CSS ==
14
15 === CSS-Selektoren ===
16
17 * [[https://wiki.selfhtml.org/wiki/CSS/Selektoren||rel="noopener noreferrer" target="_blank"]]
18 * [[https://developer.mozilla.org/de/docs/Web/Guide/CSS/Getting_started/Selektoren||rel="noopener noreferrer" target="_blank"]]
19
20 === CSS-Eigenschaften ===
21
22 * [[https://wiki.selfhtml.org/wiki/CSS/Eigenschaften||rel="noopener noreferrer" target="_blank"]]
23 * [[http://www.mediaevent.de/css/tabelle-csseigenschaften.html||rel="noopener noreferrer" target="_blank"]]
24
25 == Beispiele ==
26
27 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 {{smallcaps}}Css{{/smallcaps}}-Einheiten //em //verwendet werden. Wird später die Schriftgröße des Formulars geändert, ändern sich alle anderen Schriftgrößen proportional.
28
29 {{code language="CSS"}}
30 FORM.xm-form { /* Selektiert das gesamte Formular */
31 font-size: 16px; /* Setzt die Basisschriftgröße. */
32 color: #111; /* Setzt die Default-Schriftfarbe. */
33 font-family: Arial; /* Setzt die Default-Schriftart. */
34 }
35 {{/code}}
36
37
38 Hiermit werden alle Texten mit der Klasse //hoherText// groß dargestellt. Die Klasse kann im {{designer case="dat"/}} rechts unter [[{{smallcaps}}Css{{/smallcaps}}-Klassen>>doc:Formcycle.Designer.Form.ElementProperties.CSSClasses]] Elementen gegeben werden.
39
40 {{code language="CSS"}}
41 .hoherText .XTextField { /* Selektiert alle Texte mit der Klasse hoherText */
42 height: 60px; /* Setzt die Höhe des Feldes auf 60 Pixel */
43 font-size: 40px; /* Setzt die Schriftgröße auf 40 Pixel. */
44 font-weight: bold; /* Macht den Text fett. */
45 text-align: center; /* Richtet den Text mittig aus. */
46 }
47 {{/code}}
48
49 Weitere mögliche {{smallcaps}}Css{{/smallcaps}}-Anpassungen werden auf einer [[Beispielseite>>Examples.FormStylingAdjustments]] genauer vorgestellt.
50
51 == Editor ==
52
53 Im {{smallcaps}}Css{{/smallcaps}}-Bereich steht ein intelligenter Editor bereit, der beim Schreiben von {{smallcaps}}Css{{/smallcaps}} 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:
54
55 {{figure image="designer_advanced_css_colorpicker.png" width="500" float="none"}}
56 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.
57 {{/figure}}
58
59 {{figure image="designer_advanced_css_expand_collapse.png" width="500" float="none"}}
60 Für jeden Selektor können die zugehörigen Eigenschaften ein- und ausgeklappt werden. Hierzu wird links in der Leiste auf das + und - geklickt.
61 {{/figure}}
62
63 {{figure image="designer_advanced_css_property_suggest.png" width="700" float="none"}}
64 Wenn {{smallcaps}}Css{{/smallcaps}}-Eigenschaften eingegeben werden, schlägt der Editor beim Tippen 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 {{smallcaps}}Css{{/smallcaps}}-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.
65 {{/figure}}
66
67 {{figure image="designer_advanced_css_value_suggest.png" width="700" float="none"}}
68 Auch für die Werte von {{smallcaps}}Css{{/smallcaps}}-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.
69 {{/figure}}
70
71 {{figure image="designer_advanced_css_search_replace_de.png" width="700" float="none"}}
72 Wird eine {{smallcaps}}Css{{/smallcaps}}-Datei länger, kann es schwierig werden, bestimmte Stellen wiederzufinden. Abhilfe schafft hier die Suche. Die Suchleiste erscheint rechts oben im Editor durch Drücken von Strg + F. Hier kann ein Text eingegeben werden, nachdem in der {{smallcaps}}Css{{/smallcaps}}-Datei gesucht werden soll. Optional kann die Suche über die Icons rechts in der Suchleiste auch die Groß- und Kleinschreibung berücksichtigen. Schließlich ist auch ein Suchen und Ersetzen von Textpassagen möglich, indem entweder Strg + H oder in der Suchleiste links auf den Pfeil gedrückt wird.
73 {{/figure}}
74
75 {{figure image="designer_advanced_css_hints_de.png" width="700" float="none"}}
76 Einige Arten von Fehlern werden vom Editor erkannt und angezeigt. Grün unterstrichene Stellen sind Hinweise und mögliche Fehler. Rot unterstrichene Stellen sind meist Syntaxfehler und sollten unbedingt behoben werden. Beim Fahren mit der Maus über die Stelle wird eine detaillierte Fehler- oder Warnungsmeldung angezeigt. Hier in der Abbildung gibt es eine Warnung, da bei Inline-Elemente keine Breite direkt gesetzt werden kann (diese wird durch den Layout-Algorithmus ermitteln).
77 {{/figure}}