Ligjerata 4 Dr. Fisnik Dalipi

1. Internet Ligjerata 4 Dr. Fisnik Dalipi

2. CSS – Cascading Style Sheets • CSS qëndron për Cascading Style Sheets • Stilet definojnë mënyrën se si paraqitet një XHTML element • Më tepër stile më në fund ndërthuren në një dokument të vetëm • Stilet definohen në seksione speciale brenda XHTML dokumentit ose si fajll i veçantë • Më të përdorshëm janë stilet e jashtme • Më tepër XHTML dokumente mund të kenë CSS të njëjtë • Kjo krijon web faqe konzistente

3. CSS - Sintaksa • Sintaksa e CSS-sëpërbëhetnga tri pjesë: selektuesi (ang. selector), vetia (ang. property) dhevlera (ang. value) selector {property: value} • selector paraqet XHTML tag-un përtëcilëndonitëdefinoni CSS stil • property paraqetatributinvlerën e tëcilitdonitandryshoni • value paraqetvlerënqëmerrvetia (property)

4. CSS Sintaksa - Shembuj • Formaton tekstin nën p-tagun në XHTML me ngjyrë të kuqe • Formatimi i snkronjave: p{font-family: arial} • Nëse emri i shkronjës është më shumë se një fjalë, atëherë përdoren thonjëzat • p{font-family: “ms sans serif”}

5. CSS – Grupimi i më tepër vetive • Në CSS ekziston mënyra për grupim të më tepër nën një selektor të vetëm p {text-align:center;color:red} • Mjafton që vetitë të ndahen mes veti me pikëpresje • Për lexueshmëri më të mirë, vetitë mund të ndahen në rreshta të ri. p { text-align: center; color: black; font-family: arial }

6. CSS – Grupimi i më tepër selektorëve • Ekziston mundësia grupimit të më tepër selektorëve që kanë veti të përbashkëta • Ndarja e tyre bëhet me presje h1,h2,h3,h4,h5,h6 { color: green }

7. Selektorët e klasës (class selectors) • Me selektor të klasës mund të kemi stile të ndryshme për të njëjtin selektor(tag) • Supozojmë se duam dy lloje të paragrafeve: njëra e renditur në të majtë, tjetra në mes • Klasat definohen me pikë pas selektorit p.left {text-align: left} p.center {text-align: center} • Për përdorim të selektorit të klasës duhet përdorur class atributi në XHTML

8. Selektorët e klasës - Shembull <p class="left"> Paragrafi i rreshtuar ne te majte. </p> <p class="center"> Paragrafi i rreshtuar ne mes. </p>

9. Selektori Univerzal i klasës • Nëse nuk e shënojmë selektorin para klasës përkatëse stili bëhet i qasshëm nga çdo element në XHTML • Shembull: .neqender{text-align: center} • Të gjitha tag-et në XHTML do të kenë qasje në selektorin e klasës duke përdorur emrin e saj në class atributin <h1 class="neqender"> Titulli ne qender... </h1> <p class="neqender"> Paragrafi ne qender... </p>

10. id - Selektori • id selektori dallon nga selektori i klasës • Derisa selektori i klasës qaseshte në më SHUME elemente në dokument • id selektori qaset dhe i takon vetëm NJE elementi në web dokument • Id selektorët definohen me # shenjën pas selektorit p#stili1 { text-align: center; color: red }

11. id - Selektori • Stili i mësipërm do të funksionon vetëm për p tag-un dhe asnjë tag tjetër • Nëse nuk shënojmë tag përkatës, id selektori do të jetë valid për tag-un e parë në të cilën përdoret *#stili1{ text-align: center; color: red } <h1 id="stili1">Nje tekst</h1> <h2 id="stili1">Nje tekst</h2>

12. CSS Komentet • CSS komentet janë pjesë teksti që do të injorohen nga browserët • CSS komenti fillon me /* dhe mbaron me */ si vijon /* Nje koment */ p { text-align: center; /* Nje koment tjeter */ color: black; font-family: arial }

13. Pseudoklasat • Ekzistojnë XHMTL elemente të cilat mund të kenë disa gjendje • Gjendjet e tyre mund të manipulohen me pseudoklasat • Për shembull pseudoklasat për linqet (a tag-un ) janë: link, vistited, hover dhe active. • link - referon në linkun që nuk është vizituar • visited - referon në linkun që është vizituar • hover - referon në mouse-in kur është vendosur mbi linkun • active - referon në linkun që është aktiv (që është zgjedhur, apo është kthyer në të pasi është shtypur back butoni)

14. Ndërthurja e stileve në CSS • Në CSS kemi mundësi të definojmë stile të ndërthurura që janë pjesë e të dy tageve ul li { color: green } • nënkupton stil që do të funskionoj në li tag-un e ndërthurur në ul tag-un

15. Mënyrat e vendosjes së CSS • Ekzistojnë tri mënyra për vendosjene CSS në një XHTML dokument edhe atë: • Shtimi i CSS-së nga jashtë (CSS-ja eksterne) • Shtimi i CSS-së brenda në dokument (CSS-ja interne) • Shtimi i CSS brenda tag-eve (CSS-ja inline)

16. CSS-ja eksterne • CSS-të eksterne definohen si fajlla në veçanti dhe ruhen me ekstenzionin *.css • Në të definohen të gjitha stilet sipas sintaksës dhe rregullave që përmendëm deri tani • Më pastaj thirret në web dokumentin në mënyrën si vijon: <head> <link rel="stylesheet" type="text/css" href="fajli.css" /> </head> • Thirja e css fajllit bëhet në head seksionin e XHTML dokumentit

17. CSS-ja interne • CSS-ja interne nënkupton definim të CSS stileve në head seksionin e XHTML dokumentit <head> <style type="text/css"> em {background-color: purple; color : white } h1{ font-family: “arial, sans-serif”; font-size : 14pt } .klasa{color: blue } </style> </head>

18. Shembull

19. Shembull

20. CSS-ja inline • Stilet inline ndryshon vetëm pamjen e tag-ut përkatës • Nëse doni të ndryshoni stilin e përmbajtjes së ndonjë prej tagjeve përkatëse perdoret: <p style="color: red; font-size: 32pt">Nje paragraf</p>

21. Përparësitë në CSS stilet • Vlen të theksohet se inline stilet nëse janë të definuar, mbishkruan stilet interne dhe eksterne • Stili intern mbishkruan atë ekstern • Më në fund nëse nuk ka stile inline apo intern të definuar vlen CSS stili ekstern • Pra përparësitë janë si vijon • Stili inline Stili intern Stili ekstern • Gjithashtu elementet e ndërthurura trashëgojnë stilet e elementeve prindër nëse nuk ka inline stil të definuar

22. Përparësitë në CSS stilet • Për shembull nëse CSS fajli ekstern ka këtë stil për h3 selektorin h3{color: red; text-align: left; font-size: 8pt} • Kurse XHTML-ja ka edhe CSS interne si vijon h3{text-align: right; font-size: 20pt } • Nëse dokumenti poashtu lidhet me CSS-në eksterne • Vetitë për h3 selektorin do të jenë color: red; text-align: right; font-size: 20pt

23. Disa CSS Stile të rëndësishme • Stilet për prapavijën (Bakcground Styles) me vetitë: background-color, background-image, background-repeat, background-attachment dhe background-position • Stilet për tekstin (Text Styles) me vetitë: color, text-align, text-decoration, text-transformation dhe text-indent • Stilet e shkronjave (Font Styles) me vetitë: font-style, font-family, font-size etj... • Stilet e listave: (List-Styles) me vetitë: list-style-type, list-style-position, list-style-image

24. Referenca • Deitel, Deitel, and Nieto, (2007) Internet & World Wide Web How to Program, Prentice Hall; 4 edition

25. Thank You! • PYETJE??? 25