STIILID (CSS) Anu Kurm ANU KURMI ARVUTIKLASS Täiskasvanute koolitusasutus www.arvutiklass.ee
Mis on CSS? <ul><li>Lihtne võimalus lisada HTML või ka XHTML dokumentidele kujundust – fondid, värvid, paigutused jne </li...
Huvitavaid linke <ul><li>http://www.w3.org/TR/REC-CSS2/   </li></ul><ul><li>http://jigsaw.w3.org/css-validator/   </li></u...
Tekkelugu <ul><li>W3C soovitas CSS1 kasutada juba 1996 aastast </li></ul><ul><li>CSS2 on ametlikuks soovituseks W3C poolt ...
CSS validaator <ul><li>CSS validaatoriga  http://jigsaw.w3.org/css-validator/  on võimalik kontrollida koodi vastavust CSS...
Näide 1 <ul><li>Pealkirja kujundamine HTML dokumendi päise osas </li></ul><ul><li><html>  </li></ul><ul><li><head>  </li><...
Näide 2 <ul><li>Pealkirja kujundamine eraldi .css laiendiga failis </li></ul><ul><li><html> </li></ul><ul><li><head> </li>...
Näide 3 <ul><li>CSS saab kirjeldada tegelikult ka body osas tag-isse, kusjuures stiil kehtib siis ainult selle tag-i sisul...
Süntaks <ul><li>CSS süntaks koosneb kolmest osast: </li></ul><ul><ul><li>selektor (selectror) </li></ul></ul><ul><ul><li>o...
Süntaks <ul><li>Kui väärtus on mitmesõnaline pannakse see jutumärkidesse: </li></ul><ul><li>p {font-family: &quot;sans ser...
Mõõtühikud, mida saab väärtusena kasutada <ul><li>in : 1 toll on võrdne 2.54 cm-ga </li></ul><ul><li>cm:  sentimeeter </li...
Süntaks <ul><li>Kui soovite, et stiilikirjeldusi oleks parem lugeda, võite paigutada nad eri ridadele. </li></ul><ul><ul><...
Grupeerimine <ul><li>Võimalik on selektoreid ka grupeerida. </li></ul><ul><ul><li>h1,h2,h3,h4,h5,h6  </li></ul></ul><ul><u...
CLASS selektor <ul><li>Class selektoriga saate defineerida erinevaid stiile samat tüüpi HTML elementidele. Näiteks, kui so...
CLASS selektori kasutamine HTML dokumendi BODY osas <ul><li><p class=&quot;right&quot;>  </li></ul><ul><li>Paremjoondatud ...
CLASS selektori kasutamine HTML dokumendi BODY osas <ul><li>Class selektori defineerimisel ei pea kindlasti kasutama HTML ...
ID selektor <ul><li>Id selektoriga saate defineerida sama stiili erinevatele HTML elementidele </li></ul><ul><li>#green {c...
CSS kommentaarid <ul><li>CSS kommentaaridesse saate panna oma koodi kohta käiva selgituse, mida ignoreeritakse brauseri po...
Stiilide kirjeldamise varian did <ul><li>Variant 1 </li></ul><ul><li>Sobib üksikute lehtede kujundamisel. </li></ul><ul><l...
Variant 2 ANU KURMI ARVUTIKLASS Variant 2 Sama asja saab ette anda ka viitena välisele stiililehele . Kasutage, kui on vaj...
Stiililehe sisu variant 2 puhul <ul><li>Stiililehe (fail mystyle.css) sisu võib olla järgmine </li></ul><ul><li>hr {color:...
Stiilide kirjeldamise varian did <ul><li>Variant 3 </li></ul><ul><li>Stiile saate kirjeldada ka otse HTML elemendi tagis. ...
Vanemad brauserid <ul><li>Vanemad brauserid stiile ei toeta, selleks et nad ignoreeriksid stiilide kirjeldusi, lisage komm...
Milliseid HTML   elemente saan CSS-iga muuta? <ul><ul><ul><li>heading - tagid (H1 - H6)  </li></ul></ul></ul><ul><ul><ul><...
Font   font-size  <ul><li>NÄIDE </li></ul><ul><li>märgib fondi suurust  </li></ul><ul><li>punktides   (pt), tollides   (in...
font-family  <ul><li>NÄIDE </li></ul><ul><li>märgib fondi nägu e.  š rifti  </li></ul><ul><li>võib kasutada kõikvõimalikke...
color   <ul><li>NÄIDE </li></ul><ul><li>märgib teksti värvi  #värvikood  </li></ul><ul><li>Võimalikud variandid: kasutada ...
Näited <ul><li>h3 {color: #ffffff;letter-spacing: 0.2cm; text-align: left; font-family:  verdana ;  font-size: 110%} </li>...
Background ANU KURMI ARVUTIKLASS body  {background-color: #000000} body  {background-image: http://www.domeen.ee/pilt.gif}...
Lingi omadused   ANU KURMI ARVUTIKLASS a:link { color: red }  /* külastamata link */  a:visited { color: blue }  /* külast...
Lingi kujunduse näide <ul><li><style type=&quot;text/css&quot;> </li></ul><ul><li>a {font-family : verdana; font-size: 12;...
Raamide kasutamine lõigu kujundamisel <ul><li><style type=&quot;text/css&quot;> </li></ul><ul><li>p{border-style: double ;...
Kasutatud allikad <ul><li>http://www.w3schools.com/css/default.asp   </li></ul><ul><li>http://www.w3.org/Style/CSS/ </li><...
ANU KURMI ARVUTIKLASS
Upcoming SlideShare
Loading in …5
×

Veebilehe kujundamine CSS keeles

1,134 views

Published on

Veebilehe kujundamine CSS keeles

Anu Kurm
ANU KURMI ARVUTIKLASS
Täiskasvanute koolitusasutus
www.arvutiklass.ee

Published in: Technology, Education
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
1,134
On SlideShare
0
From Embeds
0
Number of Embeds
3
Actions
Shares
0
Downloads
7
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Veebilehe kujundamine CSS keeles

  1. 1. STIILID (CSS) Anu Kurm ANU KURMI ARVUTIKLASS Täiskasvanute koolitusasutus www.arvutiklass.ee
  2. 2. Mis on CSS? <ul><li>Lihtne võimalus lisada HTML või ka XHTML dokumentidele kujundust – fondid, värvid, paigutused jne </li></ul><ul><li>Stiililehed (CSS - C ascading S tyle S heets) </li></ul>ANU KURMI ARVUTIKLASS
  3. 3. Huvitavaid linke <ul><li>http://www.w3.org/TR/REC-CSS2/ </li></ul><ul><li>http://jigsaw.w3.org/css-validator/ </li></ul><ul><li>http://www.thepcmanwebsite.com/webmaster_tools.shtml </li></ul>ANU KURMI ARVUTIKLASS
  4. 4. Tekkelugu <ul><li>W3C soovitas CSS1 kasutada juba 1996 aastast </li></ul><ul><li>CSS2 on ametlikuks soovituseks W3C poolt aastast 1998 </li></ul><ul><li>Hetkel käib töö juba CSS kolmanda versiooniga </li></ul>ANU KURMI ARVUTIKLASS
  5. 5. CSS validaator <ul><li>CSS validaatoriga http://jigsaw.w3.org/css-validator/ on võimalik kontrollida koodi vastavust CSS kehtivale standardile. </li></ul>ANU KURMI ARVUTIKLASS
  6. 6. Näide 1 <ul><li>Pealkirja kujundamine HTML dokumendi päise osas </li></ul><ul><li><html> </li></ul><ul><li><head> </li></ul><ul><li><title>Bach's home page</title> </li></ul><ul><li><style type=&quot;text/css&quot;> </li></ul><ul><li>h1 { color: blue } </li></ul><ul><li></style> </li></ul><ul><li></head> </li></ul><ul><li><body> </li></ul><ul><li><h1>Minu kodulehekülg</hi> </li></ul><ul><li></body> </li></ul><ul><li></html> </li></ul>ANU KURMI ARVUTIKLASS
  7. 7. Näide 2 <ul><li>Pealkirja kujundamine eraldi .css laiendiga failis </li></ul><ul><li><html> </li></ul><ul><li><head> </li></ul><ul><li><title>Bach's home page</title> </li></ul><ul><li><link rel=&quot;stylesheet&quot; href=&quot;bach.css&quot; type=&quot;text/css&quot;> </li></ul><ul><li></head> </li></ul><ul><li><body> </li></ul><ul><li><h1>Bach's home page</h1> </li></ul><ul><li></body> </li></ul><ul><li></html> </li></ul>ANU KURMI ARVUTIKLASS CSS faili sisu h1 { color: blue }
  8. 8. Näide 3 <ul><li>CSS saab kirjeldada tegelikult ka body osas tag-isse, kusjuures stiil kehtib siis ainult selle tag-i sisule </li></ul><ul><li>Lõigu kujundus <body> <p style=&quot;color:green&quot;>See lõik on rohelise värviga.</p> <p>Järgmine lõik on taas standardvärviga.</p> </body> </li></ul><ul><li>Nupu kujundus </li></ul><ul><li><input type=&quot;submit&quot; value=&quot;Kinnita&quot; style=&quot;background-color:#ffffff&quot;> </li></ul>ANU KURMI ARVUTIKLASS
  9. 9. Süntaks <ul><li>CSS süntaks koosneb kolmest osast: </li></ul><ul><ul><li>selektor (selectror) </li></ul></ul><ul><ul><li>omadus (property) </li></ul></ul><ul><ul><li>väärtus (value) </li></ul></ul><ul><li>selector {property: value} </li></ul><ul><li>Selektor on tavaliselt HTML element/tag omadus on atribuut, mida soovite muuta ja atribuudil on väärtus. </li></ul><ul><li>body {color: black} </li></ul>ANU KURMI ARVUTIKLASS
  10. 10. Süntaks <ul><li>Kui väärtus on mitmesõnaline pannakse see jutumärkidesse: </li></ul><ul><li>p {font-family: &quot;sans serif&quot;} </li></ul><ul><li>Kui kasutatate rohkem kui ühte omadust, peavad nad olema eraldatud semikoolonitega. </li></ul><ul><li>p {text-align:center;color:red} </li></ul>ANU KURMI ARVUTIKLASS
  11. 11. Mõõtühikud, mida saab väärtusena kasutada <ul><li>in : 1 toll on võrdne 2.54 cm-ga </li></ul><ul><li>cm: sentimeeter </li></ul><ul><li>mm: millimeeter </li></ul><ul><li>pt : punkti väärtus on 1/72 ühest tollist. </li></ul><ul><li>pc : 1 pica väärtus on 12 punkti </li></ul><ul><li>Näide: </li></ul><ul><li>h1 { margin: 0.5in } /* inches */ </li></ul><ul><li>h2 { line-height: 3cm } /* centimeters */ </li></ul><ul><li>h3 { word-spacing: 4mm } /* millimeters */ </li></ul><ul><li>h4 { font-size: 12pt } /* points */ </li></ul><ul><li>h4 { font-size: 1pc } /* picas */ </li></ul>ANU KURMI ARVUTIKLASS
  12. 12. Süntaks <ul><li>Kui soovite, et stiilikirjeldusi oleks parem lugeda, võite paigutada nad eri ridadele. </li></ul><ul><ul><li>p </li></ul></ul><ul><ul><li>{ </li></ul></ul><ul><ul><li>text-align: center; </li></ul></ul><ul><ul><li>color: black; </li></ul></ul><ul><ul><li>font-family: arial </li></ul></ul><ul><ul><li>} </li></ul></ul>ANU KURMI ARVUTIKLASS
  13. 13. Grupeerimine <ul><li>Võimalik on selektoreid ka grupeerida. </li></ul><ul><ul><li>h1,h2,h3,h4,h5,h6 </li></ul></ul><ul><ul><li>{ </li></ul></ul><ul><ul><li>color: green </li></ul></ul><ul><ul><li>} </li></ul></ul>ANU KURMI ARVUTIKLASS
  14. 14. CLASS selektor <ul><li>Class selektoriga saate defineerida erinevaid stiile samat tüüpi HTML elementidele. Näiteks, kui soovite kahe erineva kujundusega lõike oma dokumendis kasutada. </li></ul><ul><li>p.right </li></ul><ul><li>{ </li></ul><ul><li>text-align: right </li></ul><ul><li>} </li></ul><ul><li>p.center </li></ul><ul><li>{ </li></ul><ul><li>text-align: center </li></ul><ul><li>} </li></ul>ANU KURMI ARVUTIKLASS
  15. 15. CLASS selektori kasutamine HTML dokumendi BODY osas <ul><li><p class=&quot;right&quot;> </li></ul><ul><li>Paremjoondatud lõik. </li></ul><ul><li></p> </li></ul><ul><li><p class=&quot;center&quot;> </li></ul><ul><li>Keskjoondusega lõik. </li></ul><ul><li></p> </li></ul>ANU KURMI ARVUTIKLASS
  16. 16. CLASS selektori kasutamine HTML dokumendi BODY osas <ul><li>Class selektori defineerimisel ei pea kindlasti kasutama HTML elemendi nimetust. </li></ul><ul><li>.center {text-align: center} </li></ul><ul><li>Sellisel juhul saate class selektorit kasutada HTML dokumedis koos erinevate HTML elementidega. </li></ul><ul><li><h1 class=&quot;center&quot;> Keskjoondusega pealkiri </h1> </li></ul><ul><li><p class=&quot;center&quot;> Keskjoondusega lõik. </p> </li></ul>ANU KURMI ARVUTIKLASS
  17. 17. ID selektor <ul><li>Id selektoriga saate defineerida sama stiili erinevatele HTML elementidele </li></ul><ul><li>#green {color: green} </li></ul><ul><li><h1 id=&quot;green&quot;>Some text</h1> </li></ul><ul><li><p id=&quot;green&quot;>Some text</p> </li></ul>ANU KURMI ARVUTIKLASS
  18. 18. CSS kommentaarid <ul><li>CSS kommentaaridesse saate panna oma koodi kohta käiva selgituse, mida ignoreeritakse brauseri poolt. </li></ul><ul><li>/* This is a comment */ </li></ul><ul><li>p </li></ul><ul><li>{ </li></ul><ul><li>text-align: center; </li></ul><ul><li>/* This is another comment */ </li></ul><ul><li>color: black; font-family: arial </li></ul><ul><li>} </li></ul>ANU KURMI ARVUTIKLASS
  19. 19. Stiilide kirjeldamise varian did <ul><li>Variant 1 </li></ul><ul><li>Sobib üksikute lehtede kujundamisel. </li></ul><ul><li><head> </li></ul><ul><li><style type=&quot;text/css&quot;> </li></ul><ul><li>hr {color: sienna} </li></ul><ul><li>p {margin-left: 20px} </li></ul><ul><li>body {background-image: url(&quot;images/back40.gif&quot;)} </li></ul><ul><li></style> </li></ul><ul><li></head> </li></ul>ANU KURMI ARVUTIKLASS
  20. 20. Variant 2 ANU KURMI ARVUTIKLASS Variant 2 Sama asja saab ette anda ka viitena välisele stiililehele . Kasutage, kui on vaja kujundada palju lehti ülesuguste stiilidega. <head> <link rel=&quot;stylesheet&quot; type=&quot;text/css&quot; href=&quot;mystyle.css&quot; /> </head>
  21. 21. Stiililehe sisu variant 2 puhul <ul><li>Stiililehe (fail mystyle.css) sisu võib olla järgmine </li></ul><ul><li>hr {color: sienna} </li></ul><ul><li>p {margin-left: 20px} </li></ul><ul><li>body {background-image: url(&quot;images/back40.gif&quot;)} </li></ul>ANU KURMI ARVUTIKLASS
  22. 22. Stiilide kirjeldamise varian did <ul><li>Variant 3 </li></ul><ul><li>Stiile saate kirjeldada ka otse HTML elemendi tagis. </li></ul><ul><li><p style=&quot;color: red; margin-left: 20px&quot;> See on lõik. </li></ul><ul><li></p> </li></ul>ANU KURMI ARVUTIKLASS
  23. 23. Vanemad brauserid <ul><li>Vanemad brauserid stiile ei toeta, selleks et nad ignoreeriksid stiilide kirjeldusi, lisage kommentaari tagid. </li></ul><ul><li><head> </li></ul><ul><li><style type=&quot;text/css&quot;> </li></ul><ul><li><!-- hr {color: sienna} </li></ul><ul><li>p {margin-left: 20px} </li></ul><ul><li>body {background-image: url(&quot;images/back40.gif&quot;)} --> </li></ul><ul><li></style> </li></ul><ul><li></head> </li></ul>ANU KURMI ARVUTIKLASS
  24. 24. Milliseid HTML elemente saan CSS-iga muuta? <ul><ul><ul><li>heading - tagid (H1 - H6) </li></ul></ul></ul><ul><ul><ul><li>paragrahv - tag (P) </li></ul></ul></ul><ul><ul><ul><li>dokumendi nn. &quot;keha&quot; (BODY) </li></ul></ul></ul><ul><ul><ul><li>lingid ( A:link ja V:link) </li></ul></ul></ul><ul><ul><ul><li>lehekülje jaotus (DIV) </li></ul></ul></ul><ul><ul><ul><li>jne </li></ul></ul></ul>ANU KURMI ARVUTIKLASS
  25. 25. Font font-size <ul><li>NÄIDE </li></ul><ul><li>märgib fondi suurust </li></ul><ul><li>punktides (pt), tollides (in), sentimeetrites (cm), pikselites (px), protsentides (%) </li></ul>ANU KURMI ARVUTIKLASS h 1 {font-size: 20pt}
  26. 26. font-family <ul><li>NÄIDE </li></ul><ul><li>märgib fondi nägu e. š rifti </li></ul><ul><li>võib kasutada kõikvõimalikke fonte </li></ul><ul><li>Võimalikud variandid: [ verdana | gill | arial | courier | times new roman | helvetica | tahoma | western | Zapf-Chancery | ams-serif ] </li></ul>ANU KURMI ARVUTIKLASS h 1 {font-family: arial, courier} p { font-family : verdana }
  27. 27. color <ul><li>NÄIDE </li></ul><ul><li>märgib teksti värvi #värvikood </li></ul><ul><li>Võimalikud variandid: kasutada võib nii värvikoode kui </li></ul><ul><li>värvide inglise keelseid nimetusi [ #CCCCCC | red ] </li></ul>ANU KURMI ARVUTIKLASS h 1 {color: #0000FF} p { color : #CCCCCC }
  28. 28. Näited <ul><li>h3 {color: #ffffff;letter-spacing: 0.2cm; text-align: left; font-family: verdana ; font-size: 110%} </li></ul><ul><li>Tabeli lahtri kujundamine </li></ul><ul><li>td {color: #ffffff; font-family: verdana } </li></ul>ANU KURMI ARVUTIKLASS
  29. 29. Background ANU KURMI ARVUTIKLASS body {background-color: #000000} body {background-image: http://www.domeen.ee/pilt.gif} body {background-color: blue;background-image: url('ul10.jpg') } body {background-repeat: repeat-y} fixed body {background-attachment: fixed}
  30. 30. Lingi omadused ANU KURMI ARVUTIKLASS a:link { color: red } /* külastamata link */ a:visited { color: blue } /* külastatud link */ a:hover { color: yellow } /* kasutaja liikumisel lingile */ a:active { color: lime } /* aktiivne link */
  31. 31. Lingi kujunduse näide <ul><li><style type=&quot;text/css&quot;> </li></ul><ul><li>a {font-family : verdana; font-size: 12; text-decoration: none} </li></ul><ul><li>a:link {color : #00000ff} </li></ul><ul><li>a:visited {color : #ff000ff} </li></ul><ul><li>a:hover {color : #008000} </li></ul><ul><li></style> </li></ul>ANU KURMI ARVUTIKLASS
  32. 32. Raamide kasutamine lõigu kujundamisel <ul><li><style type=&quot;text/css&quot;> </li></ul><ul><li>p{border-style: double ; border-color: #ffffff} </li></ul><ul><li></style> </li></ul><ul><li></head> </li></ul><ul><li><body> </li></ul><ul><li><p >Raamis tekst </p> </li></ul><ul><li>… </li></ul>ANU KURMI ARVUTIKLASS
  33. 33. Kasutatud allikad <ul><li>http://www.w3schools.com/css/default.asp </li></ul><ul><li>http://www.w3.org/Style/CSS/ </li></ul><ul><li>http://www.w3.org/TR/REC-CSS2/ </li></ul>ANU KURMI ARVUTIKLASS
  34. 34. ANU KURMI ARVUTIKLASS

×