Vrijednost atributa align specificira desno poravnanje. Zadana vrijednost

na rubu.

Sintaksa

vrijednosti

centar Poravnava tekst sa središtem. Tekst se postavlja vodoravno u prozor preglednika ili spremnik gdje se nalazi blok teksta. Čini se da su redovi teksta nanizani na nevidljivu os koja prolazi kroz središte web stranice. Slična metoda poravnanja aktivno se koristi u naslovima i raznim natpisima, poput natpisa, daje službeni i čvrst izgled dizajnu teksta. U svim ostalim slučajevima, središnje poravnanje rijetko se koristi za taj razlog da je nezgodno čitati veliku količinu takvog teksta. lijevo Poravnava tekst ulijevo. U ovom slučaju, redovi teksta su poravnati ulijevo, a desni rub se nalazi u "ljestvici". Ova metoda poravnanja je najpopularnija na web stranicama, jer omogućuje korisniku da lako traži nova linija i udoban za čitanje velikog teksta. desno Poravnava tekst udesno. Ova metoda poravnanja djeluje kao antagonist prethodnoj vrsti. Naime, redovi teksta su poravnati udesno, dok lijeva ostaje "rastrpana". Zbog činjenice da lijevi rub nije poravnat, odnosno da njime počinje čitanje novih redaka, takav tekst je teže čitati nego da je lijevo poravnat. Stoga se desno poravnanje obično koristi za kratke naslove ne više od tri reda. Ne razmatramo određena mjesta na kojima se tekst mora čitati s desna na lijevo, tamo je to moguće sličan način poravnanje će dobro doći. Ali gdje ste kod nas vidjeli takve stranice. justify Justify, što znači lijevo i desno opravdano u isto vrijeme. Da bi izvršio ovu radnju, preglednik u ovom slučaju dodaje razmake između riječi.

Zadana vrijednost

HTML 4.01 IE Cr Op Sa Fx

Proizlaziti ovaj primjer prikazano na sl. jedan.

Riža. 1. Poravnajte elemente sa align atribut

Pozdrav dragi čitatelji blog stranice. U ovom članku nastavljamo učiti osnove stila CSS oznake i pogledajte vertical-align, text-align, text-indent i neka druga svojstva za ukrašavanje html teksta.

Poravnavanje teksta sa CSS-om

Počnimo s atributima stila koji kontroliraju prikaz teksta u elementima na razini bloka. Počnimo s svojstva poravnanja teksta, što je zapravo zamjena za atribut align (koristi se za poravnavanje sadržaja html elemenata, poput p paragrafa).

svojstvo stila poravnati tekst skupova horizontalno poravnanje tekst i ima samo četiri moguće vrijednosti:

poravnavanje teksta: lijevo|desno|sredina|justify

Dostupne vrijednosti ovog pravila određuju poravnanje, odnosno: lijevo - ulijevo, desno - udesno, središte - prema sredini i justify - do širine stranice (lijevo i desno istovremeno povećanjem udaljenost između riječi). Na primjer, tekst ovog članka poravnat je sa širinom stranice (ako primijetite da ima ravnomjerne obrube i s lijeve i desne strane) pomoću pravila text-align:justify.

Prema zadanim postavkama, vodoravno poravnanje je lijevo, tako da ne morate specificirati text-align:left osim ako nadređeni elementi ne navode drugačije poravnanje.

Primjeri korištenja nekretnina:

p (poravnanje teksta: opravdati)
h1 (poravnanje teksta: središte)

Sljedeće CSS svojstvo tekstualni ident skupova uvlačenje za crvenu liniju, na primjer za tekst u oznaci paragrafa p. Ovo pravilo, kao i za poravnavanje teksta, primjenjuje se samo na elemente na razini bloka. Sintaksa:

uvlaka teksta:<отступ>

Ovdje su dopuštene apsolutne i relativne vrijednosti uvlake. Apsolutne vrijednosti (px - pikseli, em, ex, itd.) mogu se navesti i sa znakom plus i sa znakom minus. Relativna vrijednost obično se daje kao postotak (%). Relativna vrijednost se izračunava iz širine područja koje je rezervirano za tekst. Dakle, css pravilo text-indent:50% postavit će crvenu liniju jednaku polovici duljine ovog retka. Prema zadanim postavkama, uvlaka "crvene linije" je nula. Primjer:

p ( ident teksta: 10px; )

Zatim razmotrite svojstvo vertikalnog poravnanja vertikalno poravnati. Ovo svojstvo je primjenjivo na sve html elemenata a za gotovo sve znači međusobno usklađivanje inline elementi s tekstom u odnosu na njihovu osnovnu liniju. Osim oznaka td i th tablice, u kojima će sav sadržaj biti okomito poravnat. Sintaksa:

okomito poravnanje: osnovna linija|pod|super|vrh|tekst-vrh|sredina|dno|tekst-dolje|<величина>

Pogledajmo svaku vrijednost detaljnije:

• osnovna crta - poravnavanje dijela teksta duž osnovne crte roditeljski element. Ovo je zadana postavka;
• sub - fragment teksta se prikazuje kao indeks ili indeks za roditeljski element;
• super - fragment teksta se prikazuje kao superscript ili superscript za roditeljski element;
• vrh - poravnanje fragmenta teksta s gornjim rubom nadređenog elementa;
• text-top - poravnanje fragmenta s gornjim rubom teksta nadređenog elementa;
• sredina - poravnanje središta fragmenta teksta prema središtu nadređenog elementa;
• bottom - poravnanje fragmenta teksta prema donjem rubu nadređenog elementa;
• text-bottom - poravnajte fragment s donjim rubom teksta nadređenog elementa;

Na donjoj slici možete vidjeti ponašanje testnih fragmenata s različitim vrijednostima svojstva vertical-align in Internet preglednik Explorer 11:

Osim gore navedenih vrijednosti, možete odrediti brojčane vrijednosti. Tako, css pravilo vertical-align:0 bi značilo isto što i vertical-align:baseline. A pravilo vertical-align:10px pomaknut će tekst gore 10 piksela od osnovne linije. Za pomicanje teksta prema dolje, vrijednost mora biti navedena s minusom.

Pomak se također može podesiti relativne jedinice mjerenja, na primjer u em i u ex ili kao postotak.

Za vertikalno poravnanje sadržaj ćelija tablice u vertikalnom poravnanju trebao bi koristiti vrijednosti:

• vrh - za poravnavanje sadržaja s gornjim rubom ćelije;
• dno - za poravnavanje sadržaja s donjom granicom ćelije;
• sredina - za poravnavanje sa središtem ćelije (koristi se prema zadanim postavkama).

Za postignuće željeni rezultat, obično morate eksperimentirati različita značenja svojstva stila vertikalnog poravnanja. Brojne moguće vrijednosti daju vrlo različite rezultate u različitim slučajevima.

Opcije razmaka i prelamanja riječi koje kontroliraju prijelome redaka

Sljedeći na redu je parametar razmaka, koji je odgovoran za prikaz znakova razmaka na html stranici.

Kao što znamo, prema zadanim postavkama, preglednik kombinira sve uzastopne razmaka znakova: razmaci, prijelomi redaka i znakovi tabele - u jednom razmaku. Iznimka označiti

, tekst smješten u njemu prikazuje se kakav jest, sa svim razmacima.

Svojstvo razmaka ima sljedeću sintaksu:
razmak: normalno|pre|nowrap|pre-wrap|pre-line
Jasno je da se normalna vrijednost koristi prema zadanim postavkama i ostavlja sve kako je gore opisano, svi uzastopni razmaci se kombiniraju u jedan i prijelomi redaka se postavljaju automatski.
Korištenje vrijednosti 
Bit će potpuna analogija pri primjeni oznake 
Preglednik će prikazati stranicu u odnosu na sve dodatni prostori i crtice kako ih je dodao programer.  Ako je redak teksta predugačak, bit će dodan horizontalna traka svitak.

Vrijednost nowrap sprječava preglednik da prelama retke i tekst se prikazuje kao jedan redak.  Jedina stvar je dodavanje oznake 
premotat će tekst u novi redak.
Vrijednost prije prelamanja čuva sve nizove razmaka i prijeloma redaka, ali ako redak ne stane u navedeno područje, preglednik automatski prelama tekst u novi redak.
Pa, vrijednost prije retka pretvara razmake u jedan razmak, novi redovi su sačuvani, a preglednik može prekinuti retke koji su predugački kako bi izbjegao horizontalno pomicanje.
Primjer upotrebe:
p (razmak: pre;)
Dalje, razmislite parametar prelamanja riječi
, što od vas traži da odredite želite li prenijeti ili ne duge riječi, koji se ne uklapaju u dano područje.  Ovo svojstvo se ne koristi često, ali ponekad ne možete bez njega:
word-wrap: normalno|prekid-riječ
Normalna vrijednost govori pregledniku da se tekst može razbiti samo na razmacima, a to je normalno ponašanje preglednika.  A vrijednost break-word omogućuje pregledniku umetanje prijeloma reda unutar riječi.  Primjer:
p ( word-wrap: break-word; )
Opcije sjene teksta - svojstvo sjene teksta
Za ljubitelje raznih ukrasa u CSS3 standardu postalo je moguće postaviti sjenu za tekst.  Ispravno korištenje svojstva sjene teksta omogućuje vam da osjetno oživite web stranica.  Sintaksa:
sjena teksta: nema |<цвет> <горизонтальное смещение> <вертикальное смещение> [<радиус размытия>]
Vrijednost none onemogućuje dodavanje sjene tekstu i postavljena je prema zadanim postavkama.
Boja sjene navedeno u bilo kojem dostupnom CSS formatu i nije obavezni parametar.  Prema zadanim postavkama, boja sjene je ista kao i boja teksta.
Horizontalni pomak sjene može se postaviti u bilo koju podržanu CSS jedinicu.  Ako je vrijednost pozitivna, sjena će biti pozicionirana desno od teksta, s negativnim - lijevo. Nulta vrijednost postavit će sjenu odmah ispod teksta i ima smisla samo ako je postavljeno zamućenje sjene.
Vertikalni pomak sjene također se može postaviti u bilo koju podržanu CSS jedinicu.  Pozitivna vrijednost će pomaknuti sjenu ispod teksta, negativna vrijednost će je pomaknuti više.  Vrijednost nula će postaviti sjenu izravno ispod teksta.
U bilo kojoj mjernoj jedinici, i radijus zamućenja sjene.  Što je ova vrijednost veća, sjena postaje šira i više se izglađuje.  Ako ova opcija nije postavljena, pretpostavlja se vrijednost zamućenja nula.  Budući da algoritam za izravnavanje obično ima različitim preglednicima je različit, izgled sjene može biti malo drugačiji ovisno o pregledniku.
Razmotrimo primjer:
p( 
sjena teksta: crvena 1px 1px 2px 
veličina fonta: 2em 

}
A ovako će tekst paragrafa p izgledati korištenjem ovo pravilo stil u Internet Explorer 11:

Ovdje ću završiti članak.  Da biste saznali više o CSS svojstva ne zaboravite se pretplatiti na ažuriranja bloga i čitati članke iz odjeljka "".  Vidimo se uskoro!
Za slike standardi ne određuju zadano poravnanje u odnosu na tekst i druge slike u istom retku — nije uvijek moguće predvidjeti kako će te komponente izgledati.1 U HTML dokumentima slike su obično raspoređene "u liniji" sa samo jednim redom teksta.  Kao što je uobičajeno u tiskani mediji masovni mediji tekst ih "omata" tako da nekoliko redaka može biti uz sliku, a ne niti jedan.
Na sreću, kreatori dokumenata imaju određenu kontrolu nad time kako se slike poravnavaju s okolnim tekstom putem atributa align oznake. .  HTML i XHTML standardi definiraju pet vrijednosti za atribut align: lijevo, desno, vrh, sredina, dno.  Lijeva i desna vrijednost uzrokuju da se tekst omota oko slike, pomaknut prema odgovarajućem rubu.  Preostala tri poravnavaju sliku vertikalni smjer u odnosu na okolni tekst.
Svi popularni preglednici, uključujući Opera, Firefox, Netscape i Internet Explorer, slažu se da je atribut align=bottom zadani za okomito poravnanje i da slike postavljaju jednako iznad najvišeg znaka u retku teksta, vidi sliku 2.  15.11.
Istodobno, preglednici se ne slažu oko toga kako pozicionirati slike s atributom align=middle u odnosu na tekst.  Na sl.  Slika 5.11 pokazuje da Netscape i Opera postavljaju sliku na temelju srednjeg retka teksta.  Što se tiče preglednika Internet Explorer
Riža.  5.11.  Standardno poravnanje ugrađenih slika
Riža.  5.12.  Internet Explorer i Firefox poravnavaju središnju liniju slike sa središnjom linijom najvišeg elementa, a ne središnjom linijom teksta
i Firefox, oni postavljaju sliku u sredinu najvišeg elementa, koji nije nužno tekstualni element (slika 5.12).
Osim toga, preglednici manje-više podržavaju pet dodatnih značajki okomitog poravnanja za slike: vrh teksta, središte, absmiddle, osnovna linija i absbottom (podignite ruku ako niste pogodili što znače):
Naredba align=texttop govori pregledniku da poravna gornji rub slike s gornjim rubom najvišeg tekstualnog elementa u trenutna linija.  Inače, na snazi ​​je vrh, koji poravnava vrh slike s vrhom najvišeg elementa, tekstualne komponente ili slike u trenutnom retku.  Ako linija ne sadrži druge slike iznad teksta, vrh teksta i vrh imaju isti učinak.  Opera ne podržava texttop, ali drugi popularni preglednici to tumače striktno prema ovom opisu.
Prvo uveden u Internet Explorer i Netscape, središnju vrijednost tumače Internet Explorer, Netscape i Firefox na potpuno isti način kao i srednja vrijednost.  Samo ne zaboravimo da svatko od njih na svoj način razumije vrijednost sredine.  Opera zanemaruje izraz align=center.
Ako dodijelite atribut align oznake vrijednost absmiddle, preglednik će postaviti apsolutnu sredinu slike u odnosu na apsolutnu sredinu trenutnog retka.  Ovo ne funkcioniraju srednje i središnje vrijednosti, koje poravnavaju sredinu slike s osnovnom linijom trenutnog retka teksta.  Dok Netscape i Opera ne razlikuju absmiddle i middle, Firefox i Internet Explorer koriste ove vrijednosti za selektivno poravnavanje slika sa srednjim linijama.  Drugim riječima, Firefox i Internet Explorer tretiraju absmiddle na isti način na koji Netscape tretira sredinu.
Riža.  5.13.  Prilikom poravnavanja slika s atributom alingn=absbottom, preglednici uzimaju u obzir descendere
dno i osnovna linija (zadano)
Donje i osnovne vrijednosti imaju isti učinak kao da uopće niste uključili atribut poravnanja.  Preglednik poravnava donji rub slike s osnovnom linijom teksta.  Ovo se ne smije miješati s djelovanjem absbottom vrijednosti, koja također uzima u obzir one dijelove slova koji idu ispod osnovne crte.1 (Ako još uvijek držite ruku gore, možete je spustiti.)
Naredba align=absbottom govori pregledniku da poravna dno slike s pravim dnom teksta u trenutnom retku.  Pravo dno je najniža točka teksta, uključujući sve silazne (na primjer, Donji dio znak "y"), čak i ako ih nema u nizu.  Osnovna crta se proteže duž donjeg ruba "v" u znaku "y".  Opera, nositelj standarda, zanemaruje absbottom vrijednost, dok je drugi popularni preglednici tretiraju kako je opisano (slika 5.13).
Koristite gornji i srednji dio za poravnavanje ikona, popisa grafičkih oznaka i drugih posebnih slika s tekstom u blizini.  U drugim slučajevima, align=bottom (odabrano prema zadanim postavkama) postiže najbolje izgled.  Kada poravnate jednu ili više slika po retku, odaberite vrijednost atributa koja će vam dati najbolji izgled vašeg dokumenta.
Pozdrav Prijatelji!  Danas ćemo razgovarati o oznaku odlomka i atribut poravnanja.  Općenito, sav sadržaj na stranici treba biti razbijen u odlomke.  Sadržaj paragrafa je ispisan između oznaka 
Tekst…
.  Kada prikažemo 2 uzastopna odlomka, između njih se formira nevidljivo polje koje ih odmiče jedan od drugog.  Oznaka je blok oznaka pa zauzimaju cijelu širinu stranice.

Na primjer, uzmimo stranicu sa sljedećim kodom:

 

 
 
 
 
 
 

 prvi stavak: Lorem Ipsum je jednostavno lažni tekst u industriji tiska i pisanja teksta.  Lorem Ipsum je standardni lažni tekst u industriji još od 1500-ih, kada je nepoznati pisač uzeo kuliju s pismom i skremblirao je kako bi napravio knjigu uzoraka tipa.
 

 Drugi odlomak: Davno je utvrđena činjenica da će čitatelja odvratiti čitljivi sadržaj stranice kada pogleda njezin izgled.  Smisao korištenja Lorem Ipsuma je da ima više-manje normalnu distribuciju slova, za razliku od korištenja "Sadržaj ovdje, sadržaj ovdje", što ga čini čitljivim engleskim.
 

Pogledajmo kako ovaj slučaj izgleda u pregledniku:
 


Vjerojatno ste primijetili da postoji oznaka u kodu stranice jaka, ova oznaka čini tekst podebljanim.
Atributi oznake
Za svaku oznaku možete, u nekim slučajevima čak i morati navesti atribute.  Putem atributa pregledniku govorimo kako točno prikazati ovaj ili onaj element na stranici.
Atribut je naveden unutar zagrada početne oznake i ima sljedeću sintaksu: attribute_name="value"
atribut poravnanja
Na primjer, imamo odlomak na stranici i želimo uskladiti njegov sadržaj.  Da bismo to učinili, upisujemo atribut unutar početne oznake uskladiti, koji je odgovoran za poravnavanje sadržaja unutar odlomka i postavi ga na jednu vrijednost.
Sadržaj odlomka.


Ovaj atribut ima 4 vrijednosti:
1 preostao– Poravnava sadržaj ulijevo.  Ova je vrijednost zadana.  Odnosno, ako ne navedemo atribut za odlomak uskladiti, tada je sadržaj unutar odlomka prema zadanim postavkama poravnat lijevo.  To se može vidjeti u prethodnom primjeru.
2. U redu– Poravnava sadržaj udesno.

 
Tekst…
Evo kako to izgleda u pregledniku:
 

3.Centar- Poravnava sadržaj prema sredini stranice.

 
Tekst…
 

4. Opravdajte– Poravnava sadržaj prema širini stranice.

 
Tekst…
 

Sažetak lekcije: 
Danas smo naučili što stavak u html-u.  Paragrafi se vrlo često koriste u html-u.  Također smo naučili što je atribut oznake.  I naučio atribut poravnanja uskladiti. Koji može imati jednu od sljedećih vrijednosti: lijevo (zadano)pravo,centar,opravdati.
Opis
 
Poravnava blok teksta s rubom.
Umjesto ovog atributa moraju se koristiti stilovi
 
Sintaksa
 
vrijednosti
lijevo Poravnava tekst ulijevo.  U ovom slučaju, redovi teksta su poravnati ulijevo, a desni rub se nalazi u "ljestvici".  Ova metoda poravnanja je najpopularnija na web stranicama, jer omogućuje korisniku da lako traži novi red i udobno čita veliki tekst.  centar Poravnava tekst sa središtem.  Tekst se postavlja vodoravno u prozor preglednika ili spremnik gdje se nalazi blok teksta.  Čini se da su redovi teksta nanizani na nevidljivu os koja prolazi kroz središte web stranice.  Slična metoda poravnanja aktivno se koristi u naslovima i raznim natpisima, poput natpisa, daje službeni i čvrst izgled dizajnu teksta.  U svim ostalim slučajevima, poravnanje po sredini se rijetko koristi iz razloga što je nezgodno čitati veliku količinu takvog teksta.  desno Poravnava tekst udesno.  Ova metoda poravnanja djeluje kao antagonist prethodnoj vrsti.  Naime, redovi teksta su poravnati udesno, dok lijeva ostaje "rastrpana".  Zbog činjenice da lijevi rub nije poravnat, odnosno da njime počinje čitanje novih redaka, takav tekst je teže čitati nego da je lijevo poravnat.  Stoga se desno poravnanje obično koristi za kratke naslove ne više od tri reda.  Ne razmatramo određena mjesta na kojima se tekst mora čitati s desna na lijevo, gdje bi slična metoda poravnanja mogla biti korisna.  Ali gdje ste kod nas vidjeli takve stranice.  justify Justify, što znači lijevo i desno opravdano u isto vrijeme.  Da bi izvršio ovu radnju, preglednik u ovom slučaju dodaje razmake između riječi. 
Zadana vrijednost
 
Primjer.  Poravnanje teksta


 
 
 
 
 
 
Duis te feugifacilisi.  Duis autem dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril dolo aure te feuge.  Ut wisi enim ad minim veniam, quis nostrud exerci taion ullamcorper suscipit lobortis nisl ut aliquip ex en commodo consequat.  Duis te feugifacilisi per suscipit lobortis nisl ut aliquip ex en commodo consequat.
 

Preglednici: Desktop Mobile ?

Internet Explorer
Krom
Opera
safari
Firefox
1

1

1

1

1


Android
Firefox Mobile
Opera Mobile
Safari Mobile
1

1

6

1


✖

Preglednici
Sljedeća oznaka se koristi u tablici preglednika.
- preglednik u potpunosti podržava element;
- preglednik ne percipira element i zanemaruje se;
- može se pojaviti tijekom rada razne greške, ili je element podržan s rezervacijama.
Broj označava verziju preglednika iz koje je element podržan.