CSS: stilizimi i faqes

Pamja është punë më vete nga struktura

Faqet e tua HTML funksionojnë, por duken të thata: tekst i zi, lidhje blu, sfond i bardhë, hapësirë që s'ia vlen ta quash hapësirë. Kjo është me qëllim. Puna e HTML-së është struktura, ndërsa një gjuhë e dytë merret me pamjen. Quhet CSS, shkurt për Cascading Style Sheets, dhe përshkruan se si duhet të duken në ekran elementët që i shkrove tashmë: ngjyra, madhësia, hapësira dhe shkronjat e tyre.

Ta mbash të ndara këto të dyja është një nga idetë më të mira në zhvillimin e web-it. HTML thotë çfarë është secila pjesë; CSS thotë si duhet të duket. Ndrysho stilin në një vend dhe çdo element që përputhet përditësohet menjëherë, pa prekur asnjë fjalë të përmbajtjes.

Forma e një rregulli

Një rregull CSS ka një formë të thjeshtë e të fiksuar. Emërton çfarë do të stilizosh, pastaj rendit ndryshimet brenda kllapave gjarpërore.

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

Lexoje në tri pjesë. Përzgjedhësi (selector), këtu h1, zgjedh cilëve elementë u zbatohet rregulli: çdo <h1> në faqe. Brenda kllapave vijnë deklaratat, secila një veti (property) dhe një vlerë të ndara me dy pika dhe të mbyllura me pikëpresje. Kështu color: white; cakton ngjyrën e tekstit, dhe text-align: center; e vendos në qendër. Ai model, veti: vlerë;, është çdo rresht CSS që do të shkruash ndonjëherë. Pikëpresja në fund të çdo rreshti ka rëndësi; hiqe dhe rreshti tjetër mund të dështojë në heshtje.

Stilizim sipas elementit

Mënyra më e drejtpërdrejtë për të zgjedhur është sipas emrit të elementit, dhe mund të stilizosh sa të duash. Këtu caktojmë sfondin e gjithë faqes, pastaj rregullojmë titujt dhe paragrafët.

body {
  background-color: lightblue;
}

h1 {
  color: darkblue;
}

p {
  font-family: Verdana, sans-serif;
}

Meqë body mbështjell gjithçka, stilizimi i tij cakton sfondin për gjithë faqen. Rregulli p ndryshon shkronjat e çdo paragrafi njëherësh. Vër re sa pak duhej të thoshe për të ristilizuar çdo paragraf në faqe: një rregull, dhe të gjithë e ndjekin.

Këshillë

Kur një ngjyrë ose madhësi del gabim, kontrollo gjërat e vogla më parë: një pikëpresje që mungon, një veti e shkruar gabim si colour në vend të color, ose një vlerë pa njësi ku duhet një e tillë. CSS nuk njofton gabim; thjesht e kapërcen rreshtin që s'e kupton dhe vazhdon.

Lidhja e fletës së stilit me faqen

CSS zakonisht rri në skedarin e vet, të themi style.css, që një fletë stili të veshë shumë faqe. E bashkon me një faqe me një rresht brenda <head>.

<head>
  <title>Kopshti i lagjes</title>
  <link rel="stylesheet" href="style.css">
</head>

Etiketa <link> i thotë shfletuesit të ngarkojë style.css dhe të zbatojë rregullat e saj në këtë faqe. Vendose të njëjtin rresht në çdo faqe që duhet ta ndajë pamjen, dhe ke një vend të vetëm për të kontrolluar pamjen e një sajti të tërë.

Një shembull i punuar: ngrohja e një faqeje të thatë

Merr faqen e thatë të njoftimit nga më parë. Pa ndryshuar asnjë fjalë të HTML-së, mund t'i japim një pamje më të qetë e më miqësore me një fletë stili të shkurtër.

body {
  background-color: cornsilk;
  font-family: Georgia, serif;
}

h1 {
  color: green;
}

Tri prekje të vogla bëjnë shumë punë. background-color e ndërron të bardhën e ashpër me një krem të butë, font-family i jep tekstit shkronja më të ngrohta, dhe titulli merr një jeshile që i shkon një kopshti. E njëjta përmbajtje, e njëjta strukturë, një faqe që tani ndihet e kujdesur. Ky është i gjithë premtimi i CSS-së: pamja, e kontrolluar nga një vend i vetëm e i qetë.

Mëso më shumë

Tri veti mjaftojnë për të nisur, por CSS ka shumë të tjera. Ngjyrat mund të shkruhen si kode të sakta që nisin me #, si #fdf6e3 për krem ose #2b6b3f për jeshile. Madhësitë jepen shpesh në piksela, shkruar px. Vetia margin e shtyn përmbajtjen larg skajeve të dritares që të marrë frymë, dhe line-height e hap hapësirën mes rreshtave të tekstit që paragrafët të lexohen më lehtë:

body {
  background-color: #fdf6e3;
  margin: 40px;
}

p {
  font-size: 18px;
  line-height: 1.5;
}

Provoje tani

Merr çdo faqe HTML që ke dhe krijo një style.css pranë saj. Shto tri rregulla: një background-color te body, një color te h1, dhe një font-family te p. Lidhe nga <head> me <link rel="stylesheet" href="style.css">, pastaj ringarko faqen dhe shiko të tria ndryshimet të shfaqen njëherësh.

Provo veten

Te rregulli p { color: green; }, emërto secilën nga tri pjesët dhe thuaj çfarë vendos secila.
Pse është përparësi që CSS të rrijë në një skedar të veçantë dhe të lidhet nga <head>, në vend që të përzihet brenda përmbajtjes HTML?
Një paragraf nuk pranon ta ndryshojë madhësinë sido që të shkruash. Duke ditur se CSS nuk njofton gabime, çfarë lloj gabimesh të vogla do të kontrolloje më parë?

Nga vjen ky mësim

Ndërtuar mbi

Data Structures and Algorithms: web development session

Kurset e alphaPlan ndërtohen mbi programe të zhvilluara në klasë, e nuk shpiken për web-in. Kur një pohim mbështetet mbi një standard të jashtëm ose mbi një rast të raportuar, ai emërtohet më sipër që ta kontrollosh vetë e të mos na besosh në fjalë.

Ky kurs u zhvillua nga alphaPlan Center mbi bazën e programeve të realizuara në partneritet me rrjetin American Corners.

Gjete diçka të paqartë, të vjetruar ose që mund të përmirësohet? Sugjero një përmirësim