1. Ligjerata 4 Dr. Fisnik Dalipi
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ëhet nga tri pjesë: selektuesi (ang. selector), vetia (ang. property) dhe vlera (ang. value)
selector {property: value}
selector paraqet XHTML tag-un për të cilën doni të definoni CSS stil
property paraqet atributin vlerën e të cilit doni ta ndryshoni
value paraqet vlerën që merr vetia (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.

9. Selektori Univerzal i klasës
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>
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}

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 vendosjen e 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