CSS može se integrirati na tri načina u HTML dokument.
Prvi način, koji se i preporuča je putem eksterne CSS datoteke. Tim načinom možemo mijenjati sadržaj CSS-a i direktno primjenjivati na sve HTML dokumente koji pozivaju datoteku. Također omogućujemo pregledniku da pohrani sadržaj CSS datoteke i tako ubrza učitavanja svih ostalih pod-stranica.
Drugi način, koji je prihvatljiv u određenim situacijama, jest direktno umetanje CSS-a u HTML dokument. Ta tehnika prihvatljiva je kada je riječ o specifičnoj stilizaciji jedne pod-stranice i/ili je količina kôda premala da bi se isplatilo povezivati dodatnu datoteku u dokument (i time raditi dodatni zahtjev na serveru).
Treći način, koji je neprihvatljiv, ali moguć, je direktno umetanje CSS-a putem atributa na oznaci. Neprihvatljivo je zbog toga što je cilj prilikom izrade web stranice u potpunosti otkloniti svu stilizaciju dokumenta od samog sadržaja, a ova tehnike se direktno kosi s tim načelom.
Sve tri tehnike povezivanja i njihova sintaksa prikazani su niže.
Element selektor je najosnovniji oblik CSS selektora. Zbog svoje "općenitosti" se koristi za primjenu stilizacije na veći broj elemenata u dokumentu, iako u kombinaciji s kontekstualnim selektorima može imati i specifičnu primjenu.
Sintaksa element selektora praktički je nepostojeća — potrebno je navesti samo naziv HTML elementa kojeg želimo selektirati.
<div>Prvi div</div>
<div class="klasa">Drugi div</div>
<div id="identifikator">Treći div</div>
<h1>Naslov</h1>
<h2>Podnaslov</h2>Klasni selektor ima veću specifičnost jer zahtjeva da element kojeg odabiremo sadrži atribut class s nazivom klase. Važno je napomenuti da vrijednost atributa class može dijeliti više HTML elemenata, čime nam je omogućeno koristiti klasni selektor kako bismo primijenili stilizaciju na nekoliko elemenata, ali jedino ako zadovoljavaju uvjete.
Napomena: preporuča se imenovanje klasa prema semantičkoj funkciji koju klasa vrši, a ne konkretnoj stilizaciji koju nosi. Na primjer, ako izrađujemo klasu kojom bi crvenom bojom označili HTML elemente koji su nevažeći (prema kojem god kriteriju), naziv "nevazeci" bio bi dobar odabir za ime klase, dok naziv "crveno" ne bi jer se stilovi mogu mijenjati.
Sintaksa klasnog selektora zahtjeva da se ispred naziva klase nalazi točka nakon koje, bez razmaka, slijedi naziv klase.
.napomena {
color:red;
}
.uspjeh {
color:green;
}ID selektor ima najveću specifičnost jer zahtjeva da element kojeg odabiremo sadrži atribut id s nazivom identifikatora. Važno je napomenuti da vrijednost atributa id ne može dijeliti više HTML elemenata, već isključivo jedan element po stranici, čime nam je omogućeno koristiti ID selektor kako bismo primijenili stilizaciju na jedinstven element.
Napomena: kao i kod klasnog selektora, preporuča se imenovanje identifikatora prema semantičkoj funkciji.
Sintaksa ID selektora zahtjeva da se ispred naziva identifikatora nalaze ljestve nakon kojih, bez razmaka, slijedi naziv identifikatora.
#sadrzaj {
border:6px double #880E4F;
padding:10px;
}
#informacije {
color:#666666;
padding:10px;
}Atribut selektor je napredniji selektor s visokom razinom specifičnosti koji nam omogućuje da odabiremo elemente koji sadrže određeni atribut, pa čak i koji sadrže određenu vrijednost za određeni atribut.
Sintaksa atribut selektora zahtjeva osnovni selektor, nakon kojeg se bez razmaka unutar uglatih zagrada navodi atribut kojeg element mora sadržavati.
a[class] {
color:#FFFFFF;
background-color:#880E4F;
text-decoration:none;
}Atribut selektor s točnom vrijednošću iznimno je specifičan i omogućuje da odabiremo elemente koji sadrže određeni atribut i točno određenu vrijednost tog atributa. Kao takav rijetko kad pronalazi pravu primjenu.
Sintaksa atribut selektora zahtjeva osnovni selektor, nakon kojeg se bez razmaka unutar uglatih zagrada navodi atribut kojeg element mora sadržavati, zatim oznaka jednako (=), te na kraju pod navodnim znacima ("") vrijednost atributa.
a {
color:#000000;
}
a[href="#"] {
color:#999999;
text-decoration:none;
}Atribut selektor s početnom vrijednošću iznimno je specifičan i omogućuje da odabiremo elemente koji sadrže određeni atribut i točno određen početak vrijednosti. Kao takav rijetko kad pronalazi pravu primjenu.
Sintaksa atribut selektora zahtjeva osnovni selektor, nakon kojeg se bez razmaka unutar uglatih zagrada navodi atribut kojeg element mora sadržavati, zatim oznaka potencije (^), potom oznaka jednako (=), te na kraju pod navodnim znacima ("") vrijednost atributa.
a[href^="mailto:"] {
background-color:#000000;
color:#FFFFFF;
text-decoration:none;
}Atribut selektor sa završnom vrijednošću iznimno je specifičan i omogućuje da odabiremo elemente koji sadrže određeni atribut i točno određen završetak vrijednosti. Kao takav rijetko kad pronalazi pravu primjenu. Može poslužiti za stiliziranje poveznica na određenu vrstu datoteke (na primjer Word dokumente).
Sintaksa atribut selektora zahtjeva osnovni selektor, nakon kojeg se bez razmaka unutar uglatih zagrada navodi atribut kojeg element mora sadržavati, zatim oznaka string ($), potom oznaka jednako (=), te na kraju pod navodnim znacima ("") vrijednost atributa.
a[href$=".pdf"] {
color:#000000;
border-bottom:6px solid #000;
text-decoration:none;
}Moguće je i povezati nekoliko selektora na jedan element, u tom slučaju stilizacija će se primjeniti samo ako element sadrži sve selektore.
.detalji.naglaseno {
font-size:18px;
text-decoration:underline;
}Moguće je i nekoliko selektora povezati na istu stilizaciju. Time si smanjujemo količinu kôda koji je potrebno pisati i olakšavamo naknadne izmjene stila.
.prvi, .drugi {
font-style:italic;
} Kontekstualni selektori omogućuju stilizaciju elemenata ovisno o njihovom kontekstu. Sintaktički gledano, uvode se određeni simboli za definiranje konteksta, ali sami selektori i dalje ostaju isti (elementni, klasni, itd).
Kontekstualni selektor indirektnog potomka prvi je i najopćenitiji kontekstualni selektor. Omogućuje nam da odabiremo elemente koji su potomci nekog drugog elementa, koji opet mogu biti potomci trećeg elementa i tako dalje. Pojam "indirektnog" označava da se potomak može nalaziti koliko god duboko je potrebno strukture HTML dokumenta.
Sintaksa kontekstualnog selektora indirektnog potomka zahtjeva dva ili više općenita selektora, odvojenih razmakom, gdje je s desne strane potomak, tako da kontekst čitamo s lijeva na desno.
div p {
text-decoration:underline;
}
.naznaka p {
color:#880E4F;
}
.naznaka .tekst {
font-style:italic;
}Kontekstualni selektor direktnog potomka omogućuje nam da odabiremo elemente koji su neposredni potomci nekog drugog elementa. Pojam "direktnog" označava da se potomak može nalaziti isključivo nivo niže u HTML strukturi dokumenta, dok svi daljnji potomci neće zadovoljiti uvjet selektora.
Sintaksa kontekstualnog selektora direktnog potomka zahtjeva dva ili više općenita selektora, odvojenih znakom "veće od" (>), gdje je s desne strane potomak, tako da kontekst čitamo s lijeva na desno.
div > span {
color:#880E4F;
border-bottom:2px solid #880E4F;
}Kontekstualni selektor neposrednog susjeda omogućuje nam da odabiremo elemente koji su kao što i sam naziv govori, neposredni susjedni drugog elementa kojeg navedemo. Pojam "neposrednog" označava da se element mora nalaziti neposredno nakon prethodno navedenog elementa, a također na istom nivou u HTML strukturi dokumenta.
Sintaksa kontekstualnog selektora neposrednog susjeda zahtjeva dva ili više općenita selektora, odvojenih znakom "plus" (+), gdje je s desne strane element kojeg odabiremo, a s lijeve njegov prethodni susjed.
p + p {
text-transform:uppercase;
}
div + p + span {
color:#880E4F;
text-transform:uppercase;
}Kontekstualni selektor susjeda omogućuje nam da odabiremo elemente koji su kao što i sam naziv govori, susjedi drugog elementa kojeg navedemo. Pojam "susjeda" označava da se element mora nalaziti na istom nivou u HTML strukturi dokumenta, ali udaljenost elementa nije relevantna.
Sintaksa kontekstualnog selektora susjeda zahtjeva dva ili više općenita selektora, odvojenih znakom "tilda" (~), gdje je s desne strane element kojeg odabiremo, a s lijeve njegov susjed.
p ~ p {
border:3px solid #880E4F;
padding:10px;
}Pseudoselektori formiraju potpuno odvojenu kategoriju selektora i njihove vrijednosti variraju ovisno o vrijednostima koje HTML element kojeg odabiremo sadržava. Elementi forme omogućuju nam selektiranje i stiliziranje polja koja su read-only dok na primjer tekstualni elementi omogućuju selektiranje i stiliziranje prvog slova ili prvog retka teksta.
Sintaksa pseudoselektora sastoji se od osnovnog selektora, nakon čega slijedi znak dvotočke (:) te zatim vrijednost pseudoselektora.
Evo nekoliko primjera psuedoselektora.
.prvi-primjer:first-letter {
font-size:22px;
}
.drugi-primjer:first-line {
font-style:italic;
}Osim selektora, jedino što je još potrebno kako bi uspješno stilizirali HTML elemente su svojstva i vrijednosti koje navodimo unutar bloka koji smo odabrali. Pošto je svojstava i njihovih pripadajućih vrijednosti pregršt, nećemo ih obrađivati u detalje već samo usmjeriti na popis dostupnih svojstava . Svako svojstvo je poveznica na dokumentaciju koja pruža detaljan uvid u dokumentaciju i vrijednosti odabranog svojstva.
Svojstva u CSS-u zahtjevaju određenu sintaksu da bi bila važeća. Svojstva funkcioniraju kao uređeni parovi ključevi i vrijednosti, odvojenih dvotočkom i završenih znakom točke-zareza (;)
p {
color: red;
}Svako svojstvo sadrži popis vrijednosti koje može zaprimiti da bi bilo važeće, međutim neka svojstva mogu primiti i lančani niz vrijednosti odvojenih znakom razmaka ( ) u svrhu bržeg pisanja kôda. Važno je napomenuti da ti ulančani nizevi imaju strogo definiran poredak, a on varira za svako svojstvo pojedinačno. Prilikom ulančavanja više vrijednosti obavezno provjerite dokumentacije o poretku vrijednosti.
p {
border: 3px double #00796B;
padding:20px 30px;
}Svako CSS svojstvo sadrži definiciju koja određuje naslijeđuje li svojstva svog pretka ili ne.
U slučaju naslijeđivanja, ako element ne sadrži vlastito definirano svojstvo, preuzet će ga od svog pretka. Tako će na sljedećem primjeru <em> element naslijediti svojstvo boje slova od <p>.
p {
color:#880E4F;
}Kaskadnost je osnovno svojstvo CSS-a koje omogućuje brisanje, odnosno naslijeđivanje prethodnih vrijednosti i proširivanje stilova.
/* siva boja slova */
p {
color:#CCCCCC;
}
/* zuta boja slova */
p {
color:#FFCC00;
}Najkorišteniji način zapisivanja boja na webu jest heksadekadski sustav. Bazira se na miješanju boja pomoću RGB sustava boja. Označava se znakom ljestvi (#) na početku nakon čega slijedi tri (3) para vrijednosti između 00 (nema boje) i FF (puna boja). Spajanjem intenziteta boja (crvene, zelene i plave) dobivamo sustav (i zapis) koji se najčešće koristi na webu, a ova stranica puna je primjera navedenog zapisa.
Osim heksadekadskog, preglednici podržavaju i zapisivanje boja u drugim sustavima. Tako je moguće navesti boju kao ključnu riječ, na primjer aqua što je ekvivalentno hex zapisu #00FFFF. Pogledajte popis svih boja dostupnih putem ključnih riječi .
Preglednici također podržavaju i direktan RBG zapis boja kao i RGBA koji pruža podršku za četvrti, alpha kanal koji označava prozirnost.
Zapisat ćemo akvamarin boju na četiri različita načina.
.jedan {
color: aqua;
}
.dva {
color: #00FFFF;
}
.tri {
color: rgb(0, 255, 255);
}
/* alpha kanal prozirnosti na 30% */
.cetiri {
color: rgba(0, 255, 255, 0.3);
}Napomena: korištene boje mogu izgledati drugačije na raznim monitorima. Nažalost kontrola takvih detalja je izvan naših mogućnosti. Ono što možemo je izbjegavati korištenje boja koje se razlikuju u samo nekoliko nijansi.
Problem dimenzioniranja sadržaja na webu tema je koja je žarila od samih začetaka weba do unazad posljednjih nekoliko godina. Danas, to je tema koja zauzima sve manje medijskog prostora zahvaljujući ponajprije odlasku određenih (zastarjelih) verzija web preglednika, a i sve češćoj upotrijebi CSS medij upita1 za optimizaciju sadržaja na različitim uređajima.
Prilikom izrade web stranica u pogledu odabira dimenzija web stranice danas se izbor svodi na dva pristupa.
Prvi pristup koristi fiksnu mjernu jedinicu piksela (px) i za optimizaciju sadržaja različitim medijima koristi spomenute medij upite. Pomoću njih se za različite dimenzije ekrana s kojih se pristupa sadržaju, pišu različite dimenzije okvira, što omogućuje potpunu kontrolu sadržaja no povećava količinu kôda koju je potrebno napisati.
Drugi pristup koristi relativnu mjernu jedinicu postotka (%) i sam po sebi ne zahtjeva optimizaciju za različite medije (iako je i dalje moguće koristiti). Problem koji može nastati je zbog nedostatka kontrole sadržaja jer se svakom, i najmanjom promjenom dimenzija uređaja, na novo sadržaj preslaguje.
Napomena: Twitter Bootstrap, CSS okvir koji ćemo obraditi, koristi fiksnu mjernu jedinicu piksela.
Napisat ću kasnije.
U posljednje vrijeme trend je izrada web stranica s velikim i upečatljivim slikama/fotografijama. CSS3 uveo nam je svojstvo kojim možemo razvući sliku na potpunu veličinu elementa kojeg obuhvaća. Pogledajmo kako.
article {
background-image:url('http://i.imgur.com/zeOhCTX.jpg');
/* potrebno svojstvo i vrijednost*/
background-size:cover;
/* kraj */
background-position:bottom center;
width:400px;
}
article h2 {
color:#FFFFFF;
padding:5%;
padding-top:30%;
}Često je potrebno navigaciju web stranice prikazati u horizontalnom obliku, a kako je iz semantičkih razloga potrebno navigaciju prikazati kao listu poveznica (uostalom, kako bi ju drugačije prikazali, a da se drži kao smislena cjelina jedinki?) najčešće nastaje problem jer <li> element ima predefinirano svojstvo zauzimanja maksimalnog horizontalnog prostora, što u konačnici rezultira listom elemenata jednog ispod drugog.
Pošto je evidentno problem u <li> elementu, njemu ćemo promijeniti svojstvo širenja i time postići najosnovniju horizontalnu navigaciju.
Napomena: postoje različiti CSS okviri koji omogućuju mnoštvo horizontalnih navigacija, ali često je potrebno koristiti velike količine HTML kôda za postizanje tih navigacija. U situacijama gdje je samo potrebno prikazati običnu horizontalnu navigaciju, uvijek je bolje sami izraditi jednostavno rješenje.
/* potrebna svojstva i vrijednosti */
nav ul {
list-style-type:none;
margin:0;
padding:0;
}
nav ul li {
display:inline-block;
}
/* dodatna stilizacija, primjera-radi */
nav ul {
display:inline-block;
background-color:#212121;
}
nav ul li a {
color:#EEFF41;
font-family:sans-serif;
display:block;
text-decoration:none;
padding:10px 20px;
}
nav ul li a:hover {
background-color:#333333;
}