Selektor-Design (CSS)

Mithilfe von CSS (Cascading Style Sheets), einer Stylesheet-Sprache, lässt sich der Selektor individuell designen. In den Einstellungen der Workbench kann im CSS-Editor, welcher sich über den danebenstehenden Pfeil vergrößern lässt, das Aussehen aller Elemente auf den Selektor-Seiten festgelegt werden. Einige häufig eingesetzte Beispiele und Informationen zum CSS-Design sind zum Download als PDF-Datei bereitgestellt.

Häufig verwendete CSS Einstellungen können Sie hier herunterladen:

📁 DOWNLOAD HIER

Im Allgemeinen baut sich eine CSS-Regel für den Selektor wie im folgenden Beispiel auf. Genauere Informationen zu den Details finden Sie in der PDF-Datei.

#foxbase-selector .mdc-button {
    color: blue !important;
}

Der Zusatz des ID-Selektors „#foxbase-selector“ wird benötigt, um den Klassen-Selektor „mdc-button“ auszuwählen. Dieser wählt das zu gestaltende Element aus. Die zugehörigen Regelsätze befinden sich dahinter in geschweiften Klammern. „color“ beschreibt die Eigenschaft des Elements, gefolgt von einem Doppelpunkt, und wird mit einem Wert („blue“) versehen. Zusätzlich wird am Ende der CSS-Regel „!important“ angegeben, um bestehende Regeln zu überschreiben. Die jeweiligen Selektoren und aktuellen CSS Einstellungen können Sie im Browser im Entwicklertool unter „Elements“ ermitteln und Änderungen dort testen.