2.1 CSS pamati un vizuālā ergonomika

CSS (Cascading Style Sheets) nosaka, kā HTML elementi izskatīsies ekrānā.

• Selektors: Norāda, kuru elementu mēs stilosim (piem., h1 vai p).
• Īpašība un vērtība: Pasaka, ko tieši mainīt (piem., color: red;).
• Vizuālā ergonomika: Programmētājam jārūpējas, lai teksts būtu salasāms (piemērots kontrasts starp fonu un burtu krāsu) un acīm patīkams.

Labākā prakse ir rakstīt CSS atsevišķā failā, lai kods būtu pārskatāms.

1. uzdevums - Iesildies ar gatavu piemēru

Šis ir īss iesildīšanās uzdevums. Nokopē sagatavi, ielīmē to pareizajā koda vietā un palaid. Šeit pietiek droši izmēģināt tēmu 2.1 CSS pamati un vizuālā ergonomika; detalizētu izpratni veidosi nākamajos uzdevumos.

Kopējamais piemērs vai sagatave: izmanto šo bloku kā starta punktu, nevis kā gala risinājumu.

<section class="iesildisanas-demo">
  <h2>2.1 CSS pamati un vizuālā ergonomika</h2>
  <p id="rezultats">Sākuma teksts</p>
  <button id="poga">Pārbaudīt</button>
</section>

.iesildisanas-demo {
  padding: 16px;
  border: 2px solid #FFB142;
  border-radius: 6px;
}

.iesildisanas-demo button {
  cursor: pointer;
}

const rezultats = document.querySelector("#rezultats");
const poga = document.querySelector("#poga");

poga.addEventListener("click", () => {
  rezultats.textContent = "Kods darbojas: 2.1 CSS pamati un vizuālā ergonomika";
});

1. Atver darba failu vai rīku. Sagataves ievieto atbilstošajos projekta failos: index.html, style.css un script.js.
2. Nokopē visu piemēra bloku no šī uzdevuma un ielīmē to norādītajā vietā.
3. Palaid kodu tieši tādu, kāds tas ir, un pārliecinies, ka parādās rezultāts, izvade vai vismaz nav kļūdas paziņojuma.
4. Atrodi vienu drošu vietu, ko drīkst mainīt: tekstu, skaitli, krāsu, mainīgā vērtību vai testa ierakstu.
5. Maini tikai šo vienu vērtību un palaid kodu vēlreiz.
6. Salīdzini rezultātu pirms un pēc izmaiņas. Ja parādās kļūda, atcel pēdējo izmaiņu un palaid vēlreiz.
7. Turpini pie 2. uzdevuma tikai tad, kad šis mazais piemērs darbojas.

2. uzdevums - Ievieto algoritmu projektā

Pievieno šīs stundas paņēmienu kā nelielu, lietotājam redzamu projekta daļu.

1. Atver style.css un pārbaudi, ka tas ir pieslēgts index.html ar <link rel="stylesheet" href="style.css">.
2. Pievieno style.css beigās kārtulu priekš body: fona krāsu #222831 un teksta krāsu #DFD0B8.
3. Pievieno kārtulu priekš h1: color: #FFB142; text-align: center;.
4. Saglabā un atver index.html pārlūkā - pārbaudi, vai fona un teksta krāsas ir mainījušās.
5. Pievieno CSS klasi .izcelts { border: 2px solid #FFB142; padding: 12px; border-radius: 6px; } un pievieno to kādam <div> HTML failā.
6. Pārbaudi, vai elements pārlūkā izskatās vizuāli atšķirīgs no pārējiem.
7. Salabo pirmo kļūdu, ja CSS nedarbojas - pārbaudi, vai nav aizmirsts semikols vai figūriekava.
8. Veic git commit -m "Add base CSS styles".

3. uzdevums - Testē kodu un izdari secinājumu

Pārbaudi, vai algoritms darbojas paredzami vairākās situācijās.

1. Atver index.html pārlūkā un pārbaudi, ka teksts ir salasāms uz fona (pietiekams kontrasts).
2. Spied F12 → "Elements" → atlasi kādu elementu → cilne "Styles" - pārbaudi, ka tavi CSS noteikumi ir redzami.
3. Nomaini fona krāsu tieši DevTools "Styles" panelī - pārbaudi, kāda krāsa izskatās labāk.
4. Ieraksti labāko krāsu kā pastāvīgu vērtību style.css un saglabā.
5. Salabo vienu kontrasta kļūdu, piemēram, ja teksts nav salasāms uz fona.
6. Pārbaudi, ka stili darbojas arī uz <h2> un <p> elementiem.
7. Pieraksti vienu secinājumu: kāpēc color un background-color ir jākonfigurē kopā.

Papildu uzdevums - Pievieno mazu funkciju

Ja pamatdarbs ir pabeigts, paplašini projektu ar vienu nelielu programmētu uzlabojumu.

1. Izveido CSS klasi .poga ar background-color, color, padding: 10px 20px, border: none un border-radius: 6px.
2. Pievieno šo klasi kādam <button> elementam HTML failā.
3. Pievieno CSS noteikumu .poga:hover { background-color: #FFB142; }.
4. Atver pārlūkā un uzvirziet peli uz pogas - pārbaudi, vai krāsa mainās.
5. Pielāgo fonta lielumu pogai: font-size: 1rem; cursor: pointer;.
6. Veic git commit -m "Add button style with hover effect".
7. Parādi pogu klasesbiedram - vai tā izskatās profesionāli un ir viegli nospiedama?

• CSS nedarbojas: Pārbaudi, vai href ceļš link tagā sakrīt ar faila nosaukumu un abi faili ir vienā mapē.
• Aizmirsts semikols: Katra CSS rinda ir jābeidz ar ;, citādi nākamās rindas netiks nolasītas.
• Pārāk mazs kontrasts: Gaiši pelēks teksts uz balta fona ir kļūda - lietotājam būs grūti lasīt!