CSS [Yksityiskohtainen selitys] Mukautetut ominaisuudet (tunnetaan myös nimellä CSS-muuttujat)

2024-07-12

Ilmoita muuttujat - -

Muuttujien nimeämissäännöt

Tukee numeerista nimeämistä
Tukee nimeämistä väliviivojen ja välilyöntien avulla
Tukee kiinalaisia ja muita CJK-tekstejä
Erikoismerkkejä sisältäviä nimiä, kuten $, [,], ^, (,), %, " jne. ei tueta. Näiden erikoismerkkien käyttäminen edellyttää kenoviivan estomerkkiä.

muuttuja

Voi olla mikä tahansa arvo taiilmaisu

 --direction: to top;
 --gradientColor: deeppink, deepskyblue;
 --gradient: to top, deeppink, deepskyblue;
 --linear-gradient: linear-gradient(to top, deeppink, deepskyblue);
1
2
3
4

muuttuva laajuus

Jälkeläiset elementit voivat periä kanta-elementtien asettaman CSS-arvon muuttumattomana.Mukautetut ominaisuudetarvo.

body {
    --color: deepskyblue;
}
.box {
    background-color: var(--color);
}
1
2
3
4
5
6

globaaleja muuttujia

:root {
  --borderColor: #ccc;
}
1
2
3

Muuttujien ominaisuudet

Muuttuvia arvoja voidaan välittää toisilleen

body {
    --green: #4CAF50;   
    --successColor: var(--green);
}
1
2
3
4

css-muuttujat eivät voi antaa arvoja itselleen

/* 这种写法是非法的 */
--primary-color: var(--primary-color, #2a80eb);
1
2

css-muuttujia ei voi käyttää @media-mediaominaisuuden arvoina

:root {
    --maxWidth: 640px;
}
/* 不合法，语法无效 */
@media (max-width: var(--maxWidth)) {}
1
2
3
4
5

CSS-muuttujat sisällön ominaisuusarvoina eivät vaikuta

/* 无效 */
.bar::before {
    content: var(--percent);
}
1
2
3
4

Käytä muuttujaa var()

p {  
   background-color: var(--any-what, deepskyblue); 
}
1
2
3

deepskyblue onOletusarvo, käytä deepskybluea, kun -any-what ei kelpaa

Kun var()-funktion parametri on laiton

body {
    --color: 20px;
    background-color: deeppink;
    background-color: var(--color, deepskyblue);
}
1
2
3
4
5

Rungon lopullinen taustaväri on läpinäkyvä, koska taustavärin alkuarvo on läpinäkyvä

Niin kauan kuin var()-funktion ensimmäinen parametriarvo on voimassa, vaikka parametriarvo olisi sekaisin, se jäsennetään silti normaalisti. Jos ensimmäinen parametrin arvo on laiton, var()-funktio ratkaisee nykyisen CSS-ominaisuuden alkuarvon tai perityn arvon (jos periytymistä on), eli se hahmonnetaan määrittämättömän globaalin avainsanan sääntöjen mukaisesti. (Huomaa, että renderöintisäännöt ovat samankaltaisia eivätkä vastaa määrittämättömän avainsanan asettamista suoraan.)

Var()-funktion välilyönnit

html {
    font-size: 14px;
}
body {
    --size: 20;
    font-size: 16px;
    font-size: var(--size)px;
}
1
2
3
4
5
6
7
8

Lopullinen body-fontin koko on 14 pikseliä

Periaate: Tässä font-size:var(–size)px vastaa arvoa font-size:20 px. Huomaa, että 20:n jälkeen on välilyönti, joka on laiton font-size-määritteen arvo. Koska var(-size)px on kieliopillisesti laillinen, font-size:16px nollataan ja lopulta käytetään yläelementin 14px asettamaa fonttikokoa.

Parannussuunnitelma on:

body {
    --size: 20;   
    font-size: calc(var(--size) * 1px);
}
1
2
3
4

tai

body {
    --size: 20px;   
    font-size: var(--size);
}
1
2
3
4

js saa globaalin CSS-muuttujan arvon

let borderColor= getComputedStyle(document.documentElement).getPropertyValue("--borderColor");
1

// 获取 --color CSS变量值
var cssVarColor = getComputedStyle(box).getPropertyValue('--color'); 
// 输出cssVarColor值，结果是deepskyblue 
console.log(cssVarColor);
1
2
3
4

js muokkaa globaalien CSS-muuttujien arvoa

document.documentElement.style.setProperty("--borderColor","green");
1

js asettaa paikallisten CSS-muuttujien arvon

<div id="box">
    <img src="1.jpg" style="border: 10px solid var(--color);">
</div>
1
2
3

box.style.setProperty('--color', 'deepskyblue');
1

Käytännön esimerkkejä

Näytä CSS-muuttujan arvo sivulla CSS-laskurin avulla

/* 有效 */
.bar::before {
    counter-reset: progress var(--percent);
    content: counter(progress);
}
1
2
3
4
5

edistymispalkki

https://blog.csdn.net/weixin_41192489/article/details/121007837

svg-kuvia käytetään useissa paikoissa

:root {
    --icon-check: url("data:image/svg+xml,%3Csvg viewBox='0 0 32 32'%3E%3Cpath 
fill='green' d='M28.027 5.161l-17.017 17.017-7.007-7.007-3.003 3.003 10.010 10.010 
20.020-20.020z'%3E%3C/path%3E%3C/svg%3E");
}
.icon-check {
    background: var(--icon-check) no-repeat center / 16px;
    /* 尺寸限制 */
    display: inline-block;
    width: 20px; height: 20px;
}
.valid-pass::after {
    content: var(--icon-check);
    /* 尺寸限制 */
    display: inline-block;
    width: 20px; height: 20px;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

Katso vaikutus https://demo.cssworld.cn/new/8/1-3.php

Painikkeiden napsautustehosteet

Katso vaikutus https://demo.cssworld.cn/new/8/1-1.php

button {
    /* 这里的空格很重要 */
    --open: ;
    color: #2a80eb;
    -webkit-text-fill-color: #fff;
    border-radius: 4px;
    padding: 9px 20px;
    border: 1px solid var(--open, rgba(0,0,0,.1));
    box-shadow: var(--open, inset 0 1px 2px rgba(0,0,0,.1));
    background: var(--open, linear-gradient(#0003, transparent)) currentColor;
    text-shadow: var(--open, -1px -1px #0003);
    transition: .15s;
}
button:active {
    /* 任意全局关键字都可以 */
    --open: inherit;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

Toteutusperiaate

-open:;:n edessä on välilyönti, eli -open-attribuutin arvo on välilyönti, joka voi olla syntaktisesti kelvollinen.Mutta välilyönnit eivät kelpaa CSS-ominaisuuksille, kuten box-shadow ja background. Siksi CSS-ominaisuudet, kuten box-shadow ja background, ratkaistaan alkuperäisiin arvoihin.
Kun olet napsauttanut painiketta :active pseudo-luokan käynnistämiseksi, CSS-käsky –open:inherit suoritetaan. Yleisen CSS-avainsanan on oltava virheellinen mukautetun CSS-attribuutin arvona, joten var()-funktio käyttää vara-CSS-attribuuttia. renderöinnin arvo.

Muokatun CSS-funktion avainsana()

https://blog.csdn.net/weixin_41192489/article/details/121021277

Simuloi attr()-funktiota

https://blog.csdn.net/weixin_41192489/article/details/121022170

Teknologian jakaminen