Браузер CSS стили колдонулган элементтерди кандай…

Браузер HTML дарагын жана CSS эрежелерин талдайт, андан соң рендеринг дарагын (render tree) түзөт, ал DOM элементтерин тиешелүү CSS стили менен байланыштырат.

Стилдерди аныктоо процесси бир нече кадамдарды камтыйт:

HTML жана CSS парсинг: Браузер HTML документин парсинг кылып, DOM дарагын түзөт. Ошол эле учурда, CSS стили ( <style> теги, <link> теги же inline стильдерден) парсингделип, CSSOM дарагы (CSS Object Model) түзүлөт.
Селекторлорду салыштыруу: Браузер DOM дарагын өтүп, ар бир түйүндөгү элементтер үчүн CSSOMдогу тиешелүү эрежелерди издейт. Бул салыштыруу оңдон солго жүргүзүлөт. Мисалы, .parent .child селектору үчүн браузер биринчи child класстагы элементтерди издейт, андан соң алардын ата-энесинде parent классы бар экенин текшерет. Бул ыкма селекторго туура келбеген чоң дарактарды тез четке кагууга мүмкүндүк берет.

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

стилинин булагы (автордун стили, колдучунун стили, браузердин стили)
селекторлордун өзгөчөлүгү
эрежелердин тартиби
!important колдонуу

Мисал, селекторлордун өзгөчөлүгүн аныктоо:

Селектор түрү	баллдар
Inline стили	1000
ID селекторлор	100
Класс, атрибуттар	10
Теги, псевдоэлементтер	1
Универсал (`*`)	0

Көбүрөөк өзгөчөлүккө ээ селекторлор артыкчылыкка ээ.

Мурас алуу: Кээ бир CSS касиеттер ата-энеден балдарга мурас болот (мисалы, font-size, color). Браузер булды эске алат.

Render дарагын түзүү: DOM дарагы жана колдонулган CSS стили негизинде, рендеринг дарагы (же layout tree) түзүлөт. Ал тек гана көрүнүүчү элементтерди жана алардын стилдерин камтыйт, аларды жайгаштыруу жана чийүү үчүн керек.

// Мисал: бир нече CSS эрежеси бар элемент
// HTML: <p class="text">Hello!</p>

/* CSS */
p {  /* Өзгөчөлүк: 1 */
  color: blue;
}

.text {  /* Өзгөчөлүк: 10 */
  color: red; /* Бул түс колдонулат, анткени ал көбүрөөк өзгөчөлүккө ээ */
  font-size: 16px;
}

p.text { /* Өзгөчөлүк: 11 */
   font-weight: bold; /* Бул өзгөчөлүк колдонулат */
}

/* Тартип да маанилүү, бирдей өзгөчөлүккө ээ селекторлор үчүн */
div { color: green; }
div { color: yellow; } /* Бул сары түстү колдонуп жатат */

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

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