Već znamo da, kako bi web stranica izgledala lijepo i moderno, moramo raditi s CSS datotekom. A da bi se naši stilovi primijenili, moramo kombinirati HTML datoteku i CSS datoteku.

Postoji nekoliko opcija za izvođenje ove operacije: korištenje ugniježđenih stilskih listova, vanjskih stilskih listova i ugrađenih stilova.

Danas ćemo govoriti o potonjoj metodi.

Ubacivanje stila u HTML oznaku

Bit ove metode je da implementiramo potreban dizajn unutar oznake. Odvojena atribut – stil. Ovaj atribut može se primijeniti na bilo koju oznaku, ali samo unutar tijela stranice, tj unutar tijela. Vrijednost ovog atributa su operatori onih stilova koji se trebaju primijeniti na dati element.

Na primjer, postavimo različite veličine font za dva različita odlomka teksta:

< p style= "font-size:25px;" >Postavite ovaj dio teksta na visinu slova od 25 piksela. < p style= "veličina fonta:15px; boja:#2400ff;"> I ovaj će tekst imati slova, visoka 15 piksela, a također ćemo ga obojiti u plavo kako bismo demonstrirali korištenje nekoliko stilova u isto vrijeme.

Mane

Primjer savršeno pokazuje kako takav stil začepljuje kod stranice.

Također možete primijetiti još nekoliko nedostataka korištenja ove tehnike stilizacije. Prvi od njih je širenje stila po dokumentu, što će u budućnosti uređivanja znatno zakomplicirati proces.

Također će biti teško formatirati velike količine teksta. Mislim da nitko nije zadovoljan mogućnošću određivanja veličine fonta za svaki odlomak, pogotovo ako postoji 40 takvih odlomaka.

Čak i kada koristite ugrađene stilove, postaje nemoguće koristiti pseudo-klase, što uvelike veže ruke web dizajneru.

Također je vrijedno zapaziti zabunu koja će sigurno nastati u korištenju atributa stila. Ova će zabuna nastati zbog upotrebe različiti citati prilikom dodavanja stilova.

Radi jasnoće, pogledajmo primjer u nastavku:

< div style= "obitelj-fontova: "Roboto Condensed", sans-serif"> Unos je točan. < div style= "obitelj-fontova: "Roboto Condensed", sans-serif"> To je također točno. < div style= "font-family: " Roboto Condensed ", sans-serif" >Ovo nije točan unos. < div style= "font-family: " Roboto Condensed ", sans-serif" >I to također nije istina

Gledajući gore navedene izračune, nameće se logičan zaključak da je korištenje ugrađenih stilova povezano s brojnim značajnim komplikacijama i neugodnostima.

Kada koristiti Inline Style

Unatoč svim nedostacima, ugrađeni stil nije izmišljen uzalud. Webmasteri im se često obraćaju u slučaju dodjele programskog stila. Na primjer, pogledajmo ovaj kod

< div id= "productRate" > < div style= "width: 40%" >

Snimanje potrebne širine za ovaj blok bit će jednostavna operacija.

Slična situacija može nastati ako je potrebno zamijeniti pozadinsku sliku (na primjer) korisnika s ulogom administratora. U ovom slučaju img oznaka možda nije prikladna. Stoga je vrijedno pozvati se na atribut stila:

< div style= "background:url(fon.jpg)" >

Također, programeri se često okreću ugrađenim stilovima kada stvaraju skočne prozore. Često taj proces ide ovako: bloku na čijem dizajnu se radi dodjeljuje se display:block, a preostali prozori se sakrivaju pomoću display:none tako da vizualno ne ometaju programerov rad. Evo primjera:

< div class = "element" style= "display:block" >Skočni prozor koji je dizajniran kao ovaj trenutak

Poanta

Korištenje ugrađenih stilova povezano je s nizom poteškoća i neugodnosti, međutim, u procesu dizajniranja određenih elemenata, webmasteri se često okreću ovoj metodi kako bi optimizirali svoj rad.

U ovom poglavlju govorit ćemo o tome kako implementirati CSS u HTML dokument, odnosno povezati opis stila elementa izravno sa samim elementom, nekom HTML oznakom.

Ovaj se zadatak može izvršiti na tri načina:

• Napišite opis stila izravno u samom elementu. Ova metoda je dobra samo ako postoji samo jedan takav element HTML dokument e koji treba poseban opis stila.
• Napišite opis stila za sve identične elemente HTML dokumenta. Ova metoda je opravdana ako se stil stranice bitno razlikuje od cjelokupnog dizajna stranice (skupina međusobno povezanih stranica).
• Ekstrahirajte opis stila HTML elemenata u zasebnu CSS datoteku. To će vam omogućiti da upravljate dizajnom cijele web stranice, svake stranice web stranice na kojoj je navedena referenca na CSS datoteku. Ova metoda je najučinkovitija upotreba kaskadnog lista stilova.

Pogledajmo pobliže svaku opciju, a istovremeno se upoznajmo s pravilima sintakse pisanja CSS-a.

Atribut stila.

Gotovo svaka HTML oznaka ima atribut stil, što označava da je na ovu oznaku primijenjen određeni opis stila.

Napisano je ovako:

stil="">

Sve što će biti napisano između navodnika atributa stil i bit će opis stila za ovog elementa, u ovom slučaju element

Pa, na primjer:

style="color: #ff0000; font-size:12px"> ovo je odlomak s osobnim stilom

U ovom slučaju odredili smo da ovaj paragraf treba biti prikazan crvenom bojom i da ima veličinu fonta od 12 piksela. U sljedećim poglavljima govorit ću detaljno o tome što 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 još jednom, ova metoda uvođenja CSS-a je dobra samo ako trebate postaviti određeni stil na mali broj HTML elementi.

Označiti (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 ćete pronaći sve informacije o slonovima.

Kupi slona

Kod nas možete kupiti najbolje slonove po konkurentnim cijenama!!

Iznajmiti slona

Samo ovdje možete iznajmiti bilo kakve 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 postavljamo u “glavu” dokumenta, čime označavamo da su svi naslovi

,

- odlomci će biti plavi

- Crvena. Zamislite koliko bi nam posao bio lakši da na stranici postoji stotinjak takvih paragrafa i petnaestak naslova, a sam dokument bi težio manje "uklanjanjem" svih stilskih opisa koji se ponavljaju za svaki pojedini element.

Sada obećani komentari:

Označiti stilovi određenih HTML elemenata izravno se deklariraju prema sljedećoj sintaksi:

Ako je nekoliko svojstava elementa navedeno u bloku deklaracije stila, ona su odvojena točkom i zarezom.

CSS u zasebnoj vanjskoj datoteci.

Ukratko, dolazimo do glavne, po mom mišljenju, prednosti CSS-a, a to je mogućnost stavljanja svih informacija vezanih uz dizajn stranice 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 što smo napisali o ovoj čudnoj stvari u sljedećim poglavljima ovog udžbenika.

Svi! Datoteka opisa stila je stvorena! 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 koje osiguravaju njegov pravilan rad. Označiti je vrsta poveznice, samo namijenjena ne korisnicima, već programima preglednika (preglednicima). Jer nosi isključivo servisne informacije, nalazi se u zaglavlju HTML dokumenta između oznaka a preglednici ga ne prikazuju na ekranu.

Označiti ima atribute:

href- Put do datoteke.
rel- Definira odnos između trenutnog dokumenta i datoteke na koju se upućuje.

• ikona prečaca - Određuje da je uključena datoteka .
• stilski list- Određuje da uključena datoteka sadrži list stilova.
• aplikacija/rss+xml - Datoteka u XML format za opisivanje feeda vijesti.

tip- MIME tip podataka priložene datoteke.

Pošto se povezujemo kao vanjska datoteka kaskadni stilski list, tada naša veza usluge ima sljedeći oblik:

Ponavljam, da svakako otklonim moguće nesporazume. Atribut rel dodijeliti vrijednost stilski list Budući da povezujemo kaskadni stilski list kao vanjsku datoteku, označavamo put do css datoteke (u ovom primjeru datoteka se zove moj stil.css i nalazi se uz HTML dokument u kojem je napisana ova poveznica) to također označavamo ovu datoteku tekst i sadrži opis stila tip="tekst/css"

Sada umećemo ovaj redak u zaglavlja stranica naše stranice i uživamo u rezultatu..

mystyle.css datoteku
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

Jelovnik:

Sve o slonovima.
Kupi slona.
Iznajmiti slona.

---

Sve o slonovima

Na ovoj stranici ćete pronaći sve informacije o slonovima.

Datoteka elephant.html

Jelovnik:

Sve o slonovima.
Kupi slona.
Iznajmiti slona.

---

Kupi slona

Kod nas možete kupiti najbolje slonove po konkurentnim cijenama!!

Datoteka elephant1.html

Jelovnik:

Sve o slonovima.
Kupi slona.
Iznajmiti slona.

---

Iznajmiti slona

Samo ovdje možete iznajmiti bilo kakve slonove!!

U gornjem primjeru, "stranica o slonovima", trenutno postoje tri stranice, od kojih je svaka povezana s jednom vanjskom css datotekom - mystyle.css. Time smo ga značajno “rasterećeni” i dizajn cijele stranice učinili “mobile friendly”. Zamislite koliko bismo kilobajta osvojili da ova stranica ima stotinjak punopravnih stranica!? I također, koliko bismo vremena uštedjeli ako bismo trebali 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 s drugačijim stilom od ostalih elemenata jedini na cijeloj stranici.
• Koristi oznaku . U praksi to izgleda ovako:

  Evo primjera: prikazivanje CSS stilova u HTML dokumentu

  
  
  

  Imajte na umu da unutar oznake također pišemo kod prema CSS pravila korištenjem naramenice. U narednim člancima govorit ću detaljnije o pravilima sintakse u CSS-u.
  

  Povezivanje više CSS datoteka u jedan HTML dokument.

  HTML pravila dopuštaju uključivanje više CSS datoteka odjednom. Mnogi webmasteri koriste ovo: stvaraju zasebne CSS datoteke za tekst i slike. Ili odvojite datoteke za zaglavlje, podnožje i glavni dio stranice. Hajde da shvatimo kako ovo implementirati.

  Stvaramo nekoliko CSS stilskih datoteka. Neka njihova imena budu style-1.css i style-2.css. Smještamo ga, kao u metodi broj jedan, u istu mapu s HTML datotekom.

  Evo primjera: prikazivanje CSS stilova u HTML dokumentu

  
  
  

  Sve je slično prvoj metodi, samo u ovom slučaju označavamo veze na dvije datoteke odjednom.

  Povežite se s CSS datotekom unutar datoteke iste vrste.

  Osim svih gore navedene metode, postoji način koji vam omogućuje povezivanje s mnogim drugima unutar jedne CSS datoteke!

  Ovo se provodi na sljedeći način:
  Prvo, moramo povezati barem jednu CSS datoteku s vašim kodom na isti način.

  Drugo, unesite sljedeći kod u već povezanu datoteku:

  @import url("style-2.css");

  Ova linija povezuje se s našom datotekom dodatna datoteka CSS. Ako imate poteškoća s povezivanjem CSS-a, možete ih pitati u komentarima.
  Kao što smo naučili iz prethodne dvije lekcije, CSS tehnologija je najmoćniji alat, koju bi svaki webmaster trebao savladati! Kako bih poboljšao asimilaciju materijala, odlučio sam dodati video trening + test na kraju svake lekcije kako bih konsolidirao primljene informacije.

  Test fiksacije materijala:
  

  Moramo uključiti CSS datoteku postavljanjem veze na nju u HTML datoteku. Koja je od sljedećih metoda ispravna?

  Opcija 1:

  opcija 2:
  

  Opcija 3:

  Opcija 4:

  
  Možemo li postaviti CSS kaskade izravno u HTML datoteku?

  Listovi stilova mogu se dodati web stranici na tri načina: različiti putevi, koji se razlikuju po svojim mogućnostima.

  Povezani listovi stilova

  Najmoćniji i najprikladniji način za definiranje stilova i pravila za web mjesto. Stilovi su pohranjeni u zasebnoj datoteci koja se može koristiti za bilo koju web stranicu. Za povezivanje tablice srodnih stilova upotrijebite oznaku u naslovu stranice (primjer 1).

  Primjer 1: Povezivanje povezane stilske tablice

  Pozdrav svijete!

  
  
  

  Put do datoteke stilske tablice može biti relativan ili apsolutan, kao što je prikazano u u ovom primjeru.

  Prednosti ove metode

  1. Jedna stilska datoteka koristi se za bilo koji broj web stranica; moguće ju je koristiti i na drugim stranicama.
  2. Možete promijeniti stilsku tablicu bez izmjene web stranica.
  3. Kada promijenite stil u jednoj datoteci, stil se automatski primjenjuje na sve stranice na kojima postoji veza na njega. Nesumnjivo povoljno. Veličinu fonta određujemo na samo jednom mjestu, a ona se mijenja na svih stotinjak i više web stranica naše stranice.
  4. Kada se datoteka stila prvi put učita, ona se pohranjuje u predmemoriju na vašem lokalnom računalu, odvojeno od web stranica, tako da se stranica učitava brže.

  Globalni listovi stilova

  Stil je definiran u samom dokumentu i obično se nalazi u zaglavlju web stranice. U smislu fleksibilnosti i mogućnosti, ova metoda korištenja stila je inferiorna u odnosu na prethodnu, ali također vam omogućuje da postavite sve stilove na jedno mjesto. U ovom slučaju, točno u tijelu dokumenta. Definicija stila određena je oznakom

  Pozdrav svijete!

  
  
  

  Ovaj primjer prikazuje promjenu stila zaglavlja

  . Na web stranici sada samo trebate navesti ovu oznaku i stilovi će joj se automatski dodati.

  Unutarnji stilovi

  Inline stilovi su u biti proširenje jedne oznake koja se koristi na web stranici. Atribut stila koristi se za definiranje stila, a njegove vrijednosti su specificirane pomoću jezika lista stilova (primjer 3).

  Primjer 3: Korištenje internih stilova

  Pozdrav svijete!

  
  
  

  Preporuča se koristiti unutarnji stil za pojedinačne oznake ili ga potpuno odbiti koristiti, jer promjena niza elemenata postaje problematična. Interni stilovi ne odgovaraju ideologiji strukturalnog dokumenta kada su sadržaj i njegov dizajn odvojeni.

  Sve opisane metode koristeći CSS mogu se koristiti samostalno ili u kombinaciji jedan s drugim. U ovom slučaju potrebno je zapamtiti njihovu hijerarhiju. Interni stil uvijek se prvi primjenjuje, zatim globalni stilski list, a na kraju pridruženi stilski list. Primjer 4 koristi dvije metode za dodavanje listova stilova u dokument.

  Primjer 4. Kombinacija različite metode povezujući stilove

  Pozdrav svijete!

  Pozdrav svijete!

  
  
  

  U gornjem primjeru, prvo je zaglavlje postavljeno na 36px crveno, a sljedeće je postavljeno na zeleno i drugačiji font.

  CSS je kratica za “Cascading Style Sheets”, što znači “kaskadni stilski listovi”. Koristi se za dizajn web stranica. Ako HTML kod sadrži sadržaj (ono što će preglednik prikazati), tada CSS određuje njegov dizajn (kako će ga preglednik prikazati). Ljepota CSS-a je u tome što uz pomoć jednog stila možete dizajnirati sve iste vrste elemenata stranice ili cijele stranice (sve veze, odlomci, popisi odjednom). Kod CSS stila jednom definirate kako bi pojedini element, na primjer slike, trebao izgledati, a oni mijenjaju svoj dizajn u svim dokumentima odjednom. Da biste promijenili oblikovanje teksta na cijelom web-mjestu, trebate samo jednom promijeniti CSS kod.

  Osnovni CSS elementi

  Kao što se HTML sastoji od oznaka, atributa i vrijednosti, CSS se sastoji od vlastitih elemenata. Bit CSS konstrukcija može se objasniti na sljedeći način: "Odredite koji element stranice stilizirati i odredite kako ga stilizirati." Ovdje su gradivni blokovi CSS-a.

  • Selektor. Identifikator koji govori pregledniku na koji element stranice treba primijeniti dizajn. Zahvaljujući njemu, preglednik "razumije" da je stil namijenjen, na primjer, dizajniranju popisa ili tablica.
  • Blok deklaracije stila. Piše se nakon selektora i nalazi se u vitičastim zagradama. Određuje stil elementa (njegov dizajn). Blok deklaracije stila sastoji se od dva dijela.
  • Vlasništvo. Analog atributa u HTML-u. Određuje koje će svojstvo izgleda biti promijenjeno.
  • Značenje. Određuje svojstvo putem dvotočke i točno određuje kako će se svojstvo promijeniti.

  Može postojati nekoliko svojstava i vrijednosti u bloku deklaracije stila, u kojem slučaju su navedeni odvojeni točkom i zarezom.

  Vrste selektora

  Ovisno o svojstvima elemenata stranice koje definiraju, birači dolaze u različitim vrstama.

  • Univerzalni. Postavlja pravila za sve elemente stranice za koje nisu postavljena druga pravila.
    Šifra * (veličina fonta: 14px;) postavlja veličinu fonta na 14 piksela za sve elemente dokumenta za koje nisu određena druga pravila pomoću drugih selektora.
  • Tega. Ova vrsta birača određuje pravila oblikovanja za sadržaj određene HTML oznake. Ime selektora je isto kao i ime deskriptora, samo je napisano bez uglastih zagrada: str, h1, ul.
    Na primjer, kod h2 (boja: crvena;) postavlja boju teksta na zelenu za sve naslove druge razine, odnosno sadržaje oznaka
    .
  • Atribut. Pomoću ove grupe selektora možete odrediti stil sadržaja svih oznaka koje imaju naveden određeni atribut. Selektori se mogu preciznije odrediti navođenjem ne samo naziva atributa, već i vrijednosti koja mu je dodijeljena, kao i naziva oznake koja ga sadrži. To se može koristiti kako bi dizajn bio individualniji.
  • razreda. Vrsta selektora kada trebate drugačije formatirati sadržaj oznaka iste vrste. Na primjer, želite da linkovi na dnu stranice budu crveni, dok svi ostali trebaju ostati plavi kao što su bili. Da biste primijenili pravila klase na element stranice, trebate navesti naziv klase u atributu razreda odgovarajuću oznaku.

  Recimo korištenje klase korak pojedinačni elementi trebate postaviti lijevu marginu na 15 piksela.

  CSS kod će biti ovakav:

  Korak (margina-lijevo: 15px;)

  HTML kod koji će vezati element za pravilo bit će:

  Uvučeni tekst

  • iskaznica. Koristi se zajedno s atributom iskaznica HTML oznaka i koristi se kada je potrebno postaviti svojstva za jedan element. Za razliku od selektora klase, čijem nazivu prethodi točka, on se piše koristeći hash:

  #exclusive (boja:narančasta;)

  • Kontekstualno. U HTML-u se određene oznake često nalaze unutar drugih oznaka, a kontekstualni birači pomažu definirati pravila upravo za takve slučajeve. Na primjer, možete ih koristiti za oblikovanje stavki unutar numeriranih popisa ili kurzivnog teksta unutar odlomaka:

  P i (fint-obitelj: Century;)

  Ostale grupe selektora temelje se na kombinaciji navedenih tipova, kao i na principu nasljeđivanja, kada element djeteta preuzima svojstva roditelja.

  Kombiniranje i grupiranje birača prikladno je u mnogim situacijama. Na primjer, za postavljanje pravila razreda korak samo za poveznice morate navesti oba selektora odvojena točkom (prvo oznaka, zatim klasa):

  A.korak (margin-lijevo: 15px;)

  Kako uključiti CSS u HTML stranicu?

  Postoji nekoliko načina da alati za izradu web stranica budu u međusobnoj interakciji. Na temelju načina dodavanja, stilovi su podijeljeni u sljedeće kategorije.

  Ugrađeni stilovi

  Postavite u dokumentu izravno unutar HTML oznake pomoću atributa stil. Imajte najveći prioritet. To znači da ako je zadan isti element drugačiji dizajn, tada će se prednost dati pravilu koje je napisano unutar oznake. Selektor za ugrađeni stil nije potreban, jer je veza između stila i oznake očita - u njemu je naveden dizajn oznake.

  Sljedeći kod postavlja veličinu i boju fonta za tekst unutar oznake

  Tekst oblikovan korištenjem internog stila.

  Globalni stilovi

  Postavljeno oznakom …

  Srodni stilovi

  Najprikladnije, jer uz njihovu pomoć možete jednostavno dizajnirati cijelu web stranicu u istom stilu. Povezani stil znači da su svi CSS stilovi u zasebnoj datoteci s ekstenzijom .css.

  Ovaj pristup je također zgodan jer odvaja pravila dizajna stranica od njihovog sadržaja, CSS kod se može lako mijenjati bez uplitanja u HTML datoteke, a princip odvajanja koda je vrlo važan, posebno u velikim projektima.

  Za povezivanje pravila iz CSS datoteke s HTML stranicom upotrijebite oznaku dodano u spremnik , i njegove atribute.

  Ovdje je redak koji povezuje pravila iz datoteke moj stil.css sa HTML stranicom:

  rel="stylesheet" navodi da se oznaka odnosi na datoteku stilske tablice, href="mysyle.css" postavlja svoju adresu. Pravila adresiranja su ista kao i za obične linkove - put može biti apsolutan, relativan itd.

  Uvezeni stilovi

  Pomoću naredbe @uvoz možete dodati stilove iz CSS datoteke u trenutnu tablicu. Ovo može biti potrebno, na primjer, ako želite nadopuniti pojedinačni dizajn dokumenta specificiran korištenjem globalnih stilova, univerzalna pravila iz zasebne datoteke. Metoda se ne može koristiti s ugrađenim stilovima.

  Kod u nastavku uvozi tablicu datoteke u dokument bilo koji.css, koji se nalazi u mapi s uređenim HTML dokumentom:

  @uvezi url(bilo koji.css);

  Naredba je zapisana u retku ispod uvodne oznake