Back to the topics list

fletët e stilit kaskadë

Fletët e Stilit Cascading ( CSS ) në Zhvillimin e Uebit

Fletët e Stilit Cascading, ose CSS, janë një gjuhë që i tregon një faqeje interneti se si duhet të duket. CSS shton ngjyrë, stil dhe paraqitje në strukturën e thjeshtë të një faqeje interneti. Ashtu siç zgjidhni rrobat tuaja për t'u ndjerë mirë dhe për t'u dukur bukur, CSS ndihmon që një faqe interneti të duket tërheqëse dhe e zbukuruar. 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ë një gjuhë të thjeshtë. Do të mësojmë se çfarë është CSS , pse është i rëndësishëm dhe si funksionon me HTML.

Hyrje në CSS

CSS qëndron për Cascading Style Sheets (Fleta Stilesh Kaskaduese). Është një gjuhë e veçantë që përdoret për të stiluar faqet e internetit. Mendoni për CSS si bojën dhe dekorimet për një ndërtesë. Ndërtesa është bërë nga HTML , dhe CSS e bën atë të bukur. Duke përdorur CSS , ju mund të ndryshoni ngjyrën e sfondit, stilet e shkronjave dhe hapësirën rreth elementëve në faqen tuaj të internetit. CSS është një mjet që i ndihmon dizajnerët e faqeve të internetit t'i bëjnë faqet e internetit të duken më mirë dhe më argëtuese.

Imagjino sikur po ngjyrosësh një vizatim. Vijat e vizatimit janë si struktura bazë e një faqeje interneti. CSS është si lapsat me ngjyra dhe shënuesit që i japin jetë vizatimit. Me disa rregulla të thjeshta, mund ta ndryshosh të gjithë vizatimin nga të thjeshtë në shumëngjyrësh!

Pse përdorim CSS

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 ato. 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 e internetit më të këndshme për t'u vizituar.

Mendojeni CSS në si veshjen që zgjidhni. Nëse vishni rroba të ndryshme, dukeni ndryshe, por jeni prapë i njëjti person. CSS ndryshon pamjen e një faqeje interneti pa ndryshuar informacionin në të. Kjo e bën të thjeshtë përditësimin e dizajnit të një faqeje të tërë interneti duke redaktuar vetëm një skedar CSS .

Si funksionon CSS

CSS funksionon krah për krah me HTML. HTML është themeli që përcakton se ku shkojnë gjërat në një faqe interneti. CSS pastaj hyn në lojë për të shtuar ngjyra, shkronja dhe stile. Kur një shfletues ngarkon një faqe interneti, ai së pari ndërton strukturën me HTML dhe më pas zbaton stilet e përcaktuara në CSS .

CSS shkruhet 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 deklarimit përmban një ose më shumë deklarata. Çdo deklaratë ka një veti dhe një vlerë. Vetia ë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ë çelët, mund të shkruani një rregull që duket kështu:

 <code>trupi {
    ngjyra e sfondit: blu e çelët;
</code>

Ky rregull i thjeshtë ndryshon sfondin e të gjithë faqes.

Sintaksa Bazë e CSS

Një rregull bazë CSS ndjek një model të thjeshtë. Ai tregon përzgjedhësin dhe një bllok vetish dhe vlerash. Modeli duket kështu:

 <code>selektor {
    vetia: vlera;
</code>

Këtu, përzgjedhësi zgjedh se cilin element HTML duhet të synojë. Vetia është ajo që dëshironi të ndryshoni, dhe vlera është mënyra se si dëshironi ta ndryshoni atë.

Për shembull, nëse dëshironi që i gjithë teksti i paragrafit të jetë blu, shkruani:

 <code>p {
    ngjyra: blu;
</code>

Ky rregull i tregon shfletuesit të internetit se çdo element <p> (paragraf) duhet të ketë tekst blu.

Përzgjedhësit CSS

Përzgjedhësit CSS ju lejojnë të zgjidhni se cilët elementë në faqen tuaj të internetit do të ndikohen nga rregullat e stilit. Ekzistojnë disa lloje përzgjedhësish dhe secili prej tyre funksionon pak më ndryshe.

• Përzgjedhësi i Tipit: Ky përzgjedhës synon të gjithë elementët e një lloji të caktuar. Për shembull, <code>p {}</code> zgjedh çdo paragraf në faqe.
• Përzgjedhësi i Klasës: Ky shënjestron elementët që kanë një atribut specifik të klasës. Në HTML-në tuaj, ju shkruani <code><p class="greeting"></code> dhe në CSS y e shënjestroni atë me <code>.greeting {}</code>.
• Përzgjedhësi i ID-së: Ky përdoret për një element unik në faqe. Një element mund të ketë një atribut ID si p.sh. <code><h1 id="header"></code>. Në CSS, mund ta stiloni atë element me <code>#header {}</code>.

Këta përzgjedhës të ndryshëm ju japin shumë fuqi për të stilizuar pjesë specifike të faqes suaj të internetit. Ato ju lejojnë të targetoni elementët me saktësi dhe të vendosni se si duhet të duken.

Vetitë dhe Vlerat CSS së

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ë:

• ngjyra: Vendos ngjyrën e tekstit.
• ngjyra-e-backgroundit: Vendos ngjyrën e sfondit të një elementi.
• madhësia-e-fontit: Ndryshon madhësinë e tekstit.
• margin: Shton hapësirë ​​jashtë një elementi.
• mbushje: Shton hapësirë ​​brenda një elementi, rreth përmbajtjes.

Çdo veti 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ë bën që të gjitha paragrafët të kenë tekst të kuq. Vetia ngjyrë kontrollon se si shfaqet teksti dhe vlera e kuqe i tregon se çfarë ngjyre duhet të ketë.

Kaskada dhe Trashëgimia në CSS

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, renditja mund të vendosë se cili fiton. Kjo është e ngjashme me grumbullimin e blloqeve ku një bllok ndonjëherë mbulon një pjesë të një tjetri.

Një rregull i zakonshëm është se stilet e shkruara direkt brenda një elementi HTML (të quajtura stile brenda rreshtit) do të mbivendosen mbi stilet në skedarin tuaj CSS . Një rregull tjetër është se 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 e vendosni ngjyrën e tekstit të një <div> në jeshile, atëherë teksti brenda <div> shpesh do të shfaqet gjithashtu jeshil për shkak të trashëgimisë. Kjo ndihmon në ruajtjen e një dizajni të qëndrueshëm në një faqe interneti.

Ngjyrat dhe Fontet CSS

Me CSS , mund të ndryshoni ngjyrat në shumë mënyra. Mund të përdorni emra të zakonshëm ngjyrash si e kuqe , blu dhe jeshile . Mund të përdorni edhe kode heksadecimale si <code>#FF0000</code> për të kuqen, ose vlera RGB si <code>rgb(255, 0, 0)</code>.

Fontet janë një pjesë tjetër e rëndësishme e CSS . Një font është si stili i shkrimit me dorë që zgjidhni në një fletore. Në CSS , mund të ndryshoni familjen e fontit, madhësinë, trashësinë dhe stilin. Për shembull, nëse dëshironi që paragrafët tuaj të shfaqen në Arial, mund të përdorni:

 <code>p {
    familja-e-shkrimeve: Arial, sans-serif;
</code>

Ky rregull i tregon 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ë i disponueshëm.

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

Modeli i Kutisë CSS është një mënyrë për të kuptuar se si pjesët e ndryshme të një elementi janë të rregulluara në një faqe. Çdo element është si një kuti. Modeli i kutisë ka katër pjesë:

• Përmbajtja: Kjo është zona ku ndodhen teksti dhe imazhet tuaja.
• Mbushje: Kjo është hapësira rreth përmbajtjes brenda kutisë.
• Kufiri: Kjo është vija që shkon përreth mbushjes dhe përmbajtjes.
• Margjina: Kjo është hapësira jashtë kufirit që ndan elementin nga elementët e tjerë.

Imagjinoni një fotografi. Vetë fotografia është përmbajtja. Mbulesa që rrethon fotografinë është si mbushja. Korniza që e mban të gjithën së bashku është kufiri. Dhe hapësira përreth kornizës është margjina. 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.

Paraqitjet dhe Pozicionimi CSS

CSS nuk ka të bëjë vetëm me ngjyrat dhe shkronjat; ajo gjithashtu ju ndihmon të rregulloni elementët në një faqe interneti. Kjo quhet paraqitje dhe pozicionim. Me CSS, ju mund të vendosni se ku shfaqet secili element në faqe.

Ka disa mënyra për të kontrolluar paraqitjen e një faqeje interneti, duke përfshirë:

• Shfaq: Kjo veti përcakton se si shfaqet një element në paraqitje. Për shembull, <code>display: block;</code> bën që një element të zërë rreshtin e vet, ndërsa <code>display: inline;</code> lejon që elementët të jenë në të njëjtin rresht.
• Pozicioni: Kjo veti përcakton llojin e metodës së pozicionimit të përdorur për një element. Vlerat mund të jenë statike , relative , absolute ose fikse . Për shembull, <code>pozicioni: relativ;</code> lëviz një element në lidhje me pozicionin e tij normal.
• Flexbox: Flexbox është një mënyrë moderne për të rregulluar artikujt në rreshta ose kolona. Ai e bën më të lehtë rreshtimin e elementëve.

Përdorimi i këtyre teknikave të paraqitjes është si të rregullosh lodrat në një raft. Ju vendosni se ku do të shkojë secila lodër në mënyrë që të gjitha të kenë hapësirë ​​të mjaftueshme dhe të duken të pastra. Kjo e bën faqen tuaj të internetit më të organizuar dhe tërheqëse.

Shembull Kodi CSS

Ja një shembull se si HTML dhe CSS funksionojnë së bashku. Ky kod shembullor tregon një faqe interneti të thjeshtë me disa stilime:

 <kod><!DOCTYPE html>
<html>
<kreu>
  <stil>
    trup {
      ngjyra e sfondit: blu e çelët;
    }
    h1 {
      ngjyra: blu e errët;
      madhësia e shkronjave: 24px;
    }
    p {
      ngjyra: jeshile;
      madhësia e shkronjave: 18px;
    }
  </style>
</head>
<trupi>
  <h1>Faqja ime e parë në internet</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 sfond blu të çelët. Teksti i kokës është blu e errët dhe teksti i paragrafit është jeshil. CSS brenda etiketës <code><style></code> tregon se si shkruhen dhe zbatohen rregullat.

Si të lidhni CSS me HTML

Mund të shtoni CSS në HTML në tuaj në tre mënyra kryesore. Secila metodë ka përdorimin e vet në varësi të situatës:

• CSS: CSS shkruhet direkt në një element HTML duke përdorur atributin <code>style</code>. Për shembull: <code><p style="color: blue;">Përshëndetje</p></code> e ndryshon ngjyrën e tekstit të këtij paragrafi të vetëm në blu.
• CSS: Rregullat CSS shkruhen brenda një etikete <code><style></code> në seksionin head të dokumentit tuaj HTML . Kjo metodë është e dobishme kur punoni me një faqe interneti.
• CSS: Rregullat CSS vendosen në një skedar të veçantë, zakonisht të quajtur <code>style.css</code>. Ju e lidhni skedarin CSS me HTML në tuaj me etiketën <code><link></code>. Për shembull: <code><link rel="stylesheet" href="style.css"></code> Kjo e bën të lehtë aplikimin e të njëjtit stil në faqe të shumta.

Metoda e jashtme është më e zakonshme në zhvillimin profesional të uebit sepse e mban HTML në të pastër dhe ju lejon të përditësoni stilet në shumë faqe njëkohësisht.

Përfitimet e përdorimit të CSS

CSS është shumë i dobishëm në shumë mënyra. Ja disa përfitime të përdorimit të CSS në zhvillimin e uebit:

• Ndarja e Përmbajtjes dhe Stilit: HTML mban përmbajtjen dhe strukturën, ndërsa CSS menaxhon pamjen dhe dizajnin. Kjo ndarje e bën më të lehtë përditësimin e faqes suaj të internetit.
• Ripërdorshmëria: Pasi të krijoni një rregull CSS , mund ta përdorni atë në shumë elementë në faqe të ndryshme. Kjo kursen kohë dhe i mban të gjitha të qëndrueshme.
• Performancë e përmirësuar e faqes së internetit: Me CSS në skedarë të veçantë, shfletuesit mund të ngarkojnë stilet shpejt dhe ta shfaqin faqen tuaj të internetit më shpejt.
• Dizajn konsistent: CSS ndihmon në sigurimin që çdo faqe në faqen tuaj të internetit të duket e ngjashme. Kjo krijon një përvojë më të mirë për përdoruesit sepse ata mund ta kuptojnë dhe të lundrojnë lehtësisht në faqen tuaj.
• Mirëmbajtje e lehtë: Kur duhet të ndryshoni një stil, duhet të përditësoni vetëm një skedar CSS në vend të shumë skedarëve HTML . Kjo e bën menaxhimin e një faqeje interneti më të thjeshtë.

Përdorimi i CSS është si të kesh një kuti të veçantë mjetesh. Çdo mjet në kutinë e mjeteve ju ndihmon të përmirësoni lehtësisht pamjen e faqes suaj të internetit. Ndërsa praktikoni, do të shihni se sa i fuqishëm mund të jetë CSS në bërjen e faqeve të internetit të bukura dhe miqësore për përdoruesit.

CSS në Botën Reale

Çdo faqe interneti që vizitoni përdor CSS në një farë mënyre. Nga faqet tuaja të preferuara të vizatimeve vizatimore deri te faqet e projekteve shkollore, CSS ndihmon në krijimin e një paraqitjeje argëtuese dhe të lehtë për t’u lexuar. Kur shihni një faqe interneti shumëngjyrëshe me hapësira të pastra dhe tekst të qartë, është CSS në veprim.

Merrni në konsideratë dizajnin e faqeve të internetit të njohura si ato për lojëra, vizatime vizatimore ose histori online. Përdorimi i kujdesshëm i ngjyrave, shkronjave dhe paraqitjeve ndihmon që këto faqe interneti të jenë emocionuese dhe tërheqëse. CSS përdoret gjithashtu në aplikacione dhe faqe interneti për celularë, duke siguruar që përmbajtja të duket mirë si në ekranet e mëdha ashtu edhe në telefonat e vegjël.

Në jetën e përditshme, CSS është e ngjashme me dekorimin e një dhome. Mund të zgjidhni një temë për dhomën tuaj, të varni fotografi shumëngjyrëshe dhe të rregulloni mobiljet tuaja me kujdes. CSS bën të njëjtën gjë për faqet e internetit. Ai sjell rregull dhe bukuri në hapësirën dixhitale, duke e bërë atë të këndshme për vizitorët.

Përmbledhje e pikave kryesore

Ja pikat kryesore që mësuam rreth CSS:

• Përkufizimi: CSS qëndron për Cascading Style Sheets dhe përdoret për të stiluar faqet e internetit.
• Roli në Zhvillimin e Uebit: CSS i bën faqet e internetit të duken tërheqëse duke shtuar ngjyra, fonte dhe paraqitje.
• Sintaksa Bazë: Një rregull CSS përdor një përzgjedhës dhe një bllok deklarimi ku vetitë caktohen me vlera.
• Selektorët: Selektorët e tipit, klasës dhe identifikuesit ndihmojnë në synimin e elementëve specifikë HTML .
• Vetitë dhe Vlerat: CSS përdor veti si ngjyra, ngjyra e sfondit dhe marzhi për të kontrolluar aspekte të ndryshme të dizajnit të faqes së internetit.
• Kaskada dhe Trashëgimia: Rregullat mund të mbivendosen njëra-tjetrën dhe stilet mund të kalohen nga elementët prindër te elementët fëmijë.
• Modeli i Kutisë: Çdo element HTML trajtohet si një kuti me përmbajtje, mbushje, kufi dhe diferencë.
• Paraqitjet dhe Pozicionimi: CSS ofron metoda për të rregulluar elementët në faqe duke përdorur veti si shfaqja, pozicioni dhe Flexbox.
• Metodat për të aplikuar CSS: CSS mund të aplikohet brenda linje, brenda seksionit të kokës ose jashtë përmes një fletë stili të veçantë.
• Përfitimet: CSS ndan përmbajtjen nga prezantimi, mundëson ripërdorshmërinë dhe siguron një dizajn të qëndrueshëm në të gjitha faqet e internetit.

CSS është një pjesë thelbësore e zhvillimit të faqeve të internetit, duke i bërë faqet e internetit 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, mos harroni 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 i shton magjinë një faqeje interneti të dizajnuar mirë.

Vazhdoni të praktikoni dhe të vëzhgoni faqet tuaja të preferuara të internetit. 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 i fuqishëm mund të jetë CSS në transformimin e strukturave të thjeshta HTML në faqe interneti tërheqëse vizualisht.