1 / 47

Ligjerata 5 Dr. Fisnik Dalipi

Internet. Ligjerata 5 Dr. Fisnik Dalipi. CSS – Cascading Style Sheets (vazhdim). Permbajtesit universal (generic containers ) Margjinat Mbushjet (Padding) Dimensionet Pozicionimi Shtresat dhe Dukshmeria Pseudo- Klasat. Permbajtesit universal.

shana
Download Presentation

Ligjerata 5 Dr. Fisnik Dalipi

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. Internet Ligjerata 5 Dr. Fisnik Dalipi

  2. CSS – Cascading Style Sheets(vazhdim) • Permbajtesituniversal (generic containers) • Margjinat • Mbushjet (Padding) • Dimensionet • Pozicionimi • ShtresatdheDukshmeria • 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. 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> Meny e thjeshte navigimi

  12. Margjinat Margjinat e definojne hapesiren rreth elementeve

  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

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

  16. td { padding:3px 2px 4px 1px; } 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

  17. Dimensionet

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

  19. Pozicionimi

  20. Pozicionimi(pozita= absolute/relative)

  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 ecurinenormale– 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> </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> </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

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

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

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

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

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

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

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

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

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

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

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

  44. Text ShtresatdheDukshmeria – Shembull 2 <span style="width:200;height:100; background-color:red; position: absolute; clip:rect(25 175 75 25"> Text </span> 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:activea:visited

  47. Thank You! • PYETJE??? 47

More Related