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.
Implementirati ovaj zadatak moguće 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 ovaj element, u 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 za mali broj HTML elemenata.
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
S nama možete povoljne cijene kupuj najbolje slonove!!
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šoj web stranici za dobivanje informacija 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.
Budući da uključujemo kaskadnu stilsku tablicu kao vanjsku datoteku, poveznica naše 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", na ovaj trenutak, postoje tri stranice od kojih je svaka povezana s jednim singlom vanjski css datoteka - 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 . Unutarnji stilovi imaju prednost nad vanjskim, ali su inferiorni u odnosu na ugrađene stilove (određene atributom style).
...
1.3. Ugrađeni stilovi
Kada pišemo umetnuti stilovi, zapisujemo CSS kod u HTML datoteku, izravno unutar oznake elementa pomoću atributa style:
Obratite pažnju na ovaj tekst.
Takvi stilovi utječu samo na element za koji su postavljeni.
1.4. pravilo @uvoza
pravilo @uvoza Omogućuje učitavanje vanjskih listova stilova. Da bi direktiva @import radila, mora se pojaviti u listu stilova (vanjskoj ili internoj) prije svih ostalih pravila:
Pravilo @import također se koristi za uključivanje web fontova:
@import url(https://fonts.googleapis.com/css?family=Open+Sans&subset=latin,cyrillic);
2. Vrste selektora
Selektori predstavljaju strukturu web stranice. Oni pomažu stvoriti pravila za oblikovanje elemenata web stranice. Selektori mogu biti elementi, njihove klase i identifikatori, kao i pseudoklase i pseudoelementi.
2.1. Univerzalni selektor
Odgovara bilo kojem HTML elementu. Na primjer, * (margina: 0;) će poništiti margine za sve elemente stranice. Selektor se također može koristiti u kombinaciji s pseudo-klasom ili pseudo-elementom: *:after (CSS stilovi), *:checked (CSS stilovi) .
2.2. Selektor elementa
Selektori elemenata omogućuju formatiranje svih elemenata ove vrste na svim stranicama stranice. Na primjer, h1 (font-family: Lobster, cursive;) će postaviti opći stil oblikovanja za sve h1 naslove.
2.3. Izbornik razreda
Birači klasa omogućuju vam postavljanje stilova za jedan ili više elemenata s istim nazivom klase, postavljenih na različitim mjestima na stranici ili na različitim stranicama web mjesta. Na primjer, da biste stvorili naslov s klasom naslova, morate dodati atribut klase s vrijednošću naslov u početnu oznaku
i postavite stil za navedenu klasu. Stilovi stvoreni pomoću klase mogu se primijeniti na druge elemente, ne nužno te vrste.
.naslov (transformacija teksta: velika slova; boja: svijetloplava; )Ako element ima više atributa klase, njihove vrijednosti su spojene razmacima.
Upute za korištenje osobnog računala
2.4. ID birač
Selektor ID-a omogućuje vam formatiranje jedan specifični element. ID vrijednost mora biti jedinstvena, može se pojaviti samo jednom na jednoj stranici i mora sadržavati barem jedan znak. Vrijednost ne smije sadržavati razmake.
Ne postoje nikakva druga ograničenja u obliku koji id može imati; posebno, identifikatori mogu biti svi brojevi, počinjati brojem, počinjati donjom crtom, imati samo interpunkcijske znakove itd.
Jedinstveni ID elementa može se koristiti u razne svrhe, uključujući kao način upućivanja na određene dijelove dokumenta pomoću ID-ova fragmenata, kao način ciljanja elementa prilikom skriptiranja i kao način stiliziranja određenog elementa iz CSS-a .
#sidebar (širina: 300px; float: lijevo;)2.5. Selektor potomaka
Selektori potomaka primjenjuju stilove na elemente unutar elementa spremnika. Na primjer, ul li (transformacija teksta: velika slova;) - odabrat će sve li elemente koji su djeca svih ul elemenata.
Ako želite oblikovati potomke određenog elementa, morate tom elementu dati klasu stila:
p.prvi a (boja: zelena;) — ovaj stil primijenit će se na sve veze potomke odlomka s prvom klasom ;
p .first a (boja: zelena;) - ako dodate razmak, stilizirat će se veze unutar bilo koje oznake .first klase koja je dijete elementa
First a (boja: zelena;) - ovaj stil će se primijeniti na bilo koju vezu koja se nalazi unutar drugog elementa, označenog class.first .
2.6. Izbornik djeteta
Element dijete izravno je dijete elementa koji ga sadrži. Jedan element može imati nekoliko podređenih elemenata, ali svaki element može imati samo jedan nadređeni element. Selektor djeteta omogućuje vam primjenu stilova samo ako podređeni element dolazi odmah nakon nadređenog elementa i nema drugih elemenata između njih, odnosno podređeni element nije ugniježđen ni u što drugo.
Na primjer, p > strong će odabrati sve jake elemente koji su djeca elementa p.2.7. Sestra selektor
Sestrinstvo se javlja između elemenata koji dijele zajedničkog roditelja. Srodni selektori omogućuju odabir elemenata iz grupe elemenata iste razine.
h1 + p - odabrat će sve prve paragrafe odmah iza bilo koje oznake
bez utjecaja na preostale paragrafe;
h1 ~ p - odabrat će sve paragrafe koji su sestrinski bilo kojem h1 naslovu i odmah nakon njega.
2.8. Selektor atributa
Selektori atributa biraju elemente na temelju naziva atributa ili vrijednosti atributa:
[atribut] - svi elementi koji sadrže navedeni atribut - svi elementi za koje je naveden atribut alt;
selektor[atribut] - elementi ovog tipa koji sadrže navedeni atribut, img - samo slike za koje je naveden atribut alt;
selector[attribute="value"] - elementi ove vrste koji sadrže navedeni atribut s određenom vrijednošću, img - sve slike čiji naslov sadrži riječ cvijet;
selektor[atribut~="vrijednost"] - elementi koji djelomično sadrže zadanu vrijednost, na primjer, ako je nekoliko klasa navedeno za element odvojen razmakom, p - paragrafi čiji naziv klase sadrži značajku;
selektor[atribut|="vrijednost"] - elementi čiji popis vrijednosti atributa počinje navedenom riječju, p - paragrafi čije je ime klase značajka ili počinje značajkom;
selektor[atribut^="vrijednost"] - elementi čija vrijednost atributa počinje navedenom vrijednošću, a - sve veze koje počinju s http:// ;
selektor[attribute$="value"] - elementi čija vrijednost atributa završava navedenom vrijednošću, img - sve slike u png formatu;
selector[attribute*="value"] - elementi čija vrijednost atributa sadrži navedenu riječ bilo gdje, a - sve veze čije ime sadrži book .
2.9. Selektor pseudo-klasa
Pseudo-klase su klase koje zapravo nisu priložene HTML oznakama. Omogućuju vam da primijenite CSS pravila na elemente kada se događaj dogodi ili poštuje određeno pravilo. Pseudoklase karakteriziraju elemente sa sljedećim svojstvima:
:hover - bilo koji element nad kojim se nalazi kursor miša;
:focus - interaktivni element koji je navigiran pomoću tipkovnice ili aktiviran pomoću miša;
:active - element koji je aktivirao korisnik;
:valid - polja obrasca čiji je sadržaj provjeren u pregledniku radi usklađenosti s navedenim tipom podataka;
:invalid — polja obrasca čiji sadržaj ne odgovara navedenom tipu podataka;
:enabled - sva aktivna polja obrasca;
:onemogućeno — blokirana polja obrasca, tj. u neaktivnom stanju;
:in-range - polja obrasca čije su vrijednosti u navedenom rasponu;
:out-of-range - polja obrasca čije vrijednosti nisu unutar navedenog raspona;
:lang() - elementi s tekstom na navedenom jeziku;
:not(selektor) - elementi koji ne sadrže navedeni selektor - klasa, identifikator, ime ili tip polja obrasca - :not() ;
:target je element sa simbolom # koji se spominje u dokumentu;
:checked — odabrani (korisnički odabrani) elementi obrasca.
2.10. Strukturni selektor pseudo-klasa
Strukturalne pseudoklase odabiru podređene elemente prema parametru navedenom u zagradama:
:nth-child(odd) - neparni podređeni elementi;
:nth-child(even) - parni elementi djeteta;
:nth-child(3n) - svaki treći element među djecom;
:nth-child(3n+2) - odabire svaki treći element, počevši od drugog djeteta (+2) ;
:nth-child(n+2) - odabire sve elemente počevši od drugog;
:nth-child(3) - odabire treći element djeteta;
:nth-last-child() - na popisu podređenih elemenata odabire element s navedenom lokacijom, slično :nth-child() , ali počevši od posljednjeg, u suprotnom smjeru;
:first-child - omogućuje stiliziranje samo prvog podređenog elementa oznake;
:last-child - omogućuje formatiranje posljednjeg podređenog elementa oznake;
:only-child - odabire element koji je jedini podređeni element;
:empty - odabire elemente koji nemaju djecu;
:root - odabire element koji je korijen u dokumentu - html element.
2.11. Selektor pseudo-klasa strukturnog tipa
Označava određenu vrstu podređene oznake:
:nth-of-type() - odabire elemente slične :nth-child() , ali uzima u obzir samo tip elementa;
:first-of-type - odabire prvo dijete zadanog tipa;
:last-of-type - odabire zadnji element ove vrste;
:nth-last-of-type() - odabire element zadanog tipa u popisu elemenata prema navedenoj lokaciji, počevši od kraja;
:only-of-type - odabire jedini element navedene vrste među podređenim elementima nadređenog elementa.
2.12. Selektor pseudo elemenata
Pseudoelementi se koriste za dodavanje sadržaja koji se generira pomoću svojstva sadržaja:
:prvo-slovo - odabire prvo slovo svakog odlomka, odnosi se samo na elemente bloka;
:first-line - odabire prvi redak teksta elementa, primjenjuje se samo na elemente bloka;
:before - umeće generirani sadržaj prije elementa;
:after - dodaje generirani sadržaj nakon elementa.
3. Kombinacija selektora
Da biste točnije odabrali elemente za oblikovanje, možete koristiti kombinacije birača:
img:nth-of-type(even) - odabrat će sve slike s parnim brojevima čiji alternativni tekst sadrži riječ css.
4. Selektori grupiranja
Isti stil može se primijeniti na više elemenata u isto vrijeme. Da biste to učinili, trebate navesti potrebne selektore na lijevoj strani deklaracije, odvojene zarezima:
H1, h2, p, raspon ( boja: rajčica; pozadina: bijela; )
5. Nasljeđivanje i kaskada
Nasljeđivanje i kaskada dva su temeljna pojma u CSS-u koji su usko povezani. Nasljeđivanje je mjesto gdje elementi nasljeđuju svojstva od svog roditelja (elementa koji ih sadrži). Kaskada se očituje u tome kako različiti tipovi listovi stilova se primjenjuju na dokument i kako se sukobljena pravila poništavaju.
5.1. Nasljedstvo
Nasljedstvo je mehanizam kojim se određena svojstva prenose s pretka na njegove potomke. CSS specifikacija dopušta nasljeđivanje svojstava povezanih s tekstualnim sadržajem stranice, kao što su boja, font, razmak između slova, visina retka, stil popisa, poravnanje teksta, uvlačenje teksta, transformacija teksta, vidljivost, bijela -razmak i razmak između riječi. U mnogim je slučajevima to zgodno jer ne morate postavljati veličinu fonta i obitelj fontova za svaki element na web stranici.
Svojstva koja se odnose na oblikovanje bloka se ne nasljeđuju. To su pozadina, obrub, prikaz, lebdenje i brisanje, visina i širina, margina, minimalna-maksimalna visina i širina, obris, preljev, ispuna, položaj, ukras teksta, okomito poravnanje i z-indeks.
Prisilno nasljeđivanje
Pomoću ključna riječ inherit može prisiliti element da naslijedi bilo koju vrijednost svojstva svog nadređenog elementa. Ovo funkcionira čak i za svojstva koja nisu naslijeđena prema zadanim postavkama.
Kako se postavljaju i funkcioniraju CSS stilovi
1) Stilovi se mogu naslijediti od nadređenog elementa (naslijeđena svojstva ili korištenjem vrijednosti nasljeđivanja);
2) Stilovi koji se nalaze u tablici stilova ispod nadjačavaju stilove koji se nalaze u gornjoj tablici;
3) Stilovi iz različitih izvora mogu se primijeniti na jedan element. Možete provjeriti koji se stilovi primjenjuju u modu razvojnog programera preglednika. Da biste to učinili, kliknite na element desni klik mišem i odaberite “View code” (ili nešto slično). Desni stupac će navesti sva svojstva koja su postavljena na ovaj element ili naslijeđena od nadređenog elementa, zajedno sa stilskim datotekama u kojima su navedena, i rednim brojem retka koda.
Riža. 2. Način rada za razvojne programere u Google preglednik Krom 4) Kada definirate stil, možete koristiti bilo koju kombinaciju selektora - selektor elementa, pseudoklasu elementa, klasu ili identifikator elementa.
div (border: 1px solid #eee;) #wrap (width: 500px;).box (float: left;).clear (clear: both;)5.2. Kaskada
Kaskadno je mehanizam koji kontrolira konačni rezultat u situaciji kada se različita CSS pravila primjenjuju na isti element. Postoje tri kriterija koji određuju redoslijed primjene svojstava—!važno pravilo, specifičnost i redoslijed kojim su uključeni listovi stilova.
Pravilo!važno
Težina pravila može se odrediti pomoću ključne riječi!important, koja se dodaje odmah nakon vrijednosti svojstva, na primjer, span (font-weight: bold!important;) . Pravilo se mora staviti na kraj deklaracije ispred zagrade, bez razmaka. Takva će objava imati prednost nad svim ostalim pravilima. Ovo pravilo vam omogućuje da poništite vrijednost svojstva i postavite novu za element iz grupe elemenata u slučaju kada ne postoji izravan pristup datoteci stila.
Specifičnost
Za svako pravilo preglednik izračunava selektorsku specifičnost, a ako element ima proturječne deklaracije svojstava, u obzir se uzima pravilo koje ima najviše specifičnosti. Vrijednost specifičnosti ima četiri dijela: 0, 0, 0, 0. Specifičnost selektora definirana je na sljedeći način:
za id se dodaje 0, 1, 0, 0;
za klasu 0, 0, 1, dodaje se 0;
za svaki element i pseudoelement dodaje se 0, 0, 0, 1;
za inline stil dodan izravno elementu - 1, 0, 0, 0 ;
Univerzalni selektor nema specifičnosti.H1 (boja: svijetloplava;) /*specifičnost 0, 0, 0, 1*/ em (boja: srebrna;) /*specifičnost 0, 0, 0, 1*/ h1 em (boja: zlatna;) /*specifičnost: 0, 0, 0, 1 + 0, 0, 0, 1 = 0, 0, 0, 2*/ div#main p.about (boja: plava;) /*specifičnost: 0, 0, 0, 1 + 0 , 1, 0, 0 + 0, 0, 0, 1 + 0, 0, 1, 0 = 0, 1, 1, 2*/ .bočna traka (boja: siva;) /*specifičnost 0, 0, 1, 0 */ #bočna traka (boja: narančasta;) /*specifičnost 0, 1, 0, 0*/ li#bočna traka (boja: aqua;) /*specifičnost: 0, 0, 0, 1 + 0, 1, 0, 0 = 0, 1, 0, 1*/
Kao rezultat toga, na element će se primijeniti ona pravila koja su specifičnija. Na primjer, ako element ima dvije specifičnosti s vrijednostima 0, 0, 0, 2 i 0, 1, 0, 1, tada će drugo pravilo pobijediti.
Redoslijed povezanih tablica
Možete stvoriti više vanjskih listova stilova i povezati ih s jednom web stranicom. Ako se različite vrijednosti svojstava za jedan element nalaze u različitim tablicama, tada će se kao rezultat toga na element primijeniti pravilo koje se nalazi u dolje navedenom listu stilova.
Postoji nekoliko načina za dodavanje stilova web stranici, koji se razlikuju po svojim mogućnostima i namjeni. Pogledajmo ih detaljnije u nastavku.
Vanjski stilski list
Stilovi se nalaze u zasebnoj datoteci s nastavkom css; element se koristi za povezivanje HTML dokumenta s CSS datotekom . Nalazi se unutra
, kao što je prikazano u primjeru 1.Primjer 1. Povezivanje vanjskih stilova
Stilovi Naslov
Vrijednost atributa rel uvijek će postojati lista stilova i ona ostaje nepromijenjena. Vrijednost href je put do CSS datoteke; put se može specificirati ili relativno ili apsolutno. Imajte na umu da na ovaj način možete povezati stilski list koji se nalazi na drugom mjestu. U gornjem primjeru povezujemo ćirilični font Lobster s web stranice Google Fontovi.
Sadržaj datoteke style.css prikazan je u primjeru 2.
Primjer 2: Sadržaj datoteke style.css
H1 (familija fonta: "Lobster", kurziv; boja: zelena; )
Kao što možete vidjeti iz ovog primjera, datoteka stila je normalna tekstualna datoteka i sadrži samo CSS sintaksu. S druge strane, HTML dokument sadrži samo pokazivač na datoteku sa stilom; na taj je način u potpunosti implementirano načelo odvajanja koda i dizajna web mjesta. Stoga je korištenje vanjskog stilskog lista najsvestraniji i najpraktičniji način dodavanja stila web mjestu. To vam omogućuje neovisno uređivanje HTML i CSS datoteka.
Interni stilski list
Stilovi su zapisani u samom HTML dokumentu, unutar elementa.
Naslov