2.1. tēma: CSS pamati un vizuālā ergonomika

Tavs šīs stundas izaicinājums: Pieslēgt stila lapu savam projektam un uzlabot lapas lasāmību, izmantojot krāsu teorijas un ergonomikas pamatprincipus.

1.1.1. Secina par estētiskajām īpašībām; 2.5.3. Lieto tiešsaistes rīkus uzdevuma veikšanai.

Teorija: Kas ir CSS?

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: Stila lapas izveide un pieslēgšana

Izveidot ārējo CSS failu un sasaistīt to ar savu spēles pieteikuma lapu.

Izpildes soļi:

VS Code vidē izveido jaunu failu ar nosaukumu style.css (tajā pašā mapē, kur index.html).
Failā index.html sadaļā <head> pievieno rindu: <link rel="stylesheet" href="style.css">.
Pārbaudi saiti, ierakstot CSS failā body { background-color: lightgrey; } un apskatot izmaiņas ar Live Server.

2. uzdevums: Teksta formatēšana un ergonomika

Uzlabot lapas lasāmību, izvēloties piemērotus fontus, izmērus un krāsu kontrastu.

Izpildes soļi:

Izmanto font-family, lai nomainītu parasto fontu uz modernāku "sans-serif" tipa fontu.
Iestati pamatteksta krāsu un fona krāsu tā, lai tās būtu kontrastainas (izmanto tiešsaistes rīkus, piemēram, Adobe Color).
Nocentrē galveno virsrakstu h1 un piešķir tam unikālu krāsu, kas saskan ar tavas spēles tēmu.

3. uzdevums: Klases un specifiskais stils

Iemācīties lietot klases (class), lai stilotu tikai konkrētus elementus.

Izpildes soļi:

Pievieno HTML failā savai tabulai vai kādai rindkopai atribūtu class="izcelts".
CSS failā izveido stila noteikumu klasei (izmanto punktu pirms nosaukuma): .izcelts { border: 2px solid gold; padding: 10px; }.
Veic Commit un Push uz GitHub ar ziņu "Pievienots CSS un uzlabota ergonomika".

Biežākās kļūdas (un kā tās labot):

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!

Koda piemērs (style.css)

body {
    background-color: #f0f4f8; /* Gaiši zilgans fons */
    color: #333; /* Tumši pelēks teksts labākai lasāmībai */
    font-family: Arial, sans-serif;
}

h1 {
    text-align: center;
    color: #2c3e50;
}

.izcelts {
    background-color: white;
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 4px 6px rgba(0,0,0,0.1);
}

Mans Spēles Virsraksts

Šis ir izcelts satura bloks ar pielāgotu stilu.