O HTMLu smo nešto već naučili, i smatramo se ne baš običnim početnicima. Znamo napraviti stranicu ili jednostavan sajt koji dobro izgleda i funkcionira. Ako je tako onda je pravo vrijeme da stvari malo zakompliciramo učenjem CSSa.
Ova lekcija dat će osnove teorije, općenita pravila pisanja stilova. Nakon što je proučite, potražite "tips 'n tricks" na našim ili drugim stranicama.
Nekoliko osnovnih stvari o CSSu za uvod
- CSS predstavlja najpraktičnije rješenje za odvajanje sadržaja web stranice od načina zadavanja njena izgleda. Sadržaj, kao i do sad zadajemo u HTMLu, no sve oblikovanje elemenata možemo izvesti CSSom. Preporučivo je što više odvojiti sam sadržaj od kontrole izgleda tog sadržaja iz više razloga poput veće preglednosti samih stranica, lakših izmjena i sadržaja i designa, lakše kontrole izgleda pogotovo kad je riječ o složenim i dinamičkim stranicama itd.
- CSS dolazi od skraćenice za Cascading Style Sheets , prevodite si sami uz malu pomoć za Cascading: tom riječju se naglašava da se stilovi mogu kombinirati, odnosno da na jedan element web stranice može utjecati više stilova odjednom.
- Stilove možemo spremiti na različita mjesta, no najlukavije je sve stilove snimiti u vanjsku datoteku s nastavkom *.css . Tada jednu te istu datoteku sa stilovima možemo uključiti u više stranica. To znači da izmjenom CSSa u toj vanjskoj datoteci možemo promijeniti izgled mnogih stranica odjednom, a to je svakako veliki korak ka odvajanju sadržaja od designa. Naravno, takve stranice su manje i osjetno brže se učitavaju (CSS datoteka se učitava samo prvi put, a svaki slijedeći se učitava iz privremeno spremljenog internet sadržaja sa računala).
- CSSom zapravo definiramo kako želimo da određeni tagovi (elementi stranice) izgledaju. Primjena CSSa ne oslobađa nas pisanja HTML tagova, već određivanja njihova izgleda samim HTMLom (one dodatne vrijednosti u samom tagu)
- CSS je odavna (otprilike verzije 4 najpopularnijih web preglednika) široko prihvaćen i postao standardom. Stranice koje koriste CSS normalno su vidljive u svim programima za pregled Internet sadržaja.
Osnove o sintaksi CSSa
Za početak nekoliko osnovnih uputa o sintaksi CSSa. Iako danas postoje WYSWYG editori s mogućnošću zadavanja CSS stilova gotovo u potpunosti bez poznavanja samog CSSa, osloniti se samo na njih bilo bi krivo. Mnogi priznati webmajstori i danas CSSove pišu ručno dok se pri izradi HTML elemenata služe WYSWYG editorom. Osim toga, malo dodatnog znanja nije na odmet.
selektor, svojstvo, vrijednost
U osnovi, sintaksa CSSa sastoji se od tri osnovna elementa:
- selektor (u nedostatku ili nepoznavanju boljeg hrvatskog termina)
- svojstvo
- vrijednost
Općenito stil je zadan na slijedeći način:
Selektor je zapravo HTML tag odnosno element stranice kojeg želimo oblikovati (npr <body>), svojstvo je neko od svojstava tog elemenata koje se može mijenjati npr. boja pozadine (background-color), dok je vrijednost zapravo nova vrijednost za odabrano svojstvo (npr. "red" - crvena boja). Dakle stil kojim bismo pozadinu cijele stranice (ili mnogih stranica!) obojali u crveno glasio bi:
body {
background-color: red;
}
Ako se vrijednost zadaje s više riječi, potrebno ju je staviti u navodnike kao u slijedećem primjeru kojim bismo za font u svim odlomcima na stranici zadali "sans serif":
p {font-family: "sans serif"}
Dozvoljeno je i grupiranje selektora pa je moguć i ovakav stil kojim sve vrste naslova u dokumentu bojamo u zeleno:
h1,h2,h3,h4,h5,h6
{
color: green
}
Slijedeći način zadavanja omogućuje ulančavanje selektora, formatiranje će se dogoditi samo ako se tag koji odgovara desnom selektoru nalazi unutar taga koji odgovara lijevom selektoru:
h1 strong {color: red}
Ovo gore znači da će se svaki dio omeđen tagovima <strong> koji se nalazi u naslovu vrste <h1> prikazati crvenom bojom. To ne znači da će ostatak naslova biti crven, niti da će drugi <strong> tagovi (oni izvan <h1> naslova) biti crveni.
Ulančanih selektora može biti i više od dva.
CSS klase
S do sad naučenim znali bismo promijeniti izgled svih elemenata jedne vrste na stranici i takva primjena CSSa često se naziva redefiniranjem HTML oznake. U praksi često želimo da više istovrsnih elemenata izgleda međusobno drugačije, npr. da imamo više različitih vrsta teksta u odlomcima. Kako to postići CSSom?
Tu mogućnost daju nam klase.
Klasa ima svoje ime (koje sami smišljamo) a od selektora je odvojena (ili s njim spojena, kako hoćete) točkom. U slijedećem primjeru definiramo dvije klase za dvije različite vrste odlomka koje želimo imati u svom dokumentu:
p.desno {text-align: right}
p.sredina {text-align: center}
Gornjim redom smo definirali dvije klase. Kako sad u samom HTML dokumentu napraviti dva različita odlomka, odnosno kako te klase primijeniti? Način je vidljiv iz slijedećeg primjera, koristi se riječ "class" i znak jednakosti pri zadavanju odlomka:
<p class="desno">
Ovaj odlomak teksta bit će poravnat s desne strane.
</p>
<p class="sredina">
Ovaj odlomak bit će horizontalno centriran.
</p>
Za pojedinu HTML oznaku moguće je zadati samo jednu klasu. Istina je da se CSS stilovi mogu kombinirati, ali to se izvodi na drugi način i o tome nešto kasnije.
Klasu je moguće zadati i bez selektora i to se najčešće i radi. Važno je naglasiti da ime klase u tom slučaju započinje s točkom. Na taj način moguće je klasu primijeniti na bilo koji tag, a ne samo na onaj odabran selektorom kao u slijedećem primjeru:
.centriraj {text-align: center}
Evo primjera gdje ćemo istu, gore zadanu klasu ".centriraj" primijeniti i na odlomak i na naslov (<p> i <h1>):
<h1 class="centriraj">
Ovaj naslov bit će horizontalno centriran.
</h1>
<p class="centriraj">
I ovaj odlomak bit će horizontalno centriran.
</p>
id selektori
Većini elemenata stranice možemo dodijeliti "jedinstveni matični broj" odnosno "id". Tim brojem (koji zapravo i ne mora biti broj, može sadržavati i slova) može se koristiti i Javascript, ali i CSS.
Korištenje id selektora je, osim po sintaksi, različito od korištenja klasa i po tome što se jednom definirana klasa može primijeniti na više html elemenata, dok se stil definiran pomoću id selektora primjenjuje samo na jedan jedini element stranice (naravno, na onu html oznaku s odgovarajućim id-om). Da skratimo, evo primjeratakvog zadavanja stila, obratite pozornost na "#" između selektora i id-a:
h3#naslov1 {
text-align: center;
color: red
}
Da bi tako zadan stil bio primjenjen na neki naslov dovoljno mu je samo dodijeliti odgovarajući id.
<h3 id="naslov1">Ovo je nekakav naslov </h3>
Vrrrrrrllllooo važno: na jednoj stranici - dokumentu ne smiju se nalaziti dva taga s istim id-om, on mora biti jedinstven!
Kamo spremiti i kako primijeniti stilove?
zasebna datoteka
Zasebna datoteka je najbolja solucija iako često ne i dovoljna. Stilove definirane kako je prethodno opisano spremimo u tekst datoteku i promijenimo joj nastavak u css i to je to. Ne treba ništa dodavati ili oduzimati.
Da bismo takvu css datoteku povezali s HTML stranicom, odnosno da bismo omogućili upotrebu tih stilova na nekoj HTML stranici, potrebno ju je s njom nekako spojiti. To se izvodi na jedan od dva slijedeća načina: naredbom "import" ili naredbom "link" u zaglavlju dokumenta (stranice na kojoj želimo uključiti stilove iz vanjske css datoteke).
Princip ćemo objasniti na primjeru gdje imamo datoteku sa stilovima "stiloviprobe.css", a povezivanje s HTML stranicom izvodimo jednom pomoću import, a drugi put (neka druga HTML stranica) pomoću link naredbe:
<head>
<title>Dokument s importiranim cssom </title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-2">
<style type="text/css">
<!--
@import url("stiloviprobe.css");
-->
</style>
</head>
<head>
<title>Dokument s linkanim cssom </title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-2">
<link href="/stiloviprobe.css" rel="stylesheet" type="text/css">
</head>
unutarnji CSS
Ako stilove kreiramo s namjerom da budu primjenjeni na samo jednu stranicu, tada je ipak zgodnije stilove zadati u zaglavlju dokumenta na način kao u slijedećem primjeru. "Pozivanje" CSSa je isto kao i iz vanjskog dokumenta.
<head>
<title>Dokument s unutarnjim cssom </title>
<style type="text/css">
<!--
hr {color: black}
p {margin-left: 20px}
body {background-image: url("slike/pozadina.gif")}
-->
</style>
</head>
inline CSS
Ovaj način zadavanja CSSa treba izbjegavati. Riječ je o tome da je moguće zadati CSS na onom mjestu gdje ga i primjenjujemo (unutar taga kojemu određujemo izgled). Time se, naravno, gubi prvotni smisao odvajanja sadržaja od zadavanja izgleda. Primjer za zadavanje uvučenog odlomka inline CSSom slijedi:
<p style="color: red; margin-left: 20px">
Ovo je taj odlomak
</p>
Sukobi oko nasljedstva
Razumijevanje mehanizma nasljeđivanja je važno za pisanje dobrih stilova. A što nasljeđivanje zapravo znači?
Ukratko: ako se jedan element stranice nalazi unutar drugog elementa stranice na kojeg je primjenjen neki stil, tada se i na njegov prikaz odnose oni dijelovi stila vanjskog elementa koji su primjenjivi na njega. To je zapravo logično, uvjerimo se na slijedećem primjeru:
p { color: red }
...
<p>probni odlomak s <strong>podebljanim</strong> tekstom.</p>
Jasno je da će cijeli odlomak pa i njegov podebljani dio biti napisan crvenim slovima jer element <b> nasljeđuje osobine (boju) od roditelja (taga <p> na kojeg je primjenjen zadani stil). Pogledajmo malo složeniji slučaj:
p { color: red }
strong { color: green }
...
<p>probni odlomak s <strong>podebljanim i <i>podebljano-ukošenim</i></strong> tekstom.</p>
Sav tekst unutar tagova <strong> će biti zelen pa i dio unutar tagova <i> jer dio unutar <i> taga nasljeđuje tu vrijednost od svog roditelja. Dio izvan tagova <i>, a unutar tagova <strong> bit će kao i do sad crven.
Iako je ovo dosta razumljivo često se zboravlja prilikom definicije stilova što onda ima za poslijedicu da se neke osobine zadaju više puta iako to nije potrebno i time komplicira i povećava lista stilova.
Prvi pravi sukobi
Sukobi se događaju kada na neki element djeluju različiti stilovi koji pokušavaju za jednu te istu osobinu postaviti različite vrijednosti. Da ne morate previše maštati, evo primjera:
b { font-size: 12pt; } /* konflikt između font-size osobina */
p b { font-size: 14pt;
color: red; }
Prvi stil kaže da svi podebljani dijelovi teksta trebaju biti prikazani veličinom 12pt, dok drugi definirani stil kaže da svi podebljani dijelovi teksta koji se nalaze unutar odlomaka trebaju biti prikazani veličinom 14pt. Da bi se riješila ova (kojom će veličinom slova biti prikazani podebljani dijelovi unutar odlomaka) i slične nedoumice definirana su slijedeća pravila:
- ako se sukobljeni stilovi odnose na isti HTML tag, prevladava stil koji taj tag i njegov smještaj u odnosu na ostale preciznije opisuje (na nižoj razini)
- ako se sukobljeni stilovi odnose na isti HTML tag i iste su razine, prevladava stil najbliži HTML tagu (onaj definiran kasnije)
- stil koji se odnosi na određeni tag prevladava nasljeđeni stil
- Ako je u definiciji stila korištena riječ !important, to znači da će pri sukobu stilova takav stil imati prednost bez obzira na ostala pravila. Preporuka je da se ta ključna riječ koristi što je manje moguće, no evo kako je napisati za slučaj da vam zatreba:
selektor {svojstvo:vrijednost !important;}
- u slučaju sukoba stilova definiranih na različite načine vrijedi slijedeći prioritet:
- inline stilovi definirani na način "style="
- stilovi definirani unutar dokumenta u njegovom zaglavlju
- stilovi iz vanjskog css dokumenta spojeni s glavnim pomoću taga <LINK>
- stilovi iz vanjskog css dokumenta spojeni s glavnim pomoću opcije @include
Dakle u gornjem primjeru zbog pravila broj jedan podebljani dijelovi unutar odlomaka bit će prikazani veličinom 14pt!
Sukobe stilova općenito treba izbjegavati, postoje čak i male razlike u interpretaciji gornjih pravila kod različitih web preglednika što znači da stranica sa sukobljenim stilovima može izgledati različito u različitim preglednicima. Jedini lijek za to je pažljivo pisanje stilova kao i isprobavanje napisanih u različitim web preglednicima. Ponekad se i namjerno pišu stilovi za koje bismo mogli reći da imaju sukobljene elemente. Pri tome je jedino bitno da i designer i web preglednici znaju kako to protumačiti, odnosno da rezultat takvog stiliziranja nije dvojben.
i na kraju...
Iz ove i ne baš tako kratke lekcije mogli smo naučiti kako zadati određeni stil, te kako sve možemo primjeniti napisane stilove na elemente stranice. Gornji članak bi zapravo trebao dati teoretske osnove nakon kojih se možemo baciti na isprobavanje i posao!
Bez obzira želite li ručno pisati svoje CSS klase ili se služite naprednim programima za tu svrhu, svakako provjerite i ostale lekcije iz ovog područja!
