11/7/2017

Hyrje ne CSS
Cascading Style Sheet
Leksion 3

Hyrje ne CSS
• Cascading Style Sheets 3 (CSS3)
– Eshte nje gjuhe qe pershkruan menyren si do te
paraqiten elementet e ndryshem HTML ne browser.
– Me ane te kesaj gjuhe ndahet paraqitja e elementeve
nga struktura e tyre.
– Kodi CSS mund te shkruhet ne file te tipit .css
• Validuesi online CSS
jigsaw.w3.org/css-validator/
– Ky mjet ju ndihmon te kontrolloni saktesine e kodit
tuaj se bashku me suportin e tij nga browserat.

1
 11/7/2017

Menyrat e aplikimit te style te

elementeve

1. Inline Style
2. Embedded Style Sheets
3. External Style Sheets

1. Inline style
• Inline style
– Deklaron nje stil per nje element individual duke
perdorur atributin style ne tagun hapes te
elementit.

• Cdo property CSS ndiqet nga nje kolone dhe

nje vlere e atributit
– Deklarime te shumefishta propertish ndahen me
pikepresje.

2
 11/7/2017

Verejtje!
• Inline style ne te vertete nuk e ndan
paraqitjen nga permbajtja.

• Per te aplikuar te njejtin style ne elemente te

ndryshem perdoren embedded style sheets
ose external style sheets.

3
 11/7/2017

• Propertia color cakton ngjyren e tekstit

– Si vlera per kete property mund te perdoren emrat
e ngjyrave ose kodet hekzadecimale te tyre.
– Lista e plote e standardit HTML per ngjyrat
gjendet ne: www.w3.org/TR/css3-color/

4
 11/7/2017

2. Embedded Style Sheets

• Teknika e dyte per te perdorur style sheets
eshte embedded style sheets, e cila na
mundeson te perfshijme nje dokument CSS3
ne sesionin head te nje dokumenti HTML5.

• Ne figuren me poshte krijohet nje embedded

style sheet me kater stile te ndryshme.

10

5
 11/7/2017

11

Elementet e style dhe MIME types

• Stilet qe vendosen ne nje element style aplikohen ne
te gjithe dokumentin ku ndodhen.
• Atributi type i elementit style percakton MIME type
(formatin e kodimit) per ate style sheet. Style sheets
perdorin text/css.
• MIME type qe perdoren ne kete liber:

• Listen e plote me te gjithe MIME type e gjeni ne:

www.w3schools.com/media/media_mimeref.asp 12

6
 11/7/2017

Embedded Style Sheets

• Ne trupin e style sheet deklarohen rregullat CSS
per ate style sheet.
• Per te realizuar ndarjen logjike te kodit CSS me
HTML5 ku aplikohet stili, perdoret nje selektor
CSS i cili percakton elementet qe do te stilohen
sipas rregullit te shkruar.
• Kujtese: Elementi em tregon qe permbajtja e tij
do te theksohet (emphasize).
• Trupi i cdo rregulli ne nje style sheet vendoset
midis kllapave { dhe }
13

Embedded Style Sheets

• Propertia font-weight percakton trashesine
e tekstit. Vlerat qe mund te marre jane:
– bold
– normal (vlera default)
– bolder (me e erret se bold)
– lighter (me e hapur se normal)
– Trashesia e tekstit mund te percaktohet edhe me
shumefisha te 100, nga 100 ne 900 (psh., 100, 200, …,
900). Teksti normal eshte me vlere 400, dhe teksti
bold eshte me vlere 700.

14

7
 11/7/2017

Embedded Style Sheets

Klasat e stileve
• Deklarimet e style-class paraprihen nga nje pike (.)
• Nepermjet tyre percaktohen stile qe mund te
aplikohen ne cdo element.
• Ne shembullin me siper klasa purple e ben tekstion
ngjyre lejla (purple).
• Mund te krijohen edhe selektore me id.
• Nqs nje element ne faqe ka nje id, mund te deklarohet
nje selektor i formes #elementid per te percaktuar
stilin e tij.

15

Embedded Style Sheets

• Propertia font-family percakton emrin e
fontit qe do te perdoret.
• Fontet generic e lejojne perdoruesin te
percaktoje nje tip fonti ne vend te nje fonti
specifik, ne rast te browseri nuk e suporton
nje lloj fonti te caktuar.

16

8
 11/7/2017

Embedded Style Sheets

 Propertia font-size percakton madhesine e
fontit.
 Mund te percaktoni nje madhesi me njesi matese
point (pt) ose nje madhesi relative si xx-small, x-
small, small, smaller, medium, large, larger, x-large
and xx-large.
 Vlerat relative preferohen nga vlerat ne pika sepse
programuesi nuk e di madhesine specifike te ekranit
te perdoruesit.
 Vlerat relative e bejne me fleksibel pamjen e faqeve.
 Psh. Perdoruesi mund ta ndryshoje madhesine default te
browserit ne menyre qe ta beje me te lexueshme faqen.
17

Aplikimi i nje klase te stilit

 Ne shume raste nje style qe aplikohet ne nje
element prind aplikohet gjithashtu edhe ne
femijet e tij (elementet e nderfutur)
 Vlera te shumefishta te te njejtes properti mund
te caktohen nga nje style ose te trashegohen nga
style i prindit, prandaj ne te tilla raste browseri
duhet te perdore vetem njeren nga vlerat e
propertise para se te renderoje ate element.
 Ne kete rast kemi te bejme me konflikte te
stileve.
18

9
 11/7/2017

Konfliktet e styles
• Styles mund te percaktohen nga user, nga author ose nga nje user
agent.
– User: ai qe shikon faqen web
– Author: jeni ju qe keni krijuar dokumentin/faqen web
– User agent: programi qe perdoret per te renderuar dokumentin (browser-i).
• Stilet perhapen ne dokument (nga kjo lind termi “Cascading Style
Sheets”), ne menyre qe paraqitja perfundimtare e elementeve ne
faqe te jete rezultat i kombinimit te stileve te percaktuara ne
menyra te ndryshme.
• Stilet e percaktuara nga user-i kane perparesi nga stilet e
percaktuara nga user agent.
• Stilet e percaktuara nga author kane perparesi nga stilet e
percaktuara nga user-i.
• Shumica e stileve te vendosura per elementet prind trashegohen
nga femijet (elementet e nderfutur).
19

Konfliktet e styles
• Propertia text-decoration i vendos
zbukurime tekstit te nje elementi
– underline
– overline
– line-through
– blink

20

10
 11/7/2017

Zgjidhja per Konfliktet e styles

 Me poshte jepet nje shembull per trashegimine ne te
cilen nje element femije em trashegon propertine
font-size nga prindi i tij elementi p.
 Elementi femije em ka nje properti color qe ka
konflikt me(ka vlere te ndryshme ne krahasim me)
propertine color te prindit te tij elementin p.
 Propertite e percaktuara direkt per elementet femijet
jane me specifike se sa propertite e percaktuara per
prinderit dhe qe trashegohen.
 Konfliktet zgjidhen duke patur parasysh specifiken e
larte, prandaj ne kete rast ka perparesi style i femijes.

21

22

11
 11/7/2017

23

Konfliktet per Style

• Pseudoclasat ju japin akses ne permbajtje te pa
deklaruar ne dokument.
• Pseudoklasa hover aktivizohet kur perdoruesi
leviz mouse mbi nje element.
• Pseudoclasses ndahen me emrin e elementit tek i
cili aplikohen nga nje : (pa hapesira qe e rrethojne).
• Per te aplikuar rregulla per disa elemente
njeheresh, keta elemente ndahen me presje ne
style sheet.
• Per te aplikuar rregulla ne nje element te caktuar
vetem kur ai eshte femije i nje elementi tjeter,
ndajme emrin e elementeve me hapesire.
24

12
 11/7/2017

Konfliktet per Style

• Matja relative e medhesive (length):
– px (pixels – madhesia varion ne varesi te rezolucionit te
ekranit)
– em (zakonisht lartesia e shkronjes se madhe M te atij fonti)
– ex (zakonisht lartesia e shkronjes se vogel x te atij fonti)
– Ne perqindje (e madhesise default te fontit)

• Matja absolute (njesi qe nuk variojne ne madhesi):

– in (inch)
– cm (centimetra)
– mm (milimetra)
– pt (points; 1 pt = 1/72 in)
– pc (picas; 1 pc = 12 pt)
25

External style sheets

• style sheets te jashtme jane dokumenta te
vecante te cilet permbajne vetem rregullat
CSS.

• Ndihmojne ne krijimin e nje pamjeje uniforme

per website-in
– Faqe te vecanta mund te perdorin te njejtin style
– Modifikimi i nje style sheet te vetme mundeson
realizimin e ndryshimeve ne te gjithe website-in

26

13
 11/7/2017

External style sheets

27

External style sheets

• Ne figuren me poshte jepet nje dokument HTML5 qe perdor
per style nje external style sheet.

• Elementi link
– Perdor atributin rel per te vendosur lidhje midis dy
dokumentave
– Atributi rel percakton qe dokumenti i lidhur eshte nje
stylesheet per te.

• Atributi type percakton MIME type te dokumentit te lidhur.

• Atributi href vendos URL-ne e dokumentit qe mban ate

stylesheet.
28

14
 11/7/2017

29

30

15
 11/7/2017

Pozicionimi i elementeve
• Propertia position e CSS
– Lejon pozicionim absolut i cili siguron kontroll me te
madh mbi pozicionet ku vendosen elementet ne nje
faqe

– Zakonisht elementet pozicionohen ne faqe sipas

renditjes qe ato ndodhen ne dokumentin XHTML

– Percaktimi i nje pozicioni te elementit si absolut,

ndryshon rrjedhen normale te pozicionimit te
elementeve ne faqe. Elementi pozicionohet ne varesi te
distances nga borderat (top, left, right ose bottom) te
elementit prind.

31

32

16
 11/7/2017

• Imazhet

• Paraqitja ne browser

33

Pozicionimi i elementeve
• Propertia z-index lejon programuesit te
organizojne elementet ne layers te ndryshme

• Elementet qe kane vlera me te larta te z-index

shfaqen mbi elementet me vlera me te vogla
te z-index

34

17
 11/7/2017

Pozicionimi i Elementeve: Pozicionimi Relativ, span

• Ne shembullin me poshte ilustrohet pozicionimi relativ i
elementeve nga njeri tjetri.

36

18
 11/7/2017

Pozicionimi i Elementeve: Pozicionimi Relativ, span

Elementet Inline dhe Block

 Elementet Inline
– Nuk ndryshojne rrjedhen e dokumentit
– Shembuj:
 img
a
 em
 strong
 span
– Element grupues
– Nuk aplikon formatim ne permbajtjen e tij
– Krijon nje kontenitor per rregulla CSS ose atribute id te
aplikueshme ne nje sesion.

37

Pozicionimi i Elementeve: Pozicionimi Relativ, span

• Elementet Block
– Shfaqen ne nje rresht te vecante
– Kufizohen nga konture virtuale
– Shembuj:
• p
• Te gjithe heading (h1 deri h6)
• div
– Element grupues si span

38

19
 11/7/2017

Background
• CSS mund te kontrolloje background te elementeve te tipit
block duke shtuar:
1. Colors
2. Images

• Propertia background-image percakton URL e imazhit

– Perdor formatin e url(fileLocation)

• Propertia background-position vendos imazhin ne faqe

– Vendos imazhin ne faqe duke perdorur vlerat top, bottom,
center, left dhe right ne menyre individuale ose te
kombinuara me pozicionimin vertikal dhe horizontal.
– Pozicionimi mund te behet edhe duke percaktuar distancat
horizontale dhe vertikale nga pozicioni majtas-lart i ekranit

39

Background
• Propertia background-image percakton
URL e imazhit ne formen url(fileLocation)

• Propertia background-position vendos

imazhin ne faqe
– Vendos imazhin ne faqe duke perdorur vlerat top,
bottom, center, left dhe right ne menyre
individuale ose te kombinuara me pozicionimin
vertikal dhe horizontal.
40

20
 11/7/2017

Background
• Propertia background-repeat
kontrollon perseritjen e imazhit te background
– Vendosja e perseritjes ne no-repeat shfaq nje
kopje te imazhit te background ne ekran
– Vendosja ne repeat (vlera default) perserit
imazhin ne menyre horizontale dhe vertikale
– Vendosja ne repeat-x e perserit imazhin vetem
horizontalisht
– Vendosja ne repeat-y e perserit imazhin vetem
vertikalisht

41

Background
• Propertia
background-attachment: fixed

– Fikson imazhin ne pozicionin e percaktuar nga

background-position. Levizja poshte me scroll te
dritares se browser nuk e leviz imazhin nga
pozicioni i vendosur. Vlera default, scroll, e leviz
imazhin nderkohe qe perdoruesi ben scroll ne
dritare.

42

21
 11/7/2017

Background
• Propertia text-indent i ben indent sipas
vleres se dhene rreshtit te pare te tekstit.

• Propertia font-style lejon te caktosh per

tekstin none, italic ose oblique.

43

44

22
 11/7/2017

45

Permasat e Elementeve
• Permasat e elementeve ne nje faqe mund te
vendosen nepermjet CSS duke perdorur
propertite height dhe width
– Vlerat e tyre mund te jene relative ose absolute.

• Teskti ne nje element mund te jete i pozicionuar

ne qender duke perdorur
text-align: center;
vlerat e tjera per kete property jane left dhe right
46

23
 11/7/2017

Permasat e Elementeve
• Probleme me vendosjen njekohesisht edhe te
permases horizontale edhe te asaj vetikale

– Permbajtja mund te dale nga kufinjte e percaktuar, rast ne

te cilin elementi duhet te behet mjaftueshem i madh ne
menyre qe te mbaje te gjithe permbajtjen.

– Mund te caktohet propertia overflow ne scroll, ne

menyre qe te shtohen scroll bare nqs teksti i kalon kufinjte
e percaktuar per te.

47

48

24
 11/7/2017

49

Box Model dhe Text Flow

• Elementet Block-level ne HTML5 kane nje box virtual qe
vizatohet perreth tyre duke u bazuar ne modelin box
• Kur browseri renderon informacion duke perdorur
modelin box cdo element rrethohet nga:
 Padding
• Propertia padding percakton distancen midis permbajtjes
brenda nje elementi dhe kufinjve te elementit
• Padding mund te vendoset per secilen ane te box-it duke
perdorur padding-top, padding-right, padding-
left dhe padding-bottom
 Margin
• Percakton distancen midis kufinjve te elementit dhe cdo
teksti jashte ketyre kufinjve.
• Margins per ane te vecanta te elementit mund te
percaktohet duke perdorur margin-top, margin-
right, margin-left dhe margin-bottom
50

25
 11/7/2017

Box Model dhe Text Flow

Border: Borderi kontrollohet duke perdorur propertite:
– border-width
• Mund te vendoset ne te gjitha gjatesite e specifikuara ne CSS ose me
vlera te paracaktura thin, medium ose thick
– border-color
• Vendos ngjyren e perdorur per borderin
– border-style
• Opsionet jane: none, hidden, dotted, dashed, solid,
double, groove, ridge, inset dhe outset

• Atributi class
– Lejon qe per nje element HTML5 te aplikohet me shume se
nje klase duke i ndare emrat e klasave me hapesire

51

Box Model

52

26
 11/7/2017

53

54

27
 11/7/2017

Box Model dhe Text Flow

Elementet Floating (Elementet Pluskues)
• Browserat zakonisht vendosin tekst dhe elemente ne ekran sipas
renditjes qe ato shfaqen ne dokumentin HTML5.
• Elementet mund te perjashtohen nga vendosja normale e tekstit.
• Floating na lejon ta levizim nje element ne njeren ane te ekranit;
ndersa permbajtja tjeter e dokumentit do te zhvendoset rreth
elementit te ripozicionuar.

55

56

28
 11/7/2017

57

Media Types
• CSS media types
– Lejojne programuesin te vendose si do te duket faqja ne
varesi te medias qe po perdoret per te shfaqur kete faqe
– Tipi me i zakonshem i media eshte media screen qe eshte
ekrani i zakonshem.

• Style qe aplikohet per te gjitha mediat delarohet me

ane te @media all dhe kufizohet nga kllapat { dhe }.

• Per te krijuar style qe aplikohet vetem ne nje tip te

vetem media, si psh print, perdoret @media print dhe
grupon rregullat e style me klapat { dhe }.

58

29
 11/7/2017

Media Types
• Tipe te tjera mediash ne CSS3 perfshijne:
– handheld
• E disenjur per pajisje mobile interneti
– braille
• Per makina qe mund te lexojne ose te printojne faqe web ne
braille (shkronja ne reliev per te verber)
– speech
• Lejojne qe programatori t’i jape me shume informacion ne
lidhje me permbajtjen e faqes, nje browser-i me sintetizim
gjuhesor
– print
• Ndikon ne pamjen e nje faqeje web kur ajo printohet

59

60

30
 11/7/2017

61

Ndertimi i nje menuje drop-down me CSS

• Pseudoklasa :hover
– Perdoret per te aplikuar nje style te caktuar ne nje
element kur vendoset mouse mbi te.

• Propertia display
– Lejon programuesin te vendose nqs nje element
do te afishohet si element bllok, element inline
apo nuk afishohet fare (none)

62

31
 11/7/2017

1 <?xml version = "1.0" encoding = "utf-8"?>

2 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
3 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
4
5 <!-- Fig. 5.14: dropdown.html -->
6 <!-- CSS drop-down menu. -->
7 <html xmlns = "http://www.w3.org/1999/xhtml">
8 <head>
9 <title>
10 Drop-Down Menu
11 </title>
12 <style type = "text/css">
13 body { font-family: arial, sans-serif }
14 div.menu { font-weight: bold;
15 color: white;
16 border: 2px solid #225599;
17 text-align: center;
18 width: 10em;
19 background-color: #225599 }
20 div.menu:hover a { display: block }
21 div.menu a { display: none;
22 border-top: 2px solid #225599;
23 background-color: white;
24 width: 10em;
25 text-decoration: none;
26 color: black }
27 div.menu a:hover { background-color: #dfeeff }
28 </style>
29 </head>
30 <body> 63

31 <div class = "menu">Menu

32 <a href = "#">Home</a>
33 <a href = "#">News</a>
34 <a href = "#">Articles</a>
35 <a href = "#">Blog</a>
36 <a href = "#">Contact</a>
37 </div>
38 </body>
39 </html>

64

32
 11/7/2017

65

Style sheets te perdoruesit (opsionale)

• Perdoruesit mund te krijojne style sheets te
personalizuara per te formatuar faqet web sipas
preferencave te tyre.

• Madhesite e fontit absolute mbishkruajne style sheets

te perdoruesit, ndersa madhesite relative te formatit
do te cojne ne nje style te tipit user-defined.

• Style sheets te perdoruesit nuk lidhen me dokumentat,

por vendosen ne opsionet e browser-it.

66

33
 11/7/2017

67

• Krijojme une style sheet userstylesheet.css

me permbajtjen si me poshte:

68

34
 11/7/2017

User Style Sheets ne Internet Explorer 11

Zgjedhim userstylesheet.css
qe krijuam. Japim OK.

69

User Style Sheets ne Firefox dhe Chrome

 Per te shtuar user style sheet ne Firefox, gjeni
profilin tuaj ne Firefox duke perdorur
udhezimet ne:
– www.mozilla.org/support/firefox/profile#locate

 Per te shtuar nje user style sheet ne Chrome

shihni:
– www.google.com/support/forum/p/Chrome/threa
d?tid=1fa0dd079dbdc2ff&hl=en
70

35
 11/7/2017

Shembulli ne slide 67 pas aplikimit te

userstylesheet.css

71

 Per propertine font-size perdorim nje njesi

relative e cila nuk mbishkruan user style te
vendosur ne userstylesheet.css
 font size eshte relative ndaj asaj te specifikuar
ne user style sheet.

72

36
 11/7/2017

• Eshte madhesi relative ndaj style te perdoruesit

prandaj madhesia e fontit do te jete 15 pt. (.75
em per 20 pt)
73

FUND LEKSION 3

74

37