Oblikovanje HTML odlomka. Kratke teorijske informacije Prored

Pogledajmo kako to izgleda u pregledniku:

Kao što vidite, postavili smo određenu visinu i širinu. Ako postavimo visinu manju nego što stane tekst, tada bi se tekst protezao izvan bloka. Eksperimentirajte s visinom i širinom. U početku će biti teško okom odrediti potrebnu veličinu u pikselima, ali s vremenom ćete se naviknuti.

Ovo je mala i jednostavna lekcija. Pokušajte sami promijeniti veličinu bloka i vidite što će se dogoditi. Praksa je najviše brz način nauči nešto!

U slučaju HTML dokumenata, oznake više služe za označavanje sadržaja nego za označavanje kako bi trebao biti predstavljen. Veća kontrola nad prezentacijom postiže se stilovima. U ovom ću članku pogledati one stilove koji su povezani s oblikovanjem odlomaka u HTML-u.

Označiti

U HTML-u možete navesti odlomke, a atribut align poravnava ih lijevo, desno, središte ili obostrano. Osim njih, koristit ćemo atribut globalnog stila.

Poravnanje odlomaka

Odlomak možete poravnati pomoću atributa poravnanja sa sljedećim vrijednostima:

poravnanje teksta: lijevo|desno|sredina|obostran|početno|naslijediti;

Kopirajte sljedeći kod u svoju .html datoteku.

Ovaj je odlomak poravnat po sredini

Ovaj odlomak je poravnat udesno

Ovaj se odlomak pojavljuje poravnat u prozoru preglednika. Obostrani odlomak poravnat je udesno i ulijevo dodavanjem dodatnih razmaka. Možete vidjeti da rubovi poravnatog odlomka odgovaraju rubovima lijevo i desno poravnatih odlomaka. U lijevo poravnatom odlomku, lijevi rub je ravan, dok je u desnom poravnatom odlomku lijevi rub ravan. Vidite li kako su oba ruba ovog odlomka ravna? To se postiže stilom text-align:justify.

U prozoru preglednika HTML kod za odlomak izgleda ovako:

Razmak između redova

Možete kontrolirati prored odlomka pomoću style=line-height. Koristite atribut stila sa sljedećim vrijednostima:

visina-line: normalan|broj|duljina|početno|naslijediti;

Dolje je primjer HTML koda koji prikazuje odlomke s različitim proredom:

Ovaj odlomak koristi dvije vrijednosti za atribut stila. Prva line-height:1.5 određuje jedan i pol prored za odlomak, a druga vrijednost text-align:justify navodi da tekst odlomka treba biti raspoređen po širini.

Ovaj odlomak je dvostruki prored i obostrano poravnat. line-height:2 specificira dvostruki prored. Atribut stila ne mora imati dvije vrijednosti. Ali ako trebate navesti dvije vrijednosti, to možete učiniti tako da ih odvojite točkom i zarezom.

Evo nekoliko različitih načina za korištenje vrijednosti visine linije za atribut stila:

: postavlja prored na 13 piksela;

: postavlja HTML razmak između odlomaka na 200% u odnosu na trenutnu veličinu fonta;

: Postavlja visinu linije na 14 piksela.

Udubljenja

Upotrijebio sam izraz "uvlake" radi lakšeg razumijevanja. Ali u HTML-u koristimo razmak za stvaranje praznog prostora oko objekta. Možete upotrijebiti atribut stila s vrijednošću ispune za uvlačenje odlomka ulijevo ili udesno.

Ispod je primjer odlomaka s lijevom i desnom uvlakom:

Ovaj odlomak nije uvučen, samo je poravnat. Pogledajte atribut stila elementa P za ovaj odlomak.

Za ovaj odlomak postavio sam lijevo padding na 30 px koristeći stil padding-left:30px. Ovaj je odlomak također poravnat pomoću stila text-align:justify. Kao što već znate, možemo koristiti više vrijednosti za atribut Style tako da ih odvojimo točkom i zarezom.

I ovaj odlomak ima desno uvlačenje od 30 piksela, ali nema lijevo uvlačenje. Također je usklađeno sa širinom. Vrijednost 'padding-right' atributa stila specificira pravo ispunjavanje. Ako ne vidite učinak, smanjite širinu prozora preglednika kako bi se opravdani HTML odlomak pravilno prikazao.

Uvlačenje između odlomaka (uvlačenje prije i uvlačenje iza odlomka)

U HTML-u ili CSS-u ovo nam ne treba. Možemo jednostavno odrediti stil ispune za element

Padding-top i padding-bottom određuju prazan prostor prije i iza odlomka, koji se ponaša kao ispuna na vrhu ili dnu. Pogledajte primjer oznake u nastavku

Instalirao sam za prvu HTML paragraf uvuci 10 piksela prije drugog i 50 piksela iza drugog odlomka:

Ovaj odlomak nema navedene uvlake prije ili poslije. Ovo je redoviti paragraf, obostran. Kao što već znate, možemo opravdati odlomak pomoću koda style=”text-align:justify” unutar oznake.

Ovaj paragraf je predimenzioniran. Također ima 10 piksela ispune prije odlomka i 50 piksela iza njega. Unutar oznake postavio sam 3 stila.

Ovo je uobičajeni odlomak bez uvlaka i zadanog poravnanja.

Stvari koje treba zapamtiti

• HTML odlomak može se poravnati pomoću atributa align ili stila poravnanja teksta;
• HTML će se prikazati drugačije ovisno o veličini zaslona, ​​veličini prozora preglednika;
• Dodavanje dodatnih razmaka ili prazne linije HTML kod ne utječe na izlaz. Preglednik uklanja sve dodatne razmake;
• Oznake definiraju što bi trebalo biti prikazano, a stilovi definiraju kako bi trebalo biti prikazano;
• Stilovi se mogu odrediti u tri različiti putevi— ugrađeni (unutar oznaka), interni ( unutar iste HTML datoteke pomoću elementa
  Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat.
  
  
  

  Rezultat ovog primjera prikazan je na sl. 1.

  Riža. 1. Primjena svojstva visine

  Objektni model

  document.getElementById("elementID ").style.height

  Preglednici

  preglednik Internet Explorer 6 netočno definira visinu kao minimalnu visinu.

  U neobičnom načinu rada, verzije Internet Explorera do i uključujući 8.0 netočno izračunavaju visinu elementa bez dodavanja vrijednosti ispune, margine ili obruba.

  Inačice Internet Explorera do i uključujući 7.0 ne podržavaju vrijednost nasljeđivanja.

  Ovaj poduži članak s uputama usredotočit će se na važne teme, čija je zadaća razvrstati metode rada s blok elementima, objasniti čitatelju zašto se koristi promjena modela za izračun širine i visine elemenata, kako upravljati preljevom blok elemenata, te kako raditi s minimalne i maksimalne veličine elemenata.

  Dok smo učili o CSS modelu okvira, naučili smo da svojstva širine i visine postavljaju širinu i visinu unutarnjeg područja elementa ( područje sadržaja), koji može sadržavati tekst, slike i druge elemente.

  U CSS modelu okvira postoji razlika između vrijednosti širine i visine koje date elementu i količine prostora koji preglednik rezervira za njegov prikaz. Ukupna širina i visina elemenata predstavlja područje prozora preglednika koje se sastoji od širine i visine ispune, obruba i prilagođenih vrijednosti navedenih za njih.

  Ukupna širina elementa izračunava se pomoću formule:

  div(širina: 150px; /* postavi širinu elementa */ visina: 150px; /* postavi visinu elementa */ ispuna: 10px; /* postavlja unutarnje punjenje elementa */ obrub: 5px; /* postavlja granice elementa */ }

  U našem slučaju to spašava situaciju i ne moramo raditi nikakve kalkulacije, au budućnosti se bojimo bilo kakvih promjena koje bi mogle biti potrebne za naše elemente. Ostavimo ove nepotrebne izračune na strani preglednika i pogledajmo rezultat našeg primjera:

  Da bismo u potpunosti razumjeli ovaj model za izračun širine i visine elemenata, učvrstimo svoje znanje na sljedećem primjeru:

  kutija sa sadržajem
  klasa = "test2" > rubni okvir
  
  
  

  Vrijednost svojstva content-box je zadana vrijednost i izračunava ukupnu širinu i visinu elementa prema klasičnoj shemi. Korištenje širine kao primjera:

  150px (prilagođena širina) + 10px (lijevi rub) + 10px (desni rub) + 10px (lijevi rub) + 10px (desni rub) = 190px.

  Što se tiče drugog elementa na koji smo primijenili svojstvo border-box, prilagođena širina i visina elementa već uključuju sadržaj, obrub i ispunu elementa. U većini slučajeva, upotreba svojstva s vrijednošću border-box je poželjnija na stranicama, jer čini očiglednim konačne dimenzije elementa i izbjegava neke od nepredviđenih situacija o kojima se gore govorilo.

  Rezultat našeg primjera:

  Upravljanje preljevom blok elementa

  Tijekom procesa izgleda naići ćete na situacije u kojima će sadržaj elementa biti prikazan izvan granica elementa. Prema zadanim postavkama preglednik prikazuje ovaj sadržaj (renderira se prekoračenje elemenata), što u nekim slučajevima dovodi do vizualnih pogrešaka. Svojstvo overflow CSS odgovorno je za ovakvo ponašanje preglednika. Razmotrimo njegove moguće vrijednosti:

  Pogledajmo sljedeći primjer:

  preljev: vidljiv

  klasa = "test2" >

  preljev: skriven

  Pojedite još malo ovih mekanih francuskih peciva i popijte čaj.
  klasa = "test3" >

  preljev: svitak

  Pojedite još malo ovih mekanih francuskih peciva i popijte čaj.
  klasa = "test4" >

  preljev: autom

  Pojedite još malo ovih mekanih francuskih peciva i popijte čaj.
  
  
  

  U ovom smo primjeru postavili četiri blokovi fiksne širine i visine, za koje razl CSS vrijednosti svojstva preljeva:

  • Prvi blok(vidljiva vrijednost) – sadržaj se proteže izvan granica elementa (zadana vrijednost).
  • Drugi blok(value hidden) – sadržaj koji prelazi element se skraćuje.
  • Treći blok(vrijednost pomicanja) - Skraćuje preljev, ali dodaje traku za pomicanje.
  • Četvrti blok(auto vrijednost) – kao i kod vrijednosti pomicanja, samo će se traka za pomicanje automatski dodati ako blok prelazi duž određene osi ( x- horizontalno, odn g- okomito) i nije trajno prikazano na stranici.

  Rezultat našeg primjera.