Dajmo primjer lista stilova - stvorite datoteku stil.css i napiši stilove:

body (familija fonta: Arial, Verdana, Sans-serif; /* Familija fonta */ veličina fonta: 12pt; /* Glavna veličina fonta u točkama */ boja pozadine: #f0f0f0; /* Boja pozadine web stranice * / boja: #000000; /* Boja teksta */ ) h1 ( boja: #a52a2a; /* Boja zaglavlja */ veličina fonta: 24pt; /* Veličina fonta u točkama */ porodica fonta: Georgia, Times, serif; /* Obitelj fontova */ font-weight: normal; /* Normalna težina teksta */ )

Ovdje smo postavili stilove za tijelo stranice i za titulu

. Također možete postaviti posebne stilove za bilo koje druge elemente stranice na vašoj web stranici.

Povežimo sada našu tablicu stilova sa web mjestom:

Pozdrav svijete!

Ovo je moja prva stranica sa CSS stilovima

Pa smo shvatili što je CSS, zašto se ova tehnologija koristi, naučili kako povezati stilove sa web mjestom. Ova lekcija je neka vrsta uvoda u kaskadne stilske listove. U drugim lekcijama ćemo detaljnije govoriti o CSS tehnologiji.

Povezivanje CSS-a događa se na nekoliko načina, koji se koriste ovisno o situaciji. Sada ćemo detaljnije pogledati ove metode. Bit će dosta informacija pa ih nemojte ni pokušavati zapamtiti, ali svakako pokušajte shvatiti što je što.

Da, i još jedna točka koja je već spomenuta u prethodnoj lekciji, ali ću je opet ponoviti. Često se mnogi početnici boje izraza “Cascading style sheets” ili jednostavno “style sheets”, pa kad se susreću s takvim izrazima u tekstu, podsvjesno im se čini da ne razumiju što je rečeno. Dakle, zapravo nema tablica u obliku na koji ste navikli - nema. A te riječi opisuju samo jednu stvar - sve što se odnosi na CSS, odnosno razna CSS pravila, svojstva, vrijednosti i tako dalje. Općenito, sve što ćemo proučavati u ovom udžbeniku. Usput, ovo također može uključivati ​​jednostavno riječi "CSS" i "stilovi".

Ugrađeni stilovi

Povezivanje ugrađenih stilova (inline) uključuje primjenu atributa stila na određenu oznaku na stranici. U ovom slučaju, vrijednost atributa je jedna ili više (odvojenih točkom i zarezom) s pripadajućim vrijednostima. U pravilu se ova metoda koristi u slučajevima kada je potrebno promijeniti karakteristike određenog elementa na jednoj određenoj stranici.

Opća sintaksa

<тег style="свойство:значение; свойство:значение; ...">...

Primjer povezivanja ugrađenih stilova s ​​CSS-om

Stavak 1

Stavak 2

Rezultat u pregledniku

Stavak 1

Stavak 2

Unutarnji stilovi

Interni stilovi naznačeni su u zaglavlju dokumenta i povezani su pomoću oznake. U ovom slučaju, CSS više ne utječe na jedan element, već na sve elemente navedene u stilovima koji su prisutni na ovoj stranici. Obično se ova metoda koristi kada je potrebno promijeniti stilove nekoliko identičnih elemenata unutar jedne HTML stranice.

Primjer povezivanja internih stilova sa CSS-om

Stavak 1

Stavak 2

Rezultat u pregledniku

Stavak 1

Stavak 2

Vanjski stilovi

Vanjski stilovi uključeni su u zasebnu datoteku pomoću . U ovom se slučaju svi stilovi nalaze u običnoj tekstualnoj datoteci s nastavkom .css i utječu na elemente svih stranica na koje je ta datoteka povezana. Obično izrada stilova web mjesta počinje ovom metodom, jer se samo uz njegovu pomoć osjećaju sve prednosti CSS-a, jer promjenom podataka u samo jednoj datoteci možete kontrolirati prikaz velikog broja stranica odjednom. I već u procesu rada na web mjestu dodaju se unutarnji ili ugrađeni stilovi, ako je potrebno.

Pri korištenju vanjskih stilova autori se ponašaju na potpuno različite načine. Neki pohranjuju sve stilove web mjesta u jednu datoteku, drugi - u nekoliko. Na primjer, jedna datoteka sadrži stilove za cijelo web mjesto i prisutna je na svim stranicama, druga je dodatno povezana samo s određenim odjeljcima, treća - s određenim pododjeljcima itd. Na vama je da odlučite što ćete učiniti.

Primjer povezivanja vanjskih stilova s ​​CSS-om

Stavak 1

Stavak 2

Sadržaj datoteke style.css

Tijelo ( pozadina: #ccccff; /* boja pozadine stranice */ ) p ( boja: crvena; /* boja teksta odlomka */ obitelj-fontova: Helvetica, sans-serif; /* font odlomka */ veličina fonta: 150 % ; /* veličina fonta */ text-align: center; /* centrirani tekst */ obrub: 5px zeleni dvostruki; /* stilovi obruba */ )

Rezultat u pregledniku

Stavak 1

Stavak 2

Kao što vidite, sve je vrlo jednostavno. Općenito, po imenima gotovo svih CSS svojstava već možete razumjeti koje promjene čine, naravno, ako znate barem malo engleskog.

U većini primjera ovoga CSS vodič Koristit ću unutarnje stilove jer su oni najvizualniji za demonstraciju. Za daljnje proučavanje, bolje je da odmah napravite datoteku vanjskih stilova i naviknete se koristiti ih. Na primjer, napravite podmapu style, stvorite datoteku style.css u njoj i uključite je u svoju HTML stranicu.

Uključujući CSS putem pravila @import

Drugi način povezivanja stilova koji se nalaze u zasebnim datotekama je korištenje pravila . Ovo se pravilo koristi za kombiniranje nekoliko listova stilova u jedan, što je ponekad vrlo zgodno. Veza se javlja u vanjskim ili unutarnjim listovima stilova; za to se nakon naziva pravila piše konstrukcija url(), gdje je adresa CSS datoteke navedena u navodnicima (" "). Ili url() uopće nije napisan, ali su citati i adresa datoteke odmah uključeni. Opća sintaksa je sljedeća.

U vanjskom listu stilova

@import url("adresa datoteke"); @import "adresa datoteke"; ...

U unutarnjem

Pogledajmo korištenje ovog pravila u vanjskim listovima stilova, za ovo ću vam dati dva primjera za usporedbu.

Primjer 1: normalna veza vanjskih stilova

Sadržaj stranice.

Primjer 2: povezivanje vanjskih stilova s ​​@import CSS pravilom

Sadržaj stranice.

Sadržaj datoteke style1.css

@import url("style/style2.css"); @import url("style/style3.css"); Ovdje ispod, osim toga, mogu postojati uobičajeni stilovi sa svojstvima, vrijednostima itd.

Vladati radi ispravno, mora se navesti na samom početku lista stilova. Ovdje je jedina iznimka pravilo , koji je uvijek na prvom mjestu, iako se u praksi koristi izuzetno rijetko.

Ne preporučam da odmah koristite svu ovu raznolikost CSS metoda - usredotočite se na obične vanjske listove stilova, jer je to glavna opcija. Ako želite, možete, naravno, eksperimentirati, ali ništa više. Općenito, uvijek možete odlučiti kako spojiti CSS, glavna stvar bi bila što spojiti. :)

Prilagođeni stilovi

Mnogi preglednici imaju mogućnost uključivanja datoteke sa CSS-om od strane samih korisnika, tako da mogu mijenjati izgled stranica koje gledaju, kako kažu, “po svojoj mjeri”. Na primjer, promijenite veličinu fonta i tip slova, boju teksta i pozadine nekih elemenata itd. Naravno, u ovom slučaju stilove kreira sam korisnik. Na primjer, u Internet Exploreru možete omogućiti prilagođene stilove odlaskom na: Alati → Internetske mogućnosti → Općenito → Izgled.

U ovom ćete tutorialu naučiti kako spojiti css na html. Pogledajmo nekoliko opcija s primjerima. Također ćemo govoriti o asinkronom učitavanju stilova i hakiranja za različite preglednike.

Kako spojiti css na html u posebnoj datoteci

Sada ću vam pokazati kako spojiti css na html s zasebnom datotekom stilova. Stvara se posebna css datoteka. Zatim se posebnim naredbama povezuje s potrebnim dokumentima. Ova se vrsta naziva vanjski stilski list.

Ova metoda je najpoželjnija. Omogućuje vam da razvijete stilove web stranica odvojeno od HTML dokumenata. Stil se zatim može koristiti u jednoj datoteci style.css na više stranica.

Stazu pišemo točno u oznaci glave. Određuje sve potrebne informacije o sustavu za prikaz stranice. Spaja se ovako:

Postoje i drugi načini povezivanja. Koristite ih samo kao dodatnu opciju.

Vrijedno je reći da ugrađeni stilovi imaju najveći prioritet. Čak i ako uključite vanjski css, preglednik će dati prednost ugrađenim stilovima za određenu oznaku. Na drugom mjestu po prioritetu su interni stilovi. Oni su inferiorni od ugrađenih, ali bolji od vanjskih.

Općenito, kao dodatna opcija, može vam biti korisno koristiti ugrađene ili interne stilove. Ovo je vrlo korisno ako trebate stilizirati neki element na određenoj stranici bez utjecaja na glavnu css datoteku.

U prvom poglavlju naučili ste da se dizajn web stranice izrađuje pomoću CSS-a. Da bismo bolje razumjeli što treba koristiti i zašto, pogledajmo jedan ilustrativan primjer. Zamislite HTML kao crno-bijeli strukturirani okvir kuće bez ikakvih ukrasa, a CSS je ono što koristimo za stvaranje jedinstvenog izgleda.

Kao što vidite, kuća s desne strane sada ima boje, materijale i dodatne ukrase. Isto se događa i na web stranici: uz pomoć CSS pravila na njoj se pojavljuju boje i uvlake, mijenja se stil fonta i veličina elemenata te se stvara cijeli, cjeloviti stil.

Jednostavan stilski list

Pogledajmo kako izgleda najosnovniji stilski list i od kojih se elemenata sastoji. Ovo je primjer CSS stila za sve oznake

Koji se nalaze na web stranici:

Kako će sada izgledati tekst?

U pregledniku i što svaki redak znači? Vrlo je jednostavno: font će imati podebljani stil i boju #1E824C (heksadecimalni kod boje) i bit će prikazan na 1em (relativna jedinica jednaka zadanoj veličini fonta u pregledniku).

Gore opisani stil, kao i svaki drugi, uključuje skup elemenata koji imaju vlastita imena. Zapamtite ih tako da kada pročitate sljedeća poglavlja shvatite što se događa.

Odabir Određivanjem, govorimo pregledniku na što točno želimo primijeniti stil. U našem slučaju selektor je str. Deklaracijski blok Ovo je naziv cijelog sadržaja koji se nalazi između vitičastih zagrada () nakon selektora. Svojstvo stila Ovo je naredba koja navodi željenu opciju oblikovanja (na primjer, želite promijeniti stil fonta font-weight , boju boje , veličinu fonta font-size , itd.). Iza naziva svojstva mora se staviti dvotočka. Kasnije ćete saznati više o CSS svojstvima. Vrijednost svojstva Iza dvotočke ispisuje se sama vrijednost svojstva koju sami definirate i tako kreirate vlastiti stil. Ovisno o svojstvu, morate navesti odgovarajuću vrijednost.

Na primjer, stil fonta određen je ključnim riječima bold , bolder itd., boja je određena heksadecimalnom vrijednošću, RGB(A), HSL(A) ili ključnim riječima red , orange , white itd., veličina fonta određena je CSS-om jedinice (postotak) % , piksela px, bodova točka, visina fonta em) ili konstante small , medium , large itd. Nakon navođenja vrijednosti svojstva, stavlja se točka-zarez.

Budući da je CSS neosjetljiv na prijelome redaka, razmake, kartice i velika i mala slova, svoj kod možete formatirati na način koji olakšava čitanje i kasnije uređivanje. Na primjer, mogli bismo napisati gornji kod u jednom redu:

P (font-weight:bold;color:#1E824C;font-size:1em;)

I to radi, ali je li lako razumjeti? Pogotovo kada je CSS kod prilično dugačak. Naravno, ne bi škodilo da ga odvojite barem razmacima. Postoji nekoliko pravila lijepog ponašanja, a naučite li ih odmah, reći ćete sebi "hvala" u budućnosti.

Vrlo često, kada se opisuje stil, koristi se kompaktni oblik notacije, u kojem su sva svojstva za jedan selektor naznačena u jednom bloku:

P ( težina fonta: podebljano; boja: #1E824C; veličina fonta: 1em; )

I ovaj oblik notacije je vrlo glomazan, iako funkcionira:

P (težina fonta: podebljano;) p (boja: #1E824C;) p (veličina fonta: 1em;)

Kako biste olakšali navigaciju kodom, preporuča se pisati svako svojstvo u novom retku i koristiti tabulatore ili razmake prilikom popisa svojstava. Ponekad postoji razmak između dvotočke i vrijednosti svojstva, ali to je na vama da odlučite što želite.

Za dodatnu pogodnost, možete dodati komentare izravno u CSS. U njih možete napisati objašnjenja i bilješke koje će vam pomoći u kretanju stilskim listovima.

Komentari u CSS-u pišu se između znakova /* i */. Oni se ne prikazuju na web stranici u pregledniku i vidljivi su samo u kodu. Programeri također često koriste komentare kako bi sakrili privremeno nepotrebne dijelove CSS koda. Komentari izgledaju ovako:

/* Stil za glavni tekst */ p ( težina fonta: podebljano; boja: #1E824C; veličina fonta: 1em; )

Unutarnji i vanjski stilski listovi

Nakon što izradite tablicu stilova, možete odabrati kako ćete je priložiti svojoj web stranici. Postoje dvije opcije za tablice - interne, koje se dodaju izravno na stranicu, i eksterne, koje se nalaze u posebnoj datoteci s ekstenzijom .css i poveznicom su povezane sa stranicom.

Interni listovi stilova napisani su u HTML dokumentu između oznaka. Morate dodati stilsku tablicu svakoj web stranici. Ako stranica ima velik broj stranica koje zahtijevaju isti dizajn, tada dodavanje i uređivanje stilova postaje nezahvalan posao – proces će trajati jako dugo. Stoga se interni listovi stilova smatraju nezgodnima.

Vanjski listovi stilova mnogo su češći. Trebate samo povezati tablicu sa svim potrebnim web stranicama pomoću oznake s atributom rel (definira odnos između stranice i uključene datoteke) i vrijednošću stilske tablice, što znači da uključena datoteka sadrži stilsku tablicu. Atribut href je staza (URL) do vaše .css datoteke:

Uređivanjem samo jedne datoteke možete odjednom promijeniti stil cijele stranice, bez obzira na broj stranica. Ovo je vrlo zgodno, posebno za velike resurse.

Lekcija: stvaranje lista stilova

Budući da su vanjski listovi stilova najprikladniji i najčešće se koriste u razvoju dizajna, naučit ćemo kako ih izraditi. Na ovoj stranici možete preuzeti arhivu s datotekama za ovu lekciju.

U mapi ćete pronaći HTML dokument s primjerom jednostavne stranice i slikom (koja će se koristiti u uputama). Otvorite HTML dokument u svom pregledniku. Vidjet ćete da stranica izgleda potpuno normalno. Da bismo mu dali privlačniji izgled, stilizirajmo ga.

Za sada ne morate preduboko ulaziti u značenje bilo kojeg dijela koda. Sada morate razumjeti princip rada. Započnimo.

Povezivanje CSS-a s HTML-om

Za početak, otvorite bilo koji uređivač teksta na računalu (bilježnica će poslužiti) i stvorite praznu datoteku pod nazivom style, spremajući je s nastavkom .css (trebali biste završiti s datotekom style.css). Spremite datoteku u mapu u kojoj se nalazi preuzeti HTML dokument.

Otvorite HTML dokument u uređivaču teksta, kao iu pregledniku (kako biste jednostavno vidjeli promjene u izgledu stranice). Dodajte između oznaka sljedeći kod:

Ukratko rezimirajte što ste upravo učinili. Lijepljenjem ovog koda u svoj HTML dokument, vi:

• dao poveznicu na font pod nazivom Roboto Condensed, koji će biti preuzet s Google poslužitelja (kasnije ćemo vam reći više o Google fontovima);
• povezao našu vanjsku stilsku tablicu style.css (prazno za sada).

Pisanje CSS stila

Spremite promjene u HTML dokument i idite na praznu .css datoteku koju ste stvorili. Dodajmo malo stila stranici:

Html ( padding-top: 5px; background-image: url(background.jpg); )

Spremite promjene. Čestitamo, napisali ste svoje prvo pravilo - ono se odnosi na tag . Prvo svojstvo - padding-top - će dodati gornje polje od 5 piksela između prozora preglednika i sadržaja web stranice. S drugim svojstvom, background-image, uključili ste sliku za pozadinu cijele stranice navodeći put do grafičke datoteke (koja se nalazi u istoj mapi kao i HTML dokument).

Osvježite otvorenu web stranicu u pregledniku. Ako je sve učinjeno ispravno, vidjet ćete da se na stranici pojavila pozadina, a razmak između vrha prozora i teksta malo se povećao.

Tijelo (širina: 75%; ispuna: 40px; margina: 15px automatski; boja pozadine: #EBEBEB; radijus granice: 30px; )

Spremite promjene u datoteku. Sada ti:

• postavite područje za sadržaj oznake , što je jednako 75% širine prozora preglednika;
• osigurao marginu od 40 piksela sa svih strana područja sadržaja;
• pozicionirao područje u središte stranice, a također napravio uvlačenje na vrhu i dnu od 15 piksela;
• postavite boju pozadine #EBEBEB za područje sadržaja;
• zaokružio kutove pravokutnog područja, određujući radijus zaokruživanja od 30 piksela.

Ponovno ažurirajte HTML dokument. U isto vrijeme provjerite je li predmemorija onemogućena ili ponovno učitajte stranicu sa svim ažuriranim datotekama koje su s njom povezane, koristeći posebnu kombinaciju tipki (na primjer, za Chrome ovo je Ctrl+F5).

Vidjet ćete da je pravokutno područje sa zaobljenim kutovima dodano u središte stranice. Ovo je rezultat vaših radnji u CSS datoteci. Također možete pokušati smanjiti prozor preglednika i diviti se kako se širina pravokutnog područja prilagođava njegovoj veličini. To je zbog činjenice da je širina određena kao postotak.

Promjena fonta pomoću CSS-a

Vrijeme je da ukrasimo naš tekst. Dodajte ovaj kod svojoj tablici stilova i spremite promjene:

H1 (boja: #E87E04; veličina fonta: 2em; margin-lijevo: 20px; obitelj fonta: "Roboto Condensed", sans-serif; ) h2 (boja: #E87E04; veličina fonta: 1.7em; margin-lijevo : 20px; obitelj-fontova: "Roboto Condensed", sans-serif; ) p (boja: #22313F; line-height: 150%; margin-top: 20px; margin-left: 20px; font-family: "Roboto Condensed ", sans-serif; )

Nakon što ste ovo napisali, postavili ste boje fonta za oznake h1 , h2 , p, naveli njihove veličine, dodali marginu od lijevog ruba od 20 piksela i dodatno za

Uvukli smo vrh za 20 piksela i postavili line-height (prored teksta) na 50% veći od standardnog. Osim toga, spojili ste Roboto Condensed font na sva tri taga (zato ste na samom početku morali dati poveznicu na njega u HTML datoteci).

Osvježite stranicu u pregledniku i divite se rezultatu. U ovom tutorialu pokušat ćemo još jednu stvar. Dodajte ovaj kod u CSS:

Naglasak (težina fonta: podebljano;)

Spremite i osvježite stranicu u pregledniku. Vidjet ćete da je u zadnjem paragrafu font u nekim dijelovima teksta podebljan. Da biste razumjeli što se dogodilo, idite na prozor uređivača teksta u kojem ste otvorili HTML datoteku na samom početku. Pogledajte zadnji odlomak: dio rečenice je zamotan u oznaku s klasom naglaska. Na ovaj način napisali ste stil za jedan redak teksta u odlomku. Više ćemo govoriti o klasama u sljedećem poglavlju.

Trebali biste završiti s ovakvom stranicom:

Kao praksu, pokušajte promijeniti veličinu teksta za

(recimo 1.1em), a također povećati razmak između

I lijevi rub područja sadržaja za još 10 piksela.

zaključke

U ovom se poglavlju bavila sintaksom CSS-a i načinom izrade osnovne tablice stilova. Naučili ste kako ugraditi CSS u HTML stranicu i kako izraditi jednostavne stilove. Istaknimo glavne stvari koje trebate zapamtiti iz ovog poglavlja:

Svaki CSS stil sastoji se od nekoliko elemenata: selektora, svojstva stila i vrijednosti ovog svojstva.

Sva svojstva i njihove vrijednosti zapisuju se u bloku deklaracije između dvije vitičaste zagrade () nakon navođenja selektora.

Morate pažljivo pratiti znakove: dvije vitičaste zagrade (otvaranje na početku oglasnog bloka i zatvaranje na kraju). Bez ovih zagrada, CSS neće raditi ispravno.

Nakon svojstva potrebno je staviti dvotočku, a iza vrijednosti točku i zarez.

Radi praktičnosti i bolje čitljivosti vašeg CSS koda, napišite svako svojstvo u novom retku i ne štedite na razmacima i karticama.

Dobar dan! U ovom ću članku pokazati različite metode za uključivanje CSS-a u HTML. Također ću objasniti razne suptilnosti i nijanse različitih načina povezivanja stilova.

Unutarnji priključak

Interni list stilova je skup stilova, dio koda web stranice koji bi se uvijek trebao pojaviti između početnih i završnih oznaka HTML kod u tijelu oznake web stranice. Primjer:

Žuti tekst s fontom Verdana