Kratke teorijske informacije. Stvari koje treba zapamtiti

Opis

Za promjenu veličine slike pomoću HTML-a, daju se atributi visine i širine. Možete koristiti vrijednosti u pikselima ili procentima. Ako je postavljena procentualna notacija, tada se dimenzije slike izračunavaju u odnosu na roditeljski element - kontejner u kojem se nalazi oznaka . Ako ne postoji roditeljski kontejner, prozor pretraživača se ponaša kao njegov roditeljski kontejner. Drugim riječima, width="100%" znači da će se slika protezati na cijelu širinu web stranice. Dodavanjem samo jednog atributa širine ili visine čuva se omjer širine i visine slike. Pregledač tada čeka da se slika u potpunosti učita kako bi odredio njenu početnu visinu i širinu.

Obavezno odredite veličinu svih slika na web stranici. Ovo čini da se stranica učitava malo brže jer pretraživač ne mora izračunati veličinu svake slike nakon što je primi. Ova izjava je posebno važna za slike postavljene unutar stola.

Širina i visina slike mogu se mijenjati i gore i dolje. Međutim, to ni na koji način ne utječe na brzinu preuzimanja slike, jer veličina datoteke ostaje nepromijenjena. Stoga, smanjite sliku s oprezom, jer. ovo može izazvati zabunu među čitaocima, zašto se tako malom crtežu toliko dugo učitava. Ali povećanje veličine dovodi do suprotnog efekta - veličina slike je velika, ali se datoteka brže učitava u odnosu na sliku iste veličine. Ali kvaliteta slike se pogoršava.

Sintaksa

HTML
XHTML

Vrijednosti

Bilo koji pozitivan cijeli broj u pikselima ili procentima.

Zadana vrijednost

Originalna širina slike.

HTML5 IE Cr Op Sa Fx

Pozdrav, dragi čitaoci blog stranice. Danas ćemo pričati o tome kako možete postaviti dimenzije za područje sadržaja koristeći visinu i širinu i kako prilagoditi prikaz ovog sadržaja u slučaju da ga ima više nego što može stati u prostor koji mu je dodijeljen (css overflow pravilo sa vrijednosti skrivene, skrol, auto).

Tekst prvog pasusa

Drugi tekst

Jer širina i visina za ove pasuse nisu podešene, tada ih po defaultu sam pretraživač izračunava na osnovu sopstvenog razumevanja vrednosti Auto. Kao rezultat, paragrafi zauzimaju sav raspoloživi prostor po širini, a po visini odgovaraju visini sadržaja koji je u njima zatvoren.

Hajdemo sada da napravimo prvu izmenu i hardkodirajmo širinu prvog pasusa (širina:50px):

Tekst prvog

Drugi tekst

Općenito, dogodilo se očekivano - horizontalna veličina se smanjila na vrijednost specificiranu u širini: 50px, pa, visina pasusa se i dalje formira zahvaljujući visini: auto (podrazumevana vrijednost). Kao rezultat toga, postao je takav da može primiti cijeli tekst.

Ali hajde da sada ograničimo i visinu kontejnera sa height:15px.

Kao rezultat toga, dobili smo da se tekst u našem malom spremniku pasusa više ne uklapa i stoga je sigurno uletio u područje svog susjeda. Upravo za kontrolu ponašanja sadržaja u takvim situacijama on služi pravilo prelivanja.

Overflow znači "prelijevanje" ili, drugim riječima, "prelijevanje sadržaja". Govori šta bi se trebalo dogoditi sa sadržajem ako se ne uklapa u područje (kontejner) koje mu je dodijeljeno.

Overflow ima nekoliko važećih vrijednosti, ali je zadana vrijednost vidljiv (prikaži):

Zato je u našem posljednjem primjeru tekst gornjeg pasusa naleteo na donji (podrazumevano je korišteno overflow:visible - za prikaz sadržaja koji se ne uklapa u kontejner). Mogli bismo iskoristiti drugu krajnost - overflow:hidden. Tada sve što ne stane u kontejner ne bi bilo prikazano na web stranici:

Druge dvije vrijednosti ovog CSS svojstva omogućavaju vam da skrolujete sadržaj koji se ne uklapa u kontejner (već smo primijetili nešto slično kada smo proučavali). Dakle, pomicanje će prikazati vertikalne i horizontalne trake za pomicanje čak i ako sadržaj sigurno stane u spremnik koji mu je dodijeljen:

Ali bilo bi mnogo logičnije koristiti vrijednost Auto za Overflow ako trebate napraviti trake za pomicanje. U tom slučaju, pretraživač će sam izračunati kada će ih prikazati i na kojim osama.

Na primjer, u slučaju korištenja overflow:auto, moći ćemo se pomicati samo duž ose gdje se sadržaj ne uklapa unutar granica spremnika:

Tekst prvog

Drugi tekst

Sumirajući, možemo reći da Overflow prilično dozvoljava fleksibilno prilagodite opcije prikaza sadržaja u slučaju da izađe iz svog kontejnera. Imaćete priliku da prikažete sadržaj koji je ostao (vidljiv), da se ne prikaže (isecite - sakriven), ili da napravite obavezno pomeranje (scroll) ili skrolovanje po potrebi (automatski).

Postoje i druge opcije za pisanje ovog pravila koje se odnose na CSS3, ali koje podržavaju svi pretraživači, što znači da se mogu bezbedno koristiti. Govorim o opcijama overflow-x i overflow-y, koje vam omogućavaju da postavite ili ne postavite pomicanje duž pojedinačnih osa (x je horizontalno, y je vertikalno).

Ako, na primjer, trebate osigurati da se horizontalno pomicanje nikada ne pojavljuje, a vertikalno pomicanje pojavljuje samo kada je potrebno (ako se sadržaj ne uklapa), tada ćete za HTML element morati napisati overflow-x: hidden i overflow- y: auto . Sve, zadatak će biti riješen, jer ovu fintu podržavaju svi pretraživači.

Visina i širina u postocima - zašto nam treba doctype

Sada razgovarajmo o tome iz čega se izračunava procentualna širina. Zapamtite, na početku članka sam obećao da ću fokusirati našu pažnju na ovo. Pa, u stvari, širina CSS pravila ovdje nije izuzetak i, baš kao padding i margina, izračunava se kao postotak horizontalne veličine kontejnera sadržaja.

Situacija je malo zbunjujuća s visinom područja sadržaja datom u procentima. Logično bi bilo pretpostaviti da slično - od visine kontejnera. Ali ovdje ti i ja počinjemo da se susrećemo s dualizmom (dva modela ponašanja) – kao što su to činili prije i kao sada prema prihvaćenim standardima. S tim u vezi, trebalo bi se još jednom dotaknuti teme o načinima prikaza o kojoj smo ranije raspravljali.

Istorijski se dogodilo da je nakon usvajanja standarda ostao još uvijek veliki broj dokumenata formiranih po starim pravilima čistog Html jezika i sa njima je trebalo nešto učiniti. Istovremeno se razvijao (isticao se jezik za označavanje stila, a neki tagovi i atributi su bili zastarjeli), pa je bilo potrebno nekako pokazati pretraživaču po kojim standardima bi trebao parsirati ovaj kod.

Kako bi razdvojio nove dokumente (koji su uzimali u obzir sve nove standarde) i stare dokumente (često ne uzimajući u obzir ništa osim čistog Html-a), Melkosoft je predložio korištenje male funkcije iz XML jezika koji se upravo pojavio u to vrijeme. Ova karakteristika je bila usluga i sada se zove deklaracija tipa dokumenta.

Može izgledati drugačije (više o tome pročitajte u članku koji je gore spomenut), ali ova opcija će uvijek raditi:

Tako je pretraživač primio marker o tome koje standarde treba da koristi za raščlanjivanje dokumenta. Ako je data deklaracija tipa dokumenta, onda ona prelazi u standardni mod. Ako pretraživač ne pronađe doctype u kodu dokumenta u njegovom prvom redu (ili će biti napisan pogrešno, što je identično njegovom odsustvu), onda prelazi u tzv. trik mod(quirks mod).

Dokument koji nema tip dokumenta biće prikazan u pretraživaču kao da je veoma star (starinsko). Ako istom dokumentu dodate deklaraciju, pretraživač će već skinuti svoju patinu starine i početi raditi sa kodom dokumenta prema svim trenutno prihvaćenim standardima.

Ali koncept antike je veoma različit. Kakvu starinu, na primjer, sada može imati popularni pretraživač? google chrome, koji se pojavio tek 2008. godine? IE, naravno, ima prilično bogatu istoriju. Stoga će svi pretraživači bilo koje verzije prikazati dokument bez deklaracije (u quirks modu ili trikovima) na isti način kao što bi to činila stara, jer se ova verzija smatra osnovnom.

Zašto sam tako dugo govorio o načinima prikaza pretraživača? Ali zato što je za ova dva načina, postavljanje visine (visine) područja sadržaja u postocima vrlo različito u odnosu na izračunavanje same visine.

Postavljanje visine (u procentima) područja sa sadržajem u standardnom modu (kada je ispravan tip dokumenta napisan na početku dokumenta) uopće neće biti moguće, osim ako visina nije postavljena negdje za kontejner u kojem se nalazi ovaj sadržaj priloženo (koje ste odredili u procentima visine će se zanemariti).

Ako se deklaracija tipa dokumenta ukloni iz koda dokumenta, tada ćemo vidjeti sljedeću sliku:

Za režim koji prati standarde (deklaracija je napisana na početku dokumenta), prvo morate podesiti visinu kontejnera (u našem slučaju, Body tag će služiti kao kontejner za Div), a tek onda pretraživač ispravno će izračunati visinu: 100%:

Kao rezultat toga, dobili smo dva potpuno različita pristupa prilikom postavljanja visine područja sadržaja u postocima, pa kako bismo izbjegli probleme, savjetujem vam bez greške navedite ispravnu deklaraciju tipa dokumenta na početku svih vaših dokumenata (web stranica). Postoji još jedan primjer gdje je razlika između standardnog i trick moda ogromna.

Ako za bilo koji HTML element postavite visinu i širinu za područje sadržaja, a također navedete padding i širinu okvira (obrub) za ovu oznaku, tada u quirks modu (bez pisane deklaracije) u različitim pretraživačima sve ovo se može tumačiti na različite načine.

U starom pretraživaču IE 5.5, dopuna i širina ivice će se računati prema unutra od veličina navedenih kroz visinu i širinu. One. ukupna veličina elementa će odgovarati onome što je navedeno u njima CSS svojstva(ovo je zastarjela shema koja se više ne koristi).

U ostalom moderni pretraživači padding i širina ivice će se dodati dimenzijama datim u visini i širini. One. u ovom slučaju (gimmick mod bez doctype) početno date dimenzije područja sadržaja će biti proširene za količinu dopuna i granice.

Pa, ako je direktiva napisana u dokumentu, onda se u apsolutno svim modernim i starim pretraživačima ovi problemi s dualnošću pristupa već mogu lako izbjeći. U ovom slučaju, iu IE 5.5, količina dopuna i širina ivice će se dodati veličini područja sadržaja, kako to zahtijevaju moderni CSS standardi. Stoga, u cilju izbjegavanja uvijek pišite doctype.

Sretno ti! Vidimo se uskoro na stranicama bloga

Možda ste zainteresovani

Pozicija (apsolutna, relativna i fiksna) - načini za pozicioniranje HTML elemenata u CSS-u (lijeva, desna, gornja i donja pravila)
Float i clear u CSS - alatima za raspored blokova
Padding, Margin i Border - postavljamo u CSS unutrašnje i vanjske paddinge, kao i granice za sve strane (gore, dolje, lijevo, desno)
Pozicioniranje sa Z-indeksom i pravilom CSS kursora za promjenu kursora miša
Čemu služi CSS, kako povezati kaskadne tablice stilova html dokument i osnovnu sintaksu ovog jezika
Oznake, klase, Id i univerzalni selektori, kao i selektori atributa u modernom CSS-u Različiti dizajn za enterijer i eksterne veze preko CSS-a
Prioriteti u Css-u i njihovo povećanje zbog Važno, kombinacija i grupisanje selektora, korisničkih i autorskih stilova
Prikaz (blok, nijedan, inline) u CSS-u - postavite vrstu prikaza HTML elemenata na web stranici
Jedinice veličine (pikseli, Em i Ex) i nasljeđivanje pravila u CSS-u

zdravo, dragi čitaoče.

Ovo je jedanaesta lekcija učenje CSS-a. U ovoj lekciji ćemo razmotriti samo dva jednostavna, ali važna svojstva. Ova svojstva su odgovorna za visinu i širinu bloka.

Prije proučavanja ove lekcije, prođite kroz prethodne lekcije:

Teorija i praksa

U prošloj lekciji smo pogledali šta je model kutije, unutrašnje i spoljašnje uvlake. U ovom slučaju ćemo razmotriti samo dva svojstva: visinu i širinu bloka. Visinu u CSS-u postavlja svojstvo visina , i svojstvo širine širina . Pogledajmo kod na stvarnom primjeru (uzmimo primjer iz prošle lekcije):

I u CSS-u za svaki blok