A css változók használata
CSS változók
A változók a CSS natív eszközeivé váltak, most már nem csak preprocesszorok. A CSS preprocesszorok, mint a Sass, a változók nagyon népszerűek.
Minél jobb a böngészők változóinak támogatása (Edge és IE nélkül), annál könnyebb használni őket a kódban.
CSS változók deklarálása
Legjobb a CSS változók deklarálása az ál-osztályban: root a stílus fejlécében. Pszeudoosztály: a gyökér a DOM legelső szava, általában egy HTML-címke. Az egyik univerzális szelektor.
Gyakorlati kurzus az adaptív leszállásról a semmiből!
Tanuljon meg a semmiből, hogy adaptálódjon a HTML5 és CSS3 alkalmazásokhoz a következő 6 napban
Az ál-osztály: a gyökér választóként működik. A változó két kötőjellel kezdődik, majd a változó és az érték neve. Továbbá a kódban a létrehozott változó hivatkozhat erre a célra alkalmas minden esetben. például:
Ebben a példában az összes bekezdés háttérszínét a primitív-szín változóban írt értékre változtatjuk. Ebben a változóban, amely a pszeudosztályban van: root, az érték piros már írt.
A CSS változók helyes használata
Ha a színt pirosról kékre kell változtatni, akkor vagy egy rossz névvel rendelkező változót kell használni a kód alatt, vagy módosítania kell a változót mindenhol.
Valószínűleg mindkét problémát elkerülni, mert megöli a gyors és egyszerű kód szerkesztését.
Helyesen hozzon létre CSS változókat, az alábbiak szerint, két szakaszban:
A kétlépcsős változók létrehozása a fentiek szerint lehetővé teszi a kód egyszerű és hatékony szerkesztését. Ha meg akarja változtatni a piros színeket minden stílusban, akkor csak módosítania kell a -red változót. Ellenkező esetben minden értéket manuálisan kell megváltoztatnia.
A változók szintjén ilyen módon megváltoztathatja a fő színt a webhelyen. Ha kék színt szeretne tenni, mindössze két lépést kell tennie.
Gyakorlati kurzus az adaptív leszállásról a semmiből!
Tanuljon meg a semmiből, hogy adaptálódjon a HTML5 és CSS3 alkalmazásokhoz a következő 6 napban
Először kék színű változót kell kijelölnie, majd állítsa be az alapszín értékeként. Az alábbiakban az előző példán alapuló példa található.
Gyakorlati alkalmazás
A CSS változók sok példát mutatnak a gyakorlati (és nem praktikus) alkalmazásokra. Elmondom gyakorlati szempontból.
Útmutatók a színekhez és a stílusokhoz
A változók használatával stílus útmutatókat hozhat létre, és könnyen módosíthatja azokat. A legjobb módja. Az alábbiakban egy gyakorlati példát találhat a színeket használó stílusok kézikönyvére.
Hosszú távon ez a folyamat lehetővé teszi a kód gyors és egyszerű szerkesztését. Kicsit változtathat a színen, és nem szerkesztheti a teljes CSS-t.
Margók és lábazatok
A változók használatával alapértelmezés szerint beállíthat margót és kitöltést. például:
Magasság és szélesség
Érdekes téma, a calc () függvény segítségével számításokat végezhet. Mielőtt megmagyaráznám, példát fogok adni:
Beállíthatja a szülőblokk méreteit, és kiszámíthatja a gyermekelemek dimenzióit a szülőhöz képest. A módszer jól működik, különösen adaptív elemek készítéséhez.
A változók stílusokhoz való alkalmazására vonatkozó egyéb módszerek
A változók jól alkalmazhatók a betűtípusok, a dobozos árnyékolás, az animációk stb. A változók bármilyen módon felhasználhatók.
Megjegyzés: az alábbi demó szerkeszthető közvetlenül az oldalon.
Demo CSS változókkal
Kiadás: A webformyself parancs.
Gyakorlati kurzus az adaptív leszállásról a semmiből!
Tanuljon meg a semmiből, hogy adaptálódjon a HTML5 és CSS3 alkalmazásokhoz a következő 6 napban
A legfrissebb hírek az informatikai és webfejlesztésről a Telegram csatornán
