CSS zuweisen/setzen

Das JavaFX kann jedem Node css zugewiesen werden:

ObservableList<String> stylesheets = primaryStage.getScene().getStylesheets();
stylesheets.clear();
stylesheets.add("my.css");
 
Pane pane1 = new Pane();
pane1.setId("myId");
 
Pane pane2 = new Pane();
pane2.getStyleClass().add("myClass");

Die dazugehörige my.css -Datei:

#myId {
   -fx-...
}
.myClass {
   -fx-...
}

Beispielhafte JavaFX css-Werte sind unter anderem (die .class namen sind vordefiniert und brauchen nicht extra gesetzt werden; selbstverständlich können auch Ids verwendet werden):

.button {
   -fx-background-color: white;    // Weißer Hintergrund
   -fx-min-height: 20px;           // Minimale Höhe 20px
   -fx-pref-height: 20px;          // Bevorzugte Höhe 20px
   -fx-max-height: 20px;           // Maximale Höhe 20px
   -fx-padding: 0 10 0 10;         // Abstand zwischen Text und Rand (open, rechts, unten, links)
}

.column-header {
   -fx-background-color: red;      // Roter Tabellen-Header-Hintergrund
}

.column-header .label {
    -fx-alignment: CENTER_LEFT;    // Linksbündige Ausrichtung der Spaltenüberschrift
}

.combo-box-base {
    -fx-background-color: gray;    // Grauer Hintergrund für Pfeilrechteck und Rahmen
}

.combo-box .list-cell {
   -fx-background-color: white;    // Weißer Hintergrund für Textfeld und Liste
}

.label {
   -fx-font-weight: bold;          // Schrift in fett
}

.password-field {
   -fx-border-color: transparent;  // Rahmen transparent
   -fx-background-color: yellow;   // Hintergrund gelb
}

.progress-bar {
   -fx-accent: cyan;               // Balkenfarbe
   -fx-control-inner-background: palegreen;  // Hintergrundfarbe
}

.rectangle {
   -fx-stroke: #ff0000;            // Roter Rahmen
   -fx-fill: #0000ff;              // Blau gefüllt
   -fx-stroke-type: outside;       // Rahmen außerhalb des Rechtecks (Nebeneffekt: Anti-Aliasing verschwindet)
}

.tab {
   -fx-font-size: 12px;            // 12px Schrifthöhe
   -fx-pref-height: 16px;          // 16px Tabhöhe
   -fx-max-height: 16px;
}

.tab:selected {                    // Selktierter Reiter
   -fx-background-color: white;    // Hintergrund weiß
}

.tab-content-area {
   -fx-background-color: #ff0000;  // Roter Hintergrund
}

.tab-label {
    -fx-rotate: 45;                // Tab-Text wird um 45 Grad gedreht
}

.tab-header-background {           // Der Bereich hinter den Reitern
   -fx-background-color: #dddddd;  // hellgrau
   -fx-border-color: transparent transparent red transparent;  // roter Rand an der rechten Seite
}

.table-cell {
   -fx-alignment: center-left;     // vertical zentriert und horizontal linksbündig
}

.table-row-cell {
    -fx-cell-size: 32px;           // Zeilenhöhe 32 Pixel
}

.table-view .column-header .label {
    -fx-alignment: cemter-left;    // Label im Column-Header linksbündig ausrichten
}

.table-view > .column-header-background > .nested-column-header > .column-header.table-column {
    -fx-background-image: url("http://was-weiss-ich/image.jpg");  // Icon für Column-Header
    -fx-background-repeat: no-repeat;
    -fx-position: left center;
    -fx-background-position: 4 4;
}

.toolbar {
   -fx-background-color: white;    // Weißer Hintergrund
   -fx-spacing: 4;                 // 4 Pixel Abstand zwischen den Buttons
   -fx-orientation: vertical;      // Ausrichtung senkrecht; Standard ist waagerecht (horizontal)
   -fx-min-height: 20px;           // Minimale Höhe 20px
   -fx-pref-height: 20px;          // Bevorzugte Höhe 20px
   -fx-max-height: 20px;           // Maximale Höhe 20px
}

.tooltip {
   -fx-background-color: white;    // Weißer Hintergrund
   -fx-padding: 2 6 2 6;           // Abstand zwischen Text und Rand (open, rechts, unten, links)
   -fx-text-fill: red;             // Textfarbe rot
}

.tree-cell {
   -fx-background-color: yellow;   // Gelber Hintergrund
   -fx-text-fill: red;             // Textfarbe rot
}

.tree-table-cell {
   -fx-background-color: yellow;   // Gelber Hintergrund
   -fx-text-fill: red;             // Textfarbe rot
   -fx-pref-height: 20px;          // Bevorzugte Höhe 20px
}

Stichworte:

JavaFX CSS setzen, JavaFX 8 CSS zuweisen, id, class, Beispiel, Übersicht