U ovom poglavlju:
Sintaksa elementa
HTML element je osnovna strukturna jedinica web stranice, napisana u HTML jezik. Slika ispod pokazuje sintaksu elementa. Za većinu oznaka, sintaksa elementa će izgledati isto, s izuzetkom pojedinačnih oznaka.
Svi elementi u HTML-u slijede isti format:
- Element počinje uvodnom oznakom.
- Element završava završnom oznakom.
- Sadržaj elementa je sve između uvodne i završne oznake.
- Neki elementi nemaju sadržaj (prazni elementi).
- Većina elemenata može sadržavati atribute
Napomena: ne zaboravite staviti simbol " u završnu oznaku / ", govori pregledniku da je vaš element završio i da je ono što dolazi nakon njega drugi element.
Prazni elementi
Postoji nekoliko elemenata u HTML-u koji nemaju završnu oznaku, kao što je ili
. Takvi elementi se nazivaju prazan, jer nemaju nikakav sadržaj i nemaju završnu oznaku.
Ugniježđeni elementi
Svi HTML dokumenti sastoje se od ugniježđenih elemenata. Većina njih može sadržavati druge elemente ili se mogu sami ugniježditi unutar drugih elemenata, a dubina ugniježđenja elemenata nije ograničena.
Sljedeći primjer sastoji se od tri elementa, od kojih su dva ugniježđena:
Moj prvi paragraf
Kada postavite jedan element unutar drugog, trebali biste paziti da ugniježđeni element počinje i završava unutar istog elementa. Stoga je sljedeći primjer netočan:
Ovaj Vrlo
ZanimljivBlokovni i inline elementi savršeno se nadopunjuju tijekom rasporeda, a svaki zauzima svoju specifičnu nišu. Ali pojavljuju se slučajevi kada su karakteristike ovih elemenata očito nedovoljne. Galerija fotografija prikazana na sl. 3.28 sastoji se od odjeljaka koji uključuju sliku s naslovom, a odjeljci su vodoravno poredani zauzimajući cijelu dostupnu širinu. Kada se prozor preglednika smanji, odjeljci se pomiču u drugi redak.
Riža. 3.28. FOTOGALERIJA
Ako koristite oznaku za formiranje odjeljaka
Ne postoji oznaka u HTML-u koja se odnosi na inline-block elemente; jedan se može definirati postavljanjem svojstva prikaza elementa na inline-block.
Div ( prikaz: inline-block; )
Karakteristike ovih elemenata su sljedeće.
- Dopušteno je postavljanje teksta, inline ili blok elemenata unutar inline-block elemenata.
- Visinu elementa automatski izračunava preglednik na temelju sadržaja bloka.
- Širina je jednaka sadržaju plus vrijednosti ispune, margine i ruba.
- Nekoliko uzastopnih elemenata postavlja se na jednu liniju i po potrebi prenosi u drugu liniju.
- Može se okomito poravnati pomoću svojstva vertical-align.
- Dopušteno postavljanje širine i visine.
- Efekt smanjenja margine ne radi.
Za izradu galerije prikazane na sl. 3.28 za oznaku
(primjer 3.18).
Primjer 3.18. Korištenje zaslona
XHTML 1.0 CSS 2.1 IE 7 IE 8+ Cr Op Sa Fx
Katedrala Svete Sofije
Poljska crkva
Klub trgovaca
Spomenik svetom Vladimiru
Budući da su sve fotografije iste veličine, širina bloka je eksplicitno postavljena i jednaka je 150px, ali visina nije navedena, tako da ako je naslov slike dug, visina odjeljaka će varirati (Sl. 3.29) .
Riža. 3.29. Različite visine sekcija
To nije problem jer će se odjeljci i dalje pojavljivati u urednim redovima bez obzira na različite visine. U tom slučaju možete promijeniti vrstu poravnanja putem okomitog poravnanja dodavanjem ovog svojstva u klasu fotografije. Ako navedete vrijednost top, prikaz odjeljaka će se promijeniti (Sl. 3.30).
Riža. 3.30. Gornje poravnanje
Glavni problem je preglednik IE do inačice 7.0 uključivo. Ovaj preglednik primjenjuje samo inline-block na inline elemente i ne radi ispravno s blok elementima. Kako bismo uvjerili ovaj preglednik da ispravno prikaže naš primjer, moramo koristiti vrijednost inline umjesto inline-block i postaviti svojstvo hasLayout. Dodavanje inline će pokvariti izgled u drugim preglednicima, tako da prava odlukaće iskoristiti uvjetni komentari(primjer 3.19).
Primjer 3.19. Stil za IE
Izgradnja znači primijeniti navedeni kod za IE preglednik verzije 7.0 i niže. Drugi preglednici to tretiraju kao komentar i ignoriraju. Što se tiče svojstva zoom, ono je nestandardno i namijenjeno je postavljanju svojstva hasLayout, koje se ne može postaviti izravno.
Također je prikladno koristiti inline blok elemente za različite kataloge proizvoda koji se nalaze u online trgovinama. Obično su prikazani sa slikom i natpisom. Sve je to slično galeriji napravljenoj iznad, tako da sve što preostaje je modificirati njen kod, uzimajući u obzir visinsko poravnanje i IE ponašanje (primjer 3.20).
Primjer 3.20. Katalog
XHTML 1.0 CSS 2.1 IE Cr Op Sa Fx
Video 1856
Slika 315
Mobilni uređaji 2109
Računala i uredska oprema 4296
Kućanski aparati 731
Proizlaziti ovaj primjer prikazano na sl. 3.31.
Riža. 3.31. Katalog
Da ne pitate svaku oznaku
Postoje dvije glavne kategorije HTML elemenata, koje odgovaraju njihovim vrstama sadržaja i ponašanju u strukturi web stranice - blok I inline elementi. Blokovni elementi mogu se koristiti za stvaranje strukture web stranice; ugrađeni elementi se koriste za oblikovanje fragmenti teksta(isključujući stavke I ).
Podjela elemenata na blok i inline elemente koristi se u HTML specifikaciji do verzije 4.01. U HTML5 ti su koncepti zamijenjeni složenijim skupom koncepata u kojima svaki HTML element mora slijediti pravila koja određuju koji mu je sadržaj dopušten.
CSS model vizualnog oblikovanja
1. Vizualni model oblikovanja
CSS model vizualnog oblikovanja je algoritam koji obrađuje HTML dokument i prikazuje ga na zaslonu uređaja. Ovaj model transformira svaki element dokumenta tako da generira nula ili više pravokutnih okvira prema CSS modelu okvira. Položaj ovih okvira na stranici određen je sljedećim čimbenicima:
— veličina elementa (uzimajući u obzir jesu li izričito navedeni ili ne);
— tip elementa (linija ili blok);
— shema pozicioniranja (normalni tok, pozicionirani ili plutajući elementi);
— odnosi između elemenata u DOM-u;
— unutarnje dimenzije sadržanih slika;
— vanjske informacije (na primjer, veličine prozora preglednika).
Položaj i dimenzije kutije(a) svakog elementa izračunavaju se u odnosu na rubove pravokutne kutije, tzv. "sadrži blok"(koji sadrži blok). Veličina kutije nije ograničena veličinom bloka koji sadrži, tako da se pod određenim uvjetima može proširiti izvan njezinih granica.
2. Blok model
U modelu okvira, element se tretira kao pravokutni spremnik koji ima područje sadržaja i izborne granice i ispune (unutarnje i vanjske). Svojstvo prikaza određuje vrstu spremnika elementa. Za svaki element postoji zadana vrijednost preglednika.
Riža. 1. Blok model elementa Područje sadržaja je sadržaj elementa, poput teksta ili slike.
Uvlačenje specificirano je svojstvom padding. Padding je udaljenost između glavnog sadržaja i njegovog ruba (okvira). Ako postavite pozadinu za element, ona će se također primijeniti na polja elementa. Unutarnja podloga ne može imati negativne vrijednosti, za razliku od vanjske podloge.
Margina specificiran je svojstvom margine. Dodaje udaljenost vanjskom dijelu elementa od vanjske granice okvira do susjednih elemenata, čime se odvajaju elementi na stranici. Margine uvijek ostaju prozirne i kroz njih se vidi pozadina nadređenog elementa.
Vrijednosti ispune i margine postavljene su sljedećim redoslijedom: gore, desno, dolje i lijevo.
Granica, ili obrub elementa, specificiran je korištenjem svojstva border. Ako nije navedena boja obruba, on preuzima boju glavnog sadržaja elementa, kao što je tekst. Ako okvir ima prekide, kroz njih će se pojaviti pozadina elementa.
Ispuna, ispuna i obrub elementa nisu obavezni; njihova zadana vrijednost je nula. Međutim, neki preglednici dodaju pozitivne zadane vrijednosti tim svojstvima na temelju svojih listova stilova. Možete izbrisati stilove preglednika za sve elemente pomoću univerzalnog selektora:
* ( margina: 0; ispuna: 0; )
3. Blok elementi i blok kontejneri
Elementi bloka— elementi najviše razine koji su vizualno oblikovani kao blokovi, postavljeni okomito na stranici u prozoru preglednika. Prikaz vrijednosti svojstava kao što su blok, stavka popisa i tablica čine elemente blok elementima. Elementi bloka generiraju glavni blok koji sadrži samo blok elementa. Elementi s prikazom vrijednosti: list-item generiraju dodatne okvire za markere koji su pozicionirani u odnosu na glavni okvir.
,