JavaFX: CSS-Variablen

Question

Ich habe vier Schaltflächen, die ich auf die gleiche Weise stylen möchte, außer dass jede von ihnen ein eindeutiges Bild hat. Es gibt drei Stile für den Normalzustand und die anderen für Hover und fokussierte Zustände. Tun Sie dies in CSS, die die empfohlene Art und Weise ist, würde eine Menge Wiederholung, und ich suchte im Netz und es scheint, Variablen werden in CSS nicht unterstützt. Gibt es einen Weg, oder wäre es pragmatischer, dies im Code zu tun?

Answer 1

Die korrekte Verwendung von CSS vermeidet Wiederholungen. Sie können den Code zwischen vier Schaltflächen auf verschiedene Arten teilen.

Lassen Sie die Tasten, um eine Klasse teilen und ihre Unterschiede Stil:

<div id="btn1" class="button">Button 1</div> 
<div id="btn2" class="button">Button 2</div> 
<div id="btn3" class="button">Button 3</div> 
<div id="btn4" class="button">Button 4</div> 

<style> 
    .button { 
     color: blue; 
     background: white; 
     /* etc... */ 
    } 

    #btn1 { background-image: url('uniqueimage1.png'); 
    #btn2 { background-image: url('uniqueimage2.png'); 
    /* etc... */ 
</style> 

---

oder weniger bevorzugt ...

Ziel mehrere Elemente in einer CSS-Regel:

<div id="btn1">Button 1</div> 
<div id="btn2">Button 2</div> 
<div id="btn3">Button 3</div> 
<div id="btn4">Button 4</div> 

<style> 
    #btn1, #btn2, #btn3, #btn4 { 
     color: blue; 
     background: white; 
     /* etc... */ 
    } 

    #btn1 { background-image: url('uniqueimage1.png'); 
    #btn2 { background-image: url('uniqueimage2.png'); 
    /* etc... */ 
</style>