Dobar dan, vjerni čitaoci i pretplatnici. Trenutna publikacija je posvećena detaljna analiza Tema: "Blockwise Responsive CSS Page Layout". U ovom članku ću vam reći što podrazumijeva raspored blokova, koje su njegove prednosti i koji se alati za to koriste.

Osim toga, podijelit ću znanje o nekoliko jednostavnih pristupa za implementaciju prilagodljivosti i pojačati sve opise. konkretnim primjerima. Pa, hajde da učimo!

Bičevi i medenjaci

Blok raspored web stranica je metoda označavanja stranica u blokove (slojeve) koji se kreiraju pomoću posebne oznake < div>.

U početku su programeri koristili tabelarni izgled, ali je on izblijedio u pozadini nakon pojavljivanja opisanog prikaza. Zašto se to dogodilo? A sve zato što raspored stranica u slojevima ima prilično veliku listu prednosti i samo nekoliko nedostataka. Pogledajmo pobliže svaki od njih.

ukusni medenjaci

Smanjenje količine koda. Kada se koriste tabele kao strukturirani smještaj sadržaja i kontrola stranice, html dokument je sadržavao dosta ugniježđenih oznaka, što je zbunilo čak i iskusne programere.

Blokovi otklanjaju ovaj problem. Postoji mali broj div-ova u kodu, od kojih je svaki postavljen sa stilskim pravilima kroz propisanu klasu. Na primjer:

…

…

…

Fleksibilno upravljanje objektima. Zbog činjenice da je svaki sloj odgovoran određene klase, postalo je moguće brzo i bez štete po druge blokove redefinirati izgled odabrano, pomjerite ga po web stranici ili promijenite izgled prikaza. Osim toga, blok raspored vam omogućava da riješite problem izazovni zadaci sa nestandardnim postavljanjem slojeva.

Značajna prednost zaSEO. U tabelarnim prikazima sav sadržaj web servisa bio je raspoređen u ćelije, što je uvelike otežavalo rad roboti za pretragu. Koristeći isto blok raspored ovaj problem takođe odlučila.

Sav sadržaj stranice podijeljen je u blokove prema značenju, koji se potpisuju pomoću klasa. Zbog toga programe za pretragu lako pronaći potrebne informacije i indeksiranje. A to znači da se stranica diže kada se objavljuju rezultati pojmovi za pretraživanje.

Sposobnost stvaranja adaptivni dizajn web stranice. Za one koji još ne znaju šta je responzivni dizajn, savjetujem vam da pročitate relevantne članke na mom blogu o ovoj tehnologiji. U međuvremenu, reći ću samo da prilagodljivost omogućava uslugama da izgledaju isto i atraktivno na ekranima bilo koje rezolucije, bilo da se radi o desktopu ili pametnom telefonu.

Ova mogućnost je postala dostupna zahvaljujući rasporedu u slojevima. Naravno, za to je potrebno dodatno znanje, ali se isplati.

kamen spoticanja

Pojava poteškoća u razvoju. U poređenju sa tabelarnim izgledom, svakako je jednostavniji. Dovoljno je znati nekoliko osnovnih tagova pomoću kojih se kreiraju tabele i jednostavno popuniti kreirane ćelije informacijama.

U blok rasporedu, stvari mogu izgledati malo komplikovanije. Posebno za početnika. Zato što morate biti dobro upućeni ne samo u html kod, već i da poznajete većinu css svojstava. Međutim, poteškoće će se pojaviti tek na početku prilikom proučavanja tehnologija, ali će nakon toga život izgledati kao bajka.

Rastavljanje uz kompatibilnost među pretraživačima. Budući da se ovaj pristup pojavio nešto kasnije od tabelarnog, nisu sve situacije s njegovim funkcioniranjem standardizirane. Stoga, ponekad u različitim pretraživačima, prikaz vaše stranice može izgledati malo drugačije. U nekim slučajevima, morat ćete se izopačiti da biste ispravili nedostatke.

Jednostavne tehnike za stvaranje odzivnosti

Pa, sada idemo direktno na analizu nekoliko jednostavnih mehanizama za kreiranje prilagodljivosti stranice. Da bismo to učinili, kreirat ćemo jednostavan izgled stranice.

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75

SuperAuto web stranica foto galerija Video Kontakti Tesla Sva prava zadržana!

Kao što vidite, izgled kreiranog Internet resursa se prikazuje ispravno dok veličina ekrana ne postane premala. Stoga dopunjavamo css svojstva neki parametri.

Za početak s blokovima sa klasama . header, . kontejner i . footer dodati imovinu min-širina: 355px. Sada će se vaša stranica sa sadržajem samo smanjiti specificirana veličina, a zatim će se pojaviti skrol.

AT ovaj primjer Nisam trebao implementirati responzivnost za slike. Međutim, automatsko određivanje veličine slike može se postići pisanjem sljedećih redova u stilove.

Prvo, hajde da definišemo šta je markiranje? Kao što termin sugeriše, markup- ovo je postavljanje oznaka, u našem slučaju, u html kodu dokumenta, tj. web stranice. Markeri su ovde oznake, koji vam omogućavaju da definirate granice radnje markupa ili kreirate element html dokumenta. Još uvijek nejasno? Onda čitajte dalje i sve će doći na svoje mjesto.

Osnove HTML označavanja ili šta je oznaka

Oznaka je konstrukcija koja počinje znakom manje od (<) и заканчивающуюся знаком больше (>) . Većina oznaka se sastoji od oznake otvaranja i zatvaranja. Razlika između njih je u tome što u uvodna oznaka možete (ako je potrebno) specificirati niz njegovih dodatnih svojstava koristeći tzv atributi, i na početku imena zatvaranje oznake selsh karakter (/) je specificiran, na primjer:

Tekst pasusa, poravnat desno.

.

AT ovaj slučaj p blok oznaka kreira pasus, i align atribut poravnajte sadržaj pasusa sa desnom (desnom) ivicom.

Treba napomenuti da su u html-u oznake dvije vrste: blok i inline. Blokirajte oznake kreirajte element na nivou bloka, često sa paddingom i ispod sljedeće stavke već idu" With nova linija ». Inline oznake namijenjeni su označavanju dijela koda i ne stvaraju prijelom reda.

Kako kažu: postoje izuzeci od svakog pravila - isto vrijedi i za oznake. Postoje oznake koje nemaju završnu oznaku i namijenjene su za kreiranje oznaka i elemenata html dokumenta, na primjer:

U ovom slučaju, img string tag ubacuje element u obliku slike na web stranicu, čija je adresa zapisana u atributu src. Značenje alt atribut je alternativni tekst, koji se prikazuje ako slika nije dostupna, a atribut granice postavlja debljinu okvira oko slike.

Kako biste lakše zapamtili sve gore navedeno, evo male i vizualne varalice koju možete koristiti za učenje HTML-a:

Brza referenca na html tagove

I tako, već smo se susreli sa dvije oznake, pa ću ih izostaviti. U nastavku ću dati nekoliko oznaka za označavanje html dokumenta i neke od njihovih atributa. Za početak, ovo će biti više nego dovoljno, ali ako vas zanima potpuna lista HTML oznaka i njihovih atributa, preporučujem vam da pogledate stranicu htmlbook.ru i dodate je u svoje oznake kao najpotpuniju i najprikladniju reference na HTML i CSS. Hoćemo li nastaviti?

Kako napraviti link? Da biste to učinili, trebate koristiti string tag A, koji označava tekst koji sadrži veza - aktivni element web stranicu, kada se klikne, korisnik može otići na drugu web stranicu, čija je adresa navedena u atributu href.

Kako podebljati tekst? Da biste to učinili, trebate koristiti string tag B, koji postavlja tekst koji sadrži smeli stil font.

Kako napraviti tekst kurzivom? Da biste to učinili, trebate koristiti I inline tag, koji tekst koji sadrži postavlja u kurziv.

Kako podvući tekst? Da biste to učinili, trebate koristiti oznaku U string, koja dodaje podvlaku tekstu koji sadrži.

Kako prebrisati tekst? Da biste to učinili, trebate koristiti oznaku S string, koja prikazuje tekst kao precrtan.

Kako istaknuti kod u tekstu? Da biste to učinili, trebate koristiti oznaku CODE string, koju pretraživač obično prikazuje u monorazmaknom fontu, npr. Courier New.

Kako formatirati kod u tekstu? Za to trebate koristiti blok PRE tag, koji definira blok programski kod, pretraživač se obično prikazuje u monoprostornom fontu. Za razliku od oznake niza CODE, oznaka PRE čuva razmake i prijelome redova.

Kako povećati tekst? Da biste to učinili, trebate koristiti BIG string tag, koji povećava veličinu fonta za jedan u odnosu na normalan tekst.

Kako smanjiti tekst? Da biste to učinili, trebate koristiti oznaku SMALL string, koja smanjuje veličinu fonta za jedan u odnosu na normalan tekst.

Kako postaviti font, boju i veličinu fonta u tekstu? Da biste to učinili, trebate koristiti oznaku string FONT. atribut lica ovdje se postavlja font (ime) fonta, boja - boja fonta, a veličina - njegova veličina u proizvoljnim jedinicama (od -7 do 7) .

Kako napraviti zaglavlje? Da biste to učinili, trebate koristiti blok H tagove koji definiraju naslove. različitim nivoima, od 1 (najveći) do 6 (najmanji), koji vam omogućava da postavite strukturu informacija objavljenih na web stranici. Naslovi se međusobno razlikuju po veličini fonta i uvlačenju, a također su podebljani.

Kako napraviti subscript font? Da biste to učinili, trebate koristiti oznaku stringa SUB, koja prikazuje font kao subscript, tj. tekst će biti pozicioniran ispod osnovne linije ostalih znakova u redu i smanjen u veličini.

Kako napraviti superscript font? Da biste to učinili, trebate koristiti SUP string tag, koji prikazuje font kao superscript, tj. tekst će biti pozicioniran iznad osnovne linije ostalih znakova u redu i smanjen u veličini.

Kako umetnuti citat u tekst? Za ovo morate koristiti inline tag Q , koji se koristi za isticanje navodnika u tekstu, koje pretraživač automatski prikazuje u navodnicima.

Kako napraviti citat u tekstu? Da biste to učinili, trebate koristiti blok tag BLOCKQUOTE, koji je dizajniran da istakne dugačke navodnike u html dokument. Tipično, takav tekst se prikazuje sa 40 px paddingom sa leve i desne strane, kao i sa razmakom na vrhu i dnu.

Kako napraviti prijelom reda u tekstu? Da biste to učinili, trebate koristiti blok tag BR , koji postavlja novi red na mjestu gdje se nalazi ova oznaka. Za razliku od oznake p paragrafa, upotreba oznake br ne dodaje prazno uvlačenje ispred reda.

Kako napraviti sloj u html-u? Za to trebate koristiti blok DIV oznaka, koji stvara sloj bez dodavanja.

Kako napraviti separator u tekstu? Da biste to učinili, trebate koristiti HR blok oznaku, koja crta separator horizontalna linija. atribut boje postavlja boju linije, veličina postavlja veličinu, a noshade isključuje 3D efekat.

Kako napraviti listu? Postoje dvije glavne vrste lista u html-u: numerirane ( OL) i označeno ( UL). U ovom slučaju, dato html kod bulleted list, dato blok tag UL. Podrazumevano, kao krug markera (popunjen krug), koji se pojavljuje na početku prvog reda stavke liste, dato oznakom L.I.

Naravno, u svom članku dao sam samo glavne html oznake, koji će vam možda trebati prilikom postavljanja web stranice. U većini slučajeva, za HTML označavanje, ovo je više nego dovoljno. Jedina stvar koju sam izostavio, ali koja je svakako važna pri označavanju web stranica, je rad sa tabelama. Treba ih posebno proučavati, jer. ima previše nijansi, a članak je bez toga bio prilično velik. To je sve za mene. Hvala vam na pažnji. Sretno!

Čiji prijevod, posebno za čitatelje Habra, donosimo u nastavku.

Uprkos svim nevjerovatnim karakteristikama CSS-a, one nisu dovoljne za implementaciju osnovnih principa izgleda stranice. Kako god, dodatne funkcije stvoriti više dinamičke stranice već počinje da se pojavljuje.

Nakon godina obećanja, CSS3 je konačno uspio u stilu. Dodao je čitav novi skup alata u naš arsenal, pružajući nam zaobljene uglove, gradijente, transparentnost, transformacije elemenata, animacije i još mnogo toga. Šta još može zadovoljiti naše oči?

Sljedeći problem sa CSS-om je markiranje. Do sada smo to radili koristeći plutajuće kutije, relativne pozicije i trikove negativnog dodavanja, što je sve bilo teško postići na način koji izgleda kao standardni raspored sa dvije ili tri kolone.

Proizvođači W3C-a i pretraživača svjesni su ovih problema i rade na brojnim rješenjima. Lider među njima je (iznenađujuće) Internet Explorer. Izgleda da će IE10 biti preteča nova era CSS markiranje koje će vam omogućiti da kreirate sjajne, dinamične i atraktivne stranice koristeći funkcije koje su ranije bile nedostižne.

U ovom članku autor razmatra razne metode oznake koje bismo željeli koristiti u određenim fazama razvoja, od već implementiranih do onih čisto teorijskih. Možda ih nećemo moći koristiti sve u budućnosti (barem ne u njihovom trenutnom obliku), ali vrijedi pogledati ove metode da bismo razumjeli budućnost CSS označavanja.

zvučnici

Distribucija sadržaja u više kolona je osnovni element štampanja, a CSS Multi-Columns modul pruža istu mogućnost za web. Postoje dva načina za kreiranje kolona, ​​svaki od njih koristi razna svojstva(roditeljski element). U prvom slučaju direktno je određen broj kolona među kojima je potrebno rasporediti tekst. Na primjer, ovaj kod će kreirati tri kolone jednake širine, dodajući širinu nadređenog elementa:

Div (broj kolona: 3; )
U drugoj metodi, širina stupaca je fiksna, oni će se ponavljati dok ne popune širinu roditeljskog elementa. U ovom primjeru, širina stupca je postavljena na 140px, što znači da bi se pet kolona trebalo pojaviti u okviru širine 800px:

Div (širina kolone: ​​140px; )
Podrazumevano, razmak između kolona je 1em, ali to se može promijeniti korištenjem svojstva kolona-razmak. Možete postaviti i između kolona linije razdvajanja korišćenjem kolona-pravilo, sličan u sintaksi granično vlasništvo. Kôd ispod će kreirati tačkasta linija 2px širine, a također postavite padding između kolona na 28px (separator će se nalaziti u sredini):

Div (razmak između stupaca: 28px; pravilo stupca: 2px s tačkama #ccc; )
Ako želite vidjeti rezultat, pogledajte primjer CSS kolona. Morate koristiti Firefox, Chrome, Safari, Opera 11.1 ili IE10 Platform Preview da vidite tri kolone (IE10PP). Ili pogledajte snimak ekrana ispod.

Sa kolonama možete raditi različite stvari. Praktični primjer njihova upotreba je na Wikipediji, u odeljku za beleške, gde se koristi kolona-broj. Firefox implementira više kolona sa prefiksom -moz-, u Chromeu i Safariju s prefiksom -webkit-, u Operi 11.1 i IE10PP bez prefiksa.

Table

Potpuno nov u IE10PP je sistem rasporeda tablica. Prije nego što ga koristite, morate odlučiti o redovima i stupcima. Za kolone možete koristiti vrijednosti dužine, auto ključna riječ i novu jedinicu mjere fr(skraćenica od frakcija, relativna količina). Pogledajte ovaj primjer:

Div (prikaz: mreža; grid-kolone: ​​1fr 3fr 1fr; grid-rows: 100px auto 12em; )
Ovaj kod će kreirati tabelu sa tri kolone, pri čemu će središnja kolona biti tri puta šira od lijeve i desne i tri reda, gdje je gornji 100px visok, donji 12em, a srednji se automatski širi u visinu na osnovu dužine sadržaja.

Sada kada imamo tabelu, možemo staviti sadržaj u nju. Koristeći HTML5 elemente, možete kreirati zaista, zaista jednostavan izgled stranice:

Zaglavlje ( mreža-kolona: 1; mreža-kolona-raspon: 3; mreža-red: 1; ) nav ( mreža-kolona: 1; mreža-red: 2; ) članak ( mreža-kolona: 2; mreža-red: 2; ) sa strane (mreža-stupac: 3; mreža-red: 2; ) podnožje (mreža-kolona: 1; grid-kolona-raspon: 3; mreža-red: 3; )
Zavirujući u kod, možete vidjeti da je sadržaj na stranici raspoređen u redove i stupce koristeći, respektivno, svojstva red mreže i grid-kolona. Element članak postavljen u drugu kolonu drugog reda - centar tabele 3x3. Nekretnina se također koristi raspon stupaca za elemente header i footer, što ih proteže na sve tri kolone (svojstvo raspon redova, koji ovdje nije korišten).

Demo oznake se može naći u primjeru CSS Grid, ali zahtijeva IE10. Ako ne, samo pogledajte snimak ekrana.

Gore navedena svojstva su u potpunosti implementirana u IE10PP, tako da možete eksperimentirati s njima odmah. Međutim, mnoga svojstva još uvijek nisu implementirana.

Uzorak

Drugi pristup pogled tabele je modul Template Layout. Koristi malo drugačiju sintaksu, gdje prvo trebate dodijeliti poziciju blokovima koristeći literalni karakter i svojstvo pozicija:

Zaglavlje ( pozicija: a;) nav ( pozicija: b; ) članak ( pozicija: c; )
Jednom kada dodijelimo poziciju, možemo kreirati oznake koristeći niz znakova. Svaki niz je ekvivalentan redu, a svaki znak u nizu je kolona. Na primjer, da biste kreirali tabelu sa jednim redom i tri kolone, možete koristiti:

Div (prikaz: "abc"; )
Ovo će prikazati tri ravnomjerno raspoređene stavke u horizontalnom redu. Ali možete ponavljati znakove da proširite stupce, a možete koristiti iste znakove na istoj poziciji u različitim redovima da proširite redove. U primjeru ispod, element nav obuhvata dva reda, i header i članak preklapanje dva stupca (kod formatiran radi jasnoće):

Div (prikaz: "baa" "bcc"; )
Template Layout još ne koriste pretraživači, ali već postoji lijepa jQuery polyfill skripta koja će vam omogućiti eksperimentiranje, ona je korištena u primjeru na linku. Rezultat izgleda isto kao u primjeru oznake tablice, ali je kod potpuno drugačiji.

Demo stranica koristi JavaScript, tako da bi trebala raditi za sve moderni pretraživači. Markup tabeleće možda također podržavati sintaksu šablona, ​​kao u primjeru ispod:

Zaglavlje ( grid-cell: a; ) članak ( grid-cell: b; ) div ( display: grid; grid-template: "a" "b"; )
Što se tiče funkcionalnosti, ovaj kod je identičan svojstvima Template Layout-a, ali također još nije implementiran (a možda nikada neće biti).

Pozicioni plutajući blokovi

trenutnu imovinu float dozvoljava tekstu da se omota oko elementa lijevo ili desno, ali prošireno svojstvo u IE10PP omogućava vam da poboljšate plutajući element tako što ćete ga postaviti bilo gdje, a susjedni sadržaj će se i dalje omotati oko tog bloka. Samo je trebala nova vrijednost za imovinu float:

Div ( float: pozicionirano; lijevo: 200px; pozicija: apsolutna; vrh: 100px; širina: 250px; )
Ovaj kod će kreirati element širine 250px, pozicioniran 200px lijevo i 100px na vrhu nadređenog objekta. Prema zadanim postavkama, bilo koji drugi sadržaj unutar nadređenog će se omotati oko pozicioniranog elementa sa svih strana, ali to se može promijeniti različita značenja svojstva wrap-type, na primjer, kada se tekst omota samo oko vrha i dna elementa:

Div (tip omota: odozgo-dolje; )
Možete kombinovati svojstva pozicioniranja i izgleda tabele tako što ćete pozicionirati element u tabeli i dozvoliti sadržaju da se omota oko njega sa svih strana:

Div ( float: pozicionirano; mreža-kolona: 2; mreža-red: 2; )
Ako imate IE10PP, onda možete. Ako nije, rezultat je prikazan na slici ispod, ne može se implementirati sa trenutnim CSS mogućnostima.

Isključenja

Nekretnina float dozvoljava samo pravokutne elemente da se plutaju, ali dokumentacija predviđa plutajuće na obliku. Ideja je došla nakon korištenja modula CSS Exclusions. Ima dva ključna svojstva. prvo, oblik omota, omogućava vam da kreirate elipse, pravokutnike ili poligone koji će definirati oblik bloka oko kojeg se sadržaj omota, na primjer:

Div (oblik omota: krug (50%, 50%, 100px); )
Ovaj kod će kreirati krug sa radijusom od 100px koji će biti centriran roditeljski element. Možete koristiti funkciju poligon() za kreiranje bilo kojeg oblika navođenjem koordinatnih parova odvojenih razmakom, na primjer za trokut:

Div (oblik omota: poligon (0,100px 100px,100px 50px,0); )
Kada već postoji dati oblik, unutrašnji sadržaj se može učiniti da se omota oko tog oblika pomoću drugog svojstva wrap-shape-mode, kao ovdje:

Div (wrap-shape: krug (50%, 50%, 100px); wrap-shape-mode: around; )
Možete vidjeti CSS izuzetke u akciji preuzimanjem prototipa za Mac ili Windows iz Adobe Lab-a. Ima punu dokumentaciju i neke vrlo cool demo, poput ove:

Područja

Adobeov sljedeći prijedlog su CSS regije, koje definiraju kako se sadržaj distribuira unutar skupa. različitih elemenata. Ovo se radi tako što se prvo definira element koji će drugima pružiti sadržaj koristeći jedinstveni identifikator niza u svojstvu protok, a zatim odaberite koja će područja biti popunjena ovim sadržajem pomoću funkcije od() svojstva sadržaj:

Sadržaj ( tok: foo; ) .target1, .target2 ( sadržaj: od(foo); )
Ovdje će sadržaj biti preuzet iz elementa .content, a zatim se prvo distribuira po elementu .target1 a ako blok nije dovoljan za prikaz sadržaja, on će se i dalje prikazivati .target2. Sadržaj se neće umnožavati u blokovima, počet će u prvom i nastaviti u drugom (ako je potrebno). Da biste bolje razumjeli, samo pogledajte sliku ispod.

Usput, ne postoje zahtjevi za ciljna područja u pogledu njihove lokacije u označavanju. Po potrebi se mogu postaviti na suprotne strane stranice.

Specifikacije CSS područja još nisu implementirane u pretraživače, ali slično kao i Exclusions, možete koristiti prototip iz Adobe laboratorije i sami isprobati funkcionalnost.

Zaključak

Još nije jasno koji će od novih modula za označavanje (iz FlexBox-a i Columns) biti u potpunosti implementiran u pretraživače. Što se tiče plutajućih blokova i izuzetaka, želio bih ih ukrstiti zbog sličnosti funkcionalnosti (možda će biti tako). Tabelarne oznake su usko povezane sa oznakama šablona i sigurno možete očekivati ​​da će se pojaviti u IE10. CSS regije su već implementirane u jednoj od grana WebKit-a, a vjerovatno će se uskoro pojaviti u WebKit pretraživačima (Safari, Chrome i drugi).

Dakle, može se predvidjeti da će se uz neke promjene u sintaksi sve gore opisano koristiti u CSS3 u budućnosti. Vrlo je dobro ako se to dogodi, jer će u ovom slučaju nove metode omogućiti s minimalni trošak kreirajte vrlo promišljene web stranice za samo nekoliko godina.

Tagovi:

• css3
• flexbox
• tj.10
• html5

Dodaj oznake

Izrada web stranica nije posao za ljude slabih nerava. Osim znanja, potrebno je imati kreativno razmišljanje, zasluge perfekcioniste i filigransku tačnost prilikom postavljanja stranice. CSS je jednostavno neophodan po ovom pitanju. I svaki webmaster mora znati njegove osnove.

Šta je CSS?

Onima koji su upoznati sa HTML-om ne treba reći da je to jezik za označavanje stranice. Ali njegovi kreatori su odlučili da mu dodaju oznake koje su zaslužne za izgled i dizajn. Ali s ovim pristupom, kod stranice je postao previše obiman i gotovo nečitljiv. Naravno, ovaj put nije vodio nikuda, pa je odlučeno kompletno rješenje: HTML je odgovoran za izgled stranice, CSS - za vizuelni dizajn.

Skraćenica CSS je skraćenica od (Cascading Style Sheet). Sastoji se od parametara koji su odgovorni za vizuelni dizajn objekata na stranici.

Prednosti CSS-a

Kaskadni stilski list omogućava webmasteru ne samo da stvori prekrasan resurs, već i da učini kod čitljivim, značajno smanjujući njegovu veličinu. Koristeći CSS, možete postaviti parametre koji nisu mogući u HTML oznaci stranice.

Sa CSS-om, možete doslovno promijeniti izgled stranica resursa u samo nekoliko klikova. Ovo je vrlo zgodno, posebno ako je stranica sa više stranica. Sve promjene dizajna se vrše u kaskadnom stilu, a ne promjenom parametara na svakoj stranici izvora. I samo zahvaljujući CSS-u moguće je implementirati blok markiranje.

CSS veza

Govoreći o osnovnim CSS principi, prvi korak je naučiti kako uključiti kaskadni stilski list u HTML datoteku. Ovaj proces je prilično jednostavan. Prvi korak je kreiranje HTML dokumenta. Za one koji još ne znaju, kreiran je u programu Notepad. Zatim, koristeći funkciju "Sačuvaj kao", morate navesti HTML ekstenziju.

Kaskadni stilski list kreiran je na potpuno isti način, samo css ekstenziju treba dati datoteci. Rezultirajući dokument mora biti sačuvan u istom folderu kao HTML fajlovi. Recimo da se dokument sa stilskim listama zove style.css. Da biste ga povezali sa HTML dokumentom, morate koristiti oznaku , koji je odgovoran za povezivanje eksterne datoteke. Između sljedećeg mora biti upisano:

Možda je ovo jedan od većine pogodne načine povezivanje eksternih fajlova.

css pravilo

Učenje CSS markupa treba započeti učenjem sintakse. Nema oznaka, skripti ili postavki u kaskadnom listu stilova. Ovdje postoji samo jedno pravilo. Sastoji se od selektora i stilskog bloka. Recimo da je pozicija u kaskadnom stilu: tijelo(pozadina:crna; boja:bijela).

Ovdje je tijelo selektor odgovoran za stiliziranje tijela stranice; background:black i color:white su svojstva i njihove vrijednosti. Pišu se sa tačkom i zarezom. Ova pozicija čini pozadinu stranice crnom, a tekst bijelim.

Selektori

Pa, hajde da nastavimo sa intenzivnim uvodom u CSS. Izgled stranice će biti prilično teško napraviti bez poznavanja selektora. Ako je sve jasno sa svojstvima i njihovim vrijednostima, onda će dodatna znanja o selektorima pomoći da se napravi željeni izgled stranice.

Šta trebate znati o selektorima? Prvo, njihove sorte:

• Identifikator. Imena elemenata stranice mogu se koristiti kao selektori. U slučaju kada je, na primjer, potrebno istaknuti pasus teksta drugom bojom, dodaje se identifikator. Postavlja se parametrom id.

Vrijedi zapamtiti da se jedan identifikator može koristiti samo jednom. U ovom primjeru selektor se zove ružičasti, ako vam treba drugi identifikator, onda mu samo trebate dati drugo ime (ružičasto2, zeleno, itd.).

Casovi. Selektor klase se koristi kada je potrebno postaviti više objekata istim parametrima. Na primjer, za dva pasusa teksta morate postaviti boju na crvenu.

Može postojati bilo koji broj objekata sa klasama.

Za isti objekat možete navesti i klasu i identifikator - to nije u suprotnosti CSS markup. Ali pošto identifikator ima veći prioritet, tada će se njegov stil koristiti za objekat. Prilikom označavanja stranice u CSS-u, ovo treba uzeti u obzir.

Identifikatori i klase se mogu primijeniti na bilo koji objekt. A ako bude potrebno postaviti jedan stil za tekst i sliku, onda ne možete odrediti naziv elementa, kao što je to bilo u primjeru (p#pink, p.red). Možete samo staviti tačku ili mrežu. Također možete grupirati birače. Na primjer h1, h2, h3(boja:crvena; font-šest:17px).

Izgled stranice

Proučavajući označavanje stranica, možete shvatiti da postoji nekoliko varijanti:

• Tabelarni. Prije nego što je postojao kaskadni stilski list, ova oznaka je bila glavna. To je omogućilo najpreciznije postavljanje objekata resursa jedan od drugog. Ali ispada da je kod prevelik i da ga pretraživači slabo indeksiraju. Još jedan nedostatak ove metode je brzina preuzimanja. Dok se cijela tabela ne učita, korisnik neće vidjeti ni početak teksta.
• Blokiraj. Ovo je sada glavni način označavanja stranica. Njegova upotreba postala je moguća samo zahvaljujući razvoju i poboljšanju stilskog lista.

Prednosti blok rasporeda

Blokiraj izgled stranice koristeći CSS ima nekoliko neospornih prednosti. Prvo, stil objekata je odvojen od HTML dokumenta, što uvelike povećava čitljivost koda i omogućava vam da brzo napravite vizuelne promene. Drugo, moguće je preklapanje jednog sloja na drugi, što čini proces pozicioniranja nekoliko puta lakšim. Naravno, takve stranice se brže učitavaju i indeksiraju. tražilice. CSS izgled stranice olakšava postavljanje modernih vizuelnih efekata.

Jedini nedostatak ovog pristupa je različito "razumijevanje" od strane pretraživača. Neki prikazuju resurs onako kako ga vidi webmaster. Ali postoje pretraživači koji iskrivljuju sliku, pa kada u velikom broju klase i selektore, morate koristiti hakove koji će učiniti kod unakrsnim pretraživačem.

Kako napraviti blok izgled stranice?

Prva stvar koju treba početi je kreiranje izgleda. To bi trebala biti obična psd slika. Nakon što je kreirate (kupite ili preuzmete), trebate izrezati sliku na blokove i smjestiti je u jednu mapu (po mogućnosti zasebnu). Ovi fragmenti će se koristiti kao pozadina za blokove.

AT HTML dokument tag se koristi za raspored blokova