Atribut align i njegove vrijednosti. Opcije razmaka i prelamanja riječi koje kontroliraju prijelome redaka

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

Poravnanje teksta sa CSS-om

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

style property text-align setovi horizontalno poravnanje tekst i ima samo četiri moguće vrijednosti:

text-align: lijevo|desno|centar|justify

Dostupne vrijednosti ovog pravila određuju poravnanje, redom: lijevo — lijevo, desno — desno, centar — centar i justify — širinu stranice (lijevo i desno istovremeno po povećanje razmaka između riječi). Na primjer, tekst ovog članka je poravnat sa širinom stranice (ako primijetite da ima jednake granice i s lijeve i desne strane) pomoću pravila text-align:justify.

Prema zadanim postavkama, horizontalno poravnanje je lijevo, tako da ne morate specificirati text-align:left osim ako roditeljski elementi ne specificiraju drugačije poravnanje.

Primjeri korištenja nekretnina:

p (poravnanje teksta: poravnanje)
h1 (poravnanje teksta: centar)

Sljedeće CSS svojstvo text-ident setovi uvlačenje za crvenu liniju, na primjer za tekst u oznaci pasusa p. Ovo pravilo, kao i za poravnavanje teksta, primjenjuje se samo na elemente na nivou bloka. sintaksa:

uvlačenje teksta:<отступ>

Ovdje su dozvoljene 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 procenat (%). Relativna vrijednost se izračunava iz širine područja koje je rezervirano za tekst. Dakle, css pravilo text-indent:50% će postaviti crvenu liniju jednaku polovini dužine ove linije. Zadana uvlaka "crvene linije". nula. primjer:

p ( ident teksta: 10px; )

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

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

Pogledajmo svaku vrijednost detaljnije:

• osnovna linija - poravnanje dijela teksta duž osnovne linije roditeljski element. Ovo je zadana postavka;
• sub — fragment teksta se prikazuje kao subscript ili indeks za roditeljski element;
• super - fragment teksta se prikazuje kao superscript ili superscript za roditeljski element;
• top - poravnanje fragmenta teksta prema gornjoj ivici nadređenog elementa;
• text-top - poravnanje fragmenta prema gornjoj ivici teksta nadređenog elementa;
• sredina - poravnanje centra fragmenta teksta sa središtem nadređenog elementa;
• bottom - poravnanje fragmenta teksta prema donjoj ivici nadređenog elementa;
• text-bottom - poravnajte fragment sa donjom ivicom teksta nadređenog elementa;

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

Pored gore navedenih vrijednosti, možete odrediti numeričke vrijednosti. dakle, css pravilo vertical-align:0 bi značilo isto što i vertical-align:baseline. A pravilo vertical-align:10px će pomaknuti tekst za 10 piksela od osnovne linije. Da biste pomaknuli tekst prema dolje, vrijednost mora biti navedena sa minusom.

Smjena 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 tabele u vertikalnom poravnanju treba da koristi vrednosti:

• vrh - za poravnavanje sadržaja sa gornjom ivicom ćelije;
• dno - za poravnavanje sadržaja sa donjom ivicom ć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, pretraživač po defaultu kombinuje sve uzastopne razmaka znakova: razmaci, prijelomi redova i znakovi tabele - u jednom razmaku. Izuzetak tag

, tekst koji se nalazi u njemu se prikazuje kakav jeste, sa svim razmacima.

Svojstvo razmaka ima sljedeću sintaksu:
razmak: normalno|pre|nowrap|pre-wrap|pre-line
Jasno je da se normalna vrijednost koristi po defaultu i ostavlja sve kako je gore opisano, svi uzastopni razmaci se kombinuju u jedan i prijelomi redova se postavljaju automatski.
Upotreba vrijednosti 
Biće potpuna analogija prilikom primjene oznake 
Pretraživač će prikazati stranicu u odnosu na sve dodatni prostori i crtice kako ih je dodao programer.  Ako je red teksta predugačak, biće dodan horizontalna traka skrolujte.

Nowrap vrijednost sprječava pretraživač da premota redove i tekst se prikazuje kao jedan red.  Jedina stvar je dodavanje oznake 
će premjestiti tekst na nova linija.
Vrijednost pre prelamanja čuva sve nizove razmaka i prijeloma reda, ali ako se linija ne uklapa u navedeno područje, pretraživač automatski premotava tekst u novi red.
Pa, vrijednost prije reda konvertuje razmake u jedan razmak, novi redovi su sačuvani, a pretraživač može prekinuti redove koji su predugački da izbjegne horizontalno pomicanje.
Primjer upotrebe:
p (razmak: pre; )
Dalje, razmislite parametar prelamanja riječi, koji od vas traži da odredite da li želite da prenesete ili ne duge reči, koji se ne uklapaju u dato područje.  Ovo svojstvo se ne koristi često, ali ponekad ne možete bez njega:
word-wrap: normalna|prekid-reč
Normalna vrijednost govori pretraživaču da se tekst može razbiti samo na razmacima, a to je normalno ponašanje pretraživača.  A vrijednost break-word dozvoljava pretraživaču da ubaci prijelome 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.  Pravilna upotreba svojstva text-shadow omogućava vam da primjetno oživite web stranica.  sintaksa:
text-shadow: nema |<цвет> <горизонтальное смещение> <вертикальное смещение> [<радиус размытия>]
Vrijednost none onemogućava dodavanje sjene tekstu i postavljena je prema zadanim postavkama.
Boja senke navedeno u bilo kojem dostupnom CSS formatu i nije obavezan parametar.  Podrazumevano, boja senke je ista kao i boja teksta.
Horizontalni pomak sjene može se postaviti u bilo kojoj podržanoj CSS jedinici.  Ako je vrijednost pozitivna, sjena će biti pozicionirana desno od teksta, sa negativnim - lijevo. Nula vrijednost pozicioniraće senku odmah ispod teksta i ima smisla samo ako je postavljeno zamućenje senke.
Vertikalni pomak sjene također se može postaviti u bilo kojoj podržanoj CSS jedinici.  Pozitivna vrijednost će pomjeriti sjenu ispod teksta, negativna vrijednost će je pomjeriti više.  Vrijednost nula će postaviti sjenu direktno ispod teksta.
U bilo kojoj jedinici mjerenja, i radijus zamućenja senke.  Što je ova vrijednost veća, sjena postaje šira i više se izglađuje.  Ako ova opcija nije postavljena, pretpostavlja se da je vrijednost zamućenja nula.  Budući da algoritam za izravnavanje obično ima različitim pretraživačima je različit, izgled senke može biti malo drugačiji u zavisnosti od pretraživača.
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!
Greetings Friends!  Danas ćemo pričati o oznaku pasusa i atribut poravnanja.  Općenito, sav sadržaj na stranici treba biti razbijen u pasuse.  Sadržaj pasusa je upisan između oznaka 
Tekst…
.  Kada prikažemo 2 uzastopna pasusa, između njih se formira nevidljivo polje koje ih gura jedan od drugog.  Tag je blok oznaka tako da zauzimaju cijelu širinu stranice.

Na primjer, uzmimo stranicu sa sljedećim kodom:

 

 
 
 
 
 
 

 prvi pasus: Lorem Ipsum je jednostavno lažni tekst u industriji štampanja i pisanja teksta.  Lorem Ipsum je bio standardni lažni tekst u industriji još od 1500-ih, kada je nepoznati štampač uzeo galiju pisača i skrebovao je da napravi knjigu uzoraka tipa.
 

 drugi paragraf: Davno je utvrđena činjenica da će čitalac biti ometen čitljivim sadržajem stranice kada pogleda njen izgled.  Poenta 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 pretraživaču:
 


Vjerovatno 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, mi pretraživaču govorimo kako tačno da prikaže 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 pasus na stranici i želimo da uskladimo njegov sadržaj.  Da bismo to učinili, upisujemo atribut unutar početne oznake poravnati, koji je odgovoran za poravnavanje sadržaja unutar pasusa i postavi ga na jednu vrijednost.
Sadržaj paragrafa.


Ovaj atribut ima 4 vrijednosti:
1.Levo– Poravnava sadržaj ulijevo.  Ova vrijednost je zadana.  Odnosno, ako ne navedemo atribut za pasus poravnati, tada je sadržaj unutar pasusa po defaultu poravnat lijevo.  To se može vidjeti u prethodnom primjeru.
2. Desno– Poravnava sadržaj udesno.

 
Tekst…
Evo kako to izgleda u pretraživaču:
 

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 šta stav u html.  Paragrafi se vrlo često koriste u html-u.  Također smo naučili šta je atribut oznake.  I naučio atribut poravnanja poravnati. Koji može imati jednu od sljedećih vrijednosti: lijevo (zadano)u redu,centar,opravdati.
Opis
 
Poravnava blok teksta prema ivici.
Umjesto ovog atributa moraju se koristiti stilovi
 
Sintaksa
 
Vrijednosti
lijevo Poravnava tekst ulijevo.  U ovom slučaju, redovi teksta su poravnati ulijevo, a desna ivica se nalazi u "ljestvici".  Ova metoda poravnanja je najpopularnija na web stranicama, jer omogućava korisniku da lako traži novi red i udobno čita veliki tekst.  centar Poravnava tekst sa središtem.  Tekst se postavlja horizontalno u prozor pretraživača ili kontejner u kojem se nalazi blok teksta.  Čini se da su redovi teksta nanizani na nevidljivu os koja prolazi kroz centar web stranice.  Slična metoda poravnanja aktivno se koristi u naslovima i raznim naslovima, kao što su natpisi, daje zvaničan i čvrst izgled dizajnu teksta.  U svim ostalim slučajevima, centralno poravnanje se rijetko koristi taj razlog da je nezgodno čitati veliku količinu takvog teksta.  desno Poravnava tekst udesno.  Ova metoda poravnanja djeluje kao antagonist prethodnom tipu.  Naime, redovi teksta su poravnati udesno, dok lijevi ostaju "rarpani".  Zbog činjenice da lijeva ivica nije poravnata, odnosno da njome počinje čitanje novih redova, takav tekst je teže čitljiv nego da je lijevo poravnat.  Stoga se desno poravnanje obično koristi za kratke naslove ne više od tri reda.  Ne razmatramo određene lokacije 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 istovremeno poravnati lijevo i desno.  Da bi izvršio ovu radnju, pretraživač 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 dolore delenit aure te feu.  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
Chrome
Opera
safari
Firefox
1

1

1

1

1


Android
Firefox Mobile
Opera Mobile
Safari Mobile
1

1

6

1


✖

Pregledači
Sljedeća notacija se koristi u tabeli pretraživača.
- element je u potpunosti podržan od strane pretraživača;
- element ne percipira pretraživač i zanemaruje se;
- može se pojaviti tokom rada razne greške, ili je element podržan s rezervacijama.
Broj označava verziju pretraživača iz koje je element podržan.
Za slike, standardi ne definišu podrazumevano poravnanje u odnosu na tekst i druge slike na istoj liniji — nije uvek moguće predvideti kako će ove 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 štampani mediji masovni medij tekst ih "omata" tako da nekoliko redova može biti pored slike, a ne jedan.
Na sreću, kreatori dokumenata imaju određenu kontrolu nad načinom na koji se slike poravnavaju sa okolnim tekstom preko 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 do odgovarajuće ivice.  Preostala tri poravnavaju sliku vertikalni pravac u odnosu na okolni tekst.
Svi popularni pretraživači, uključujući Opera, Firefox, Netscape i Internet Explorer, slažu se da je atribut align=bottom podrazumevani za vertikalno poravnanje i da slike podjednako pozicioniraju iznad najvišeg znaka u redu teksta, vidi sliku 2.  15.11.
U isto vrijeme, pretraživači 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 pozicioniraju sliku na osnovu srednjeg reda teksta.  Što se tiče pretraživača Internet Explorer
Rice.  5.11.  Standardno poravnanje ugrađenih slika
Rice.  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, pretraživači manje-više podržavaju pet dodatnih funkcija vertikalnog poravnanja za slike: vrh teksta, centar, absmiddle, osnovna linija i absbottom (podignite ruku ako niste pogodili šta znače):
Naredba align=texttop govori pretraživaču da poravna gornju ivicu slike sa gornjom ivicom najvišeg tekstualnog elementa u trenutna linija.  Inače, na snazi ​​je vrh, koji poravnava gornju ivicu slike sa gornjom ivicom najvišeg elementa, tekstualne komponente ili slike u trenutnoj liniji.  Ako linija ne sadrži druge slike iznad teksta, vrh teksta i vrh imaju isti efekat.  Opera ne podržava texttop, ali drugi popularni pretraživači to tumače striktno prema ovom opisu.
Prvo uveden u Internet Explorer i Netscape, srednju vrijednost interpretiraju Internet Explorer, Netscape i Firefox na potpuno isti način kao i srednja vrijednost.  Samo ne zaboravimo da svako od njih na svoj način razumije vrijednost sredine.  Opera ignoriše izraz align=center.
Ako dodijelite align atribut oznake vrijednost absmiddle, pretraživač će postaviti apsolutnu sredinu slike u odnosu na apsolutnu sredinu trenutnog reda.  Ovako ne rade srednja i središnja vrijednost, koje poravnavaju sredinu slike s baznom linijom trenutnog reda 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.
Rice.  5.13.  Prilikom poravnavanja slika s atributom alingn=absbottom, pretraživači uzimaju u obzir descendere
donja i osnovna linija (zadano)
Donje i osnovne vrijednosti imaju isti učinak kao da uopće niste uključili atribut poravnanja.  Pretraživač poravnava donju ivicu slike sa osnovnom linijom teksta.  Ovo ne treba brkati s učinkom absbottom vrijednosti, koja također uzima u obzir one dijelove slova koji idu ispod osnovne linije.1 (Ako i dalje držite ruku gore, možete je spustiti.)
Naredba align=absbottom govori pretraživaču da poravna dno slike sa pravim dnom teksta u trenutnom redu.  Pravo dno je najniža tačka teksta, uključujući sve descendere (na primjer, Donji dio znak "y"), čak i ako ih nema u nizu.  Osnovna linija ide duž donje ivice "v" u znaku "y".  Opera, nosilac standarda, zanemaruje absbottom vrijednost, dok je drugi popularni pretraživači tretiraju kako je opisano (slika 5.13).
Koristite gornji i srednji dio za poravnavanje ikona, popisa znakova za nabrajanje i drugih posebnih slika s obližnjim tekstom.  U drugim slučajevima, align=bottom (podrazumevano odabrano) postiže najbolje izgled.  Kada poravnate jednu ili više slika po redu, odaberite vrijednost atributa koja će vam dati najbolji izgled vašeg dokumenta.
Specifikacija
 
HTML:
 
3.2

 
4.01

 
5.0

 
XHTML:
 
1.0

 
1.1

Opis
 
Poravnanje sadržaja kontejnera 
na rubu.

 
Sintaksa
 
...
 
Vrijednosti
centar Poravnava tekst sa središtem.  Tekst se postavlja horizontalno u prozor pretraživača ili kontejner u kojem se nalazi blok teksta.  Čini se da su redovi teksta nanizani na nevidljivu os koja prolazi kroz centar web stranice.  Slična metoda poravnanja aktivno se koristi u naslovima i raznim naslovima, kao što su natpisi, daje zvaničan i čvrst izgled dizajnu teksta.  U svim ostalim slučajevima, centralno poravnanje se rijetko koristi iz razloga što je nezgodno čitati veliku količinu takvog teksta.  lijevo Poravnava tekst ulijevo.  U ovom slučaju, redovi teksta su poravnati ulijevo, a desna ivica se nalazi u "ljestvici".  Ova metoda poravnanja je najpopularnija na web stranicama, jer omogućava korisniku da lako traži novi red i udobno čita veliki tekst.  desno Poravnava tekst udesno.  Ova metoda poravnanja djeluje kao antagonist prethodnom tipu.  Naime, redovi teksta su poravnati udesno, dok lijevi ostaju "rarpani".  Zbog činjenice da lijeva ivica nije poravnata, odnosno iz koje se čitaju novi redovi, takav tekst je teže čitljiv nego da je lijevo poravnat.  Stoga se desno poravnanje obično koristi za kratke naslove ne više od tri reda.  Ne razmatramo specifične lokacije na kojima se tekst mora čitati s desna na lijevo, gdje bi sličan način poravnanja mogao biti od koristi.  Ali gdje ste kod nas vidjeli takve stranice.  justify Justify, što znači istovremeno poravnati lijevo i desno.  Da bi izvršio ovu radnju, pretraživač u ovom slučaju dodaje razmake između riječi. 
Zadana vrijednost
 
HTML 4.01 IE Cr Op Sa Fx

 

 
 
 
 
 
 
 

 
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat.
 
 

 
Rezultat ovaj primjer prikazano na sl.  jedan.
 
Rice.  1. Poravnavanje elemenata s atributom align