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

Namų darbas — kintamieji ir dvi temos

Namų darbas — išorinis stiliaus failas, „reset", kintamieji ir dvi temos.

  1. Prikabink stiliaus failą. index.html turi <link rel="stylesheet" href="style.css"> ir data-theme="dark" ant <html>.
  2. „Reset" ir body. style.css viršuje — * { box-sizing: border-box; margin: 0; padding: 0; } ir kelios body taisyklės (šriftas, fonas, spalva, eilučių aukštis).
  3. Kintamieji spalvoms. Visas savo spalvas laikyk kintamuosiuose (--bg, --surface, --text, --accent), pavadintuose pagal vaidmenį, ne pagal spalvą. Jokios spalvos, įrašytos tiesiai į taisyklę.
  4. Abi temos. Aprašyk [data-theme="light"] bloką su šviesiomis to paties kintamojo reikšmėmis. Perjunk temą pakeitęs data-theme ant <html> naršyklės įrankiuose — visas puslapis turi persijungti, be nė vienos JavaScript eilutės.

Bandyk pats: naršyklės įrankiuose (F12 → Elements → Styles) surask savo CSS taisyklę, kuri nieko nedaro — perbrauktą arba niekada neatitikusią. Bent viena tokia yra.

Privalomas rezultatas: puslapis apiformintas kintamaisiais, ir tema persijungia pakeitus vieną data-theme atributą.

Atsiskaitymui: ekrano nuotraukos: (1) puslapis tamsioje temoje, (2) tas pats puslapis šviesioje temoje, pakeitus tik data-theme.

Toliau. Puslapis apiformintas — bet ekrano skaitytuvui tai tik nediferencijuoto teksto siena. Kita pamoka: tinkamo elemento pasirinkimas, kuris pasirodo esąs svarbesnis už bet kokį apiforminimą.