Hisia @property mwelezo

Ufafanuzi na matumizi

CSS @property Makweli inatumia ujumbezi zisizochukuliwa kwa kudumu cha mifano kwa sababu hana kumengia JavaScript.

@property Makweli ina tathmini ya aina na mpangilio, inaweza kuingiza thamani kwa kawaida, na kuingiza ujumbezi ambao unaweza kupata thamani kutoka kwenye elementi yake kina.

Kuitumia @property Mapema:

• Tathmini ya aina na mpangilio: lazima kuingiza aina ya data ya ujumbezi zisizochukuliwa, kama vile <number>, <color>, <length> na nyingine. Hii inakadiriwa kwa kusikia macho na kuingia kwa ujumbezi zisizochukuliwa.
• Kuweka thamani kwa kawaida: inaweza kuingiza thamani kwa kawaida kwa ujumbezi zisizochukuliwa. Hii inakadiriwa kwa ujumbezi zisizofaa, kwa sababu programu ya kinywagiliazo inatumia thamani ya kawaida iliyochukuliwa.
• Kuweka ujumbezi wa kuwepa: lazima kuingiza ujumbezi wa ujumbezi zisizochukuliwa ambao unaweza kupata thamani kutoka kwenye elementi yake kina.

Mifano: Kuingiza ujumbezi zisizochukuliwa

@property --my-color {
  syntax: "<color>";
  inherits: true;
  initial-value: lightgray;
}

Maelezo hii inaonyesha kwamba --my-color ni ujumbezi wa rangi, ambao unaweza kupata thamani kutoka kwenye elementi yake kina na thamani kwa kawaida ni lightgray.

Kuandamili ya CSS: kuitumia ujumbezi zisizochukuliwa

body {}}
  backgound-color: var(--my-color);
}

Mfano

Mfano 1

Kusababisha kati ya mawili ya kiwili cha uongezaji - na kutumia kusafisha kufichukiza ujaribio wa mifano:

@property --startColor {
  syntax: "<color>";
  initial-value: #EADEDB;
  inherits: false;
}
@property --endColor {
  syntax: "<color>";
  initial-value: #BC70A4;
  inherits: false;
}

Mwongozo wa kufanya

Mpangilio 2

Kusababisha kati ya mawili ya kiwili cha uongezaji: moja ya kubuni ukubwa wa kiwili, moja ya kubuni rangi ya kiwili:

@property --item-size {
  syntax: "<percentage>";
  inherits: true;
  initial-value: 50%;
}
@property --item-color {
  syntax: "<color>";
  inherits: false;
  initial-value: lightgray;
}

Mwongozo wa kufanya

Inasikitisha ya kiwili

@property --propertyname {
  syntax: "<color>";
  initial-value: red;
  inherits: false;
}

Thamani ya kiwili

Mawasiliano wa kiwili

数字 katika tablio inaeleza mifano wa kinafasi ya kwanza ya kufaa @ mawili wa mtumishi wa kiwili.

Mawasiliano ya muhimu

Mafunzo:Hisia @property mwelezo