Kada pretraživač čita stilski list, formatira dokument prema njemu.
Tri načina za ugradnju CSS-a
Postoje tri načina za umetanje stilskog lista:
- Eksterni stilski list
- Interni stilski list
- Inline stil
Eksterni stilski list
Eksterni stilski list je idealan kada se stilovi moraju primijeniti na mnogo stranica. Pomoću eksternog stilskog lista možete promijeniti izgled cijele web stranice uređivanjem jedne datoteke. Svaka stranica mora biti povezana sa stilovima pomoću oznake . Tag je u dijelu glave:
Ne ostavljajte razmake između vrijednosti svojstva i njegovih jedinica! "margin-left:20 px" (umjesto "margin-left:20px") će raditi u IE (Internet Explorer), ali ne i Firefox ili Opera.
Interni stilski list
Interni stilski list se koristi kada pojedinačni dokument ima jedinstven stil. Interne stilove definirate u dijelu zaglavlja HTML stranice pomoću oznake
Ovdje će se dogoditi sljedeće: za sve elemente unutar oznake
bit će urađeno sljedeće: njihova boja će biti crvena i gornji padding će biti 100 piksela.
Treći način postavljanja stil css- to uvezeni stilovi. Oni su isti kao ugrađen postavljeni su u zaglavlju dokumenta, ali već iz fajla. Evo primjera:
Evo stilova iz fajla " my.css".
I posljednji pogled CSS stilovi su stilovi iz datoteke. Ova metoda je najčešća, a sastoji se u povezivanju stilske datoteke preko oznake u glavi dokumenta. Na primjer, na ovaj način:
Ova metoda je vrlo slična prethodnoj, ali se oznaka ovdje ne koristi. (ne brkati sa istoimenim atributom) u kojem se pojavljuje opis elemenata 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
Ovdje možete kupiti najbolje slonove po konkurentnim cijenama!!
Iznajmite slona
Samo ovdje možete iznajmiti sve slonove!!
Kao što možete vidjeti iz primjera, postigli smo potpuno isti rezultat kao u prvom slučaju, samo što sada ne propisujemo stil za svaki element pojedinačno, već ga stavljamo u "glavu" dokumenta, čime ukazujemo da su svi naslovi ,
- će biti plava i paragrafi
- crveno. Zamislite koliko bi nam bilo lakše da radimo kada bi na stranici bilo stotinu takvih pasusa i petnaestak naslova, a sam dokument počeo da teži „uklanjanjem“ svih opisa stilova koji se ponavljaju 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, onda se odvajaju tačkom i zarezom.
CSS u zasebnoj eksternoj datoteci.
Koliko dugo i kratko, došli smo do glavne, po mom mišljenju, prednosti CSS-a, odnosno mogućnosti da sve informacije vezane za dizajn sajta iznesemo 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 je toliko čudno što smo napisali u narednim poglavljima ovog uputstva.
Sve! kreiran fajl sa opisom stila! Sada ostaje samo malo, naime da natjeramo potrebne stranice naše stranice da crpe informacije iz ove datoteke.
Ovo se radi pomoću oznake (veza). Tag višenamjenski i služi za "povezivanje" HTML dokumenta s dodatnim vanjskim datotekama kako bi se osigurao njegov pravilan rad. Tag je neka vrsta veze, samo ne namijenjena korisnicima, već programima pretraživača (pretraživačima). Jer nosi samo servisne informacije; nalazi se u zaglavlju HTML dokumenta između oznaka i ne prikazuju ga pretraživači.
Tag ima atribute:
href- Put do datoteke.rel- Definira odnos između trenutnog dokumenta i referencirane datoteke.
- ikona prečice - Određuje da je uključena datoteka .
- stilski list- Određuje da uključena datoteka sadrži listu stilova.
- application/rss+xml - XML datoteka za opisivanje vijesti.
Pošto uključujemo kaskadni stilski list kao eksternu datoteku, naša servisna veza ima sljedeći oblik:
Ponovit ću, kako bih svakako otklonio moguće nesporazume. Atribut rel dodijeliti vrijednost stilski list budući da uključujemo kaskadni stilski list kao eksternu datoteku, specificiramo 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 ovu liniju u naslove stranica naše stranice i uživamo u rezultatu ..
Datoteka mystyle.css
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.
elephant.html fajl
Meni:
Sve o slonovima.
Kupi slona.
Iznajmite slona.
Kupi slona
Ovdje možete kupiti najbolje slonove po konkurentnim cijenama!!
fajl elephant1.html
Meni:
Sve o slonovima.
Kupi slona.
Iznajmite slona.
Iznajmite slona
Samo ovdje možete iznajmiti sve slonove!!
U gornjem primjeru, "slon stranica" trenutno ima tri stranice, od kojih je svaka povezana s jednom vanjskom css datotekom, mystyle.css. Tako smo ga značajno "rastovarili" i dizajn cijelog sajta učinili "mobilnim". Zamislite koliko bismo kilobajta osvojili da na ovom sajtu ima stotinu punih stranica!? Takođe, koliko bi uštedeo vremena kada bismo nešto promenili 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 stilom drugačijim od ostalih elemenata jedini na cijeloj web lokaciji.
- Koristite oznaku
Primjer: Interni stilski list
- Probajte sami"
header
Tekst jedan
Tekst dva
Treći tekst
Interni stilski list header
Tekst jedan
Tekst dva
Treći tekst
U ovom primjeru, postavili smo boju pozadine elementa koristeći CSS.
: boja pozadine:bledozelena, boju i tip fonta za naslove: boja: plava; font-family:verdana, te veličinu fonta, boju i poravnanje teksta za pasuse
: font-size:20px; boja:crvena; text-align:center.
Inline stil
Kada je potrebno formatirati jedan element HTML stranice, deklaracija stila se može postaviti direktno unutar početne oznake pomoću već specijalizovanog atributa stila. Na primjer:
Paragraf
Takvi stilovi se nazivaju ugrađeni (inline) ili ugrađeni. Pravila definirana direktno unutar početne oznake elementa poništavaju pravila definirana u vanjskoj CSS datoteci, kao i pravila definirana na elementu
header
Tekst jedan
Tekst dva
Treći tekst