Ligjerata 4 Dr. Fisnik Dalipi Internet Ligjerata 4 Dr. Fisnik Dalipi

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

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)

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”}

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 }

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 }

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

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

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}

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 }

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>

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 }

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)

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

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)

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

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>

Shembull

Shembull

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>

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

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

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

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

Thank You! PYETJE??? 25