Kratke teorijske informacije. Stvari koje treba zapamtiti

U slučaju HTML dokumenata, oznake više rade na označavanju sadržaja nego da naznače kako treba biti predstavljen. Više kontrole nad prezentacijom postiže se stilovima. U ovom članku ću pogledati one stilove koji se odnose na formatiranje pasusa u HTML-u.

Tag

U HTML-u možete specificirati pasuse, a atribut align ih poravnava lijevo, desno, u sredini ili poravnato. Osim njih, koristit ćemo atribut globalnog stila.

Poravnanje pasusa

Možete poravnati paragraf koristeći atribut align sa sljedećim vrijednostima:

text-align: lijevo|desno|centar|justify|početno|naslijediti;

Kopirajte sljedeći kod u .html datoteku.

Ovaj paragraf je poravnat po sredini

Ovaj paragraf je poravnat desno

Ovaj paragraf se prikazuje u prozoru pretraživača sa poravnanjem. Dobro raspoređeni pasus se poravnava desno i lijevo dodavanjem dodatnih razmaka. Možete vidjeti da se ivice poravnatog pasusa poklapaju sa ivicama lijevo i desno poravnatih pasusa. U lijevo poravnatom pasusu, lijeva margina je ravna, a u desnom pasusu je desna. Vidite li da ovaj pasus ima ravne obje ivice? Ovo se postiže zahvaljujući stilu text-align:justify.

U prozoru HTML pretraživača, kod pasusa izgleda ovako.

Prored

Možete kontrolirati razmak između pasusa sa style=line-height. Koristite atribut style sa sljedećim vrijednostima:

visina linije: normalna|broj|dužina|početna|naslijediti;

Slijedi primjer HTML koda koji daje paragrafe sa različitim proredom:

Ovaj paragraf koristi dvije vrijednosti za atribut stila. Prva line-height:1.5 specificira jedan i po prored za pasus, a druga vrijednost text-align:justify specificira da tekst pasusa treba biti poravnat po širini.

Ovaj pasus ima dvostruki prored i opravdan je. line-height:2 specificira dvostruki razmak. Atribut style ne mora imati dvije vrijednosti. Ali ako trebate navesti dvije vrijednosti, to možete učiniti tako što ćete ih odvojiti tačkom i zarezom.

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

: Postavlja razmak između redova na 13 piksela;

: Postavlja razmak između pasusa u HTML-u na 200% trenutne veličine fonta;

: Postavlja visinu linije na 14 piksela.

Udubljenje

Koristio sam izraz "udubljenje" da bih ga lakše razumio. Ali u HTML-u koristimo razmake za stvaranje bijelog prostora oko objekta. Možete koristiti atribut stila sa vrijednošću dopuna da postavite lijevo ili desno uvlačenje pasusa.

Slijedi primjer lijevo i desno uvučenih pasusa:

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

Za ovaj pasus, postavio sam lijevo uvlačenje na 30px koristeći padding-left:30px. Ovaj paragraf je takođe opravdan korišćenjem stila text-align:justify. Kao što već znate, možemo koristiti više vrijednosti za atribut Style tako što ćemo ih odvojiti tačkom i zarezom.

I ovaj pasus ima desno uvlačenje od 30 piksela, ali nema lijevo uvlačenje. Opravdano je i po širini. Vrijednost 'padding-right' atributa stila postavlja padding udesno. Ako ne vidite efekat, smanjite širinu prozora pretraživača tako da se opravdani HTML paragraf pravilno prikazuje.

Uvlake između pasusa (uvlaka prije i uvlaka poslije pasusa)

U HTML-u ili CSS-u, ovo nam ne treba. Možemo samo stilizirati padding na elementu

Padding-top i padding-bottom definiraju bijeli prostor prije i poslije pasusa, koji funkcionira kao gornji ili donji padding. Pogledajte primjer oznake ispod

Postavio sam prvi HTML paragraf na 10px uvlačenje prije drugog i 50px nakon drugog pasusa:

Ovaj paragraf nije uvučen ni prije ni poslije. Ovo je regularan paragraf opravdan. Kao što već znate, možemo opravdati paragraf pomoću koda style=”text-align:justify” unutar oznake.

Ovaj paragraf je poređan. Takođe ima uvlačenje od 10 px ispred pasusa i 50 px posle. Unutar oznake sam postavio 3 stila.

Ovo je normalan pasus bez uvlaka i zadanog poravnanja.

Stvari koje treba zapamtiti

• HTML paragraf se može poravnati pomoću atributa align ili stila za poravnavanje teksta;
• HTML će biti različito prikazan u zavisnosti od veličine ekrana, veličine prozora pretraživača;
• Dodavanje dodatnih razmaka ili praznih linija u HTML kod ne utiče na izlaz. Pretraživač uklanja sve dodatne prostore;
• Oznake definišu šta treba da bude prikazano, a stilovi definišu kako treba da bude prikazano;
• Stilovi se mogu postaviti na tri različita načina - inline (unutarnje oznake), interni ( unutar iste HTML datoteke sa elementom

  Za ovaj paragraf postavite samo širinu i visinu.

  Ovaj paragraf sadrži, pored širine i visine, uvlačenje, ivicu i udubljenje.

  Pokušajte »

  Primjer jasno pokazuje da drugi element zauzima više prostora od prvog. Ako računamo prema našoj formuli, tada su dimenzije prvog pasusa 150x100 piksela, a dimenzije drugog pasusa su:

  
  

  Ukupna visina:	5px	+	10px	+	100px	+	10px	+	5px	= 130px
  	gornji okvir		gornji indent		visina		niže indent		niže okvir

  tj. 180x130 piksela.

  element overflow

  Nakon što ste definirali širinu i visinu elementa, obratite pažnju na jednu važnu točku - sadržaj unutar elementa može premašiti navedenu veličinu bloka. U ovom slučaju, dio sadržaja će ići izvan granica elementa, da biste izbjegli ovaj neugodan trenutak, možete koristiti overflow CSS svojstvo. Svojstvo overflow govori pretraživaču šta da radi ako sadržaj bloka premašuje njegovu veličinu. Ovo svojstvo može imati jednu od četiri vrijednosti:

  • vidljivo je zadana vrijednost koju koristi pretraživač. Određivanje ove vrijednosti imat će isti učinak kao i nepostavljanje svojstva prelijevanja.
  • pomicanje - dodaje vertikalne i horizontalne trake za pomicanje elementu.
  • auto - dodaje trake za pomicanje ako je potrebno.
  • skriveno - sakriva dio sadržaja koji prelazi granice elementa bloka.