Unterschiede
Hier werden die Unterschiede zwischen der gewählten und der aktuellen Version gezeigt.
| javafx:css 2015/04/13 14:02 | javafx:css 2020/01/22 20:59 aktuell | ||
|---|---|---|---|
| Zeile 29: | Zeile 29: | ||
| Pane pane1 = new Pane(); | Pane pane1 = new Pane(); | ||
| - | pane1.setId("myID"); | + | pane1.setId("myId"); |
| Pane pane2 = new Pane(); | Pane pane2 = new Pane(); | ||
| Zeile 37: | Zeile 37: | ||
| Die dazugehörige my.css -Datei:\\ | Die dazugehörige my.css -Datei:\\ | ||
| <code css> | <code css> | ||
| - | #myID { | + | #myId { |
| -fx-... | -fx-... | ||
| } | } | ||
| Zeile 48: | Zeile 48: | ||
| <code> | <code> | ||
| .button { | .button { | ||
| - | -fx-background-color: white; // Weißer Hintergrund | + | -fx-background-color: white; // Weißer Hintergrund |
| - | -fx-min-height: 20px; // Minimale Höhe 20px | + | -fx-min-height: 20px; // Minimale Höhe 20px |
| - | -fx-pref-height: 20px; // Bevorzugte Höhe 20px | + | -fx-pref-height: 20px; // Bevorzugte Höhe 20px |
| - | -fx-max-height: 20px; // Maximale 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) | + | -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 { | .rectangle { | ||
| - | -fx-stroke: #ff0000; // Roter Rahmen | + | -fx-stroke: #ff0000; // Roter Rahmen |
| - | -fx-fill: #0000ff; // Blau gefüllt | + | -fx-fill: #0000ff; // Blau gefüllt |
| + | -fx-stroke-type: outside; // Rahmen außerhalb des Rechtecks (Nebeneffekt: Anti-Aliasing verschwindet) | ||
| } | } | ||
| .tab { | .tab { | ||
| - | -fx-font-size: 12px; // 12px Schrifthöhe | + | -fx-font-size: 12px; // 12px Schrifthöhe |
| - | -fx-pref-height: 16px; // 16px Tabhöhe | + | -fx-pref-height: 16px; // 16px Tabhöhe |
| -fx-max-height: 16px; | -fx-max-height: 16px; | ||
| } | } | ||
| - | .tab-header-area { | + | .tab:selected { // Selktierter Reiter |
| - | -fx-pref-height: 18px; // 18px Höhe des Bereichs in dem sich die Reiter befinden | + | -fx-background-color: white; // Hintergrund weiß |
| - | -fx-max-height: 18px; | + | } |
| + | |||
| + | .tab-content-area { | ||
| + | -fx-background-color: #ff0000; // Roter Hintergrund | ||
| } | } | ||
| .tab-label { | .tab-label { | ||
| - | -fx-rotate: 45; // Tab-Text wird um 45 Grad gedreht | + | -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 { | .toolbar { | ||
| - | -fx-background-color: white; // Weißer Hintergrund | + | -fx-background-color: white; // Weißer Hintergrund |
| - | -fx-spacing: 4; // 4 Pixel Abstand zwischen den Buttons | + | -fx-spacing: 4; // 4 Pixel Abstand zwischen den Buttons |
| - | -fx-orientation: vertical; // Ausrichtung senkrecht; Standard ist waagerecht (horizontal) | + | -fx-orientation: vertical; // Ausrichtung senkrecht; Standard ist waagerecht (horizontal) |
| - | -fx-min-height: 20px; // Minimale Höhe 20px | + | -fx-min-height: 20px; // Minimale Höhe 20px |
| - | -fx-pref-height: 20px; // Bevorzugte Höhe 20px | + | -fx-pref-height: 20px; // Bevorzugte Höhe 20px |
| - | -fx-max-height: 20px; // Maximale Höhe 20px | + | -fx-max-height: 20px; // Maximale Höhe 20px |
| } | } | ||
| .tooltip { | .tooltip { | ||
| - | -fx-background-color: white; // Weißer Hintergrund | + | -fx-background-color: white; // Weißer Hintergrund |
| - | -fx-padding: 2 6 2 6; // Abstand zwischen Text und Rand (open, rechts, unten, links) | + | -fx-padding: 2 6 2 6; // Abstand zwischen Text und Rand (open, rechts, unten, links) |
| - | -fx-text-fill: red; // Textfarbe rot | + | -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 | ||
| } | } | ||
| </code> | </code> | ||
