Cascading Style Sheets, ose CSS, është një gjuhë që i tregon një faqe interneti se si të duket. CSS shton ngjyrën, stilin dhe paraqitjen në strukturën e thjeshtë të një faqe interneti. Ashtu siç zgjidhni rrobat tuaja për t'u ndjerë mirë dhe për t'u dukur bukur, CSS ndihmon një faqe interneti të vishet dhe të duket tërheqëse. Në zhvillimin e uebit, ne përdorim CSS për të ndryshuar ngjyrën, madhësinë dhe pozicionin e tekstit dhe kutive në faqe. Ky mësim do t'ju prezantojë me bazat e CSS në gjuhë të thjeshtë. Ne do të mësojmë se çfarë është CSS, pse është e rëndësishme dhe si funksionon me HTML.
CSS qëndron për Cascading Style Sheets. Është një gjuhë e veçantë që përdoret për të stiluar faqet e internetit. Mendoni për CSS si bojë dhe dekorime për një ndërtesë. Ndërtesa është bërë nga HTML, dhe CSS e bën atë të bukur. Duke përdorur CSS, mund të ndryshoni ngjyrën e sfondit, stilet e shkronjave dhe hapësirën rreth elementeve në faqen tuaj të internetit. CSS është një mjet që ndihmon dizajnerët e uebit t'i bëjnë faqet e internetit të duken më të mira dhe më argëtuese.
Imagjinoni se jeni duke ngjyrosur një vizatim. Linjat e vizatimit janë si struktura bazë e një faqe interneti. CSS është si ngjyrat dhe shënuesit që i japin jetë vizatimit. Me disa rregulla të thjeshta, mund ta ndryshoni të gjithë vizatimin tuaj nga i thjeshtë në shumëngjyrësh!
CSS përdoret për t'i bërë faqet e internetit tërheqëse dhe të lehta për t'u përdorur. Ai e mban stilin të ndarë nga përmbajtja. Kjo do të thotë që fjalët dhe fotografitë në faqe (të ofruara nga HTML) mbeten të njëjta, ndërsa CSS kontrollon se si duken. Kur përditësoni stilin, nuk keni nevojë të ndryshoni përmbajtjen. Kjo ndarje i ndihmon zhvilluesit e uebit të punojnë më shpejt dhe i bën faqet më të këndshme për t'u vizituar.
Mendoni për CSS si veshjen që zgjidhni. Nëse vishni rroba të ndryshme, dukeni ndryshe, por gjithsesi jeni i njëjti person. CSS ndryshon pamjen e një faqe interneti pa ndryshuar informacionin në të. Kjo e bën të thjeshtë përditësimin e dizajnit të një faqe interneti të tërë duke redaktuar vetëm një skedar CSS.
CSS punon krah për krah me HTML. HTML është themeli që përcakton se ku shkojnë gjërat në një faqe interneti. CSS më pas hyn për të shtuar ngjyrat, fontet dhe stilin. Kur një shfletues ngarkon një faqe në internet, ai fillimisht ndërton strukturën me HTML dhe më pas aplikon stilet e përcaktuara në CSS.
CSS është shkruar si një grup rregullash. Çdo rregull ka dy pjesë: një përzgjedhës dhe një bllok deklarimi. Përzgjedhësi i tregon shfletuesit se cilin element HTML duhet të stilojë. Blloku i deklaratave përmban një ose më shumë deklarata. Çdo deklaratë ka një pronë dhe një vlerë. Prona është ajo që dëshironi të ndryshoni, dhe vlera tregon se si ta ndryshoni atë.
Për shembull, për të vendosur ngjyrën e sfondit të faqes në blu të hapur, mund të shkruani një rregull që duket si ky:
<code>trupi {
ngjyra e sfondit: blu e lehtë;
}</code>Ky rregull i thjeshtë ndryshon sfondin e të gjithë faqes.
Një rregull bazë CSS ndjek një model të thjeshtë. Ai tregon përzgjedhësin dhe një bllok të vetive dhe vlerave. Modeli duket si ky:
<code>zgjedhësi {
prona: vlera;
}</code>Këtu, përzgjedhësi zgjedh cilin element HTML të synojë. Prona është ajo që dëshironi të ndryshoni, dhe vlera është se si dëshironi ta ndryshoni atë.
Për shembull, nëse dëshironi që i gjithë teksti i paragrafit të jetë blu, ju shkruani:
<code>p {
ngjyra: blu;
}</code>Ky rregull i tregon shfletuesit të internetit që çdo element <p> (paragraf) duhet të ketë tekst blu.
Zgjedhësit CSS ju lejojnë të zgjidhni se cilët elementë në faqen tuaj të internetit do të ndikohen nga rregullat e stilit. Ka disa lloje të përzgjedhësve, dhe secili prej tyre funksionon paksa ndryshe.
Këta përzgjedhës të ndryshëm ju japin shumë fuqi për të stiluar pjesë të veçanta të faqes tuaj të internetit. Ato ju lejojnë të synoni saktësisht elementët dhe të vendosni se si duhet të duken.
CSS ofron shumë veti të ndryshme që mund t'i përdorni për të stiluar faqen tuaj të internetit. Çdo veti ju lejon të ndryshoni një aspekt specifik të pamjes së një elementi. Disa veti të zakonshme janë:
Çdo pronë CSS pasohet nga një vlerë. Për shembull, për t'i dhënë tekstit një ngjyrë të kuqe, mund të shkruani:
<code>p {
ngjyra: e kuqe;
}</code>Ky rregull i thjeshtë i bën të gjithë paragrafët të kenë tekst të kuq. Ngjyra e vetive kontrollon se si shfaqet teksti dhe vlera e kuqe i tregon asaj se çfarë ngjyre duhet të jetë.
Fjala "kaskadë" në CSS do të thotë që stilet mund të rrjedhin nga një rregull në tjetrin. Nëse dy rregulla mund të zbatohen për të njëjtin element, rendi mund të vendosë se cili do të fitojë. Kjo është e ngjashme me grumbullimin e blloqeve ku një bllok ndonjëherë mbulon një pjesë të tjetrit.
Një rregull i zakonshëm është se stilet e shkruara direkt brenda një elementi HTML (të quajtur stile inline) do të anashkalojnë stilet në skedarin tuaj CSS. Një rregull tjetër është që nëse një element prind është i stiluar, elementët e tij fëmijë mund ta trashëgojnë atë stil, përveç nëse u thuhet ndryshe.
Për shembull, nëse vendosni ngjyrën e tekstit të një <div> në jeshile, atëherë teksti brenda <div> shpesh do të shfaqet gjithashtu i gjelbër për shkak të trashëgimisë. Kjo ndihmon në ruajtjen e një dizajni të qëndrueshëm në një faqe interneti.
Me CSS, ju mund të ndryshoni ngjyrat në shumë mënyra. Ju mund të përdorni emra të zakonshëm ngjyrash si të kuqe , blu dhe jeshile . Ju gjithashtu mund të përdorni kode heksadecimal si <code>#FF0000</code> për të kuqe, ose vlera RGB si <code>rgb(255, 0, 0)</code>.
Fontet janë një tjetër pjesë e rëndësishme e CSS. Një font është si stili i shkrimit të dorës që zgjidhni në një fletore. Në CSS, ju mund të ndryshoni familjen e shkronjave, madhësinë, peshën dhe stilin. Për shembull, nëse dëshironi që paragrafët tuaj të shfaqen në Arial, mund të përdorni:
<code>p {
font-family: Arial, sans-serif;
}</code>Ky rregull i thotë shfletuesit të shfaqë tekstin në fontin Arial nëse është i disponueshëm dhe të përdorë një font tjetër të ngjashëm nëse nuk është.
Ndryshimi i ngjyrave dhe shkronjave me CSS e bën tekstin më të lehtë për t'u lexuar dhe faqen tuaj të internetit më interesante për t'u parë.
Modeli i kutisë CSS është një mënyrë për të kuptuar se si janë renditur pjesët e ndryshme të një elementi në një faqe. Çdo element është si një kuti. Modeli i kutisë ka katër pjesë:
Imagjinoni një fotografi. Vetë fotografia është përmbajtja. Tapeti që rrethon fotografinë është si mbushja. Korniza që i mban të gjitha së bashku është kufiri. Dhe hapësira rreth kornizës është diferenca. Duke përdorur këtë model, mund të siguroheni që të gjitha pjesët e dizajnit tuaj të kenë hapësirën dhe ekuilibrin e duhur.
CSS nuk ka të bëjë vetëm me ngjyrat dhe fontet; ju ndihmon gjithashtu të rregulloni elementet në një faqe interneti. Kjo quhet faqosje dhe pozicionim. Me CSS, ju mund të vendosni se ku do të shfaqet secili element në faqe.
Ka disa mënyra për të kontrolluar paraqitjen e një faqe interneti, duke përfshirë:
Përdorimi i këtyre teknikave të paraqitjes është si rregullimi i lodrave në një raft. Ju vendosni se ku shkon secila lodër në mënyrë që të gjitha të kenë hapësirë të mjaftueshme dhe të duken të rregullta. Kjo e bën faqen tuaj të internetit më të organizuar dhe tërheqëse.
Këtu është një shembull se si HTML dhe CSS punojnë së bashku. Ky kod shembull tregon një faqe interneti të thjeshtë me disa stilime:
<code><!DOCTYPE html>
<html>
<koka>
<stili>
trupi {
ngjyra e sfondit: blu e lehtë;
}
h1 {
ngjyra: detare;
madhësia e shkronjave: 24 px;
}
p {
ngjyra: jeshile;
madhësia e shkronjave: 18 px;
}
</style>
</head>
<trupi>
<h1>Uebfaqja ime e parë</h1>
<p>Kjo është një faqe interneti e thjeshtë e stiluar duke përdorur CSS.</p>
</body>
</html></code>Ky kod krijon një faqe interneti me një ngjyrë të sfondit blu të lehtë. Teksti i titullit është ngjyrë detare dhe teksti i paragrafit është i gjelbër. CSS brenda etiketës <code><style></code> tregon se si shkruhen dhe zbatohen rregullat.
Ju mund të shtoni CSS në HTML-në tuaj në tre mënyra kryesore. Çdo metodë ka përdorimin e vet në varësi të situatës:
Metoda e jashtme është më e zakonshme në zhvillimin profesional të uebit sepse e mban HTML të rregullt dhe ju lejon të përditësoni stilet në shumë faqe në të njëjtën kohë.
CSS është shumë e dobishme në shumë mënyra. Këtu janë disa përfitime të përdorimit të CSS në zhvillimin e uebit:
Përdorimi i CSS është si të kesh një kuti veglash speciale. Çdo mjet në kutinë e veglave ju ndihmon të përmirësoni lehtësisht pamjen e faqes suaj të internetit. Ndërsa praktikoni, do të shihni se sa e fuqishme mund të jetë CSS për t'i bërë faqet e internetit të bukura dhe miqësore për përdoruesit.
Çdo faqe interneti që vizitoni përdor CSS në një farë mënyre. Nga faqet tuaja të preferuara të filmave vizatimorë në faqet e projekteve shkollore, CSS ndihmon në krijimin e një plan urbanistik argëtues dhe të lehtë për t'u lexuar. Kur shihni një faqe interneti shumëngjyrëshe me hapësirë të pastër dhe tekst të qartë, është CSS në punë.
Merrni parasysh dizajnin e faqeve të internetit të njohura si ato për lojëra, filma vizatimorë ose tregime në internet. Përdorimi i kujdesshëm i ngjyrave, shkronjave dhe paraqitjeve ndihmon për t'i bërë këto faqe interneti emocionuese dhe tërheqëse. CSS përdoret gjithashtu në aplikacione dhe sajte celulare, duke siguruar që përmbajtja të duket e mirë si në ekranet e mëdhenj ashtu edhe në telefonat e vegjël.
Në jetën e përditshme, CSS është e ngjashme me dekorimin e një dhome. Ju mund të zgjidhni një temë për dhomën tuaj, të varni fotografi shumëngjyrëshe dhe t'i rregulloni mjeshtërisht mobiljet tuaja. CSS bën të njëjtën gjë për faqet e internetit. Ai sjell rend dhe bukuri në hapësirën dixhitale, duke e bërë atë të këndshme për vizitorët.
Këtu janë pikat kryesore që mësuam rreth CSS:
CSS është një pjesë jetike e zhvillimit të uebit, duke i bërë faqet të bukura dhe të lehta për t'u naviguar. Ndërsa eksploroni më shumë dhe përpiqeni të ndërtoni faqet tuaja të internetit, mbani mend se CSS është mjeti juaj për të shprehur kreativitetin. Argëtohuni duke eksperimentuar me ngjyrat, fontet dhe paraqitjet, sepse çdo ndryshim i vogël shton magjinë e një faqe interneti të dizajnuar mirë.
Vazhdoni të praktikoni dhe vëzhgoni uebsajtet tuaja të preferuara. Vini re se si përdoren stile të ndryshme për të tërhequr vëmendjen tuaj dhe për të krijuar një përvojë të këndshme. Me kalimin e kohës, do të shihni se sa e fuqishme mund të jetë CSS në transformimin e strukturave të thjeshta HTML në uebfaqe tërheqëse vizualisht.