CSS / Өвлөлт (inheritance)

Өвлөлт (inheritance)

CSS өвлөлт гэдэг нь зарим property-ийн утга хүүхэд элементэд автоматаар дамждаг механизм юм. Энийг ойлгох нь CSS-г зөв бичихэд чухал.

Өвлөлт яаж ажилладаг вэ?

html
<div class="parent">
  Энэ текст
  <p>Хүүхэд параграф</p>
  <span>Хүүхэд span</span>
</div>
css
.parent {
  color: #a78bfa;
  font-size: 18px;
  font-family: sans-serif;
}

/* p ба span тусгайлан тохируулаагүй ч parent-ийн
   color, font-size, font-family-г өвлөнө */

Өвлөгддөг property-ууд

Ихэвчлэн текст ба фонттой холбоотой property-ууд өвлөгддөг:

css
/* Эдгээр property-ууд хүүхэдрүү дамждаг */
color
font-family
font-size
font-weight
font-style
font-variant
line-height
letter-spacing
text-align
text-indent
text-transform
text-shadow
visibility
cursor
list-style

Өвлөгддөггүй property-ууд

Box model болон layout-тай холбоотой property-ууд өвлөгддөггүй:

css
/* Эдгээр property-ууд ӨВЛӨГДДӨГГҮЙ */
margin
padding
border
background
width
height
display
position
top / right / bottom / left
float
overflow
box-shadow

Яагаад? — Хэрэв border өвлөгдвөл <div> дотрох бүх <span>, <p> бүгдэд хүрээ гарч, дизайн эвдэрнэ. Тиймээс box property-ууд зориудаар өвлөгддөггүй.

inherit — өвлөлтийг шаардах

Анхдагчаар өвлөгддөггүй property-г хүчээр өвлүүлэх:

css
.parent {
  border: 2px solid #a78bfa;
}

.child {
  border: inherit; /* parent-ийн border-г өвлөнө */
}
css
/* Нийтлэг хэрэглэгддэг жишээ */
a {
  color: inherit; /* parent-ийн өнгийг авна */
  text-decoration: inherit; /* parent-ийн underline-г авна */
}

button {
  font-family: inherit; /* анхдагчаар button системийн фонт ашиглана —
                           inherit хийснээр body-н фонт авна */
  font-size: inherit;
}

initial — анхдагч утга руу буцаах

Browser-ийн тухайн property-ийн анхдагч (W3C spec) утгыг хэрэглэнэ:

css
.reset-color {
  color: initial; /* хар (#000000) болно — browser-ийн анхдагч */
}

.reset-display {
  display: initial; /* inline болно — div-ийн initial утга */
}

unset — дүрмийн эх үүсвэрт шилжих

  • Өвлөгддөг property бол inherit шиг ажиллана
  • Өвлөгддөггүй property бол initial шиг ажиллана
css
.clean {
  color: unset; /* өвлөгддөг тул → inherit шиг */
  border: unset; /* өвлөгддөггүй тул → initial шиг */
  margin: unset; /* өвлөгддөггүй тул → 0 болно */
}

revert — browser-ийн stylesheet руу буцаах

Зохиогчийн CSS-г болиулж browser-ийн анхдагч stylesheet-г ашиглана:

css
.restore-heading {
  font-size: revert; /* h1-ийн browser-ийн анхдагч том хэмжээ рүү */
  font-weight: revert;
}

initial vs revert ялгаа:

css
h2 {
  font-size: initial;
} /* 1rem (W3C spec анхдагч) */
h2 {
  font-size: revert;
} /* browser h2-д өгсөн хэмжээ (1.5rem гэх мэт) */

all — бүх property нэг дор

css
.full-reset {
  all: unset; /* бүх property-г unset хийнэ */
}

.full-revert {
  all: revert; /* бүх property-г browser анхдагч руу */
}

Жишээ — custom button reset:

css
/* Browser-ийн button stylesheet-г болиулж эхлэх */
.btn-clean {
  all: unset; /* бүх browser style арилна */
  display: inline-flex;
  align-items: center;
  padding: 10px 20px;
  background: #7c3aed;
  color: #fff;
  border-radius: 8px;
  cursor: pointer;
}

Өвлөлтийн нийтлэг хэрэглэгддэг загвар

Хуудасны үндсэн фонтыг нэг газарт тохируулах:

css
/* body-д тохируулсан фонт бүх элементэд өвлөгдөнө */
body {
  font-family: "Geist Sans", sans-serif;
  font-size: 16px;
  line-height: 1.6;
  color: #f1f5f9;
}

/* Зөвхөн хэрэгтэй газарт override */
code,
pre {
  font-family: "Geist Mono", monospace;
}

Холбоосны өнгийг контекстоос өвлөх:

css
/* Анхдагч холбоосны өнгө */
a {
  color: #a78bfa;
}

/* Footer дотрох холбоос footer-ийн өнгийг авна */
.footer {
  color: #94a3b8;
}

.footer a {
  color: inherit; /* #94a3b8 болно */
}

Дараагийн хичээлд:

Transition — элементийн өнгө, хэмжээ, байрлал өөрчлөгдөхөд жигд, зөөлөн анимац нэмэх арга. transition-property, duration, timing-function, delay property-уудыг hover жишээн дээр практикаар судална.

← Өмнөх хичээлSpecificity ба cascadeДараах хичээл →Transition