Programuoki Programuoki
Tema
/
HTML ir CSS pagrindai HTML
Pamoka 2 / 7 CSS — kaskada, paveldėjimas ir spalvos ~50 min
Kodas

style.css — reset, kintamieji, tema

Dabar sukurk style.css šalia index.html. Kodo stulpelyje — visas failas; jį ir aptarsime iš viršaus į apačią.

Kas paveldima, o kas ne

body { font-family: system-ui; color: #e6e8f0; line-height: 1.5; }

Teksto savybės — šriftas, spalva, eilučių aukštis — paveldimos vaikų. Todėl viena taisyklė ant body apiformina visą puslapį. Dėžės savybės — margin, padding, border — nepaveldimos. Tas skirtumas sąmoningas, ir dėl jo stiliaus failai prasideda nuo kelių taisyklių ant body.

Trys eilutės kiekvieno failo viršuje

* { box-sizing: border-box; margin: 0; padding: 0; }

border-box reiškia, kad width apima padding ir border — tad 300px dėžė yra 300px pločio. Būtent to visi ir tikisi, o pagal nutylėjimą — ne taip. margin: 0; padding: 0; pašalina paties naršyklės numatytuosius tarpus, kad pradėtum nuo žinomos būsenos, o ne kovotum su nematomu tarpu.

Iš kur atsiranda tarpas tarp dviejų pastraipų, jei nenustatai jokio margin? Pagalvok. — Iš naršyklės numatytojo stiliaus failo. Kiekviena naršyklė jį turi, jie šiek tiek skiriasi, ir būtent tam skirtas šis „reset".

Kintamieji: tamsi ir šviesi tema beveik nemokamai

Failo viršuje — spalvų blokas. Tai CSS kintamieji (custom properties):

:root,
[data-theme="dark"] {
  --bg: #0b0e1a;
  --surface: #141a2e;
  --text: #e6e8f0;
  --accent: #6f8dff;
  /* …ir dar keli */
}
[data-theme="light"] { --bg: #f6f7fb; --text: #1b1f2e; /* … */ }

body { background: var(--bg); color: var(--text); }

Dabar naršyklės įrankiuose pakeisk vieną atributą ant <html> — data-theme="light" — ir pažiūrėk, kaip pasikeičia visas puslapis. Jokio JavaScript, jokio antro stiliaus failo, jokių pasikartojančių taisyklių.

Pavadink vaidmenį, ne spalvą. --bg ir --surface, o ne --tamsiai-melyna. Kintamasis, pavadintas pagal spalvą, tampa melu tą pačią akimirką, kai pridedi šviesią temą. Pavadink tai, KAM jis skirtas, ir antra tema tau nieko nekainuoja.

Todėl ir vengi tiesiai įrašytų spalvų. Kiekviena spalva, įrašyta tiesiai į taisyklę, yra vieta, kurios tema nepasieks. Vėliau temos jungiklis kito, kliento dalies takelio — tai trys JavaScript eilutės, apverčiančios tą vieną atributą; bet tik tada, jei čia buvai drausmingas.