Live
x
<html> <head> <title>Zmienne CSS</title> <style> /* Zmienne globalne - możemy ich użyć na dowolnym znaczniku */ :root { --headers-color: #16438b; --text-color: #960e62; } /* Zmienna lokalna - dostępna tylko na znacznikach <footer> oraz ich "dzieciach" */ footer { --text-color-footer: #25960e; } section h2 { /* Użycie zmiennej CSS */ color: var(--headers-color); } section p { color: var(--text-color); } section div { /* Użycie lokalnej zmiennej CSS na niewłaściwym elemencie. Ten styl nie zadziała. */ color: var(--text-color-footer); } footer h2 { /* Zmiennej globalnej możemy użyć w każdym miejscu. */ color: var(--headers-color); } footer p { /* Zmiennej lokalna użyta we właściwym miejscu - "dziecko" tagu <footer> */ color: var(--text-color-footer); } </style> </head> <body> <section> <h2>Witaj na stronie</h2> <p>W tej lekcji poznasz zmienne CSS 💪</p> <p>Do dzieła!</p> </section> <section> <h2>Definicje</h2> <p>Zmienne CSS są nazywane również Custom proprties</p> <div>Ten tekst nie będzie miał koloru zmiennej lokalnej.</div> </section> <footer> <h2>Do zobaczenie w kolejnej lekcji 👋</h2> <p>Nie zapomnij o powtórkach materiału.</p> </footer> </body></html>
External CSS
This Pen doesn't use any external CSS resources.
External JavaScript
This Pen doesn't use any external JavaScript resources.