Kada preglednik čita list stilova, formatira dokument prema njemu.
Tri načina za ugradnju CSS-a
Postoje tri načina za umetanje lista stilova:
- Vanjski stilski list
- Interni stilski list
- Inline stil
Vanjski stilski list
Vanjski list stilova idealan je kada stilove treba primijeniti na mnogo stranica. Pomoću vanjske tablice stilova možete promijeniti izgled cijele web stranice uređivanjem jedne datoteke. Svaka stranica mora biti povezana s listom stilova pomoću oznake . Označiti nalazi se u odjeljku glave:
Ne ostavljajte razmake između vrijednosti nekretnine i njezinih 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 koristi se kada pojedinačni dokument ima jedinstven stil. Interne stilove definirate u odjeljku glave HTML stranice pomoću oznake
Ovdje će se dogoditi sljedeće: za sve elemente unutar oznake
učinit će se sljedeće: njihova će boja biti crvena, a gornji padding bit će 100 piksela.
Treći način postavljanja stil css- ovo je uvezeni stilovi. Oni su isti kao ugrađen postavljeni su u glavi dokumenta, ali već iz datoteke. Evo primjera:
Ovdje su stilovi iz datoteke " moj.css".
I posljednji pogled CSS stilovi su stilovi iz datoteke. Ova metoda je najčešća, a sastoji se u povezivanju stilske datoteke putem oznake u glavi dokumenta. Na primjer, na ovaj način:
Ova metoda je vrlo slična prethodnoj metodi, ali se oznaka ovdje ne koristi. (nemojte brkati s istoimenim atributom) u kojem se nalazi opis elemenata koji su nam potrebni.
Pogledajte primjer, ispod će biti komentara.
Sve o slonovima
Na ovoj stranici ćete pronaći sve informacije o slonovima.
Kupi slona
Ovdje možete kupiti najbolje slonove po konkurentnim cijenama!!
Iznajmiti slona
Samo ovdje možete iznajmiti bilo kakve 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 označavamo da svi naslovi ,
- bit će plavo i odlomci
- Crvena. Zamislite kako bismo si olakšali posao kada bi na stranici bilo stotinjak takvih paragrafa i petnaestak naslova, a sam dokument bi bio manje težak "uklanjanjem" svih stilskih opisa koji se ponavljaju za svaki pojedini element.
Sada obećani komentari:
Označiti postoji izravna deklaracija stilova određenih HTML elemenata prema sljedećoj sintaksi:
Ako je nekoliko svojstava elementa navedeno u bloku deklaracije stila, tada su odvojena točkom i zarezom.
CSS u zasebnoj vanjskoj datoteci.
Kako dugo i kratko, došli smo do glavne, po mom mišljenju, prednosti CSS-a, a to je mogućnost da se sve informacije vezane uz dizajn stranice izbace u zasebnu vanjsku datoteku.
Dakle, otvorite notepad (ili neki drugi editor) i u njega napišite sljedeći tekst:
Tijelo (boja pozadine: #c5ffa0)
a (boja:#000060; težina fonta: podebljano;)
a:lebdjeti (boja:#ff0000; težina fonta: podebljano; dekoracija teksta: ništa)
h1 (boja: #0000ff; veličina fonta:18px)
h2 (boja: #ff00ff; veličina fonta:16px)
p (boja: #600000; veličina fonta:14px)
Pokušat ću vam detaljno ispričati o čemu smo toliko čudno pisali u sljedećim poglavljima ovog vodiča.
Svi! kreirana datoteka s opisom stila! Sada ostaje još samo malo, naime prisiliti potrebne stranice naše stranice da crpe informacije iz ove datoteke.
To se radi pomoću oznake (veza). Označiti višenamjenski i služi za "povezivanje" HTML dokumenta s dodatnim vanjskim datotekama kako bi se osigurao njegov pravilan rad. Označiti je vrsta poveznice, samo namijenjena ne korisnicima, već programima preglednika (preglednicima). Jer nosi samo servisne informacije; nalazi se u zaglavlju HTML dokumenta između oznaka i ne prikazuju ga preglednici.
Označiti ima atribute:
href- Put do datoteke.rel- Definira odnos između trenutnog dokumenta i referentne datoteke.
- ikona prečaca - Određuje da je uključena datoteka .
- stilski list- Određuje da uključena datoteka sadrži list stilova.
- application/rss+xml - XML datoteka za opis feeda vijesti.
Budući da uključujemo kaskadnu stilsku tablicu kao vanjsku datoteku, poveznica naše usluge ima sljedeći oblik:
Ponovit ću, da svakako otklonim moguće nesporazume. Atribut rel dodijeliti vrijednost stilski list budući da uključujemo kaskadnu stilsku tablicu kao vanjsku datoteku, navodimo put do css datoteke (u ovom primjeru, datoteka se zove moj stil.css i nalazi se pored HTML dokumenta u kojem je ova veza napisana) također označavamo da je ova datoteka tekstualna i da sadrži opis stila tip="tekst/css"
Sada umećemo ovaj redak u naslove stranica naše stranice i uživamo u rezultatu ..
Datoteka mystyle.css
tijelo (boja pozadine: #c5ffa0)
a (boja:#000060; težina fonta: podebljano;)
a:lebdjeti (boja:#ff0000; težina fonta: podebljano; dekoracija teksta: ništa)
h1 (boja: #0000ff; veličina fonta:18px)
h2 (boja: #ff00ff; veličina fonta:16px)
p (boja: #600000; veličina fonta:14px)
index.html datoteka
Izbornik:
Sve o slonovima.
Kupi slona.
Iznajmiti slona.
Sve o slonovima
Na ovoj stranici ćete pronaći sve informacije o slonovima.
slon.html datoteka
Izbornik:
Sve o slonovima.
Kupi slona.
Iznajmiti slona.
Kupi slona
Ovdje možete kupiti najbolje slonove po konkurentnim cijenama!!
datoteka slon1.html
Izbornik:
Sve o slonovima.
Kupi slona.
Iznajmiti slona.
Iznajmiti slona
Samo ovdje možete iznajmiti bilo kakve slonove!!
U gornjem primjeru, "slon mjesto" trenutno ima tri stranice, svaka povezana s jednom vanjskom css datotekom, mystyle.css. Time smo ga značajno „rasterećeni“ i dizajn cijele stranice učinili „mobilnim“. Zamislite koliko bismo kilobajta osvojili da na ovoj stranici ima stotinu punih stranica!? Također, koliko bi nam vremena uštedjelo ako bismo morali nešto promijeniti u njegovom dizajnu!?
U ovom poglavlju pogledali smo tri načina za ugradnju CSS-a u HTML dokument. Koji je bolji za korištenje?
- Koristite atribut stil za bilo koji element ako je taj element sa stilom drugačijim od ostalih elemenata jedini na cijeloj stranici.
- Koristite oznaku
Primjer: interni list stilova
- Probajte sami"
Zaglavlje
SMS jedan
Tekst dva
Tekst tri
Interni stilski list Zaglavlje
SMS jedan
Tekst dva
Tekst tri
U ovom primjeru smo postavili boju pozadine elementa pomoću CSS-a.
: boja pozadine: blijedozelena, boju i vrstu fonta za naslove: boja: plava; obitelj-fontova:verdana, te veličinu fonta, boju i poravnanje teksta za odlomke
: veličina fonta:20px; boja: crvena; poravnanje teksta: središte.
Inline stil
Kada je potrebno formatirati jedan element HTML stranice, deklaracija stila može se smjestiti izravno unutar početne oznake pomoću već specijaliziranog atributa stila. Na primjer:
stavak
Takvi se stilovi nazivaju ugrađeni (inline) ili ugrađeni. Pravila definirana izravno unutar početne oznake elementa nadjačavaju pravila definirana u vanjskoj CSS datoteci, kao i pravila definirana na elementu
Zaglavlje
SMS jedan
Tekst dva
Tekst tri