'cookieChoices = {};'

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

trešdiena, 2010. gada 20. janvāris
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:
 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;}
http://www.w3schools.com/css/selector.gif

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:

http://en.support.files.wordpress.com/2011/09/css-selectors-lrg.png

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:
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.


2 komentāri:

Anonīms teica...

Very quickly this web page will be famous among all blogging people, due to it's nice posts
My webpage: pizza games little kids

Anonīms teica...

paldies, ļoti palīdzēja ;)

Ierakstīt komentāru

Statistika