11.kl. "Stila lapas kaskadēšana (CSS) un tā lietošanas iespējas."

CSS - Cascading Style Sheet jeb stila lapas kaskadēšana nodrošina daudzas interesantas un ērtas iespējas dažādu tīmekļa lapas elementu noformēšanā un ļauj ietaupīt daudz laika web vietnes veidošanas darbā. Šeit ir zināma līdzība ar stilu lietošanu teksta dokumentu noformēšanā - lietojot dažādu dokumenta objektu noformējuma stilus, iespējams dokumenta noformēšanu veikt daudz ātrāk un ievērot vienotu stilu visā dokumentā. Tas ir īpaši svarīgi, ja dokumentā ir daudz objektu ar vienādu noformējumu. CSS nodrošina līdzīgu iespēju tīmekļa lapās.

CSS galvenā priekšrocība, iespējams, ir tā, ka stilu izveido vienreiz, bet lietot var tik reizes, cik tas dokumentā nepieciešams līdzīgu elementu noformēšanai. Ja līdzīgu noformējuma efektu vēlas panākt ar HTML līdzekļiem, tad katra tīmekļa lapas elementa noformēšana jāveic katru reizi no jauna.

Izmantojamie materiāli:

• LIIS WWW lappušu veidošanas rokasgrāmata (saite);
• W3SCHOOLS (Te nu ir pamatu pamati!) - CSS materiāli;
  
• Kasis par CSS - saite lasīšanai;
• Kalvis Kincis par HTML un CSS (tiešsaistes prezentācija) - saite apskatei;
• W3Schools CSS mācību materiāls - saite lasīšanai;
• Quackit par CSS (ļoti bagāta vitene) - http://www.quackit.com/css/;
• HTML un CSS soli pa solim (Lv, saite);
• HTML un CSS attēlos (saite);
• apmācību materiāli par HTML un CSS (saite); 
• Step by Step HTML (arī CSS) - stepbystephtml.com/;
• Lieliska vietne HTML apguvei - http://html.am/;
• CSS izvēlņu ģenerators - vietne;
• CSS videodemonstrācijās - saite uz Youtube;
• dažādu CSS rīku apkopojums - saite.

 CSS selektoru pieraksts (sintakse)

 Selektors {īpašība1:vērtība1; īpašība2:vērtība2; ...; īpašībaN:vērtībaN}

 Piemēri:

• h1 {color:maroon;font-size:20pt;}
• hr {color:navy;}
• p {font-size:11pt;margin-left:15px;}
• p {color:red;text-align:center;}
• a:link {color:green;}

p {color:red;text-align:center;}

Piemēru p {color:red;text-align:center;} var pierakstīt arī šādi:

p
{
color:red;
text-align:center;
}

Horizontālais CSS selektora pieraksts:

Vertikālais CSS selektora pieraksts (raksts):

Ieteicams izpētīt arī nākošo atttēlu (http://dabrook.org/curriculum/web-design-2/html-css-review):

CSS koda iekļaušana tīmekļa lapās

CSS koda iekļaušanai tīmekļa lapās iespējami 3 varianti:

• speciālu CSS datņu lietošana;
• CSS definēšana visai tīmekļa lapai (Head daļā);
• CSS definēšana konkrētam objektam tīmekļa lapā.

CSS datņu lietošana faktiski ir visuniversālākais veids, jo šajā gadījumā CSS datni sagatavo vienu reizi un lieto dažādās tīmekļa lapās saskaņā ar vajadzību. Sākumā šķiet, ka visvienkāršākais veids ir CSS definēšana konkrētam objektam tīmekļa lapā. Ļoti iespējas, ka definēt CSS vienam objektam ir vienkāršāk, tomēr šādā gadījumā kods jāraksta katram objektam no jauna un katrā tīmekļa lapā tas jādara atkal un atkal. 

Speciālu CSS datņu lietošana

Sagatavo speciālu CSS datni, kurā ir definēti visi tīmekļa lapā nepieciešamie noformējuma stili, piemēram, datne.css. CSS datni ieteicams saglabāt tajā pašā vietā, kurā atrodas html datne. CSS datne iekļaušana tīemkļa lapā redzama attēlā:

CSS apraksts tīmekļa lapas galvas daļā starp tagiem Head 

Šajā gadījumā CSS kods tiek ievietots tagos STYLE - skat. attēlu.

Objekta noformējuma CSS lietošana

Šajā gadījumā CSS definē paša noformējamā objekta kodā, izmantojot STYLE - skat. attēlā rindiņu ar "<p style=..."

Veiksmi cīņā ar HTML un CSS kodiem!

****************************************

Prezentācija par CSS

 Uzdevumi:

• apskatīt piedāvātos materiālus;
• atvērt W3schools  materiālu par CSS - saite;
• iepazīties ar CSS Home un CSS Syntax .nodarbību saturu;
• dotos piemērus pārbaudīt darbībā (mainot dažādu vērtības, nodublējot kodu uz Notepad, attiecīgi saglabājot tīmekļa lappusi un atverot pārlūkprogrammā).

       Turpinām iepazīties ar CSS lietošanas iespējām! Ieteicams iepazīties ar materiāliem par CSS  W3schools vietnē, kā arī ar informāciju citās tīmekļa vietnēs, izmēģināt praksē gatavus piemērus un izveidot savus CSS piemērus, notestēt tos. Noteikti ir vērts iepazīties arī ar dažādiem CSS rīkiem, kuri dod iespēju vajadzīgos uzdevumus veikt ātri un tādējādi taupīt laiku. Uzģenerētos koda fragamentus pēc tam var vienkārši ar dublēšanas metodi ievietot vajadzīgajā vietā failā.

Izmantojamie materiāli:

• LIIS WWW lappušu veidošanas rokasgrāmata (ja izdodas atrast);
• Kasis par CSS - saite lasīšanai;
• W3Schools CSS mācību materiāls - saite lasīšanai;
• W3Schools CSS piemēri - saite pētīšanai;
• w3.org piemēri iesācējam - saite pētīšanai; 
• 4 metodes  CSS iekļaušania HTML kodā - lasīt;
• HTML Dog par CSS llietošanas veidiem - skatīt;
• K.Kincis, materiāli 11.kl. informātikā - saite;
• dažādi CSS piemēri - atvērt un skatīt!
  

Izmantojamie rīki:

• CSS ģenerators - saite;
• iespaidīgs CSS koda ģenerators tiešsaistē - saite;
• vienkāršs CSS ģenerators - saite;
  
• CSS izvēlņu ģenerators - saite;
• cits jauku izvēlņu ģenerators - saite;
  
• CSS Menu Generator - saite;
• Tabs Generator - saite;
• CSS spraitu ģenerators - saite;
• izklājumu ģenerators - saite;
• CSS diagrammu ģenerators - saite;
  
• 15 noderīgi CSS ģeneratori - saite;
• 20 populāri tiešsaistes CSS rīki - saite;
• raksts par 50 noderīgiem rīkiem darbam ar CSS - saite;
  
• CSS koda ģenerators - saite;
• CSS portāls - saite;
• krāsu shēmas - saite.

Citi rīki:

• EditLive! JavaScript API Demonstration - saite.

Kā lietot šos dažādos CSS koda ģenerēšanas rīkus?

1. Atvērt vietni ar izvēlēto CSS rīku.
2. Iestatīt vajadzīgās CSS vērtības.
3. Uzģenerēt CSS kodu.
4. Atlasīt un nokopēt nepieciešamo CSS koda fragmentu.
5. Ielīmēt (Paste) CSS fragmentu tīmekļa lappuses kodā starp tagiem Head vai CSS failā.
   
6. Lietot iegūto CSS nepieciešamjās tīmekļa lappuses vietās.