CSS өзгөрмөлөрү жана аларды колдонуу

Көп адамдар CSS өзгөрмөлөрү менен тааныш эмес, ошондуктан сиз алардын бири боло аласыз! CSS өзгөрмөлөрү жана аларды колдонуу жолдору менен таанышууга убакыт келди.

CSS өзгөрмөлөрү белгилүү бир элемент үчүн колдонуучу аныктаган касиет катары жарыяланат. Бул өзгөчөлүк касиетин бул элементти кайда гана колдонбоңуз болот.

Түшүндүрүү жана колдонуу

Ыңгайлаштырылган мүлктү жарыялоо үчүн:

Элемент {- фон түсү: # f00; }

Бул жерде элемент каалаган элементтин селектору боло алат, мисалы. B. div, p, .test ж.б.

Биз бул нерсени --background-color деп аталган өзгөчөлүктү жарыялаганбыз. Бардык CSS касиеттери - менен башталат.

Азыр биз ушул өзгөчөлүктү var функциясын пайдаланып, элементтин ичинде колдоно алабыз.

Элемент {фон түсү: var (- фон түсү); }

Бул жерде биз элементтин фон-түс касиетин мурда жарыяланган өзгөрмөгө дайындадык.

Мунун баары жакшы, бирок биз көбүнчө бир эле эмес, башка элементтерде да кайталайбыз. Колдонуучу аныктаган өзгөрмө элементтин түрүндө жарыялоо анчалык деле пайдалуу эмес.

Өзгөчөлөштүрүлгөн мүлктү бир нече элемент түрүндө колдонуу үчүн, псевдо классында колдонулган касиетти жарыялай алабыз: root.

: Тамыр {- негизги түс: # 333; }

Эми биз документтин ар бир элементинде - түстүү-өзгөрүлмө өзгөрмөнү колдоно алабыз:

div {color: var (- негизги түс); }
p {фон түсү: var (- негизги түс); }
.schick {кадр түсү: var (- негизги түс); }

Өздүк өзгөчөлүктөрүбүздү ичине жарыялап: root, эми биз аны ичиндеги тексттин түсүн, pдин түсүн коюуга, жана фреймдин түсүн орнотууну каалаган каалаган элементти колдонсок болот. Ушундай жол менен биз кайталоолорду минималдаштырбастан, ошол эле учурда веб-сайтыбыздын негизги түсүн оңдоп жана өзгөртүүнү жеңилдеттик.

мурасы

Элементтер өзгөчөлөштүрүлгөн касиеттерди мураска алышат. Бизде төмөнкү HTML код бар деп коёлу:

  
  

Андан кийин .parent үчүн - text-size деп аталган өзгөрмөнү жарыялайбыз:

.parent {- тексттин көлөмү: 15px; }

Эми биз тексттин көлөмүн .parent гана эмес, ошондой эле балдардан да колдоно алабыз:

биринчи бала {ариптин өлчөмү: var (- тексттин көлөмү); }

Ыңгайлаштырылган касиеттерди жокко чыгара алабыз. Муну баланын ичиндеги бажы касиетин кайрадан жарыялоо менен жасай алабыз:

экинчи бала {- тексттин көлөмү: 30px; }

Азыр сиз .tecond-child ичинде - text көлөмүн колдонсоңуз, ал 30px чейин бааланат, бирок аны .first-child же .parent ичинде колдонсоңуз, ал дагы 15px.

Ылдый баалуулуктар

Var параметрин экинчи параметрге өткөрүп берүү менен сиз өзгөрмөнүн запастык маанисин аныктай аласыз. Мисалы:

экинчи бала {шрифттин өлчөмү: var (- тексттин көлөмү, 30px); }

Ылдый маанилер өзгөрмө аныктала элек учурда колдонулат. Алар браузердин дал келбестигин алмаштыруу үчүн колдонулбайт.

жыйынтыктоо

Жана CSS өзгөрмөлөрүн ушундайча колдоно аласыз! Internet Explorer сыяктуу кээ бир браузерлер аларды колдобойт. Демек, сиз бардык браузерлерди колдошуңуз керек болсо, муну эске алышыңыз керек.