PLOTKARKA.EU
Plansze
HTML5 CSS Styling Logo
Layer 1
CSS3
Zmienne w CSS
Plansza interaktywna marzec 2016
URL:
http://www.plotkarka.eu/PI/css-variables/
Autor:
Radosław Kowaluk
Wstęp
Deklaracja
Składnia
Opis
--
prefiks przed nazwą zmiennej
var()
funkcja odwołania
Definiowanie zmiennych
Testuj
<!doctype html> <html lang="pl"> <head> <title>Przykład 1</title> <meta charset="utf-8" /> <style type="text/css"> :root { --x: silver; } h1 { color: var(--x); border: var(--x) solid 1px; } </style> </head> <body> <h1>Witaj świecie!</h1> </body> </html>
Definiowanie zmiennych
Testuj
<!doctype html> <html lang="pl"> <head> <title>Przykład 2</title> <meta charset="utf-8" /> <style> * { --x: "test"; } h1::after { content: var(--x); } h2::before { content: var(--x); } </style> </head> <body> <h1>Witaj świecie!</h1> <h2>Witaj świecie!</h2> </body> </html>
Definiowanie zmiennych
Testuj
<!doctype html> <html lang="pl"> <head> <title>Przykład 3</title> <meta charset="utf-8" /> <style type="text/css"> body { --x: 2; } h1 { font-size: calc(var(--x) * 10px); } h2 { font-size: calc(var(--x) * 5px); } </style> </head> <body> <h1>Witaj świecie!</h1> <h2>Witaj świecie!</h2> </body> </html>