Unterschiede
Hier werden die Unterschiede zwischen der gewählten und der aktuellen Version gezeigt.
| javafx:css 2015/04/14 09:42 | 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 53: | Zeile 53: | ||
| -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 | ||
| } | } | ||
| Zeile 58: | Zeile 88: | ||
| -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) | ||
| } | } | ||
| Zeile 64: | Zeile 95: | ||
| -fx-pref-height: 16px; // 16px Tabhöhe | -fx-pref-height: 16px; // 16px Tabhöhe | ||
| -fx-max-height: 16px; | -fx-max-height: 16px; | ||
| + | } | ||
| + | |||
| + | .tab:selected { // Selktierter Reiter | ||
| + | -fx-background-color: white; // Hintergrund weiß | ||
| } | } | ||
| Zeile 77: | Zeile 112: | ||
| -fx-background-color: #dddddd; // hellgrau | -fx-background-color: #dddddd; // hellgrau | ||
| -fx-border-color: transparent transparent red transparent; // roter Rand an der rechten Seite | -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; | ||
| } | } | ||
| Zeile 92: | Zeile 146: | ||
| -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> | ||
