Back to the topics list

kaskadni stilski listovi

Cascading Style Sheets (CSS) u web razvoju

Cascading Style Sheets, ili CSS, jezik je koji govori web stranici kako izgleda. CSS dodaje boju, stil i izgled jednostavnoj strukturi web stranice. Baš kao što birate svoju odjeću da biste se osjećali dobro i izgledali uredno, CSS pomaže da se web stranica dotjera i izgleda privlačno. U web razvoju koristimo CSS za promjenu boje, veličine i položaja teksta i okvira na stranici. Ova lekcija će vas na jednostavnom jeziku upoznati s osnovama CSS-a. Naučit ćemo što je CSS, zašto je važan i kako funkcionira s HTML-om.

Uvod u CSS

CSS je kratica za Cascading Style Sheets. To je poseban jezik koji se koristi za stiliziranje web stranica. Zamislite CSS kao boju i ukrase za zgradu. Zgrada je napravljena od HTML-a, a CSS je čini lijepom. Pomoću CSS-a možete promijeniti boju pozadine, stilove fonta i prostor oko elemenata na svojoj web stranici. CSS je alat koji pomaže web dizajnerima da web stranice izgledaju bolje i zabavnije.

Zamislite da bojite crtež. Linije crteža su poput osnovne strukture web stranice. CSS je poput bojica i markera koji daju život crtežu. Uz nekoliko jednostavnih pravila, možete promijeniti cijeli svoj crtež iz običnog u šareni!

Zašto koristimo CSS

CSS se koristi kako bi web stranice bile atraktivne i jednostavne za korištenje. Drži stil odvojenim od sadržaja. To znači da riječi i slike na stranici (koje pruža HTML) ostaju iste, dok CSS kontrolira njihov izgled. Kada ažurirate stil, ne morate mijenjati sadržaj. Ovo odvajanje pomaže web programerima da rade brže i čini stranice ugodnijim za posjećivanje.

Zamislite CSS kao odjeću koju odaberete. Ako nosite drugačiju odjeću, izgledate drugačije, ali ste i dalje ista osoba. CSS mijenja izgled web stranice bez promjene informacija na njoj. To olakšava ažuriranje dizajna cijele web stranice uređivanjem samo jedne CSS datoteke.

Kako CSS radi

CSS radi ruku pod ruku s HTML-om. HTML je temelj koji određuje gdje se stvari odvijaju na web stranici. Zatim dolazi CSS za dodavanje boja, fontova i stila. Kada preglednik učitava web stranicu, prvo gradi strukturu pomoću HTML-a, a zatim primjenjuje stilove definirane u CSS-u.

CSS je napisan kao skup pravila. Svako pravilo ima dva dijela: selektor i blok deklaracije. Selektor govori pregledniku koji HTML element stilizirati. Deklaracijski blok sadrži jednu ili više deklaracija. Svaka deklaracija ima svojstvo i vrijednost. Svojstvo je ono što želite promijeniti, a vrijednost govori kako to promijeniti.

Na primjer, da postavite boju pozadine stranice na svijetloplavu, možete napisati pravilo koje izgleda ovako:

 <code>tijelo {
    boja pozadine: svijetloplava;
}</code>

Ovo jednostavno pravilo mijenja pozadinu cijele stranice.

Osnovna sintaksa CSS-a

Osnovno CSS pravilo slijedi jednostavan obrazac. Prikazuje selektor i blok svojstava i vrijednosti. Uzorak izgleda ovako:

 <code>selektor {
    svojstvo: vrijednost;
}</code>

Ovdje selektor odabire koji će HTML element ciljati. Svojstvo je ono što želite promijeniti, a vrijednost je način na koji to želite promijeniti.

Na primjer, ako želite da sav tekst paragrafa bude plav, napišite:

 <code>p {
    boja: plava;
}</code>

Ovo pravilo govori web pregledniku da svaki element <p> (odlomak) treba imati plavi tekst.

CSS selektori

CSS selektori omogućuju vam da odaberete na koje elemente na vašoj web stranici će utjecati pravila stila. Postoji nekoliko vrsta selektora, a svaki od njih radi malo drugačije.

• Birač vrste: Ovaj birač cilja sve elemente određene vrste. Na primjer, <code>p {}</code> odabire svaki odlomak na stranici.
• Odabir klase: cilja na elemente koji imaju određeni atribut klase. U svom HTML-u napišete <code><p class="greeting"></code>, au CSS-u to ciljate s <code>.greeting {}</code>.
• ID birač: koristi se za jedinstveni element na stranici. Element može imati ID atribut kao što je <code><h1 id="header"></code>. U CSS-u taj element možete stilizirati s <code>#header {}</code>.

Ovi različiti selektori daju vam mnogo mogućnosti za stiliziranje određenih dijelova vaše web stranice. Omogućuju vam da precizno ciljate elemente i odlučite kako bi trebali izgledati.

CSS svojstva i vrijednosti

CSS nudi mnogo različitih svojstava koja možete koristiti za stiliziranje svoje web stranice. Svako svojstvo omogućuje promjenu određenog aspekta izgleda elementa. Neka uobičajena svojstva su:

• boja: Postavlja boju teksta.
• boja pozadine: Postavlja boju pozadine elementa.
• font-size: Mijenja veličinu teksta.
• margina: dodaje prostor izvan elementa.
• padding: dodaje prostor unutar elementa, oko sadržaja.

Nakon svakog CSS svojstva slijedi vrijednost. Na primjer, da biste tekstu dali crvenu boju, možete napisati:

 <code>p {
    boja: crvena;
}</code>

Ovo jednostavno pravilo čini da svi odlomci imaju crveni tekst. Svojstvo color kontrolira kako se tekst pojavljuje, a vrijednost red mu govori koje boje treba biti.

Kaskada i nasljeđivanje u CSS-u

Riječ "kaskadno" u CSS-u znači da stilovi mogu teći iz jednog pravila u drugo. Ako se dva pravila mogu primijeniti na isti element, poredak može odlučiti koje od njih pobjeđuje. Ovo je slično slaganju blokova gdje jedan blok ponekad pokriva dio drugog.

Jedno uobičajeno pravilo je da će stilovi napisani izravno unutar HTML elementa (zvani umetnuti stilovi) nadjačati stilove u vašoj CSS datoteci. Drugo pravilo je da ako je nadređeni element stiliziran, njegovi podređeni elementi mogu naslijediti taj stil osim ako im se ne kaže drugačije.

Na primjer, ako postavite boju teksta <div>-a na zelenu, onda će tekst unutar <div>-a često također biti zelen zbog nasljeđivanja. To pomaže u održavanju dosljednog dizajna web stranice.

CSS boje i fontovi

Pomoću CSS-a možete mijenjati boje na mnogo načina. Možete koristiti uobičajene nazive boja kao što su crvena , plava i zelena . Također možete koristiti heksadecimalne kodove kao što je <code>#FF0000</code> za crvenu boju ili RGB vrijednosti kao što je <code>rgb(255, 0, 0)</code>.

Fontovi su još jedan važan dio CSS-a. Font je poput stila rukopisa koji odaberete u bilježnici. U CSS-u možete promijeniti obitelj fontova, veličinu, težinu i stil. Na primjer, ako želite da se vaši odlomci pojave u Arialu, možete koristiti:

 <code>p {
    obitelj fontova: Arial, sans-serif;
}</code>

Ovo pravilo govori pregledniku da prikaže tekst u fontu Arial ako je dostupan i da koristi drugi sličan font ako nije.

Mijenjanje boja i fontova pomoću CSS-a čini tekst lakšim za čitanje, a vašu web stranicu zanimljivijom za gledanje.

CSS okvirni model

CSS Box Model je način da shvatite kako su različiti dijelovi elementa raspoređeni na stranici. Svaki element je poput kutije. Model kutije ima četiri dijela:

• Sadržaj: ovo je područje gdje se nalaze vaš tekst i slike.
• Padding: Ovo je prostor oko sadržaja unutar okvira.
• Obrub: Ovo je linija koja ide oko ispune i sadržaja.
• Margina: Ovo je prostor izvan granice koji odvaja element od ostalih elemenata.

Zamislite fotografiju. Sama fotografija je sadržaj. Otirač koji okružuje fotografiju je poput podstave. Okvir koji sve drži zajedno je bordura. A prostor oko okvira je margina. Koristeći ovaj model, možete osigurati da svi dijelovi vašeg dizajna imaju odgovarajući prostor i ravnotežu.

CSS izgled i pozicioniranje

CSS se ne odnosi samo na boje i fontove; također vam pomaže rasporediti elemente na web stranici. To se zove raspored i pozicioniranje. Pomoću CSS-a možete odlučiti gdje će se koji element pojaviti na stranici.

Postoji nekoliko načina za kontrolu izgleda web stranice, uključujući:

• Prikaz: ovo svojstvo definira kako se element pojavljuje u izgledu. Na primjer, <code>display: block;</code> čini da element zauzima vlastiti red, dok <code>display: inline;</code> dopušta elementima da budu u istom retku.
• Pozicija: ovo svojstvo postavlja vrstu metode pozicioniranja koja se koristi za element. Vrijednosti mogu biti statične , relativne , apsolutne ili fiksne . Na primjer, <code>position: relative;</code> pomiče element u odnosu na njegov normalan položaj.
• Flexbox: Flexbox je moderan način raspoređivanja stavki u retke ili stupce. Olakšava poravnavanje elemenata.

Korištenje ovih tehnika rasporeda je poput slaganja igračaka na polici. Vi odlučujete gdje će koja igračka ići kako bi sve imale dovoljno mjesta i izgledale uredno. Ovo vašu web stranicu čini organiziranijom i privlačnijom.

Primjer CSS koda

Evo primjera kako HTML i CSS rade zajedno. Ovaj primjer koda prikazuje jednostavnu web stranicu s određenim stilom:

 <code><!DOCTYPE html>
<html>
<glava>
  <stil>
    tijelo {
      boja pozadine: svijetloplava;
    }
    h1 {
      boja: tamnoplava;
      veličina fonta: 24px;
    }
    p {
      boja: zelena;
      veličina fonta: 18px;
    }
  </style>
</head>
<tijelo>
  <h1>Moja prva web stranica</h1>
  <p>Ovo je jednostavna web stranica oblikovana pomoću CSS-a.</p>
</body>
</html></code>

Ovaj kod stvara web stranicu sa svijetloplavom pozadinom. Tekst zaglavlja je tamnoplav, a tekst odlomka je zelen. CSS unutar oznake <code><style></code> pokazuje kako se pravila pišu i primjenjuju.

Kako povezati CSS s HTML-om

Možete dodati CSS u svoj HTML na tri glavna načina. Svaka metoda ima vlastitu upotrebu ovisno o situaciji:

• Inline CSS: CSS je napisan izravno u HTML elementu pomoću atributa <code>style</code>. Na primjer: <code><p style="color: blue;">Hello</p></code> mijenja boju teksta ovog pojedinačnog odlomka u plavu.
• Interni CSS: CSS pravila napisana su unutar oznake <code><style></code> u odjeljku glave vašeg HTML dokumenta. Ova metoda je korisna kada radite s jednom web stranicom.
• Vanjski CSS: CSS pravila smještena su u zasebnu datoteku, obično pod nazivom <code>style.css</code>. CSS datoteku povezujete sa svojim HTML-om pomoću oznake <code><link></code>. Na primjer: <code><link rel="stylesheet" href="style.css"></code> Ovo olakšava primjenu istog stila na više stranica.

Eksterna metoda najčešća je u profesionalnom web razvoju jer održava HTML urednim i omogućuje ažuriranje stilova na više stranica odjednom.

Prednosti korištenja CSS-a

CSS je vrlo koristan na mnogo načina. Evo nekih prednosti korištenja CSS-a u web razvoju:

• Odvajanje sadržaja i stila: HTML drži sadržaj i strukturu, dok CSS upravlja izgledom i dizajnom. Ovo odvajanje olakšava ažuriranje vaše web stranice.
• Ponovno korištenje: nakon što stvorite CSS pravilo, možete ga koristiti na mnogim elementima na različitim stranicama. Time se štedi vrijeme i sve ostaje dosljedno.
• Poboljšana izvedba web stranice: S CSS-om u zasebnim datotekama, preglednici mogu brzo učitati stilove i brže prikazati vašu web stranicu.
• Dosljedan dizajn: CSS osigurava da svaka stranica na vašoj web stranici izgleda slično. Ovo stvara bolje iskustvo za korisnike jer mogu lako razumjeti vašu stranicu i kretati se po njoj.
• Jednostavno održavanje: Kada trebate promijeniti stil, trebate ažurirati samo jednu CSS datoteku umjesto mnogo HTML datoteka. To čini upravljanje web stranicom jednostavnijom.

Korištenje CSS-a je kao da imate posebnu kutiju s alatima. Svaki alat u kutiji s alatima pomaže vam da jednostavno poboljšate izgled svoje web stranice. Dok vježbate, vidjet ćete koliko moćan CSS može biti u izradi web stranica lijepim i jednostavnim za korištenje.

CSS u stvarnom svijetu

Svaka web stranica koju posjetite na neki način koristi CSS. Od stranica s vašim omiljenim crtanim filmovima do stranica školskih projekata, CSS pomaže stvoriti zabavan i čitljiv izgled. Kada vidite šarenu web-stranicu s urednim razmakom i jasnim tekstom, na djelu je CSS.

Razmislite o dizajnu popularnih web stranica poput onih za igre, crtiće ili online priče. Promišljena upotreba boja, fontova i izgleda pomaže učiniti ove web stranice uzbudljivim i privlačnim. CSS se također koristi u aplikacijama i mobilnim web-lokacijama, osiguravajući da sadržaj izgleda dobro i na velikim zaslonima i na malim telefonima.

U svakodnevnom životu CSS je sličan uređenju sobe. Možete odabrati temu za svoju sobu, objesiti šarene slike i uredno rasporediti namještaj. CSS čini isto za web stranice. Unosi red i ljepotu u digitalni prostor, čineći ga ugodnim za posjetitelje.

Sažetak ključnih točaka

Evo glavnih točaka koje smo naučili o CSS-u:

• Definicija: CSS je kratica za Cascading Style Sheets i koristi se za stiliziranje web stranica.
• Uloga u web razvoju: CSS čini da web stranice izgledaju privlačno dodavanjem boja, fontova i izgleda.
• Osnovna sintaksa: CSS pravilo koristi selektor i blok deklaracije gdje su svojstva postavljena s vrijednostima.
• Birači: Birači tipa, klase i ID-a pomažu u ciljanju određenih HTML elemenata.
• Svojstva i vrijednosti: CSS koristi svojstva kao što su boja, boja pozadine i margina za kontrolu različitih aspekata dizajna web stranice.
• Kaskada i nasljeđivanje: Pravila mogu nadjačati jedno drugo, a stilovi se mogu prenositi s roditeljskih elemenata na podređene elemente.
• Model okvira: svaki HTML element tretira se kao okvir sa sadržajem, ispunom, obrubom i marginom.
• Izgledi i pozicioniranje: CSS pruža metode za raspoređivanje elemenata na stranici pomoću svojstava kao što su prikaz, položaj i Flexbox.
• Metode za primjenu CSS-a: CSS se može primijeniti u liniji, interno u odjeljku zaglavlja ili eksterno putem zasebne tablice stilova.
• Prednosti: CSS odvaja sadržaj od prezentacije, omogućuje ponovnu upotrebu i osigurava dosljedan dizajn na svim web stranicama.

CSS je vitalni dio web razvoja, koji stranice čini lijepima i lakima za navigaciju. Dok budete istraživali više i pokušavali izgraditi vlastite web stranice, zapamtite da je CSS vaš alat za izražavanje kreativnosti. Zabavite se eksperimentirajući s bojama, fontovima i izgledima jer svaka mala promjena pridonosi čaroliji dobro dizajnirane web stranice.

Nastavite vježbati i promatrati svoje omiljene web stranice. Primijetite kako se različiti stilovi koriste za zaokupljanje vaše pažnje i stvaranje ugodnog iskustva. S vremenom ćete vidjeti koliko CSS može biti moćan u pretvaranju jednostavnih HTML struktura u vizualno privlačne web stranice.