U ovom poglavlju ćemo govoriti o tome kako implementirati CSS u HTML dokument, odnosno povezati opis stila elementa direktno sa samim elementom, nekom HTML oznakom.
Ovaj zadatak se može izvršiti na tri načina:
- Napišite opis stila direktno u samom elementu. Ova metoda je dobra samo ako postoji samo jedan takav element u HTML dokumentu kojem je potreban poseban opis stila.
- Napišite opis stila za sve identične elemente HTML dokumenta. Ova metoda je opravdana ako se stil stranice suštinski razlikuje od cjelokupnog dizajna stranice (grupe međusobno povezanih stranica).
- Umetnite opis stila HTML elemenata u zaseban fajl CSS. Ovo će vam omogućiti da upravljate dizajnom cijele stranice, svake stranice stranice na kojoj je naznačena referenca na CSS datoteku. Ova metoda je najefikasnija upotreba kaskadnog stilskog lista.
Pogledajmo pobliže svaku opciju, a istovremeno se upoznajmo sa pravilima sintakse pisanja CSS-a.
Atribut stila.
Gotovo svaka HTML oznaka ima atribut stil, što ukazuje da je određeni opis stila primijenjen na ovu oznaku.
Napisano je ovako:
style="">
Sve što će biti napisano između navodnika atributa stil i bit će opis stila za ovaj element, u ovom slučaju element
Pa na primjer:
style="color: #ff0000; font-size:12px"> ovo je pasus sa ličnim stilom
U ovom slučaju smo naveli da ovaj pasus treba biti prikazan crvenom bojom i da ima veličinu fonta od 12 piksela. U narednim poglavljima ću detaljno govoriti o tome šta je napisano pod navodnicima, ali sada govorimo o tome kako primijeniti CSS na bilo koju HTML oznaku.
Koristeći isti princip, možete odrediti individualni stil za gotovo svaki HTML element.
style="background-color: #c5ffa0">
style="color: #0000ff; font-size:18px">Sve o slonovima
Kupi slona
style="color: #ff0000; font-size:14px">
style="color: #0000ff; font-size:16px">Iznajmite slona
style="color: #ff0000; font-size:14px">
Ali ponoviću ovu metodu ponovo CSS implementacija dobro samo ako trebate postaviti određeni stil na mali broj HTML elemenata.
Tag (ne brkati s istoimenim atributom) u kojem su opisani elementi koji su nam potrebni.
Pogledajte primjer, ispod će biti komentara.
Sve o slonovima
Na ovoj stranici naći ćete sve informacije o slonovima.
Kupi slona
Kod nas možete kupiti najbolje slonove po konkurentnim cijenama!!
Iznajmite slona
Samo ovdje možete iznajmiti sve slonove!!
Kao što se može vidjeti iz primjera, postigli smo potpuno isti rezultat kao u prvom slučaju, samo što sada ne dodjeljujemo stil svakom elementu pojedinačno, već ga stavljamo u “glavu” dokumenta, čime pokazujemo da su svi naslovi ,
- paragrafi će biti plavi
- crveno. Zamislite koliko bi nam bio lakši rad kada bi na jednoj stranici bilo stotinu takvih pasusa i petnaestak naslova, a sam dokument bi bio manje težak „uklanjanjem“ svih ponavljajućih opisa stilova za svaki pojedinačni element.
Sada obećani komentari:
Tag postoji direktna deklaracija stilova određenih HTML elemenata prema sljedećoj sintaksi:
Ako je nekoliko svojstava elementa specificirano u bloku deklaracije stila, oni su odvojeni točkom i zarezom.
CSS u zasebnoj eksternoj datoteci.
Koliko vremena treba da se skrati, dolazimo do glavne, po mom mišljenju, prednosti CSS-a, a to je mogućnost da se sve informacije vezane za dizajn sajta stave u poseban eksterni fajl.
Dakle, otvorite notepad (ili neki drugi editor) i u njega upišite sljedeći tekst:
Tijelo (boja pozadine: #c5ffa0)
a (boja:#000060; font-weight: bold;)
a:hover (boja:#ff0000; font-weight: bold; text-decoration:nema)
h1 (boja: #0000ff; veličina fonta:18px)
h2 (boja: #ff00ff; veličina fonta:16px)
p (boja: #600000; veličina fonta:14px)
Pokušaću da vam detaljno ispričam šta smo o ovoj čudnoj stvari pisali u narednim poglavljima ovog udžbenika.
Sve! Fajl opisa stila je kreiran! Sada ostaje samo malo, odnosno sila potrebne stranice našu web stranicu kako biste dobili informacije iz ove datoteke.
Ovo se radi pomoću oznake (veza). Tag višenamjenski i služi za “povezivanje” HTML dokumenta sa dodatnim vanjskim fajlovima koji osiguravaju njegov pravilan rad. Tag je neka vrsta veze, samo ne namijenjena korisnicima, već programima pretraživača (pretraživačima). Jer nosi isključivo servisne informacije, nalazi se u zaglavlju HTML dokumenta između oznaka i ne prikazuje se na ekranu od strane pretraživača.
Tag ima atribute:
href- Put do fajla.rel- Definira odnos između trenutnog dokumenta i datoteke na koju se poziva.
- ikona prečice - Određuje da je uključena datoteka .
- stylesheet- Određuje da uključena datoteka sadrži listu stilova.
- application/rss+xml - Datoteka u XML format da opišete novosti.
Budući da uključujemo kaskadni stilski list kao eksternu datoteku, naš servisni link ima sljedeći oblik:
Ponavljam, da svakako otklonimo moguće nesporazume. Atribut rel dodijeliti vrijednost stylesheet Pošto povezujemo kaskadni stilski list kao eksternu datoteku, ukazujemo na putanju do css datoteke (u ovom primjeru datoteka se zove mystyle.css i nalazi se pored HTML dokumenta u kojem je napisana ova veza) također označavamo da je ova datoteka tekstualna i sadrži opis stila type="text/css"
Sada ubacujemo ovaj red u zaglavlja stranica naše stranice i uživamo u rezultatu..
mystyle.css fajl
tijelo (boja pozadine: #c5ffa0)
a (boja:#000060; font-weight: bold;)
a:hover (boja:#ff0000; font-weight: bold; text-decoration:nema)
h1 (boja: #0000ff; veličina fonta:18px)
h2 (boja: #ff00ff; veličina fonta:16px)
p (boja: #600000; veličina fonta:14px)
index.html fajl
meni:
Sve o slonovima.
Kupi slona.
Iznajmite slona.
Sve o slonovima
Na ovoj stranici naći ćete sve informacije o slonovima.
Datoteka elephant.html
meni:
Sve o slonovima.
Kupi slona.
Iznajmite slona.
Kupi slona
Kod nas možete kupiti najbolje slonove po konkurentnim cijenama!!
Datoteka elephant1.html
meni:
Sve o slonovima.
Kupi slona.
Iznajmite slona.
Iznajmite slona
Samo ovdje možete iznajmiti sve slonove!!
U gornjem primjeru, "stranica o slonovima", na trenutno, postoje tri stranice, od kojih je svaka povezana sa jednom eksternom css datotekom - mystyle.css. Tako smo ga značajno „rastovarili“ i dizajn čitave stranice učinili „mobilnim“. Zamislite koliko bismo kilobajta osvojili da ova stranica ima stotinu punopravnih stranica!? I isto tako, koliko bismo vremena uštedjeli ako bismo morali nešto promijeniti u njegovom dizajnu!?
U ovom poglavlju pogledali smo tri načina za ugradnju CSS-a u HTML dokument. Koju je bolje koristiti?
- Koristi atribut stil za bilo koji element, ako je ovaj element sa drugačijim stilom od ostalih elemenata jedini na cijeloj web lokaciji.
- Koristi oznaku
Kreirajte CSS tabelu i povežite je sa html stranicama