CSS – Njohuri themelore

CSS është teknologjia kryesore prezantuese që përdoret në krijimin Ueb Faqeve.

CSS është akronim nga Cascading Style Sheets. CSS është një gjuhë standarde për stilizim të faqeve që përdoret në përshkrim të prezantimit (d.m.th. paraqitjen dhe formatimin) e ueb faqeve.

Para CSS, gati të gjitha atributet prezantuese të dokumenteve HTML ishin të përmbajtura brenda kodit HTML (specifikisht brenda etiketave HTML); të gjitha ngjyrat e shkronjave, stilet e sfondit, radhitjet e elementeve, kufijtë dhe madhësitë duhej të përshkruheshin qartë në HTML.

Si rezultat, zhvillimi i ueb sajteve të mëdha u bë një proces i vështirë dhe i shtrenjtë, pasi stilizimi duhet shtuar duke u përsëritur në çdo ueb faqe individuale të ueb sajit.

Për të zgjidhur këtë problem, CSS u prezantua në vitin 1996 nga World Wide Web Consortium (W3C), i cili gjithashtu mirëmban standardin e tij. CSS u krijua për të mundësuar ndarjen e prezantimit (stilizimit) dhe përmbajtjes. Tani ueb dizajnerët mund të zhvendosin informacionin e formatimit të ueb faqeve në një fajll stilizimi të veçantë e që rezulton me fajlla më të thjeshtë të HTML-së dhe mirëmbajtje më të mirë.

CSS3 është versioni më i fundit i specifikimeve CSS. CSS3 shton disa veçori të reja në stilizim dhe mundëson avancim të përmirësuar në prezantimet e ueb faqeve.

Çfarë mund të bëni me CSS?

Ka shumë gjëra që mund të bëni me CSS.

• Mund të zbatoni me lehtësi stilizim të njëjtë në disa elemente.
• Mund të kontrolloni prezantimin e shumë ueb faqeve të një ueb sajti me një fajll të vetëm të stilizimit.
• Mund ta paraqisni të njëjtën faqe ndryshe në pajisje të ndryshme.
• Mund të stilizoni gjendje dinamike të elementeve të tilla si hover, fokus, etj. E që nuk është e mundur ndryshe.
• Mund të ndryshoni pozicionin e një elementi në një ueb faqe pa e ndryshuar shënimin.
• Mund të ndryshoni shfaqjen e elementeve ekzistuese në HTML.
• Mund të transformoni elemente si shkalla, rrotullimi, pjerrtësimi, etj. në hapësirën 2D ose 3D.
• Mund të krijoni efekte animacioni dhe tranzicioni pa e përdorur JavaScript-in.
• Mund të krijoni një version për shtypje të ueb faqeve.

Lista nuk përfundon këtu, ka shumë gjëra të tjera interesante që mund të bëni me CSS.

Përparësitë e përdorimit të CSS-së

Përparësia më e madhe e CSS-së është se lejon ndarjen e stilit dhe paraqitjes nga përmbajtja e dokumentit. Këtu kemi dhënë edhe disa përparësi tjera:

• CSS kursen shumë kohë – CSS jep shumë fleksibilitet për të vendosur vetitë e stilit të një elementi. Mund të shkruani CSS-në një herë; dhe pastaj i njëjti kod mund të zbatohet në grupet të elementeve HTML, e gjithashtu mund të ripërdoret në shumë faqe HTML.
• Mirëmbajtje e thjeshtë – CSS ofron një mjet të thjeshtë për të përditësuar formatimin e dokumenteve dhe për të ruajtur qëndrueshmërinë në shumë dokumente. Për shkak se përmbajtja e tërësisë së ueb faqeve mund të kontrollohet lehtësisht duke përdorur një ose më shumë fajlla për stilzim.
• Faqet lexohen më shpejtë – CSS i mundëson disa faqeve për të ndarë informacionin e formatimit, e që zvogëlon kompleksitetin dhe përsëritjen në përmbajtjen strukturale të dokumenteve. Gjithashtu ndjeshëm zvogëlon madhësinë e transferimit të fajllit, e që rezulton në një lexim më të shpejtë të faqes.
• Stilet më superiore në HTML – CSS ka aftësi prezantuese shumë më të mëdha se HTML dhe siguron kontroll shumë më të mirë të paraqitjes së ueb faqeve. Kësisoj mund t'i jepni një pamje shumë më të mirë ueb faqeve në krahasim me elementet dhe atributet prezantuese të HTML-së.

Përputhshmëri në pajisje të ndryshme – CSS lejon gjithashtu që ueb faqet të optimizohen për më shumë se një lloj pajisjeje ose media. Përdorimi i CSS-it në të njëjtin dokument HTML mund të paraqitet në stile të ndryshme shikimi për pajisje (ekrane) si desktop, telefona inteligjentë, etj.

Hyrje në CSS

Në këtë kaptinë do të mësoni se sa e lehtë është të shtoni informacione për stilin dhe formatimin në ueb faqe duke përdorur CSS. Por, para se të filloni, duhet të keni disa njohuri për HTML.

Përfshirja e CSS-it në dokumentet HTML

CSS mund të bashkëngjitet si një dokument i veçantë ose i shënuar në vetë dokumentin HTML. Ekzistojnë tri metoda për të përfshirë CSS-në në një dokument HTML:

• Stilet inline – Përdorimi i atributit style në etiketën fillestare HTML.
• Stilet e brendshme – Përdorimi i elementit <style> në pjesën kryesore të dokumentit HTML.
• Stilet e jashtëm – Përdorimi i elementit <link>, për tu lidhur me një fajll të jashtëm CSS.

Stilet inline

Stilet inline përdoren për të zbatuar rregullat e stilit unik në një element duke vendosur rregullat CSS direkt në etiketën fillestare. Mund t'i bashkëngjitet një elementi duke përdorur atributin style.

Atributi style përfshin një varg të çifteve të vetive dhe vlerave të CSS-it. Çdo palë "veti: vlerë" ndahet me nga një pikëpresje (;), ashtu si do të shkruani në stilin e brendshëm ose të jashtëm, por duhet të jetë e gjitha në një rresht, kësisoj:

<h1 style="color:red; font-size:30px;">Ky është titulli</h1>
<p style="color:green; font-size:22px;">Ky është një paragraf.</p>
<div style="color:blue; font-size:14px;">Kjo është një përmbajtje tekstuale.</div>

Përdorimi i stileve inline zakonisht konsiderohet si praktikë jo e mirë. Meqenëse stilet futen direkt brenda etiketës HTML, kjo bën që prezantimi të përzihet me përmbajtjen e dokumentit; gjë që e bën kodin e vështirë për tu mirëmbajtur dhe e mohon qëllimin e përdorimit të CSS-së.

Stilet e brendshme

Stilet e brendshëm zbatohen vetëm në dokumentin në të cilin janë shënuara.

Stili i brendshëm definohet në seksionin <head> të dokumentit HTML duke përdorur elementin <style>. Mund të definoni më shumë se një herë elementet <style> në dokument HTML, por ato duhet të shfaqen midis etiketave <head> dhe </head>.

<!DOCTYPE html>
<html lang="sq">
<head>
    <title>Dokumenti HTML</title>
    <style>
        body { background-color: YellowGreen; }
        p { color: #fff; }
    </style>
</head>
<body>
    <h1>Ky është titulli</h1>
    <p>Ky është një paragraf tekstual.</p>
</body>
</html>

Stilet e jashtëm

Një stil i jashtëm është ideal kur stili zbatohet në shumë faqe të ueb sajtit.

Një fajll me stil të jashtëm mban të gjitha rregullat e stilit në një dokument të veçantë që mund ta lidhni nga çdo dokument HTML në faqen tuaj. Stilet e jashtëm janë më fleksibël, sepse nga një fajll i vetëm, mund të ndryshoni pamjen e tërë ueb sajtit.

Mund të bashkëngjitni fajllat e stilit të jashtëm në dy mënyra – lidhja dhe importimi.

Lidhja e stilit të jashtëm

Para krijimit të lidhjes, duhet së pari të krijojmë një fajll stilizimi. Hapim editorin tuaj të preferuar të kodit dhe krijojmë një fajll të ri. Tani shtypim kodin e mëposhtëm CSS brenda këtij fajlli dhe ruajmë atë si "stili.css".

body {
    background: lightyellow;
    font: 18px Arial, sans-serif;
}
h1 {
    color: orange;
}

Një fajll me stil të jashtëm mund të lidhet me një dokument HTML duke përdorur etiketën <link>. Etiketa <link> hyn brenda seksionit <head>, siç mund ta shihni në shembullin vijues:

<!DOCTYPE html>
<html lang="sq">
<head>
    <title>Dokumenti HTML</title>
    <link rel="stylesheet" href="css/stili.css">
</head>
<body>
    <h1>Ky është titulli</h1>
    <p>Ky është një paragraf tekstual.</p>
</body>
</html>

Importimi i stilit të jashtëm

Rregulli @import është një mënyrë tjetër për të ngarkuar një stil të jashtëm. Deklarata @import udhëzon shfletuesin të ngarkojë një stil të jashtëm dhe të përdorë stilet e saj.

Mund ta përdorni në dy mënyra. Më e thjeshtë është brenda seksionit head të dokumentit tuaj. Vini re se, rregulla tjera të CSS-së mund të përfshihen akoma në elementin <style>.

<style>
    @import url("css/stili.css");
    p {
        color: blue;
        font-size: 16px;
    }
</style>

Ngjashëm, mund të përdorni rregullin @import për të importuar një stil brenda një stili tjetër.

@import url("css/modeli.css");
@import url("css/ngjyra.css");
body {
    color: blue;
    font-size: 14px;
}

Sintaksa CSS

Një fletë stilesh e CSS-së përbëhet nga një grup rregullash që interpretohen nga ueb shfletuesi dhe më pas aplikohen në elementet përkatëse si paragrafët, titujt, etj.

Rregulli i CSS-së ka dy pjesë kryesore, një selektor dhe një ose më shumë deklarata:

Selektori specifikon se në cilin element ose në cilat elemente në faqen HTML zbatohet rregulli CSS.

Deklaratat brenda bllokut përcaktojnë mënyrën e formatimit të elementeve në një ueb faqe. Secila deklaratë përbëhet nga një veti dhe një vlerë e ndarë nga dy pika (:) dhe që mbaron me pikëpresje (;), e grupet e deklarimit janë të vendosura nga kllapat e mëdha {}.

Vetia është atribut i stilit që dëshironi ta ndryshoni; ato mund të jenë fonte, ngjyra, sfonde, etj. Çdo veti ka një vlerë, për shembull vetia e ngjyrës mund të ketë vlerën blue ose #0000FF, etj.

h1 {color:blue; text-align:center;}

Për ta bërë CSS-në më të lexueshme, çdo deklaratë mund  ta shënoni në rresht të ri, kësisoj:

h1 {
    color: blue;
    text-align: center;
}

Në shembullin e mësipërm h1 është selektor, color dhe test-align janë veti të CSS-së, pastaj blue dhe center janë vlerat përkatëse të këtyre vetive.

Shënimi i komenteve në CSS

Komentet zakonisht shtohen me qëllim që ta bëjnë kodin burimor më të lehtë për t'u kuptuar. Mund t’i ndihmojë zhvilluesit tjetër (ose juve në të ardhmen kur editoni kodin burimor) të kuptojnë se çfarë po përpiqeshit të bënit me CSS. Komentet janë domethënëse për programuesit, por injorohen nga shfletuesit.

Një koment në CSS fillon me /* dhe përfundon me */, siç tregohet në shembullin më poshtë:

/* Ky është një koment në CSS */
h1 {
    color: blue;
    text-align: center;
}
/* Ky është koment CSS i gjatë
    në shumë rreshta */
p {
    font-size: 18px;
    text-transform: uppercase;
}

Gjithashtu mund të komentoni një pjesë të kodit tuaj CSS për qëllime korrigjimi, siç tregohet më poshtë:

h1 {
    color: blue;
    text-align: center;
}
/*
p {
    font-size: 18px;
    text-transform: uppercase;
}
*/

Ndjeshmëria e shkronjave në CSS (Case Sensivity)

Emrat e vetive në CSS dhe shumë vlera nuk janë të ndjeshme në shkronja të mëdha. Ndërsa, selektorët e CSS-së zakonisht janë të ndjeshëm në shkronja, për shembull, selektori i klasës .maincontent nuk është i njëjtë me .mainContent.

Prandaj, për të qenë më të sigurt, duhet të supozoni se të gjithë komponentet e rregullave të CSS janë të ndjeshëm ndaj shkronjave.

Selektorët

Selektori CSS është një model që përputhet me elementet e një ueb faqeje. Rregullat e stilit të shoqëruara me atë selektor do të aplikohen në elementet që përputhen me modelin e selektorit.

Selektorët janë një prej aspekteve më të rëndësishme të CSS-së, pasi ato ju mundësojnë të përzgjidhni elemente specifike në ueb faqen tuaj që të stilizohen në mënyra të ndryshme.

Disa lloje të selektorëve CSS janë në dispozicion, le t'i hedhim një vështrim:

Selektori universal

Selektori universal, i shënuar me një yll (*), përputhet me çdo element në ueb faqe.

Selektori universal mund të hiqet nëse ekzistojnë kushte të tjera në element. Ky selektor shpesh përdoret për të hequr margjinat dhe mbushjet e paracaktuara nga elementët me qëllim të testimit të shpejtë.

* {
    margin: 0;
    padding: 0;
}

Rregullat e stilit brenda selektorit * do të zbatohen për çdo element në një dokument.

Selektorët e tipit të elementit

Një selektor i tipit të elementit përputhet me të gjitha instancat e elementit në dokument me emrin e tipit përkatës të elementit. Të provojmë një shembull për të parë se si funksionon në të vërtetë:

p {
    color: blue;
}

Rregullat e stilit brenda selektorit p do të zbatohen në çdo element <p> (apo paragraf) në dokument dhe e ngjyrosin atë me ngjyrë të kaltër (blue), pavarësisht nga pozicioni i tyre në pemën e dokumentit.

Selektorët ID

Selektori ID përdoret për të definuar rregullat e stilit për një element të vetëm ose unik.

Selektori ID definohet me shenjën (#), e më pas e ndjekur nga vlera e ID-së.

#error {
    color: red;
}

Ky stil e paraqet tekstin e një elementi me të kuqe, atributi id i të cilit e ka vlerën error.

Selektorët e klasave

Selektorët e klasave mund të përdoren për të zgjedhur çdo element HTML që kanë atributin class. Të gjithë elementët që kanë atë klasë do të formatohen sipas rregullit të përcaktuar.

Selektori i klasës definohet me shenjën (.), e më pas e ndjekur nga vlera e klasës.

.kalter {
    color: blue;
}

Rregullat e stilit të mësipërm e bëjnë tekstin me ngjyrë të kaltër për çdo element në dokument që posedon atributin class me vlerë blue. Mund ta bëni atë më të veçantë. Për shembull:

p.kalter {
    color: blue;
}

Stili brenda selektorit p.blue e bën tekstin e kaltër vetëm për elementet <p> që kanë atributin class me vlerën blue dhe nuk ka asnjë efekt në paragrafët e tjerë.

Selektorët pasardhës

Mund t'i përdorni këto selektorë kur duhet të zgjidhni një element që është pasardhës i një elementi tjetër, për shembull, nëse doni të përzgjidhni vetëm ato etiketa a që përmbahen në një listë të parenditur ul, në vend që të përzgjidhni të gjithë elementët a në atë dokument.

ul.menu li a {
    text-decoration: none;
}
h1 em {
    color: green;
}

Rregullat e stilit brenda selektorit ul.menu li a zbatohen vetëm për ato elemente <a> që gjinden brenda një elementi <ul> që ka klasën .menu, dhe nuk ka asnjë efekt në linqet tjerë brenda dokumentit.

Në mënyrë të ngjashme, rregullat e stilit brenda selektorit h1 em do të zbatohen vetëm për ato elemente <em> që përmbahen brenda elementit <h1> dhe nuk ka efekt në elementët e tjerë <em>.

Selektorët e fëmijëve

Selektorët e fëmijëve përdoren për të zgjedhur vetëm ato elemente që janë fëmijët e drejtpërdrejtë të një elementi.

Selektorët e fëmijëve përbëhet nga dy ose më shumë selektorë të ndarë me simbolin më i madh se (>). Mund ta përdorni këtë selektor, për shembull, për të zgjedhur nivelin e parë të elementeve të listës brenda një liste të futur që ka më shumë se një nivel. Le të shikojmë një shembull për të kuptuar se si funksionon:

ul > li {
    list-style: square;
}
ul > li ol {
    list-style: none;
}

Rregulli i stilit brenda selektorit ul > li zbatohet vetëm për ato elementë <li> që janë fëmijë të drejtpërdrejtë të elementeve <ul> dhe nuk ka asnjë efekt mbi elementët e tjerë të listës.

Selektorët fqinjë sibling

Selektorët fqinjë sibling mund të përdoren për të zgjedhur elementë në të njëjtin nivel. Ky selektor ka sintaksën kësisoj: E1 + E2, ku E2 është shënjestra e selektorit.

Selektori h1 + p në shembullin vijues do të zgjedhë elementet <p> vetëm nëse të dy elementet <h1> dhe <p> ndajnë të njëjtin prind në pemën e dokumentit dhe <h1> i paraprin dhe është fqinj me elementin <p>. Kjo do të thotë se vetëm ata paragrafë që vijnë menjëherë pas çdo titulli <h1> do të përzgjidhen. Le të shohim se si funksionon në të vërtetë ky selektor:

h1 + p {
    color: blue;
    font-size: 18px;
}
ul.task + p {
    color: #f0f;
    text-indent: 30px;
}

Selektorët e përgjithshëm sibling

Selektori i përgjithshëm sibling është i ngjashëm me selektorin fqinj sibling (E1 + E2), por është më pak i rreptë. Selektori i përgjithshëm sibling përbëhet nga dy selektorë të thjeshtë të ndarë nga karakteri (∼). Mund të shkruhet kësisoj: E1 ∼ E2, ku E2 është shënjestra e selektorit.

Selektori h1 ∼ p në shembullin më poshtë do të zgjedhë të gjithë elementët <p> që paraprihen nga elementi <h1>, ku të gjithë elementët ndajnë të njëjtin prind në pemën e dokumentit.

h1 ∼ p {
    color: blue;
    font-size: 18px;
}
ul.task ∼ p {
    color: #f0f;
    text-indent: 30px;
}

Grupimi i selektorëve

Shpesh disa selektorë në një fletë të stilit ndajnë të njëjtat deklarata të rregullave të stilit. Mund t'i gruponi në një listë të ndarë me presje për të minimizuar kodin në fletën tuaj të stilit. Gjithashtu ju pamundëson të përsërisni të njëjtat rregulla të stilit disa herë:

h1 {
    font-size: 36px;
    font-weight: normal;
}
h2 {
    font-size: 28px;
    font-weight: normal;
}
h3 {
    font-size: 22px;
    font-weight: normal;
}

Siç mund ta shihni në shembullin e mësipërm, i njëjti rregull i stilit font-weight: normal; përdoret nga selektorët h1, h2 dhe h3, kështu që mund të grupohen në një listë të ndarë me presje, kësisoj:

h1, h2, h3 {
    font-weight: normal;
}
h1 {
    font-size: 36px;
}
h2 {
    font-size: 28px;
}
h3 {
    font-size: 22px;
}

Ngjyrat

Vetia e ngjyrave color definon ngjyrën e tekstit të një elementi.

Për shembull, vetia color e specifikuar në selektorin body definon ngjyrën e paracaktuar të tekstit për të gjithë faqen.

body {
    color: #ff5722;
}

Definimi i vlerës së ngjyrave

Ngjyrat në CSS specifikohen më shpesh sipas këtyre formateve:

• fjalë kyçe me ngjyra (emra të ngjyrave) – "red", "green", "blue", "transparent", etj.
• vlera HEX (heksadecimale) – "#ff0000", "#00ff00", etj.
• vlera RGB (Red-Green-Blue) – "rgb(255,0,0)"

CSS3 ka prezantuar disa formate të tjera me ngjyra të tilla si HSL, HSLA dhe RGBA që gjithashtu mbështesin transparencën alfa.

Fjalët kyçe të ngjyrave

CSS definon disa fjalë kyçe me ngjyra të cilat ju lejojnë të specifikoni vlerat e ngjyrave në një mënyrë më të lehtë.

Këto fjalë kyçe kryesore me ngjyra janë: aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, purple, red, silver, teal, white dhe yellow. Emrat e ngjyrave nuk janë të ndjeshëm në llojin e shkronjave që përdoret.

h1 {
    color: red;
}
p {
    color: purple;
}

Ueb-shfletuesit modernë megjithatë praktikisht mbështesin shumë më tepër emra ngjyrash sesa ato që përcaktohen në standardin CSS, por për të qenë më të sigurt duhet të përdorni vlera heksadecimale të ngjyrave në vend të tyre.

Vlerat e ngjyrave HEX

Hex (shkurtesë për heksadecimal) është deri më tani metoda më e përdorur për definimin e ngjyrave në ueb.

Hex paraqet ngjyrat duke përdorur një kod 6-shifror, që i paraprinë karakteri hash (#), si #rrggbb, në të cilin rr, gg dhe bb përfaqësojnë përkatësisht komponentin ngjyrës së kuqe, gjelbër dhe të kaltër.

Vlera e secilit komponent mund të varioj nga 00 (pa ngjyrë) deri në FF (ngjyra e plotë) në shënimin heksadecimal, ose nga 0 deri në 255 në shënimin ekuivalent decimal. Kësisoj #ffffff përfaqëson ngjyrën e bardhë dhe #000000 përfaqëson ngjyrën e zezë.

h1 {
    color: #ffa500;
}
p {
    color: #00ff00;
}

Vlerat e ngjyrave RGB

Ngjyrat mund të definohen edhe në modelin RGB (Red – e kuqe, Green – e gjelbër dhe Blue – e kaltër) duke përdorur shënimin funksional rgb().

Funksioni rgb() përdor tri vlera të ndara me presje, të cilat specifikojnë sasinë e komponentit të ngjyrës së kuqe, të gjelbër dhe të kaltër. Këto vlera zakonisht specifikohen si numra të plotë ndërmjet 0 deri në 255, ku 0 përfaqëson asnjë ngjyrë dhe 255 përfaqëson ngjyrën e plotë ose maksimale.

Shembulli i mëposhtëm specifikon të njëjtën ngjyrë si në shembullin e mëparshëm, por në shënimin RGB.

h1 {
    color: rgb(255, 165, 0);
}
p {
    color: rgb(0, 255, 0);
}

Ndikimi i vetisë color në kufij dhe skica

Vetia color nuk vlen vetëm për përmbajtjen e tekstit, por për çdo gjë në plan të parë që merr një vlerë të ngjyrës. Për shembull, nëse vlera e ngjyrës së kufirit (border-color) ose ngjyra e skicës (outline-color) nuk është përcaktuar qartazi për elementin, në vend të kësaj do të përdoret vlera e ngjyrës nga vetia color.

p.nje {
    color: #0000ff;
    border: 2px solid;
}
p.dy {
    color: #00ff00;
    outline: 2px solid;
}

Zgjedhësi i ngjyrave RGB dhe HEX

Sfondi

Sfondi apo prapaskena luan një rol të rëndësishëm në prezantimin vizual të ueb faqeve.

CSS ofron disa veti për stilizimin e sfondit të një elementi, përfshirë ngjyrosjen e sfondit, vendosjen e imazheve në sfond dhe menaxhimin e pozicionimit të tyre, etj.

Vetitë e sfondit janë background-color, background-image, background-repeat, background-attachment dhe background-position.

Ngjyra e sfondit

Vetia  background-color përdoret për të vendosur ngjyrë në sfond të një elementi.

Shembulli i mëposhtëm tregon se si të vendosni ngjyrën në sfond të të gjithë faqes.

body {
    background-color: #f0e68c;
}

Vlerat e ngjyrave në CSS specifikohen kryesisht në formatet e mëposhtme:

• me emër ngjyrash – si p.sh. "red"
• me vlerë HEX – si p.sh. "#ff0000"
• me vlerë RGB – si p.sh. "rgb(255,0,0)"

Imazhi në sfond

Vetia background-image vendos një imazh në sfond të një elementi HTML.

Le të shohim shembullin vijues që vendos imazhin në sfond në të gjithë faqen.

body {
    background-image: url("foto/imazh.png");
}

Përsëritja e sfondit

Vetia background-repeat ju lejon të kontrolloni se si një imazh i sfondit përsëritet ose vendoset në formë të pllakave në sfondin e një elementi. Mund të vendosni një imazh sfondi që të përsëritet vertikalisht (boshti y), horizontalisht (boshti x), në të dy drejtimet ose në asnjë drejtim.

Le të shohim shembullin vijues që demonstron se si të vendosim sfondin me gradiencë për një ueb faqe duke përsëritur imazhin e prerë horizontalisht përgjatë boshtit x.

body {
    background-image: url("foto/gradienca.png");
    background-repeat: repeat-x;
}

Në mënyrë të ngjashme, mund të përdorni vlerën repeat-y për të përsëritur imazhin e sfondit vertikalisht përgjatë boshtit y, ose vlerën no-repeat për të parandaluar përsëritjen krejtësisht.

body {
    background-image: url("foto/tekstura.png");
    background-repeat: no-repeat;
}

Le të hedhim një vështrim në ilustrimin vijues për të kuptuar se si funksionon kjo veti në të vërtetë.

Pozicioni i sfondit

Vetia background-position përdoret për të kontrolluar pozicionin e imazhit të sfondit.

Nëse nuk është specifikuar asnjë pozicion i sfondit, imazhi i sfondit vendoset në pozicionin e paracaktuar lart-majtas të elementit d.m.th. në (0,0), le të provojmë  me shembullin vijues:

body {
    background-image: url("foto/roboti.png");
    background-repeat: no-repeat;
}

Në shembullin vijues, imazhi i sfondit është pozicionuar në cepin e sipërm nga ana e djathtë.

body {
    background-image: url("foto/roboti.png");
    background-repeat: no-repeat;
    background-position: right top;
}

Përveç fjalëve kyçe për pozicionim, gjithashtu për këtë veti mund të përdorni vlera të përqindjes ose të gjatësisë, të tilla si px ose em.

Le të hedhim një vështrim në ilustrimet vijuese për të kuptuar se si funksionon kjo veti në të vërtetë.

Shtojca e sfondit

Vetia background-attachment përcakton nëse imazhi i sfondit është i fiksuar në lidhje me portën e shikimit ose bartet së bashku me bllokun që përmban.

Le të shohim shembullin vijues për të kuptuar se si funksionon:

body {
    background-image: url("foto/imazh.png");
    background-repeat: no-repeat;
    background-attachment: fixed;
}

Vetia e shkurt për sfond

Siç mund ta shihni në shembujt e mësipërm, ka disa veti për t'u marrë parasysh kur merreni me sfondet. Sidoqoftë, është gjithashtu e mundur të specifikohen të gjitha këto veti në një veti të vetme për ta shkurtuar kodin ose për t’iu shmangur shënimit shtesë.

Vetia background është një veti e shkurtër për vendosjen e të gjitha veçorive individuale të sfondit, dmth. për një herë mund të shkruhen vetitë e lartpërmendura, background-color, background-image, background-repeat, background-attachment dhe background-position. Le të shohim se si funksionon kjo:

body {
    background-color: #f0e68c;
    background-image: url("foto/imazhi.png");
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-position: 250px 25px;
}

Duke përdorur shënimin e shkurtër, shembulli i mësipërm mund të shënohet kësisoj:

body {
    background: #f0e68c url("foto/imazhi.png") no-repeat fixed 250px 25px;
}

Kur përdorni vetinë background radhitja e vlerave të vetive duhet të jetë kësisoj:

background: ngjyra imazhi përsëritja shtojca pozicioni;

Nëse vlera për një veti individuale të sfondit mungon ose nuk është specifikuar gjatë përdorimit të shënimit të shkurtër, vlera e paracaktuar për atë veti do të përdoret.

Fontet

Zgjedhja e fontit (llojit të shkronjave) dhe stilit të duhur është shumë e rëndësishme për lexueshmërinë e tekstit në një faqe.

CSS ofron disa veti për stilizim të fontit të tekstit, duke përfshirë ndryshimin e pamjes së tyre, kontrollimin e madhësisë dhe trashësinë e tyre, pastaj menaxhimin e variantit, etj.

Vetitë e fonteve janë: font-family, font-style, font-weight, font-size dhe font-variant.

Familja e fontit

Vetia font-family përdoret për të specifikuar fontin që do të përdoret për të paraqitur tekstin.

Kjo veti mund të përmbajë disa emra të fonteve të ndara me presje si një sistem fallback, kështu që nëse fonti i parë nuk është i disponueshëm në sistemin e përdoruesit, shfletuesi përpiqet të përdorë të dytin e kështu me radhë.

Prandaj, radhitni fontin që dëshironi të jetë i pari, pastaj çdo font tjetër që mund të plotësohet nëse fonti i parë nuk është i disponueshëm. Në fund duhet ta përfundoni listën me një familje të përgjithshme të fonteve të cilat janë pesë – serif, sans-serif, monospace, cursive dhe fantasy. Një deklaratë tipike e familjes së fonteve mund të duket kësisoj:

body {
    font-family: Arial, Helvetica, sans-serif;
}

Familjet e fonteve zakonisht të përdorura në ueb faqe janë serif dhe sans-serif, sepse janë më të përshtatshme për lexim. Ndërsa fontet monospace përdoren zakonisht për të paraqitur kodin, pasi në këtë lloj shkrimi çdo shkronjë zë të njëjtën hapësirë e cila duket si tekst i shkruar.

Fontet cursive duken si shkrim kursiv ose shkrim dore. Fonti fantasy përfaqëson font artistik, por këto lloj fonte nuk përdoren gjerësisht për shkak të disponueshmërisë së dobët në të gjithë sistemet operative.

Dallimi në mes fonteve serif dhe sans-serif

Fontet serif kanë vijë të vogël ose kthesa në skajet e karaktereve, ndërsa fontet sans-serif janë më të drejta dhe nuk i kanë këto vija dhe kthesa të vogla në skaje. Shihni ilustrimin vijues.

Stili i fontit

Vetia font-style përdoret për të vendosur stilin e shkronjave në përmbajtjen e tekstit të një elementi.

Stili i fontit mund të jetë normal, italic ose oblique. Vlera e paracaktuar është normal.

p.normal {
    font-style: normal;
}
p.pjerret {
    font-style: italic;
}
p.zhdrejt {
    font-style: oblique;
}

Madhësia e fontit

Vetia font-size përdoret për të caktuar madhësinë e fontit në përmbajtjen e tekstit të një elementi.

Ekzistojnë disa mënyra për të specifikuar vlerat e madhësisë së fontit, p.sh. me fjalë kyçe, përqindje, piksell, em, etj.

Madhësia e fontit me piksell

Vendosja e madhësisë së fonit në vlera piksell (p.sh. 14px, 16px, etj.) është një zgjedhje e mirë kur keni nevojë për saktësinë e piksellëve. Piksell është një njësi matëse absolute e cila specifikon një gjatësi fikse.

h1 {
    font-size: 24px;
}
p {
    font-size: 14px;
}

Definimi i madhësive të fontit me piksell nuk konsiderohet shumë i arritshëm, sepse përdoruesi nuk mund të ndryshojë madhësinë e shkronjave nga cilësimet e shfletuesit. Për shembull, personat me shikim të kufizuar ose të ulët mund të dëshirojnë të zmadhojnë madhësinë e fontit më shumë se madhësia e specifikuar nga ju.

Prandaj, duhet të shmangni përdorimin e vlerave piksell dhe të përdorni vlerat që janë relative në raport me madhësinë e paracaktuar të fontit nga përdoruesi.

Madhësia e fontit me EM

Njësia em i referohet madhësisë së shkronjave të elementit prind. Kur përcaktohet vetia font-size, 1em është e barabartë me madhësinë e fontit që vlen për prindin e elementit.

Pra, nëse caktoni font-size me vlerë 20px në elementin e trupit, atëherë 1em = 20px dhe 2em = 40px.

Sidoqoftë, nëse nuk e keni caktuar madhësinë e fontit askund në faqe, atëherë vlera është e parazgjedhur nga shfletuesi, që normalisht është 16px. Prandaj, në mënyrë të paracaktuar 1em = 16px dhe 2em = 32px.

h1 {
    font-size: 2em;      /* 32px/16px=2em */
}
p {
    font-size: 0.875em;  /* 14px/16px=0.875em */
}

Kombinimi i përqindjes dhe EM

Siç e keni vërejtur në shembullin e mësipërm, llogaritja e vlerave em nuk duket e thjeshtë. Për ta thjeshtuar këtë, një teknikë e njohur është vendosja e font-size për elementin body në 62.5% (që është 62.5% e 16px të paracaktuara), e cila barazohet me 10px ose 0.625em.

Tani mund të caktoni font-size për çdo element duke përdorur njësinë em, me një konvertim të lehtë për tu mbajtur mend, duke e ndarë vlerën px me 10. Në këtë mënyrë 10px = 1em, 12px = 1.2em, 14px = 1.4em, 16px = 1.6em, e kështu me radhë.

body {
    font-size: 62.5%;    /* font-size 1em = 10px */
}
p {
    font-size: 1.4em;    /* 1.4em = 14px */
}
p span {
    font-size: 2em;      /* 2em = 28px */
}

Madhësia e fontit me Root EM

Për t'i bërë gjërat edhe më të thjeshta CSS3 ka prezantuar njësinë rem (shkurtesë e "root em") që është gjithmonë relative me font-size të elementit rrënjë (html), pavarësisht se ku qëndron elementi në dokument (ndryshe nga em që është relativ me madhësinë e fontit të elementit prind).

Kjo do të thotë që 1rem është ekuivalent me madhësinë e fontit të elementit html, që është 16px si parazgjedhje në shumicën e ueb-shfletuesve.

html {
    font-size: 62.5%;    /* font-size 1em = 10px */
}
p {
    font-size: 1.4rem;   /* 1.4rem = 14px */
}
p span {
    font-size: 2rem;     /* 2rem = 20px (e jo 28px) */
}

Madhësia e fontit me fjalë kyçe

CSS ofron disa fjalë kyçe që mund të përdorni për të përcaktuar madhësitë e fonteve.

Një madhësi absolute e fontit mund të specifikohet duke përdorur një nga këto fjalë kyçe: xx-small, x-small, small, medium, large, x-large, xx-large. Ndërsa, madhësia relative e fontit mund të specifikohet duke përdorur fjalët kyçe: smaller ose larger.

body {
    font-size: large;
}
h1 {
    font-size: larger;
}
p {
    font-size: smaller;
}

Madhësia e fontit me njësitë Viewport

Madhësitë e fontit mund të specifikohen edhe duke përdorur njësitë viewport (hapësira e pamjes), siç janë vw ose vh.

Njësia viewport i referohet përqindjes së dimensioneve të pamjes së shfletuesit, ku 1vw = 1% e gjerësisë së viewport-it dhe 1vh = 1% e lartësisë së viewport-it. Andaj, nëse viewport është 1600px e gjerë, 1vw është 16px.

Provoni shembullin e mëposhtëm duke ndryshuar madhësinë e dritares së shfletuesit dhe shikoni se si funksionon:

body {
    font-size: 1vw;
}
h1 {
    font-size: 3vw;
}

Sidoqoftë, ekziston një problem me njësitë viewport. Në ekranet e vogla, shkronjat bëhen aq shumë të vogla sa nuk mund të lexohen. Për të parandaluar këtë mund të përdorni funksionin CSS calc(), kësisoj:

html { 
    font-size: calc(1em + 1vw); 
}
h1 {
    font-size: 3rem;
}

Në këtë shembull, edhe nëse gjerësia e viewport-it bëhet 0, madhësia e fontit do të jetë së paku 1em ose 16px.

Trashësia e fontit

Vetia font-weight përcakton rëndësinë ose trashësinë e fontit.

Kjo veti mund të marrë një nga këto vlera: normal, bold, bolder, lighter, 100, 200, 300, 400, 500, 600, 700, 800, 900 dhe inherit.

Vlerat numerike 100 – 900 specifikojnë trashësinë e fontit, ku secili numër përfaqëson një trashësi më të madhe se paraardhësi i tij. 400 është e njëjtë me normal dhe 700 është e njëjtë me bold.

Vlerat bolder dhe lighter janë relative me trashësinë e trashëguar të fontit, ndërsa vlerat e tjera si normal dhe bold janë vlera absolute të trashësisë së fontit.

Le të provojmë një shembull për të kuptuar se si funksionon kjo veti në thelb:

p {
    font-weight: bold;
}

Variant i fontit

Vetia font-variant lejon që teksti të shfaqet në një variant të veçantë të shkronjave të vogla (small-caps).

Small-caps ose shkronjat e vogla kapitale janë paksa të ndryshme nga shkronjat e mëdha normale, në të cilat shkronjat e vogla shfaqen si versione më të vogla të shkronjave të mëdha përkatëse.

p {
    font-variant: small-caps;
}

Vlera normal heq shkronjat e vogla nga teksti i cili tashmë është formatuar në atë mënyrë.

Teksti

Formatimi i tekstit me CSS

CSS ofron disa veti që ju mundësojnë të përcaktoni stile të ndryshme të tekstit siç janë: ngjyra, rreshtimi, hapësira në mes shkronjave, dekorimi, transformimi, etj.

Vetitë e tekstit që përdoren zakonisht janë: text-align, text-decoration, text-transform, text-indent, line-height, letter-spacing, word-spacing, etj. Këto veti ju japin kontroll të saktë mbi pamjen vizuale të karaktereve, fjalëve, hapësirave, etj.

Ngjyra e tekstit

Ngjyra e tekstit përcaktohet nga vetia e ngjyrave në CSS: color.

Rregulli i stilit në shembullin vijues do të definoj ngjyrën e paracaktuar të tekstit për faqen e dhënë:

body {
    color: #434343;
}

Megjithëse, vetia e ngjyrave duket sikur do të ishte një pjesë e tekstit në CSS, por në fakt është vetëm një veti e pavarur në CSS.

Rreshtimi i tekstit

Vetia text-align përdoret për të vendosur shtrirjen horizontale të tekstit.

Teksti mund të rreshtohet në katër mënyra: në të majtë, në të djathtë, në qendër ose të justifikuar (justified).

Le të hedhim një vështrim në shembullin vijues për të kuptuar se si funksionon kjo veti në thelb.

h1 {
    text-align: center;
}
p {
    text-align: justify;
}

Le të hedhim një vështrim në ilustrimet vijuese për të kuptuar se çfarë nënkuptojnë këto vlera.

Dekorimi i tekstit

Vetia text-decoration përdoret për të vendosur ose hequr dekorime nga teksti.

Kjo veti zakonisht pranon një nga këto vlera: underline, overline, line-through dhe none. Duhet të shmangni nënvizimin e tekstit që nuk paraqet ndonjë link, pasi mund të hutojë vizitorin.

h1 {
    text-decoration: overline;
}
h2 {
    text-decoration: line-through;
}
h3 {
    text-decoration: underline;
}

Heqja e nënvizimit të paracaktuar nga linqet

Vetia text-decoration përdoret gjerësisht për të hequr nënvizimin e paracaktuar nga hyperlinqet në HTML. Më pas mund t’i bëni disa ndryshme tjera vizuale për ta bërë atë të dallohet nga teksti normal, për shembull, duke përdorur kufizë me pika në vend të nënvizimit solid.

a {
    text-decoration: none;
    border-bottom: 1px dotted;
}

Transformimi i tekstit

Vetia text-transform përdoret për të vendosur shkronja të ndryshme për një tekst.

Teksti shpesh shkruhet me shkronja të përziera (të mëdha dhe të vogla). Sidoqoftë, në situata të caktuara mund të dëshironi të paraqitni tekstin tuaj në raste krejtësisht të ndryshme. Duke përdorur këtë veti mund të ndryshoni përmbajtjen e tekstit të një elementi në shkronja të mëdha ose të vogla, ose të shkruani me germë të madhe shkronjën e parë të secilës fjalë pa ndryshuar tekstin origjinal.

h1 {
    text-transform: uppercase;
}
h2 {
    text-transform: capitalize;
}
h3 {
    text-transform: lowercase;
}

Kryeradha e tekstit

Vetia text-indent përdoret për të vendosur kryeradhë në rreshtin e parë të tekstit brenda një blloku të tekstit. Zakonisht kjo bëhet duke futur hapësirë boshe para rreshtit të parë të tekstit.

Gjerësia e hapësirës mund të specifikohet duke përdorur përqindjen (%), vlerat e gjatësisë në piksell, em, etj.

Stili i mëposhtëm do të shtoj hapësirë në rreshtin e parë të paragrafëve me vlerë prej 100 piksell.

p {
    text-indent: 100px;
}

Hapësira në mes shkronjave

Vetia letter-spacing përdoret për të vendosur hapësirë shtesë midis karaktereve të tekstit.

Kjo veti mund të marrë vlera të gjatësisë në piksell, em, etj. Mund të pranojë gjithashtu edhe vlera negative. Kur vendosni hapësirë në mes shkronjave, vlera që e vendosni tregon hapësirën shtesë nga hapësira e paracaktuar ndërmjet karaktereve.

h1 {
    letter-spacing: -3px;
}
p {
    letter-spacing: 10px;
}

Hapësira në mes fjalëve

Vetia word-spacing përdoret për të specifikuar hapësirën shtesë midis fjalëve.

Kjo veti përdor vlera të gjatësisë në piksell, em, etj. Gjithashtu lejohen edhe vlera negative.

p.normal {
    word-spacing: 20px;
}
p.justifikuar {
    word-spacing: 20px;
    text-align: justify;
}
p.paraformatuar {
    word-spacing: 20px;
    white-space: pre;
}

Lartësia e rreshtit

Vetia line-height përdoret për të vendosur lartësinë e rreshtit të tekstit. Pra, gjithashtu përdoret për të vendosur distancë midis rreshtave të tekstit.

Vlera e kësaj vetie mund të jetë një numër, përqindje (%), ose gjatësi në piksell, em, etj.

p {
    line-height: 1.2;
}

Kur vlera është një numër, lartësia e rreshtit llogaritet duke shumëzuar madhësinë e fontit të elementit me numrin. Ndërsa, vlerat e përqindjes janë relative me madhësinë e fontit të elementit.

Nëse vlera e vetisë line-height është më e madhe se vlera e font-size për një element, kjo diferencë pritet në gjysmë dhe shpërndahet në mënyrë të barabartë në pjesën e sipërme dhe të poshtme të rreshtit.

p {
    font-size: 14px;
    line-height: 20px;
    background-color: #f0e68c;
}

Ekzistojnë edhe veti tjera të tekstit, siç janë p.sh. tejmbushja e tekstit (overflow), hija e tekstit (text-shadow), etj.

Linqet

Stilizimi i linqeve me CSS

Linqet ose hiperlinqet janë pjesë esenciale të një ueb faqeje. Këto lidhje i mundësojnë vizitorëve të kalojnë prej një faqe në një tjetër në atë ueb sajt duke klikuar në to. Andaj stilizimi i linqeve siç duhet është një aspekt i rëndësishëm i ndërtimit të një ueb sajti miqësor për përdoruesit.

Linku ka katër gjendje të ndryshme – link, visited, active dhe hover. Këto katër gjendje të një linku mund të stilizohen ndryshe duke përdorur selektorët e mëposhtëm të pseudo-klasëve.

• a:link – definon stilet për linqet normale ose të pavizituar.
• a:visited – definon stilet për linqet që përdoruesi i ka vizituar.
• a:hover – definon stilet për linkun kur përdoruesi vendos treguesin e miut mbi të.
• a:active – definon stilet për linqet kur ato klikohen.

Mund të specifikoni çfarëdo vetie CSS që dëshironi, si p.sh. color, font, background, border, etj., e secilin prej këtyre selektorëve mund t’ia rregulloni stilin e linqeve, ashtu siç mund të veproni me tekstin normal.

a:link {    /* link i pavizituar */
    color: #ff0000;
    text-decoration: none;
    border-bottom: 1px solid;
}
a:visited {    /* Link i vizituar */
    color: #ff00ff;
}
a:hover {    /* mausi mbi link */
    color: #00ff00;
    border-bottom: none;
}
a:active {    /* link aktiv */
    color: #00ffff;
}

Radhitja në të cilin vendosni stilin për gjendje të ndryshme të linqeve është i rëndësishëm, sepse ajo që definohet e fundit ka përparësi mbi rregullat e stilit të definuar më parë.

Modifikimi i stileve standarde të linkut

Në të gjithë ueb shfletuesit kryesor si Chrome, Firefox, Safari, etj., linqet në ueb faqe janë të nënvizuar dhe kanë ngjyrë të paracaktuar nga ueb shfletuesi.

Si parazgjedhje, linqet e tekstit do të shfaqen si më poshtë në shumicën e shfletuesve:

• Link i pavizituar – tekst i kaltër i nënvizuar.
• Link i vizituar – tekst vjollcë i nënvizuar.
• Link aktiv – tekst i kuq i nënvizuar.

Sidoqoftë, nuk ka asnjë ndryshim në pamjen e linkut në rast të gjendjes kur jemi me maus mbi link (hover). Pra, mbetet i kaltër, vjollcë ose i kuq në varësi të gjendjes (d.m.th. i pa vizituar, i vizituar ose aktiv).

Cilësimi i ngjyrës së personalizuar të linqeve

Thjesht përdorni vetinë e ngjyrave në CSS – color për të definuar ngjyrën e zgjedhur për gjendjet e ndryshme të një linku. Por kini kujdes kur zgjidhni ngjyrat, sigurohuni që përdoruesi të mund të bëjë dallimin e qartë midis tekstit normal dhe linqeve.

a:link {
    color: #1ebba3;
}
a:visited {
    color: #ff00f4;
}
a:hover {
    color: #a766ff;
}
a:active {
    color: #ff9800;
}

Heqja e nënvizimit të paracaktuar nga linqet

Nëse nuk ju pëlqen nënvizimi i paracaktuar në linqe, thjesht mund të përdorni vetinë CSS text-decoration për të hequr atë. Përndryshe, mund të aplikoni një stilizim tjetër në link siç janë ngjyra e sfondit, kufiza e poshtme, font i theksuar, etj., për ta bërë atë që të dallohet nga teksti normal.

Shembulli i mëposhtëm tregon se si të hiqni ose vendosni nënvizimin për gjendje të ndryshme të një linku.

a:link, a:visited {
    text-decoration: none; 
}
a:hover, a:active {
    text-decoration: underline;
}

Pamja e linqeve të tekstit si butona

Gjithashtu mund t'i bëni linqet tuaja të zakonshme të tekstit të duken si butona duke përdorur CSS-në. Për ta bërë këtë, duhet të përdorim disa veti tjera të CSS-së, të tilla si background-color, border, display, padding, etj.

a:link, a:visited {
    color: white;    
    background-color: #1ebba3;    
    display: inline-block;
    padding: 10px 20px;
    border: 2px solid #099983;
    text-decoration: none;
    text-align: center;
    font: 14px Arial, sans-serif;  
}
a:hover, a:active {
    background-color: #9c6ae1;
    border-color: #7443b6;
}

Listat

Llojet e listave HTML

Ekzistojnë tri lloje të ndryshme të listave në HTML:

• Listat e parenditura – Listë e artikujve, ku çdo artikull i listës shënohet me pika.
• Listat e renditura – Listë e artikujve, ku secili artikull i listës shënohet me numra.
• Listat përshkruese – Listë e artikujve, me një përshkrim për secilin artikull.

Stilizimi i listave me CSS

CSS ofron disa veti për stilizim dhe formatim të listave të parenditura dhe të renditura. Këto veti të listës CSS zakonisht ju lejojnë të:

• Kontrolloni formën ose pamjen e shenjës.
• Specifikoni një imazh për shenjën në vend të një pikë apo një numri.
• Vendosni distancën në mes shenjës dhe tekstit në listë.
• Specifikoni nëse shenja do të shfaqet brenda ose jashtë kutisë që përmban artikujt e listës.

Ndryshimi i llojit të shenjës tek listat

Si parazgjedhje, artikujt në një listë të renditur paraqiten me numra arabë (1, 2, 3, 5, e kështu me radhë), ndërsa në një listë të parenditur, artikujt shënohen me një pikë (•).

Por, ju mund ta ndryshoni këtë shenjë të parazgjedhur të listës në çdo lloj tjetër, siç janë numrat romakë, shkronjat latine, rrethi, katrori, e kështu me radhë, duke përdorur vetinë list-style-type.

ul {
    list-style-type: square;
}
ol {
    list-style-type: upper-roman;
}

Ndryshimi i pozicionit të shenjave tek listat

Si parazgjedhje, shenja e secilit artikull të listës pozicionohen jashtë (outside) kutive të tyre të shfaqjes.

Sidoqoftë, ju gjithashtu mund t'i poziciononi këto shenja, pra, numrat ose pikat brenda kutive të shfaqjes së artikullit të listës duke përdorur vetinë list-style-position së bashku me vlerën inside. Në këtë rast shenjat do të përfshihen brenda kutisë së linjës.

ol.brenda li {
    list-style-position: inside;
}
ol.jashte li {
    list-style-position: outside;
}

Le të shohim ilustrimin vijues për të kuptuar se si pozicionohen shenjat brenda dhe jashtë kutisë së pamjes së listave.

Përdorimi i imazheve si shenja të listave

Gjithashtu mund të vendoset një imazh si shenjë e listës duke përdorur vetinë list-style-image.

Rregulli i stilit në shembullin vijues cakton një imazh transparent PNG "shigjeta.png" si shenjë të listës për të gjithë artikujt në listën e parenditur.

ul li {
    list-style-image: url("foto/shigjeta.png");
}

Ndonjëherë, vetia list-style-image mund të mos na jep rezultatin e pritur. Përndryshe, mund të përdorni zgjidhjen e mëposhtme për kontroll më të mirë në pozicionimin e shenjave në listë.

Duke bërë punë përreth, gjithashtu mund të vendosni shenja në listë nga imazhi përmes vetisë CSS background-image. Së pari, hiqni pikat në listë, pastaj, përcaktoni për elementin e listës një imazh në sfond që nuk përsëritet.

Shembulli i mëposhtëm tregon imazhin si shenjë në mënyrë të rregullt për të gjithë  ueb shfletuesit:

ul {
    list-style-type: none;
}
ul li {
    background-image: url("foto/shigjeta.png");
    background-position: 0px 5px; /* Poz-X Poz-Y (nga lartë-majtas) */
    background-repeat: no-repeat;
    padding-left: 20px;
}

Cilësimi i të gjitha vetive të listës përnjëherë

Vetia list-style është një veti e shkurtër për definimin e tri vetive përnjëherë: list-style-type, list-style-image dhe list-style-position.

Rregulli i mëposhtëm i stilit cilëson të gjitha vetitë e listës në një deklaratë të vetme.

ul {
    list-style: square inside url("foto/shigjeta.png");
}

Krijimi i menyve të navigimit duke përdorur listat

Listat HTML përdoren shpesh për të krijuar shirit horizontal apo meny të navigimit që zakonisht paraqiten në krye të një ueb sajti. Por meqenëse artikujt e listës janë bllok elemente, kësisoj për t'i shfaqur ato njëra pas tjetrës duhet të përdorim vetinë CSS display.

ul {
    padding: 0;
    list-style: none;
    background: #f2f2f2;
}
ul li {
    display: inline-block;
}
ul li a {
    display: block;
    padding: 10px 25px;
    color: #333;
    text-decoration: none;
}
ul li a:hover {
    color: #fff;
    background: #939393;
}

Tabelat

Stilizimi i tabelave me CSS

Tabelat përdoren zakonisht për të shfaqur të dhëna tabelore, siç janë p.sh. raportet financiare.

Por kur krijoni një tabelë në HTML pa ndonjë stil ose atribut, ueb shfletuesit i shfaqin ato pa asnjë kufizë. Me ndihmën e CSS mund të përmirësoni shumë pamjen e tabelave.

CSS ofron disa veti që ju mundësojnë të kontrolloni paraqitjen dhe prezantimin e elementeve të tabelës. Në njësitë vijuese do të shihni se si të përdorni CSS-në për të krijuar tabela elegante dhe të qëndrueshme.

Shtimi i kufizave në tabela

Vetia CSS border është mënyra më e mirë për të definuar kufijtë për tabelat.

Shembulli i mëposhtëm do të cilësojë një kufizë të zezë për elementet <table>, <th> dhe <td>.

table, th, td {
    border: 1px solid black;
}

Si parazgjedhje, ueb shfletuesi paraqet një kufizë përreth tabelës, si dhe përreth të gjitha celulave, me një hapësirë ndërmjet, e cila rezulton me kufiza të dyfishta. Për të eliminuar këtë problem të kufizës së dyfishtë, thjesht mund të rrënoni kufijtë e celulave të tabelës të ngjitur dhe të krijoni kufij të pastër me një vijë.

Le të shohim në ilustrimin vijues për të kuptuar se si zbatohet kufizat në një tabelë.

Kufij të bashkuar të tabelës

Ekzistojnë dy modele të dallueshme për vendosjen e kufijve në celulat e tabelës në CSS: kufij të njëfishtë dhe të dyfishtë.

Në modelin e kufirit të dyfishtë, i cili është i paracaktuar, secila celulë e tabelës ka kufijtë e saj të veçantë, ndërsa në modelin e kufirit të njëfishtë, celulat e tabelës ndajnë një kufizë të përbashkët.  Mund të cilësoni modelin e kufizës për një tabelë në HTML duke përdorur vetinë CSS border-collapse.

Rregullat e mëposhtme të stilit do të shembin kufijtë e celulave të tabelës dhe do të aplikojnë një kufizë të zezë me trashësi një piksell.

table {
    border-collapse: collapse;
}
th, td {
    border: 1px solid black;
}

Rregullimi i hapësirës brenda në tabela

Me parazgjedhje, ueb shfletuesit i krijojnë celulat e tabelës me madhësi të mjaftueshme për të përmbajtur të dhënat në celulë.

Për të shtuar më shumë hapësirë në mes të përmbajtjes së celulës në tabelë dhe kufijve të celulës, mund të përdorni vetinë CSS padding.

th, td {
    padding: 15px;
}

Gjithashtu mund të rregulloni hapësirën midis kufijve të celulave duke përdorur vetinë CSS border-spacing, nëse kufijtë e tabelës suaj janë të ndara (e që është e paracaktuar).

Rregullat e mëposhtme të stilit cilësojnë hapësirën prej 10 piksellësh midis të gjitha kufijve brenda një tabele:

table {
    border-spacing: 10px;
}

Cilësimi i gjerësisë dhe lartësisë së tabelës

Si parazgjedhje, një tabelë në HTML do të jetë mjaft e gjerë dhe e lartë për ta nxënë të gjithë përmbajtjen e saj.

Sidoqoftë, mund të cilësoni gjerësinë dhe lartësinë e tabelës, si dhe celulat e saj në mënyrë të qartë duke përdorur vetitë CSS width dhe height. Rregullat e stilit në shembullin vijues do të cilësojnë gjerësinë e tabelës në 100%, dhe lartësinë e celulave në kokë të tabelës në 40px.

table {
    width: 100%;
}
th {
    height: 40px;
}

Kontrollimi i paraqitjes së tabelës

Tabela do të zgjerohet dhe lartësohet mjaftueshëm për të akomoduar të dhënat që përmbahen brenda saj. Kjo është sjellja e paracaktuar. Deri sa të dhënat plotësohen brenda tabelës, ajo vazhdon të zgjerohen deri sa ekziston hapësirë. Sidoqoftë, ndonjëherë është e nevojshme të vendosni një gjerësi fikse për tabelën e dhënë në mënyrë që të menaxhoni paraqitjen e saj.

Mund ta bëni këtë me ndihmën e vetisë në CSS table-layout. Kjo veti definon algoritmin që do të përdoret për paraqitjen e celulave, rreshtave dhe kolonave të tabelës. Kjo veti merr një nga dy vlerat:

• auto – Përdor një algoritëm automatik të paraqitjes së tabelës. Me këtë algoritëm, gjerësitë e tabelës dhe celulat e saj rregullohen për t'iu përshtatur përmbajtjes. Kjo është vlerë e paracaktuar.
• fixed – Përdor algoritmin e paraqitjes fikse të tabelës. Me këtë algoritëm, paraqitja horizontale e tabelës nuk varet nga përmbajtja e celulave; kjo varet vetëm nga gjerësia e tabelës, gjerësia e kolonave dhe kufizave ose hapësira e celulave. Zakonisht kjo vlerë është më e shpejt se vlera auto.

Rregullat e stilit në shembullin vijues specifikojnë që tabela HTML është paraqitur duke përdorur algoritmin e paraqitjes fikse dhe ka një gjerësi fikse prej 300 piksellësh.

table {
    width: 300px;
    table-layout: fixed;
}

Shtrirja e tekstit brenda celulave të tabelave

Mund të shtrini përmbajtjen e tekstit brenda celulave të tabelës horizontalisht ose vertikalisht.

Shtrirja horizontale e përmbajtjes së celulave

Për shtrirjen horizontale të tekstit brenda celulave të tabelës mund të përdorni vetinë text-align në të njëjtën mënyrë siç përdorni atë me elementët e tjerë. Mund ta vendosni tekstin në të majtë, në të djathtë, në qendër ose mund ta justifikoni.

Rregullat e mëposhtme të stilit do të shtrinë tekstin majtas brenda elementeve <th>.

th {
    text-align: left;
}

Shtrirja vertikale e përmbajtjes së celulave

Në mënyrë të ngjashme, mund ta shtrini vertikalisht përmbajtjen brenda elementeve <th> dhe <td> në krye, në fund ose në mes duke përdorur vetinë CSS vertical-align. Shtrirja vertikale me parazgjedhje është në mes.

Rregulla e mëposhtme e stilit do të shtrij vertikalisht në pjesën e poshtme tekstin brenda elementeve <th>.

th {
    height: 40px;
    vertical-align: bottom;
}

Kontrollimi i pozicionit të titullit të tabelës

Mund të vendosni pozicionin vertikal të një titulli të tabelës duke përdorur vetinë CSS caption-side.

Titulli mund të vendoset në krye ose në fund të tabelës. Pozicioni i paracaktuar është në krye.

caption {
    caption-side: bottom;
}

Krijimi i tabelave me “shirita-zebër”

Cilësimi i ngjyrave të ndryshme të sfondit për rreshtat njëri pas tjetrit është një teknikë e përhapur për të përmirësuar lexueshmërinë e tabelave që kanë sasi të madhe të të dhënave. Kjo zakonisht njihet si një tabelë me “shirita-zebër”.

Shumë lehtë mund ta arrini këtë efekt duke përdorur selektorin e pseudo-klasës të CSS :nth-child().

Rregulli i mëposhtëm i stilit do të nxjerr në pah çdo të dytin rresht brenda trupit të tabelës.

tr:nth-child(odd) {
    background-color: #f2f2f2;
}

Tabela me “shirita-zebër” zakonisht duket diçka si imazhi i mëposhtëm.

Tabela responsive

Tabelat nuk janë të natyrës responsive. Sidoqoftë, për të mbështetur pajisjet mobile mund të shtoni responsivitet në tabelat tuaja duke mundësuar lëvizjen horizontale në ekranet e vogla. Për ta bërë këtë thjesht futni tabelën tuaj brenda një elementi <div> dhe aplikoni stilin overflow-x: auto; siç tregohet më poshtë:

<div style="overflow-x: auto;">
  <table>
    ... përmbajtja e tabelës ...
  </table>
</div>

Box Modeli

Çfarë është Box Modeli?

Çdo element që mund të shfaqet në një ueb faqe përbëhet nga një ose më shumë kuti drejtkëndëshe (rectangular boxes). Box modeli në CSS përshkruan në mënyrë tipike se si këto kuti drejtkëndëshe janë paraqitur në një ueb faqe. Këto kuti mund të kenë veti të ndryshme dhe mund të bashkëveprojnë me njëra-tjetrën në mënyra të ndryshme, por çdo kuti ka një zonë të përmbajtjes dhe zona opsionale padding, border dhe margin.

Vizatimi i mëposhtëm tregon se si vetitë CSS width, height, padding, border dhe margin përcaktojnë se sa hapësirë mund të zë një element në një ueb faqe.

Padding-u (mbushja) është hapësirë transparente midis përmbajtjes së elementit dhe kufirit të tij (ose skajit të kutisë, nëse nuk ka asnjë kufi), ndërsa margjina është hapësira transparente përreth kufirit.

Gjithashtu, nëse një element ka ngjyrë në sfond, ajo ngjyrë do të jetë e dukshme edhe në zonën e padding-ut. Zona e margjinës mbetet gjithnjë transparente, nuk ndikohet nga ngjyra e sfondit të elementit, megjithatë, bën që ngjyra e sfondit të elementit prind të shihet përmes saj.

Gjerësia dhe lartësia e elementeve

Zakonisht kur cilësoni gjerësinë dhe lartësinë e një elementi duke përdorur vetitë CSS width dhe height, në të vërtetë ju po cilësoni vetëm gjerësinë dhe lartësinë e zonës së përmbajtjes së këtij elementi. Gjerësia dhe lartësia aktuale e kutisë së elementit varet nga disa faktorë.

Hapësira aktuale që kutia e një elementi mund të marrë në një ueb faqe llogaritet kështu:

Tani le të provojmë shembullin e mëposhtëm për të kuptuar se si funksionon në të vërtetë box modeli:

div {
    width: 300px;
    height: 200px;
    padding: 15px; /* cilëson padding-un për të gjitha anët */
    border: 10px solid black; /* cilëson kufirin për të gjitha anët */
    margin: 20px auto; /* cilëson margjinën e epërme dhe të poshtme në 20 piksell, ndërsa majtas dhe djathtas auto */
}

Cilësimi i dimensioneve të elementit

CSS ka disa veti të dimensioneve, të tilla si width, height, max-width, min-width, max-height dhe min-height që ju lejon të kontrolloni gjerësinë dhe lartësinë e një elementi.

Cilësimi i gjerësisë dhe lartësisë

Vetia width dhe height definon gjerësinë dhe lartësinë e zonës së përmbajtjes të një elementi.

Kjo gjerësi dhe lartësi nuk përfshin padding-un, kufijtë ose margjinat.

div {
    width: 300px;
    height: 200px;
}

Rregullat e mësipërme të stilit i caktojnë elementit <div> një gjerësi fikse prej 300 piksell dhe lartësi fikse prej 200 piksell.

Vetitë width dhe height mund të marrin këto vlera:

• gjatësia – specifikon një gjerësi në px, em, rem, pt, cm, etj.
• % –  specifikon gjerësinë në përqindje (%) të gjerësisë së elementit që përmban.
• auto – ueb shfletuesi llogarit gjerësinë e përshtatshme për elementin.
• initial – Cilëson gjerësinë dhe lartësinë në vlerën e saj të paracaktuar, e cila është auto.
• inherit – specifikon që gjerësia duhet të trashëgohet nga elementi prind.

Nuk mund të specifikoni vlera negative për vetitë e gjerësisë dhe lartësisë.

Cilësimi i gjerësisë dhe lartësisë maksimale

Mund të përdorni vetitë max-width dhe max-height për të specifikuar gjerësinë dhe lartësinë maksimale të zonës së përmbajtjes. Kjo gjerësi dhe lartësi maksimale nuk përfshin padding-un, kufijtë apo margjinën.

Një element nuk mund të jetë më i gjerë se vlera e max-width, edhe nëse vlera e vetisë width është diç më e madhe. Për shembull, nëse width është vendosur në 300px dhe max-width është vendosur në 200px, gjerësia aktuale e elementit do të jetë 200px.

div {
    width: 300px;
    max-width: 200px;
}

Po kështu, një element që ka të zbatuar max-height nuk do të jetë kurrë më i lartë se vlera e specifikuar, edhe nëse vetia width ka vlerë më të madhe. Për shembull, nëse height është vendosur në 200px dhe max-height është vendosur në 100px, lartësia aktuale e elementit do të jetë 100px.

div {
    height: 200px;
    max-height: 100px;
}

Cilësimi i gjerësisë dhe lartësisë minimale

Mund të përdorni vetitë min-width dhe min-height për të specifikuar gjerësinë dhe lartësinë minimale të zonës së përmbajtjes. Kjo gjerësi dhe lartësi minimale nuk përfshin padding-un, kufijtë apo margjinat.

Një element nuk mund të jetë më i ngushtë se vlera e min-width, edhe nëse vlera e vetisë width është diçka më e vogël. Për shembull, nëse width është vendosur në 300px dhe min-width është vendosur në 400px, gjerësia aktuale e elementit do të jetë 400px.

div {
    width: 200px;
    min-width: 300px;
}

Në mënyrë të ngjashme, një element në të cilin zbatohet min-height nuk do të jetë kurrë më i vogël se vlera e specifikuar, edhe nëse vetia height është diçka më e vogël. Për shembull, nëse height është vendosur në 200px, dhe min-height është vendosur në 300px, lartësia aktuale e elementit do të jetë 300px.

div {
    height: 100px;
    min-height: 200px;
}

Cilësimi i diapazonit të gjerësisë dhe lartësisë

Vetitë min-width dhe min-height përdoren shpesh në kombinim me vetitë max-width dhe max-height për të prodhuar një diapazon (brez) të gjerësisë dhe lartësisë në një element.

Kjo mund të jetë shumë e dobishme për krijimin e një dizajni fleksibil. Në shembullin vijues, gjerësia minimale e elementit <div> do të ishte 300px dhe mund të shtrihet horizontalisht deri në një vlerë maksimale prej 500px.

div {
    min-width: 300px;
    max-width: 500px;
}

Në mënyrë të ngjashme, mund të definoni një interval lartësie për një element. Në shembullin e mëposhtëm lartësia minimale e elementit <div> do të ishte 300px dhe mund të shtrihet vertikalisht deri në maksimum 500px.

div {
    min-height: 300px;
    max-height: 500px;
}

Vetitë e padding-ut

Vetitë CSS të padding-ut lejojnë të vendosni hapësirë ndërmjet përmbajtjes së një elementi dhe kufirit të tij (ose skajit të kutisë së elementit, nëse nuk ka kufi të përcaktuar).

Padding-u ndikohet nga ngjyra e sfondit të elementit. Për shembull, nëse vendosni ngjyrën e sfondit në një element, ajo ngjyrë do të jetë e dukshme edhe në zonën së padding-ut.

Definimi i padding-ut për anët individuale

Mund të specifikoni padding-jet për anët individuale të një elementi të tillë si pjesa e sipërme, e djathtë, e poshtme dhe e majtë duke përdorur përkatësisht vetitë CSS të padding-top, padding-right, padding-bottom dhe padding-left.

h1 {
    padding-top: 50px;
    padding-bottom: 100px;
}
p {
    padding-left: 75px;
    padding-right: 75px;
}

Vetitë e padding-ut mund të specifikohen duke përdorur vlerat e mëposhtme:

• gjatësia – specifikon një padding në px, em, rem, pt, cm, etj.
• % – specifikon një padding në përqindje (%) të gjerësisë së elementit që përmban.
• inherit – specifikon që padding-u duhet të trashëgohet nga elementi prind.

Ndryshe nga margjina CSS, vlerat për vetitë e padding-ut nuk mund të jenë negative.

Vetia e shkurtë e padding-ut

Vetia padding është një veti e shkurtë për të shmangur cilësimin e padding-ut të secilës anë veç e veç, d.m.th., padding-top, padding-right, padding-bottom dhe padding-left.

h1 {
    padding: 50px; /* zbatohen në të katër anët */
}
p {
    padding: 25px 75px; /* vertikal | horizontal */
}
div {
    padding: 25px 50px 75px; /* sipër | horizontal | poshtë */
}
pre {
    padding: 25px 50px 75px 100px; /* sipër | djathtas | poshtë | majtas */
}

Ky shënim i shkurtë mund të marrë një, dy, tri ose katër vlera të ndara me hapësira.

• Nëse specifikohet një vlerë, ajo zbatohet në të katër anët.
• Nëse specifikohen dy vlera, vlera e parë aplikohet në anën e sipërme dhe të poshtme, dhe vlera e dytë zbatohet në anën e djathtë dhe të majtë të kutisë së elementit.
• Nëse specifikohen tri vlera, vlera e parë zbatohet në krye, vlera e dytë zbatohet në anën e djathtë dhe të majtë dhe vlera e fundit zbatohet në pjesën e poshtme.
• Nëse specifikohen katër vlera, ato zbatohen në pjesën e sipërme, në të djathtë, në pjesën e poshtme dhe në të majtë të kutisë së elementit përkatësisht në radhitjen e specifikuar.

Rekomandohet të përdoret vetia e shkurtë, kjo do t'ju ndihmojë të kurseni pak kohë duke shmangur shënim shtesë dhe kësisoj e bëni kodin tuaj CSS më të lehtë për t'u ndjekur dhe mirëmbajtur.

Efekti i padding-ut dhe kufirit në paraqitje

Kur krijoni një ueb faqe, cilësimi i padding-ut apo kufirit në elemente ndonjëherë prodhon një rezultat të papritur, sepse padding-u dhe kufiri ju shtohen gjerësisë dhe lartësisë së kutisë së gjeneruar nga elementi, siç e kemi tash të njohur nga njësia Box modeli.

Për shembull, nëse cilësoni gjerësinë e një elementi <div> në 100% dhe gjithashtu vendosni padding apo kufij majtas dhe djathtas, në faqe do të shfaqet shiriti lëvizës horizontal.

div {
    width: 100%;
    padding: 25px;
}

Për të parandaluar padding-un dhe kufirin që të ndryshojnë gjerësinë dhe lartësinë e kutisë së elementit, mund të përdorni vetinë CSS box-sizing. Në shembullin vijues gjerësia dhe lartësia e kutisë <div> do të mbeten të pandryshuara, megjithatë, zona e përmbajtjes së saj do të zvogëlohet me rritjen e padding-ut apo kufirit.

div {
    width: 100%;
    padding: 25px;
    box-sizing: border-box;
}

Vetitë e kufijve

Vetitë CSS të kufirit lejojnë të definoni zonën kufitare të kutisë së një elementi.

Kufijtë shfaqen drejtpërdrejt midis margjinës dhe padding-ut të një elementi. Kufiri mund të jetë një stil i paracaktuar si, vijë solide, vijë me pika, vijë e dyfishtë, etj. apo edhe një imazh.

Kuptimi i stileve të ndryshme të kufijve

Vetia border-style cilëson stilin e kufirit të një kutie, siç janë: solid, dotted, etj. Është një veti e shkurtë për cilësimin e stilit të vijës për të katër anët e kufirit të elementeve.

Vetia border-style mund të ketë këto vlera: none, hidden, solid, dashed, dotted, double, inset, outset, groove dhe ridge.

Vlerat none dhe hidden nuk shfaqin asnjë kufi, megjithatë, ekziston një ndryshim i vogël midis këtyre dy vlerave. Në rastin e celulave të tabelës dhe bashkimit të kufirit, vlera none ka përparësi më të ulët, ndërsa vlera hidden ka përparësi më të lartë, nëse vendoset ndonjë kufi tjetër konfliktual.

Vlerat inset, outset, groove dhe ridge krijojnë një efekt 3D, i cili në thelb varet nga vlera e border-color. Kjo zakonisht arrihet duke krijuar një "hije" nga dy ngjyra që janë pak më të ndritshme dhe më të errëta se ngjyra e kufirit.

h1 {
    border-style: dotted;
}
p {
    border-style: ridge;
}

Cilësimi i gjerësisë së kufirit

Vetia border-width specifikon gjerësinë e zonës kufitare. Është një veti e shkurtë për cilësimin e trashësisë në të katër anët e kufirit të një elementi në të njëjtën kohë.

p {
    border-style: dashed;
    border-width: 10px;
}

Specifikimi i ngjyrës së kufirit

Vetia border-color specifikon ngjyrën e zonës kufitare. Kjo është gjithashtu një veti e shkurtë për cilësimin e ngjyrës në të katër anët e kufirit të një elementi.

Rregullat e mëposhtme të stilit shtojnë një kufi solid me ngjyrë të kuqe rreth paragrafëve.

p {
    border-style: solid;
    border-color: #ff0000;
}

Vetia e shkurtë e kufirit

Vetia CSS border është një veti e shkurtë për cilësimin e një ose më shumë nga vetitë e kufirit border-width, border-style dhe border-color në një rregull të vetëm.

p {
    border: 5px solid #00ff00;
}

Nëse vlera për një veti individuale të kufirit hiqet ose nuk specifikohet gjatë cilësimit të vetisë së shkurtë të kufirit, vlera e paracaktuar për atë veti do të përdoret.

Për shembull, nëse vlera për vetinë border-color mungon ose nuk specifikohet kur cilësoni kufirin, vetia color e elementit do të përdoret si vlerë për ngjyrën e kufirit.

Në shembullin më poshtë, kufiri do të jetë një vijë e kuqe solide me gjerësi 5 piksell:

p {
    color: red;
    border: 5px solid;
}

Por, në rastin e border-style, mungesa e vlerës së saj do të pamundësoj shfaqjen e kufirit, sepse vlera e paracaktuar për këtë veti është none. Në shembullin vijues, nuk do të ketë kufi:

p {
    border: 5px #00ff00;
}

Vetitë e margjinës

Vetitë CSS të margjinës lejojnë të caktoni hapësirën rreth kufirit të kutisë së një elementi (ose skajit të kutisë së elementit, nëse nuk ka kufi të përcaktuar).

Margjina e një elementi nuk ndikohet nga ngjyra e sfondit, ajo është gjithmonë transparente. Sidoqoftë, nëse elementi prind ka ngjyrë në sfond, ai do të jetë i dukshëm përmes zonës së tij të margjinës.

Cilësimi i margjinave për anët individuale

Mund të specifikoni margjina për anët individuale të një elementi të tillë si ana e sipërme, e djathtë, e poshtme dhe e majtë duke përdorur përkatësisht vetitë CSS: margin-top, margin-right, margin-bottom dhe margin-left.

h1 {
    margin-top: 50px;
    margin-bottom: 100px;
}
p {
    margin-left: 75px;
    margin-right: 75px;
}

Vetitë e margjinës mund të specifikohen duke përdorur vlerat e mëposhtme:

• gjatësia – specifikon margjinën në px, em, rem, pt, cm, etj.
• % – specifikon margjinën në përqindje (%) të gjerësisë së elementit që përmban.
• auto – ueb shfletuesi llogarit një margjinë të përshtatshme për t'u përdorur.
• inherit – specifikon që margjina duhet të trashëgohet nga elementi prind.

Gjithashtu mund të specifikoni margjina me vlera negative në një element, p.sh., margin: -10px;, margin: -5%;, etj.

Vetia e shkurtë e margjinës

Vetia margin është një veti e shkurtë për të shmangur vendosjen e margjinës të secilës anë veçmas, d.m.th., margin-top, margin-right, margin-bottom dhe margin-left.

h1 {
    margin: 50px; /* zbatohen në të katër anët */
}
p {
    margin: 25px 75px; /* vertikal | horizontal */
}
div {
    margin: 25px 50px 75px; /* sipër | horizontal | poshtë */
}
hr {
    margin: 25px 50px 75px 100px; /* sipër | djathtas | poshtë | majtas */
}

Ky shënim i shkurtë mund të marrë një, dy, tre ose katër vlera të ndara me hapësirë.

• Nëse specifikohet një vlerë, ajo zbatohet në të katër anët.
• Nëse specifikohen dy vlera, vlera e parë aplikohet në anën e sipërme dhe të poshtme, dhe vlera e dytë zbatohet në anën e djathtë dhe të majtë të kutisë së elementit.
• Nëse specifikohen tri vlera, vlera e parë zbatohet në krye, vlera e dytë zbatohet në anën e djathtë dhe të majtë dhe vlera e fundit zbatohet në pjesën e poshtme.
• Nëse specifikohen katër vlera, ato zbatohen në pjesën e sipërme, në të djathtë, në pjesën e poshtme dhe në të majtë të kutisë së elementit përkatësisht në radhitjen e specifikuar.

Rekomandohet të përdorni vetinë e shkurtë, pasi kjo do t'ju ndihmojë të kurseni pak kohë duke shmangur shënimin shtesë dhe ta bëni kodin tuaj CSS më të lehtë për t'u ndjekur dhe mirëmbajtur.

Qendërzimi horizontal me margjina automatike

Vlera auto për vetinë e margjinës i tregon ueb shfletuesit që të llogarit automatikisht margjinën. Kjo zakonisht përdoret për të qendërzuar një element horizontalisht brenda një elementi më të madh.

div {
    width: 300px;
    background: gray;
    margin: 0 auto;
}

Rregullat e mësipërme të stilit lejojnë që elementi <div> të ketë 300 piksell nga e gjithë hapësira horizontale e disponueshme, ndërsa hapësira tjetër e mbetur do të ndahet në mënyrë të barabartë midis margjinës së majtë dhe të djathtë. Kësisoj elementi <div> do të qendërzohet horizontalisht.

Shfaqja (Display)

Vetia CSS Display

Specifikimi CSS definon vlerën e paracaktuar të shfaqjes për të gjithë elementët, p.sh. elementi <div> paraqitet si bllok (block), ndërsa elementi <span> paraqitet në linjë (inline).

Ndryshimi i vlerës së parazgjedhur të shfaqjes

Mbivendosja e vlerës së paracaktuar të shfaqjes së një elementi është një implikim i rëndësishëm i vetisë display. Për shembull, ndryshimi i një elementi të nivelit inline në element të nivelit bllok ose ndryshimi i elementit të nivelit bllok që do të shfaqet si një element i nivelit inline.

Display block

Vlera block e vetisë display e detyron një element të sillet si një element i nivelit bllok, si është p.sh. elementi <div> ose <p>. Rregullat e stilit në shembullin vijues shfaqin elementet <span> dhe <a> si elementë të nivelit bllok:

span {
    display: block;
}
a {
    display: block;
}

Display inline

Vlera inline e vetisë display bën që një element të sillet sikur të ishte element në linjë, për shembull siç janë elementet <span> ose <a>. Rregullat e stilit në shembullin vijues shfaqin elementet <p> dhe <li> si elemente të nivelit inline:

p {
    display: inline;
}
ul li {
    display: inline;
}

Display inline-block

Vlera inline-block e vetisë display bën që një element të gjenerojë një kuti bllok që do të ketë përmbajtje përreth d.m.th. në të njëjtën linjë me përmbajtjen e afërt. Rregullat e mëposhtme të stilit shfaqin elementet <div> dhe <span> si bllok në linjë (inline-block):

div {
    display: inline-block;
}
span {
    display: inline-block;
}

Display none

Vlera none vetisë display thjesht nuk bën që një element të gjenerojë fare një kuti. Elementet e fëmijëve nuk gjenerojnë gjithashtu asnjë kuti, edhe nëse vetia e tyre display është cilësuar në ndonjë vlerë tjetër. Dokumenti paraqitet sikur elementi të mos ekzistonte në pemën e dokumentit.

h1 {
    display: none;
}
p {
    display: none;
}

Pozicionimi

Metodat e pozicionimit në CSS

Pozicionimi i elementeve në mënyrë të përshtatshme në ueb faqe është një domosdoshmëri për një dizajn të mirë të paraqitjes. Ekzistojnë disa metoda në CSS që mund të përdoren për pozicionimin e elementeve.

Pozicionimi statik

Një element i pozicionuar në mënyrë statike pozicionohet gjithmonë sipas rrjedhës normale të faqes. Elementet HTML kanë pozicion statik me parazgjedhje. Elementet e pozicionuara në mënyrë statike nuk ndikohen nga këto veti: top, bottom, left, right dhe z-index.

.box {
    padding: 20px;
    background: #7dc765;
}

Pozicionimi relativ

Një element relativisht i pozicionuar është i pozicionuar në krahasim me pozicionin e tij normal.

Në skemën e pozicionimit relativ, pozicioni i kutisë së elementit llogaritet sipas rrjedhës normale. Pastaj kutia zhvendoset nga ky pozicion normal në përputhje me vetitë – top ose bottom dhe/ose left ose right.

.box {
    position: relative;
    left: 100px;
}

Pozicionimi absolut

Një element i pozicionuar absolutisht është i pozicionuar në raport (krahasuar) me elementin e parë prind që ka një pozicion tjetër përveç atij statik. Nëse nuk gjendet ndonjë element i tillë, ai do të pozicionohet në ueb faqe në krahasim me këndin 'sipër-majtas' të dritares së shfletuesit. Cilësimet e kutisë më tej mund të specifikohen duke përdorur një ose më shumë veti: top, right, bottom dhe left.

Elementet e pozicionuar në mënyrë absolute nxirren jashtë rrjedhës normale tërësisht dhe kështu nuk zënë vend kur vendosen elemente fëmijë. Sidoqoftë, mund të mbivendoset elementë të tjerë në varësi të vlerës së vetisë z-index. Gjithashtu, një element i pozicionuar absolutisht mund të ketë margjina, dhe ato nuk shemben me asnjë margjinë tjetër.

.box {
    position: absolute;
    top: 200px;
    left: 100px;
}

Pozicionimi i fiksuar

Pozicionimi i fiksuar është një nënkategori e pozicionimit absolut.

Dallimi i vetëm është se, një element i pozicionuar në mënyrë fikse është i fiksuar në lidhje me pamjen e shfletuesit dhe nuk lëviz.

.box {
    position: fixed;
    top: 200px;
    left: 100px;
}

Rregullimi i elementeve në shtresa duke përdorur vetinë z-index

Zakonisht faqet HTML konsiderohen dy-dimensionale, sepse teksti, imazhet dhe elementët e tjerë janë rregulluar në faqe që nuk mbivendosen njëra mbi tjetrën. Sidoqoftë, përveç pozicioneve të tyre horizontale dhe vertikale, kutitë mund të radhiten përgjatë boshtit z, d.m.th. njëra mbi tjetrën duke përdorur vetinë CSS z-index. Kjo veti specifikon nivelin e një kutie, vlera e pozicionit të së cilës është një nga këto: absolute, fixed ose relative.

Pozicioni i boshtit z të secilës shtresë shprehet si një numër i plotë që përfaqëson radhën e paraqitjes. Një element me një z-index më të madh e mbulon një tjetër element me një z-index më të vogël.

Vetia z-index mund t'ju ndihmojë të krijoni ueb faqe më komplekse.

.box {
    position: absolute;
    left: 10px;
    top: 20px;
    z-index: 2;
}

Media Queries në CSS3

Media Queries në CSS ju mundësojnë të formatoni dokumentet tuaja që të paraqiten në mënyrë korrekte në madhësi të ndryshme të ekraneve.

Media Queries dhe ueb dizajni responziv

Media Queries ju lejojnë të rregulloni prezantimin e ueb faqeve për numër më të madh të pajisjeve siç janë telefonat e mençur, tabletët, desktopët, etj. pa bërë ndonjë ndryshim në shënime. Një media query përbëhet nga një lloj media dhe asnjë apo më shumë shprehje që përputhen me llojin dhe kushtet e një veçorie partikulare të medias, siç janë gjerësia e pajisjes ose rezolucioni i ekranit.

Meqenëse media query është një shprehje logjike, ajo mund të jetë e saktë (true) ose jo e saktë (false). Rezultati i pyetjes do të jetë e saktë nëse lloji i medias i specifikuar në pyetjen media përputhet me llojin e pajisjes në të cilën dokumenti shfaqet, si dhe të gjitha shprehjet në pyetjen e medias përputhen. Kur një pyetje e medias është e saktë, rregullat e stilit të lidhura me atë zbatohen në pajisjen e synuar. Më poshtë keni një shembull të thjeshtë të media query për pajisjet standarde.

/* Telefonat e mençur (portret dhe peisazh) ---------- */
@media screen and (min-width: 320px) and (max-width: 480px){
    /* stilet */
}
/* Telefonat e mençur (portret) ---------- */
@media screen and (max-width: 320px){
    /* stilet */
}
/* Telefonat e mençur (peisazh) ---------- */
@media screen and (min-width: 321px){
    /* stilet */
}
/* Tabletë, iPad (portret dhe peisazh) ---------- */
@media screen and (min-width: 768px) and (max-width: 1024px){
    /* stilet */
}
/* Tabletë, iPad (portret) ---------- */
@media screen and (min-width: 768px){
    /* stilet */
}
/* Tabletë, iPad (peisazh) ---------- */
@media screen and (min-width: 1024px){
    /* stilet */
}
/* Desktop dhe laptop ---------- */
@media screen and (min-width: 1224px){
    /* stilet */
}
/* Ekranet e mëdha ---------- */
@media screen and (min-width: 1824px){
    /* stilet */
}

Ndryshimi i gjerësisë së kolonës bazuar në madhësinë e ekranit

Mund të përdorni CSS media query për ndryshimin e gjerësisë së ueb faqes dhe elementëve të saj për të ofruar një eksperiencë më të mirë të pamjes për përdoruesit në pajisje të ndryshme.

Rregullat e mëposhtme të stilit automatikisht do të ndryshojnë gjerësinë e elementit të kontejnerit bazuar në madhësinë e ekranit ose pamjen e shikimit (viewport). Për shembull, nëse gjerësia e pamjes së shikimit është më e vogël se 768 piksell ajo do të mbulojë 100% të gjerësisë së pamjes së shikimit, nëse është më e madhe se 768 piksell por më e vogël se 1024 piksell do të jetë e gjerë 750 piksell, etj.

.kontejneri {
    margin: 0 auto;
    background: #f2f2f2;
    box-sizing: border-box;
}
/* Telefona mobil (portret dhe peisazh) ---------- */
@media screen and (max-width: 767px){
    .kontejneri {
        width: 100%;
        padding: 0 10px;
    }
}
/* Tabletë, iPad (portret dhe peisazh) ---------- */
@media screen and (min-width: 768px) and (max-width: 1023px){
    .kontejneri {
        width: 750px;
        padding: 0 10px;
    }
}
/* Desktop dhe laptop me rezolucion të ultë ---------- */
@media screen and (min-width: 1024px) {
    .kontejneri {
        width: 980px;
        padding: 0 15px;
    }
}
/* Desktop dhe laptop me rezolucion të lartë ---------- */
@media screen and (min-width: 1280px) {
    .kontejneri {
        width: 1200px;
        padding: 0 20px;
    }
}

Ndryshimi i faqeve bazuar në madhësinë e ekranit

Gjithashtu mund të përdorni CSS media query për të bërë paraqitjen tuaj të uebsajtit me shumë kolona më të adaptueshme dhe të përshtatshme për pajisje të ndryshme duke bërë pak ndryshim në kodin CSS.

Rregulli i mëposhtëm i stilit do të krijojë një paraqitje me dy kolona nëse madhësia e pamjes është më e madhe ose e barabartë me 768 piksell, por nëse është më e vogël, atëherë do të jepet paraqitja me vetëm një kolonë.

.kolona {
    width: 48%;
    padding: 0 15px;
    box-sizing: border-box;
    background: #93dcff;
    float: left;
}
.kontejneri.kolona:first-child{
    margin-right: 4%;
}
@media screen and (max-width: 767px){
    .kolona {
        width: 100%;
        padding: 5px 20px;
        float: none;
    }
    .kontejneri.kolona:first-child{
        margin-right: 0;
        margin-bottom: 20px;
    }
}