1. Ligjerata 5 Dr. Fisnik Dalipi
Internet
Ligjerata 5
Dr. Fisnik Dalipi

2. CSS – Cascading Style Sheets (vazhdim)
Permbajtesit universal (generic containers)
Margjinat
Mbushjet (Padding)
Dimensionet
Pozicionimi
Shtresat dhe Dukshmeria
Pseudo-Klasat

3. Permbajtesit universal
Deri tani, ne mesuam te ndryshojme veti te HTML tageve me stile te ndryshme
Por, ne mund ti ndryshojme vetem taget dhe permbajtjen e tyre, duke mos patur mundesi te ndryshojme nje grupe tagesh si nje teresi.
Permbajtesit universal (generic containers), <span> dhe <div>, na mundesojne grupimin e tageve ose fjaleve

4. Permbajtesit universal
Permbajtesit universal nuk bejne asgje perderisa nuk ndryshohen nga atributet.
Tagu <span> ne nje tag inline
Mund ta ndryshoj gjuhen (lang attribute), ngjyren e fontit, font-family, font-style, etc.
Tagu <div> eshte tag ne nivel blloku (grupi)
Na mundeson grupimin e paragrafeve se bashku me listat, etj.
Mund te perdoren per krijimin e elementeve naviguese.

5. Tagu <span>
Tagu span eshte i dobishem per aplikimin e atributeve ne nje tekst
P.sh. I love chocolate-covered espresso beans
CSS:
span.chocolate {
font-family: Times;
color: #330; }
HTML:
I love <span class = “chocolate”> chocolate-covered espresso beans</span>

6. Tagu <span>
<span> mund te permbahet brenda nivelit te bllokut dhe elemmenteve inline
Atributet e <span> jane:
id : id-ja nga style sheet
class : klasa nga style sheet
lang : gjuha e tekstit
dir : specifikon drejtimin e tekstit (ltr, rtl)

7. Aplikimi i <span>
Span nuk duhet te perdoret kur ka nje tag standard te pershtatshem
p.sh. mos perdor <span> per ta bere tekstin italik
Atehere perdore tagun <i>
Taget <i>, <b>, <em> etj. kane po ashtu atribute
Ku perfshihen <style>, <lang> etj.
<i style =“color: red; font-family: Courier”>
Nuk duhet te specifikohet nje rregull e CSS per perdorim te span-it
I love <span style = “color: #330; font-family: Times”>
chocolate-covered espresso beans</span>

8. Aplikimi i <span>
<span> duhet te perdoret vetem per ndryshimin e nje teksti te shkurter
Mos e perdor <span> per ndryshimin e tere paragrafit
Nese nuk ke nevoje ta perdorish <span> dhe perseri ke nevoje per disa ndryshime, atehere shtoji klase fletes stilizuese (style sheet)

9. Tagu <div>
Me gjithe gjasat, perdorimi me i zakonshem I tagut <div> eshte per elementet naviguese
<div> eshte tag ne nivel blloku (si paragrafi)
Mund te permbaj disa tage ne bllok ose tage inline
Mund ti grupoje paragrafet, me lista, me tabela, etj.

10. <div>
<div> me shpesh perdoren brenda tagut <bodydhe brenda tagjeve tjere <div>
Mund te jete i nderthurur
Shpeshhere <div> taget ndryshohen me atributin id, e jo me klase (class)

11. Meny e thjeshte navigimi
CSS
div#sidebar {
float:left;
background-color: #ccf;
width: 10%; }
HTML
<div id = “sidebar”>
<ul>
<li>Item1</li>
<li>Item2</li>
<li>Item3</li>
</ul>
</div>

12. Margjinat Margjinat e definojne hapesiren rreth elementeve Vetia Vlera
margin-left
margin-right
margin-top
margin-bottom
auto
length %

13. Margjinat - Shembull body { margin-top:10px; margin-bottom:10px;
margin-left:10%;
margin-right:auto; }

14. Mbushjet (Padding) Mbushjet e definojne hapesiren ndermjet kufirit
te elementit dhe permbajtjes se elementit
Vetia
Vlera
padding-left
padding-right
padding-top
padding-bottom
length %

15. Padding - Shembull td { padding-left:3px; padding-right:3px;
padding-top:3px;
padding-bottom:3px; }

16. Padding, Margjina dhe Kufiri
td {
padding-left:1px;
padding-right:2px;
padding-top:3px;
padding-bottom:4px; }
Aplikohet edhe ne:
border-color
border-width
margin
td {
padding:3px 2px 4px 1px; }

17. Dimensionet Vetia Vlera height width auto length % line-height normal
number

18. Dimensionet - Shembull
body {
line-height:1.5; }
img {
width:60%;
border-width:1px;
border-style:solid;

19. Pozicionimi Vetia Vlera float left, right none position static
absolute
relative

20. Pozicionimi (pozita = absolute/relative)
Vetia
Vlera
left
right
top
bottom
auto %
length

21. Pozicionimi i box-ave (float positioning)
Nëse nuk kujdesemi për
pozicionin e box-it në
CSS nuk do të kemi
pozicionim të sakt të tij
Box-i do të fillon me
elementin e parë dhe do
të mbaron me të fundin
Rradhitja do të bëhet
njëra pas tjetrës
Pozicionimi do të jetë
statik

22. float pozicionimi
Float opcioni mundëson pozicionimin e boxit majtas apo djathtas
Kur përdorim float, fillimisht dokumenti
pozicionohet në normal float (pa pozicionim)
pastaj vendoset në skaj majtas apo djathtas

23. Ne ecurine normale– nuk ka “pozicionim”
Kendi i siperm majtas= (0,0)
Majtas-Djathtas, Poshte-Larte

24. Pozicionimi absolut dhe relativ
Pozicionimi absolut del nga float-i normal dhe
pozicionohet jashta saj
Pozicionimi relativ vendos objektin fillimisht
ne float-in normal pastaj leviz brenda saj
Pozicionimi fix e nxjer elementin nga normal
float dhe pozicionon relativ ndaj viewport-it (viewport paraqet hapësirën vëzhguese të një web browser-i)

25. Pozicionimi majtas Për pozicionim majtas
përdoret float atributi me left vlerën:
.containingbox{
width: 600px;
height: 400px;
border: 2px solid #00 }
.floatleft{
width: 250px;
float: left;

26. Pozicionimi majtas – Kodi në XHTML
Në XHTML kodi që duhet shkruar është si
vijon:
<div class="containingbox">
<div class="floatleft">
<p>Teksti ne paragraf</p>
</div>

27. Pozicionimi djathtas Për pozicionim djathtas përdoret float atributi
me right vlerën:
.containingbox{
width: 600px;
height: 400px;
border: 2px solid #00 }
.floatright{
width: 250px;
float: right;

28. Pozicionimi djathtas – Kodi në XHTML
Në XHTML kodi që duhet shkruar është si vijon:
<div class="containingbox">
<div class="floatright">
<p>Teksti ne paragraf</p>
</div>

29. Pozicionimi - Shembull
<img src="leftupper.jpg" style=
"position:absolute;left:5px;top:5px">
<img src="rightupper.jpg" style=
"position:absolute;right:5px;top:5px">

30. Modeli Kuti (Box)
Te gjitha elementet e web sajtit gjenerojne “kuti” te padukshme – duhet te percaktohet se si te gjitha keto kuti do te vendosen ne web faqen tuaj.
Foto me link
Tekst i ndryshem, lista etj.
Foto
Disa linqe
(navigim)
Tekst i rendomte

31. Modeli Kuti
Margjina
Kufiri
Mbushje (Padding)
Permbajtja

32. Shtresat dhe Dukshmeria
Vetia
Vlera
z-index
auto
number
visibility
visible
hidden
clip
rect(top right bottom left )

33. Shtresat dhe Dukshmeria – Shembull 1
<span style="width:200;height:100; background-color:blue;
position:relative;z-index:5">
</span>
E nevojshme! Perndryshe
z-index nuk do merret
parasysh!

34. Shtresat dhe Dukshmeria – Shembull 1
<span style="width:200;height:100; background-color:red">
</span>

35. Shtresat dhe Dukshmeria – Shembull 1
<span style="width:200;height:100; background-color:red;
position:relative;left:-100;top:50">
</span>

36. Shtresat dhe Dukshmeria – Shembull 1
<span style="width:200;height:100; background-color:red;
position:relative;left:-100;top:50">
</span>

37. Shtresat dhe Dukshmeria – Shembull 1
<span style="width:200;height:100; background-color:red;
position:relative;left:-100;top:50;
z-index:4">
</span>

38. Shtresat dhe Dukshmeria – Shembull 1
<span style="width:200;height:100; background-color:red;
position:relative;left:-100;top:50;
z-index:4">
</span>

39. Shtresat dhe Dukshmeria – Shembull 2
<span style="width:200;height:100; background-color:red">
Text
</span>
Text

40. Shtresat dhe Dukshmeria – Shembull 2
<span style="width:200;height:100; background-color:red; visibility:hidden">
Text
</span>
Text

41. Shtresat dhe Dukshmeria – Shembull 2
<span style="width:200;height:100; background-color:red; visibility:hidden">
Text
</span>

42. Shtresat dhe Dukshmeria – Shembull 2
<span style="width:200;height:100; background-color:red;">
Text
</span>
Text

43. Shtresat dhe Dukshmeria – Shembull 2
<span style="width:200;height:100; background-color:red; position: absolute; clip:rect( ">
Text
</span>
Copetimi kerkon
pozite absolute!
(por jo top, left, …)
Text

44. Shtresat dhe Dukshmeria – Shembull 2
<span style="width:200;height:100; background-color:red; position: absolute; clip:rect( ">
Text
</span>
Text
Text

45. Pseudo-Klasat Perdoren ne CSS per te shtuar efekte te
ndryshme te disa selektor, ose te ndonje pjese
e disa selektoreve
selector:pseudo-class {
property:value; }

46. Pseudo-Klasat a { text-decoration:none; color:blue; } a:hover {
text-decoration:underline; color:blue;
Pseudo-klasa tjera: a:active a:visited

47. Thank You!
PYETJE??? 47