Formatiranje HTML pasusa sa stilovima

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.

: 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
  

  Princ Andrej se nekoliko puta osvrnuo na ovaj hrast dok je jahao kroz šumu. Pod hrastom je bilo cveća i trave, ali on je i dalje stajao usred njih, sumoran, nepomičan, ružan i tvrdoglav.
  

  rezultat:

  Princ Andrej se nekoliko puta osvrnuo na ovaj hrast dok je jahao kroz šumu. Pod hrastom je bilo cveća i trave, ali on je i dalje stajao usred njih, sumoran, nepomičan, ružan i tvrdoglav.

  Sada možete lako napravite crvenu liniju na vašim html stranicama. Vidimo se uskoro!

  Čitajući neku knjigu, novine, časopis, pa i bilo koji normalan tekst, naišli ste na mnogo pasusa, a prvi red svakog od njih sadrži malu uvlaku. U ovom članku ću vam pokazati najbolju opciju. uvlačenje pasusa preko CSS-a.

  Naravno, bilo koji broj razmaka se može umetnuti pomoću , čime se bira potrebno uvlačenje, ali, sigurno, razumijete da je ova metoda, blago rečeno, nezgodna. A rješenje za ovaj problem je vrlo jednostavno.

  To bi već trebalo da znaš u HTML pasus se kreira pomoću oznake<str>. Dakle, svaki paragraf bi trebao biti u svojoj oznaci.<str>. I za uvlačenje prvog reda svakog pasusa dovoljno za povezivanje CSS kod:

  P(
  uvlačenje teksta: 10px;
  }

  U ovom primjeru smo uvučeni 10 piksela. Možete se poigrati s ovom vrijednošću kako biste pronašli najbolju za svoju web lokaciju.

  Na ovaj jednostavan način možete postavite uvlačenje prvih redova bilo kojeg pasusa u tekstu na sajtu.

  Ako imate bilo kakvih pitanja, ili želite da progovorite o ovom članku, onda možete ostaviti svoj komentar na dnu stranice.

  Komentari (9 ):

  31.05.2013 13:10:03

  Zdravo Michael, molim te pomozi mi da riješim problem sa sljedećim css kodom: .bam ( granica: 1px puna crna; border-radius: 8px; margin-bottom: 4%; text-align: lijevo; širina: 84%; ) . bam .author (boja pozadine: Bijela; Bord-bottom: 1px puna crna; border-top-right-radius: 8px; border-top-left-radius: 8px; font-weight: bold; padding:4px; ) . bam .text (boja pozadine: WhiteSmoke; border-bottom-right-radius: 8px; border-bottom-left-radius: 8px; padding:4px; ) Tekst unutar ".bam .text" treba premotati u drugi red ako ne stane u jednu liniju. Ali iz nekog razloga se ne prenosi, već izlazi iz bloka. Pomozite u rješavanju ovog problema.

  Odgovoriti

  06.06.2013 22:42:20

  Zdravo Mihaile, slučajno ne znaš kako da nađeš izlaz iz sledeće situacije: postoji blok, a unutar njega je još jedan blok, a unutra je u ovaj blok upisan tekst (dužina teksta nije poznata unaprijed). Dakle, kako napraviti da visina roditeljskog bloka zavisi od visine bloka unutar njega (sa tekstom)? I onda iz nekog razloga shvatim da je visina roditeljskog bloka manja od visine unutrašnjeg.

  Odgovoriti

  Admin 06.06.2013 23:32:40

  Svi vanjski blokovi su razvučeni prema dimenzijama unutrašnjih blokova. Ne morate ovo da radite, već bi trebalo da bude podrazumevano.

  Odgovoriti

  07.06.2013 11:11:09

  i pogledaj: http://progbase.ru/about.php

  Odgovoriti

  Admin 07.06.2013 21:54:37

  Mora se koristiti

  - postavite ovaj blok na različita mjesta i pogledajte šta se mijenja. Kada sve bude u redu, ostavite to tamo.

  Odgovoriti

  13.09.2013 21:39:34

  Zdravo! Pomozite molim vas u prozoru ovog savjeta, kada lebdite, napravite uvlake i druge stilove teksta.Malo nesto ne ide i to je to.Hvala unaprijed. prompt i dalje u tekstu

  Da biste mu dali određeni stil, potrebno je da tekst postavite u odgovarajući kontejner.

  Sve oznake za formatiranje mogu se podijeliti u tri grupe:

  1. Oznake naslova ( h1-h6).

  2. Dizajnirajte oznake glavnog teksta ( , , ,

  , 
   itd.).
  3. Grupiranje oznaka ( 
  
  , 
  
  , 
  
  )
  
  Oznake naslova
  Pretvorite običan tekst u naslov određenog nivoa.  Tag 
  
   kreira naslov prvog nivoa - najveći i najvažniji (obično naslov članka na stranici), 
  
   odgovoran je za naslov šestog nivoa - najmanji i najneupadljiviji.  Ove oznake su važne i za korisnike i za pretraživače - naslove sa podnaslovima vole i jedni i drugi.  Mora se poštovati hijerarhija nivoa, tj 
  
   moram ići 
  
  , a ne obrnuto.
  
  Da biste razumjeli kako ovo funkcionira, unesite sljedeći kod u html datoteku:
   
  Naslov prvog nivoa
  Naslov drugog nivoa
  Naslov trećeg nivoa
  Naslov 4. nivoa
  Naslov 5. nivoa
  Naslov 6. nivoa
  
  U pretraživaču će izgledati ovako:
  Oznake dizajna teksta tijela
  Dozvolite formatiranje na nivou znakova.  Hajde da vidimo šta možete da uradite sa njima.
  Bold font
  Potrebno je fokusirati se na tekst.  Također je važno za pretraživače, oni mogu istaknuti ključne riječi.
  Odgovoran za podebljane oznake 
   I .
  
  Superscript i subscript
  Mogu se koristiti u formulama, jednadžbama, zapisima nekih veličina.
  Oznaka je odgovorna za kreiranje indeksa 
  , za gornju oznaku se koristi 
  .
  X 1=32 m 2
  Smanjenje veličine
  Ako je potrebno da tekst bude jedan manji od onog postavljenog na cijeloj stranici, onda morate koristiti oznaku 
  
  Običan tekst. Smanjeni tekst.
  Podvući
  Ova vrsta isticanja može se koristiti za označavanje promjena napravljenih u dokumentu ili jednostavno za isticanje teksta.
  Običan tekst. Podvučeni tekst.
  Precrtano
  Možete precrtati informacije ako su već izgubile relevantnost.  Dizajniran za ovu oznaku 
  .
  Kurziv
  Potreban je za fokusiranje pažnje na tekst, a može se kreirati pomoću oznake 
   ili 
  .
  
  Računarski unos teksta
  Dešava se da morate dodati izvorni kod programa i rezultate njegovog rada na web stranicu.  Da bi se olakšalo vizuelno razlikovanje različitih delova teksta jedan od drugog, HTML programeri su uveli oznake ove grupe.
  Do kontejnera 
   programski kod je zaključen, dok su njegove varijable označene oznakom 
  , a rezultat izvršenja je 
  .  Kontejner 
   sadrži tekst koji korisnik mora uneti sa tastature kada radi sa programom, i sve što je uvršteno u tagove 
  , zadržava originalni format, uključujući dodatne razmake i prijelome reda.
  
    dakle a, b, c, ovdje rezultat izvršenja programa , a ovo je tekst koji je uneo korisnik 
  prikazano ovako
  .
  
  Citati i definicije
  Kod će izgledati ovako 
   dakle 
  , varijable su označene na sljedeći način: 
   a, b, c 
  , ovdje 
   rezultat izvršenja programa 
  , a ovo je 
   tekst koji je uneo korisnik 
  .  Zadržite originalno formatiranje 
   prikazano ovako 
  
  .
  
   
  Citat u oznaci blockquote.
  Citat unutar kontejnera za citate.Kratak citat sa oznakom q.Posvećena definicija.Skraćenica (NVO, IP).
  
  Opšti primjer
  Da biste bolje razumjeli za šta je oznaka odgovorna i kako radi, pogledajte sljedeći kod i rezultat njegovog izvršavanja.
   
  Fatty tekst može biti označen jaka I b.  Iza kurziv upoznaj em I i.
  oznake sub I sup koristi za kreiranje niže(x 1…x n) I top (42=16) indeksi. Del briše, ins - naglašava.
  oznake kod, kbd, var I samp rijetko se koristi i potrebno je za prikaz popisa programa
   skr potrebno za skraćenice ( HTML).  Za citiranje se koriste oznake blockquote, cite i q ( Nebo je već disalo u jesen)
  Predoznaka zadržava originalno oblikovanje teksta bez uklanjanja razmaka ili prijeloma reda.
  
  Pregledač tumači ovaj kod ovako:
  
  Grupiranje oznaka
  Neophodno je da tekst ne ide u jednom kontinuiranom redu, već da je podijeljen na logičke komponente.
  Oznake sadrže paragraf.
   
  Prvi paragraf
  Drugi paragraf
  
  
  Tag 
  
   prelazi na sljedeći red unutar pasusa (neće biti uvlaka prije reda).
  
   omogućava vam da nacrtate horizontalnu liniju.  Možete ga koristiti za vizuelno odvajanje teksta.  Atributi širina, veličina, boja, poravnati I noshade postavite širinu, debljinu, boju, poravnanje i odsustvo 3D efekta linije, respektivno.
   
  Linija iznad linije. 
  Linija ispod linije.