Dajemo primjer stilskog lista - kreirajte datoteku style.css i napiši stilove:

body (familija fontova: Arial, Verdana, Sans-serif; /* Porodica fontova */ veličina fonta: 12pt; /* Glavna veličina fonta u tač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 tačkama */ porodica fontova: Georgia, Times, serif ; /* Porodica fontova */ font-weight: normal; /* Normalna težina teksta */ )

Ovdje smo postavili stilove za tijelo stranice i za naslov

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

Sada povežimo našu listu stilova sa web lokacijom:

Zdravo svijete!

Ovo je moja prva stranica sa CSS stilovima

Pa smo to shvatili šta je CSS, zašto se koristi ova tehnologija, naučili smo kako povezati stilove na stranicu. Ova lekcija je svojevrsni uvod u kaskadne tablice stilova. U drugim lekcijama ćemo detaljnije govoriti o CSS tehnologiji.

Povezivanje CSS-a javlja se na nekoliko načina, koji se koriste ovisno o situaciji. Sada ćemo detaljnije pogledati ove metode. Biće dosta informacija, pa ih nemojte ni pokušavati zapamtiti, ali svakako pokušajte da shvatite šta je šta.

Da, i još jedna stvar koja je već bila dotaknuta u prethodnoj lekciji, ali ću je ponoviti. Često se mnogi početnici plaše fraze „Kaskadni stilski listovi“ ili jednostavno „stilski listovi“, pa kada naiđu na takve izraze u tekstu, podsvjesno im se čini da ne razumiju o čemu se govori. Dakle, u stvari, ne postoje tabele u formi na koju ste navikli - ne. A ove riječi opisuju samo jednu stvar – sve što se odnosi na CSS, odnosno razna CSS pravila, svojstva, vrijednosti itd. Generalno, sve što ćemo proučavati u ovom udžbeniku. Usput, ovo može uključivati ​​i jednostavno riječi “CSS” i “styles”.

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 tačkom i zarezom) sa odgovarajuć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 inline stilova sa CSS-om

Stav 1

Stav 2

Rezultat u pretraživaču

Stav 1

Stav 2

Interni stilovi

Interni stilovi su naznačeni u zaglavlju dokumenta i povezani su pomoću oznake. U ovom slučaju, CSS više ne utič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

Stav 1

Stav 2

Rezultat u pretraživaču

Stav 1

Stav 2

Vanjski stilovi

Vanjski stilovi su uključeni u zasebnu datoteku pomoću . U ovom slučaju, svi stilovi se nalaze u običnom tekstualnom fajlu sa ekstenzijom .css i utiču na elemente svih stranica na koje je ovaj fajl povezan. Obično kreiranje stilova web stranica počinje ovom metodom, jer se samo uz nju 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 interni ili ugrađeni stilovi, ako je potrebno.

Kada se koriste vanjski stilovi, autori djeluju na potpuno različite načine. Neki pohranjuju sve stilove stranice u jednu datoteku, drugi - u nekoliko. Na primjer, jedna datoteka sadrži stilove za cijelu stranicu 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 šta ćete raditi.

Primjer povezivanja vanjskih stilova sa CSS-om

Stav 1

Stav 2

Sadržaj datoteke style.css

Tijelo (pozadina: #ccccff; /* boja pozadine stranice */ ) p ( boja: crvena; /* boja teksta pasusa */ porodica fontova: Helvetica, sans-serif; /* font pasusa */ veličina fonta: 150 % ; /* veličina fonta */ text-align: centar; /* centrirani tekst */ granica: 5px zelena dvostruka; /* stilovi obruba */ )

Rezultat u pretraživaču

Stav 1

Stav 2

Kao što vidite, sve je vrlo jednostavno. Uopšteno govoreći, po nazivima skoro svih CSS svojstava već možete razumjeti koje promjene unose, naravno, ako znate barem malo engleski.

U većini primjera ovoga CSS tutorial Koristit ću unutrašnje stilove jer su najvizuelniji za demonstraciju. Za dalje proučavanje, bolje je da odmah kreirate datoteku vanjskih stilova i naviknete se na njihovu upotrebu. Na primjer, napravite podfolder sa stilom, kreirajte datoteku style.css u njoj i uključite je u svoju HTML stranicu.

Uključujući CSS preko @import pravila

Drugi način za povezivanje stilova koji se nalaze u zasebnim datotekama je korištenje pravila . Ovo pravilo se koristi za kombiniranje nekoliko stilskih listova u jedan, što je ponekad prilično zgodno. Povezivanje se odvija u eksternim ili internim stilovima; za to se nakon naziva pravila upisuje konstrukcija url(), gdje je adresa CSS datoteke naznačena u navodnicima (" "). Ili se url() uopće ne piše, ali se odmah uključuju navodnici i adresa datoteke. Opća sintaksa je sljedeća.

U vanjskoj tablici stilova

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

U unutrašnjosti

Pogledajmo upotrebu ovog pravila u vanjskim stilovima, za to ću vam dati dva primjera za poređenje.

Primjer 1: normalno povezivanje vanjskih stilova

Sadržaj stranice.

Primjer 2: povezivanje vanjskih stilova zajedno sa @import CSS pravilom

Sadržaj stranice.

Sadržaj datoteke style1.css

@import url("style/style2.css"); @import url("style/style3.css"); Ispod, pored toga, mogu postojati regularni stilovi sa svojstvima, vrijednostima itd.

Vladati radi ispravno, mora se specificirati na samom početku stilskog lista. Jedini izuzetak je ovdje pravilo , koji je uvijek na prvom mjestu, iako se u praksi koristi izuzetno rijetko.

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

Custom Styles

Mnogi pretraživači imaju mogućnost uključivanja fajla sa CSS-om od strane samih korisnika, tako da mogu promijeniti izgled stranica koje gledaju, kako kažu, „kako sebi odgovaraju“. Na primjer, promijenite veličinu fonta i font, 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 tako što ćete otići na: Alati → Internet opcije → Općenito → Izgled.

U ovom vodiču ćete naučiti kako povezati css sa html-om. Pogledajmo nekoliko opcija s primjerima. Također ćemo govoriti o asinhronom učitavanju stilova i hakova za različite pretraživače.

Kako povezati css sa html u zasebnoj datoteci

Sada ću vam pokazati kako da povežete css sa html-om sa zasebnom datotekom stilova. Kreira se posebna css datoteka. Zatim se pomoću posebnih komandi povezuje sa potrebnim dokumentima. Ovaj tip se naziva eksterni stilski list.

Ova metoda je najpoželjnija. Omogućava vam da razvijate stilove web stranice odvojeno od HTML dokumenata. Stil se zatim može koristiti u jednoj datoteci style.css na mnogo stranica.

Zapisujemo putanju tačno u head tag. Određuje sve potrebne sistemske informacije za prikaz stranice. Povezuje se ovako:

Postoje i druge metode povezivanja. Koristite ih samo kao dodatnu opciju.

Vrijedi reći da inline stilovi imaju najveći prioritet. Čak i ako uključite eksterni css, pretraživač će dati prednost ugrađenim stilovima za određenu oznaku. Na drugom mjestu po prioritetu su unutrašnji stilovi. Oni su inferiorniji od ugrađenih, ali superiorniji od vanjskih.

Općenito, kao dodatna opcija, može vam biti korisno koristiti inline 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 kreira pomoću CSS-a. Za bolje razumijevanje onoga što treba koristiti i zašto, pogledajmo jedan ilustrativni primjer. Zamislite HTML kao crno-bijeli strukturirani okvir kuće bez ikakvih ukrasa, a CSS je ono što koristimo za kreiranje jedinstvenog izgleda.

Kao što vidite, kuća desno sada ima boje, materijale i dodatne dekoracije. Ista stvar se događa i na web stranici: uz pomoć CSS pravila na njoj se pojavljuju boje i uvlake, mijenjaju se stil fonta i veličine elemenata i stvara se cijeli, cjelovit stil.

Jednostavan stilski list

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

Koji se nalaze na web stranici:

Kako će sada izgledati tekst?

U pretraživaču i šta svaki red znači? Veoma je jednostavno: font će imati podebljani stil i boju #1E824C (heksadecimalni kod boje) i biće prikazan na 1em (relativna jedinica jednaka podrazumevanoj veličini fonta u pretraživaču).

Gore opisani stil, kao i svaki drugi, uključuje skup elemenata koji imaju vlastita imena. Zapamtite ih tako da kada čitate sljedeća poglavlja shvatite o čemu se radi.

Selektor Time što ga navedemo, govorimo pretraživaču na šta tačno želimo da primenimo stil. U našem slučaju, selektor je p. Deklaracijski blok Ovo je naziv cijelog sadržaja koji se nalazi između vitičastih zagrada () iza selektora. Svojstvo stila Ovo je naredba koja specificira željenu opciju oblikovanja (na primjer, želite promijeniti stil fonta font-weight , boju boje , veličinu fonta font-size , itd.). Dvotačka se mora staviti iza naziva svojstva. Kasnije ćete naučiti više o CSS svojstvima. Vrijednost svojstva Nakon 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 je određen ključnim riječima bold , bolder , itd., boja je određena heksadecimalnom vrijednošću, RGB(A), HSL(A) ili ključnim riječima crvena, narandžasta, bijela, itd., veličina fonta je određena CSS-om jedinice (postotak) % , piksela px, bodova pt, font heightem) ili konstante small , medium , large , itd. Nakon specificiranja vrijednosti svojstva, stavlja se tačka i zarez.

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

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

I to funkcionira, ali da li je 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 ako ih odmah naučite, u budućnosti ćete sebi reći "hvala".

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

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

A ovaj oblik notacije je vrlo glomazan, iako funkcionira:

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

Da biste olakšali navigaciju u kodu, preporučuje se da svako svojstvo pišete u novom redu i koristite tabulatore ili razmake kada navodite svojstva. Ponekad postoji razmak između dvotočka i vrijednosti svojstva, ali na vama je da odlučite što vam je draže.

Za dodatnu pogodnost, komentare možete dodati direktno u CSS. U njima možete napisati objašnjenja i bilješke koje će vam pomoći da se krećete po stilskim listovima.

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

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

Interni i eksterni stilovi

Nakon što kreirate stilski list, možete odabrati kako ga priložiti svojoj web stranici. Postoje dvije opcije za tabele - interne, koje se dodaju direktno na stranicu, i eksterne, koje se nalaze u zasebnoj datoteci sa ekstenzijom .css i povezane su sa stranicom pomoću veze.

Interni listovi stilova su napisani u HTML dokumentu između oznaka. Morate dodati stilski list svakoj web stranici. Ako stranica ima veliki 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 nezgodnim.

Eksterni stilovi su mnogo češći. Samo trebate povezati tabelu sa svim potrebnim web stranicama pomoću oznake sa atributom rel (definira odnos između stranice i uključene datoteke) i vrijednosti liste stilova, što znači da uključena datoteka sadrži stilski list. href atribut je putanja (URL) do vaše .css datoteke:

Uređivanjem samo jedne datoteke, možete promijeniti stil za cijelu stranicu odjednom, bez obzira na to koliko stranica ima. Ovo je vrlo zgodno, posebno za velike resurse.

Lekcija: kreiranje stilskog lista

Budući da su eksterni stilski listovi najprikladniji i naširoko korišteni u razvoju dizajna, naučit ćemo kako ih kreirati. Na ovoj stranici možete preuzeti arhivu sa datotekama za ovu lekciju.

U folderu ćete pronaći HTML dokument sa primjerom jednostavne stranice i slikom (koja će se koristiti u tutorijalu). Otvorite HTML dokument u svom pretraživaču. Vidjet ćete da stranica izgleda potpuno normalno. Da bismo mu dali privlačniji izgled, stilizujmo ga.

Za sada, ne morate da ulazite suviše duboko u ono što znači bilo koji komad koda. Sada morate razumjeti princip rada. Hajde da počnemo.

Povezivanje CSS-a sa HTML-om

Za početak, otvorite bilo koji uređivač teksta na vašem računaru (biležnica će biti dovoljna) i kreirajte praznu datoteku pod nazivom style , sačuvajući je sa ekstenzijom .css (trebalo bi da dobijete datoteku style.css). Sačuvajte datoteku u fascikli u kojoj se nalazi preuzeti HTML dokument.

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

Ukratko rezimirajte ono što ste upravo uradili. Umetanjem ovog koda u svoj HTML dokument, vi:

• dao link do fonta pod nazivom Roboto Condensed, koji će biti preuzet sa Google servera (kasnije ćemo vam reći više o Google fontovima);
• spojio naš vanjski stilski list style.css (prazan za sada).

Pisanje CSS stila

Sačuvajte promene u HTML dokumentu i idite na praznu .css datoteku koju ste kreirali. Dodajmo malo stila na stranicu:

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

Sačuvajte promjene. Čestitamo, napisali ste svoje prvo pravilo - tiče se oznake . Prvo svojstvo - padding-top - će dodati gornji padding od 5 piksela između prozora pretraživača i sadržaja web stranice. Sa drugim svojstvom, background-image , uključili ste sliku za pozadinu cijele stranice specificirajući putanju do grafičke datoteke (koja se nalazi u istoj fascikli kao i HTML dokument).

Osvježite otvorenu web stranicu u vašem pretraživaču. Ako je sve urađeno kako treba, vidjet ćete da se na stranici pojavila pozadina, a razmak između vrha prozora i teksta se malo povećao.

Telo (širina: 75%; padding: 40px; margina: 15px auto; boja pozadine: #EBEBEB; radijus granice: 30px; )

Sačuvajte promjene u datoteci. Sada ti:

• postavite područje za sadržaj oznake , što je jednako 75% širine prozora pretraživača;
• obezbedio marginu od 40 piksela sa svih strana oblasti sadržaja;
• pozicionirao je područje u centar 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 uglove pravougaonog područja, specificirajući radijus zaokruživanja od 30 piksela.

Ponovo ažurirajte HTML dokument. Istovremeno, uvjerite se da je predmemorija onemogućena ili ponovo učitajte stranicu sa ažuriranim svim datotekama povezanim s njom, koristeći posebnu kombinaciju tipki (na primjer, za Chrome ovo je Ctrl+F5).

Vidjet ćete da je pravokutna oblast sa zaobljenim uglovima dodana u sredinu stranice. Ovo je rezultat vaših radnji u CSS datoteci. Također možete pokušati smanjiti prozor vašeg pretraživača i diviti se kako se širina pravokutnog područja prilagođava njegovoj veličini. To je zbog činjenice da je širina navedena kao postotak.

Promjena fonta pomoću CSS-a

Vrijeme je da ukrasimo naš tekst. Dodajte ovaj kod u svoju tablicu stilova i spremite promjene:

H1 ( boja: #E87E04; veličina fonta: 2em; margin-left: 20px; porodica fontova: "Roboto Condensed", sans-serif; ) h2 ( boja: #E87E04; veličina fonta: 1,7em; margin-left : 20px; porodica fontova: "Roboto Condensed", sans-serif; ) p ( boja: #22313F; visina linije: 150%; margin-top: 20px; margin-left: 20px; porodica fontova: "Roboto Condensed ", sans-serif; )

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

Uvukli smo vrh za 20 piksela i postavili visinu reda (razmak teksta) na 50% veći od standardnog. Osim toga, povezali ste Roboto Condensed font sa sve tri oznake (zbog toga ste na samom početku morali dati link do njega u HTML fajlu).

Osvježite stranicu u svom pretraživaču i divite se rezultatu. U ovom tutorijalu pokušaćemo još jednu stvar. Dodajte ovaj kod u CSS:

Naglasak (težina fonta: bold; )

Sačuvajte i osvježite stranicu u vašem pretraživaču. Vidjet ćete da je u posljednjem pasusu font u nekim dijelovima teksta postao podebljan. Da biste razumjeli šta se dogodilo, idite na prozor uređivača teksta gdje ste otvorili HTML datoteku na samom početku. Pogledajte zadnji pasus: dio rečenice je umotan u oznaku sa klasom naglaska. Na ovaj način ste napisali stil za jedan red teksta u pasusu. Više o časovima ćemo govoriti u sljedećem poglavlju.

Trebalo bi da dobijete stranicu poput ove:

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

(recimo 1.1em), a takođe povećajte razmak između

I lijeva ivica područja sadržaja za još 10 piksela.

zaključci

Ovo poglavlje bavilo se CSS sintaksom i načinom kreiranja osnovnog stilskog lista. Naučili ste kako da ugradite CSS u HTML stranicu i kako da kreirate jednostavne stilove. Istaknimo glavne stvari koje morate zapamtiti iz ovog poglavlja:

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

Sva svojstva i njihove vrijednosti su zapisane u bloku deklaracije između dvije vitičaste zagrade () nakon specificiranja selektora.

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

Potrebno je staviti dvotočku iza svojstva i tačku-zarez nakon vrijednosti.

Za praktičnost i bolju čitljivost vašeg CSS koda, napišite svako svojstvo u novom redu i ne štedite na razmacima i tabulatorima.

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

Interna veza

Interni stilski list je skup stilova, dio koda web stranice koji bi se uvijek trebao pojaviti između otvaranja i zatvaranja oznake HTML kod u tijelu oznake web stranice. primjer:

Žuti tekst sa fontom Verdana