Teisipäev, 14. aprill 2015

28. tund - CCS stiilid

Eelmisel tunnil proovisime kujundada HTML lehekülge. Igale sildile stiili lisamine on küllaltki tüütu. Juhul kui soovime veebilehel mingit ühtset stiili säilitada, on parem need stiilid eraldi valmis teha ning siis HTML dokumendile lisada.

Selleks kasutatakse CSS (Cascading Style Sheets) keelt, mille abil saab HTML-dokumentide kujundust määrata. 

CSS laade saab HTML dokumendile lisada kahel viisil:
  • käsud lisatakse iga HTML dokumendi päisesse <HEAD> .... </HEAD> siltide vahele 
 <style type="text/css"> .... CSS käsud ... </style> siltide vahele
  • käsud salvestatakse eraldi faili ning lisatakse siis iga HTML lehe päisesse link sellele failile 
 <link rel="stylesheet" type="text/css" href="failinimi.css">

Viimase viisi eeliseks on see, et HTML lehtede välimust puudutavaid muudatusi tuleb teha ainult ühes, CSS laade sisaldavas failis. Kõik lehed võtavad info väljanägemise kohta sellest failist.

CSS süntaks ehk keele kirjutamise reeglid

Esimesele kohale kirjutatakse HTML elemendi sildi tähis, mille kohta reegel kehtib. Edasi kirjutatakse loogeliste sulgude vahele reegel, kus omadus eraldatakse väärtusest kooloniga. Kui ühele elemendile määratakse mitu omadust, siis eraldatakse need üksteisest semikooloniga.

Näiteks rida H1 {color:blue; font-size: 40px} tähendab, et loogelistest sulgudes olev reegel kehtib HTML elemendile H1 (pealkirja suurus) ning määrab selle värviks sinise (color:blue) ning teksti suuruseks 40 pikslit (font-size: 40 px).

Samamoodi on võimalik määrata omadusi kõikidele HTML siltidele.


Ülesanne 1
  1. Ava Notepad ning salvesta see nimega laadid.css (salvestamisel vali tüübiks All Files ning faili nimi kirjuta koos faililaiendiga css, fail salvesta oma kausta kooli arvutivõrgus). 
  2. Lisa sellesse faili rida H1 {color : blue } ja salvesta.
  3. Ava eelmistel tundidel tehtud HTML fail ning lisa selle päisesse <link rel="stylesheet" type="text/css" href="laadid.css">  ja salvesta. Juhul, kui oled eelmisel tunnil H1 pealkirjale lisanud stiili style="color: ...", siis kustuta see ära!
  4. Ava HTML fail veebilehitsejaga.
  5. Lisa HTML dokumenti veel üks pealkiri, mille suuruseks on H1 ja salvesta.
  6. Ava HTML fail veebilehitsejaga.
 Ilmselt märkasid, et kõik pealkirjad, mis on suurusega H1 on nüüd sinised.
  
Ülesanne 2

Lisa CSS faili veel järgmised read

body {background-color: #d0e4fe}

p {font-family: "Times New Roman"; font-size: 20px}
 


Salvesta CSS fail ning värskenda veebilehitsejas oma HTML faili vaadet. 

Ülesanne 3

Uuri, mida teevad CSS faili lisatud read 
table, td, th {border: 1px solid blue}
th {color:red; background-color:yellow}