Atribut align i njegovo značenje. Parametri razmaka i prelamanja riječi koji kontroliraju prijelome redaka

Pozdrav, dragi čitatelji bloga. U ovom članku nastavljamo proučavati osnove stila CSS označavanje te razmotriti svojstva vertical-align, text-align, text-indent i neka druga namijenjena oblikovanju html teksta.

Poravnavanje teksta pomoću CSS-a

Počnimo s atributima stila koji kontroliraju kako se tekst pojavljuje na blok elementima. Počnimo s svojstva poravnanja teksta, što je zapravo zamjena za align atribut (koristi se za poravnavanje sadržaja html elemenata, kao što je p paragrafa).

Svojstvo stila poravnanje teksta postavlja horizontalno poravnanje tekst i ima samo četiri moguće vrijednosti:

poravnanje teksta: lijevo|desno|sredina|obostrano

Dostupne vrijednosti ovog pravila određuju poravnanje, redom: lijevo - uz lijevi rub, desno - uz desni rub, središte - u sredini i poravnanje - duž širine stranice (istodobno uz lijevi i desni rub povećanjem udaljenosti između riječi). Na primjer, tekst ovog članka poravnat je sa širinom stranice (ako primijetite da ima glatke obrube i lijevo i desno) pomoću pravila text-align:justify.

Prema zadanim postavkama, vodoravno poravnanje je lijevo, tako da navođenje text-align:left nije potrebno osim ako nadređeni elementi nisu naveli drugačije poravnanje.

Primjeri korištenja svojstva:

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

Sljedeće CSS svojstvo tekst-ident postavlja uvlačenje za crvenu liniju, na primjer za tekst u oznaci odlomka str. Ovo pravilo, kao i poravnanje teksta, primjenjuje se samo na blok elemente. Sintaksa:

uvlaka teksta:<отступ>

Ovdje su dopuštene apsolutne i relativne vrijednosti uvlačenja. Apsolutne vrijednosti (px - pikseli, em, ex, itd.) mogu se navesti s znakom plus ili minus. Relativna vrijednost obično se navodi kao postotak (%). Relativna vrijednost izračunava se iz širine područja dodijeljenog tekstu. Dakle, css pravilo text-indent:50% postavit će crvenu liniju jednaku polovici duljine ove linije. Zadana uvlaka crvene linije jednaka nuli. Primjer:

p (ident teksta: 10px; )

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

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

Pogledajmo detaljnije svaku vrijednost:

• osnovna linija — poravnajte dio teksta duž osnovne linije nadređeni element. Ovo je zadana postavka;
• sub - fragment teksta se prikazuje kao indeks ili indeks za nadređeni element;
• super - dio teksta je prikazan kao superskript ili superskript za nadređeni element;
• vrh — poravnajte dio teksta s gornjim rubom nadređenog elementa;
• text-top — poravnajte fragment s gornjim rubom teksta nadređenog elementa;
• sredina — poravnavanje središta fragmenta teksta sa središtem nadređenog elementa;
• bottom — poravnajte fragment teksta na donji rub nadređenog elementa;
• text-bottom — poravnajte fragment na donji rub teksta nadređenog elementa;

Na slici ispod možete vidjeti ponašanje testnih fragmenata za različite vrijednosti svojstva vertikalnog poravnanja u pregledniku Internet Explorer 11:

Osim gore navedenih vrijednosti, možete odrediti numeričke vrijednosti. Tako, CSS pravilo vertical-align:0 će značiti isto što i vertical-align:baseline. A pravilo vertical-align:10px pomaknut će tekst prema gore za 10 piksela u odnosu na osnovnu liniju. Za pomicanje teksta prema dolje, vrijednost mora biti navedena s minusom.

Pomak se također može odrediti u relativne jedinice mjerenja, kao što su em i ex ili postotak.

Za okomito poravnanje sadržaj ćelija tablice u vertikalnom poravnanju treba koristiti sljedeće vrijednosti:

• vrh - za poravnavanje sadržaja duž gornje granice ćelije;
• bottom - za poravnavanje sadržaja uz donji rub ć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 okomitog poravnanja. Brojni moguće vrijednosti daju previše različite rezultate u različitim slučajevima.

Parametri razmaka i prelamanja riječi koji kontroliraju prijelome redaka

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

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

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

Svojstvo white-space 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, a prijelomi redaka se postavljaju automatski.
Korištenje vrijednosti 
Bit će to potpuna analogija pri primjeni oznake 
Preglednik će prikazati stranicu uzimajući u obzir sve dodatni prostori i crtice kako ih je dodao programer.  Ako je redak teksta predug, bit će dodan horizontalna pruga svitak.

Vrijednost nowrap sprječava preglednik da prelomi retke i tekst se prikazuje kao jedan redak.  Jedina stvar je dodavanje oznake 
omogućit će vam prijenos teksta na nova linija.
Vrijednost prije prelamanja čuva sve razmake i prijelome redaka, ali ako redak ne stane unutar navedenog područja, preglednik automatski prelama tekst u novi redak.
Pa, vrijednost prije retka pretvara razmake u jedan razmak, prijelomi redaka su sačuvani i preglednik može prekinuti retke koji su predugi kako bi izbjegao horizontalno pomicanje.
Primjer upotrebe:
p (razmak: pre;)
Dalje ćemo razmotriti parametar prelamanja riječi, koji će vam reći želite li prenijeti ili ne duge riječi, koji se ne uklapaju u zadano područje.  Ovo svojstvo se ne koristi često, ali ponekad ne možete bez njega:
prelamanje riječi: normalna|prijelomna riječ
Normalna vrijednost govori pregledniku da tekst može biti razbijen samo razmacima i normalno je ponašanje preglednika.  A vrijednost break-word pregledniku omogućuje umetanje prijeloma redaka unutar riječi.  Primjer:
p ( prelom riječi: prijelomna riječ; )
Parametri sjene teksta - svojstvo sjene teksta
Za ljubitelje raznih dekoracija, CSS3 standard sada ima mogućnost postavljanja sjene za tekst.  Pravilna upotreba svojstva sjene teksta omogućuje vam da zamjetno oživite web stranica.  Sintaksa:
tekst-sjena: nijedan |<цвет> <горизонтальное смещение> <вертикальное смещение> [<радиус размытия>]
Vrijednost none onemogućuje dodavanje sjene tekstu i postavljena je prema zadanim postavkama.
Boja sjene navedeno je u bilo kojem dostupnom CSS formatu, a nije traženi parametar.  Prema zadanim postavkama, boja sjene odgovara boji teksta.
Horizontalni pomak sjene može se postaviti u bilo kojoj jedinici koju podržava CSS.  Ako je vrijednost pozitivna, sjena će biti locirana desno od teksta, ako je negativan, ulijevo. Null vrijednost postavit će sjenu izravno ispod teksta i ima smisla samo ako je postavljeno zamućivanje sjene.
Vertikalni pomak sjene također se može navesti u bilo kojoj mjernoj jedinici koju podržava CSS.  Pozitivna vrijednost će pomaknuti sjenu ispod teksta, negativna vrijednost će je pomaknuti iznad teksta.  Vrijednost nula postavit će sjenu izravno ispod teksta.
U bilo kojoj mjernoj jedinici navedeno je i polumjer zamućenja sjene.  Što je ova vrijednost veća, sjena postaje šira i glatkija.  Ako ovaj parametar nije postavljen, pretpostavlja se da je vrijednost zamućenja nula.  Budući da algoritam izglađivanja obično ima različitim preglednicima razlikuje, izgled sjene može se malo razlikovati ovisno o pregledniku.
Pogledajmo primjer:
p( 
tekst-sjena: crvena 1px 1px 2px; 
veličina fonta: 2em; 

}
A ovako će izgledati tekst paragrafa p ovog pravila stil u Internet Exploreru 11:

Ovdje ću zaključiti članak.  Kako biste saznali više o CSS svojstva Ne zaboravite se pretplatiti na ažuriranja bloga i čitati članke iz odjeljka "".  Vidimo se opet!
Pozdrav, prijatelji!  Danas ćemo razgovarati o oznaka odlomka i atribut poravnanja.  Općenito, sav sadržaj na stranici trebao bi biti podijeljen u odlomke.  Sadržaj odlomka ispisan je između oznaka 
Tekst…
.  Kada prikažemo 2 uzastopna odlomka, između njih se formira nevidljivo polje koje ih odmiče jedne od drugih.  Oznaka je blok oznaka stoga zauzimaju cijelu širinu stranice.

Na primjer, uzmimo stranicu sa sljedećim kodom:

 

 
 
 
 
 
 

 Prvi odlomak: Lorem Ipsum jednostavno je lažni tekst tiskarske i slovne industrije.  Lorem Ipsum je standardni lažni tekst u industriji još od 1500-ih, kada je nepoznati tiskar uzeo galeju slova i pomešao je kako bi napravio knjigu uzoraka slova.
 

 Drugi odlomak: Davno je utvrđena činjenica da će čitatelju odvratiti pažnju čitljiv sadržaj stranice kada gleda njezin izgled.  Smisao korištenja Lorem Ipsuma je da ima više-manje normalnu distribuciju slova, za razliku od upotrebe "Sadržaj ovdje, sadržaj ovdje", što čini da izgleda kao čitljiv engleski.
 

Pogledajmo kako ovo izgleda u pregledniku:
 


Sigurno ste primijetili da postoji oznaka u kodu stranice jak, ova oznaka podebljava tekst.
Atributi oznake
Za svaku oznaku možete, au nekim slučajevima čak i morate, odrediti atribute.  Preko atributa govorimo pregledniku točno kako prikazati ovaj ili onaj element na stranici.
Atribut je naveden unutar uvodne zagrade oznake i ima sljedeću sintaksu: attribute_name="vrijednost"
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 usklađivanje sadržaja unutar odlomka, te ga postavite na jednu vrijednost.
Sadržaj odlomka.


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

 
Tekst…
Evo kako to izgleda u pregledniku:
 

3.Središte- Poravnava sadržaj prema sredini stranice.

 
Tekst…
 

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

 
Tekst…
 

Sažetak lekcije: 
Danas smo naučili što je to paragraf u html-u.  Odlomci se vrlo često koriste u html-u.  Naučili smo i što je atribut oznake.  I naučio atribut poravnanja uskladiti. Koji može uzeti jednu od sljedećih vrijednosti: lijevo (zadana vrijednost),pravo,centaropravdati.
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 je raspoređen kao ljestve.  Ova metoda poravnanja najpopularnija je na web stranicama jer korisniku omogućuje jednostavno traženje novog retka i udobno čitanje velikog teksta.   centar Poravnava tekst u sredinu.  Tekst se postavlja vodoravno u prozor preglednika ili spremnik u kojem se nalazi blok teksta.  Čini se da su redovi teksta nanizani na nevidljivoj osi koja se proteže sredinom web stranice.  Ova metoda poravnanja aktivno se koristi u naslovima i raznim potpisima, kao što su opisi, daje službeni i solidan izgled dizajnu teksta.   U svim drugim slučajevima, središnje poravnanje se rijetko koristi taj razlog da je čitanje velikog obima takvog teksta nezgodno.   desno Poravnava tekst udesno.  Ova metoda usklađivanja djeluje kao antagonist prethodnoj vrsti.  Naime, redovi teksta su poravnati uz desni rub, dok lijevi ostaje “poderan”.  Budući da lijevi rub nije poravnat, gdje se čitaju novi reci, ovaj je tekst teže čitati nego da je poravnat lijevo.  Stoga se desno poravnanje obično koristi za kratke naslove od najviše tri retka.   Ne razmatramo specifične stranice na kojima se tekst mora čitati s desna na lijevo, tamo je to moguće slična metoda poravnanje i dobro će doći.  Ali gdje ste u našoj zemlji vidjeli takve stranice?   justify Justified, što znači istovremeno poravnato lijevo i desno.  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 delenit au gue duis dolore te feugat nulla facilisi.  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
U tablici preglednika koriste se sljedeće oznake.
- element u potpunosti podržava preglednik;
- preglednik ne percipira element i zanemaruje ga;
- može se pojaviti tijekom rada razne greške, ili je artikl podržan s rezervacijom.
Broj označava verziju preglednika iz kojeg je element podržan.
Za slike, standardi ne definiraju 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 postavljene "u liniji" sa samo jednim redom teksta.  Kao što je običaj u tiskani mediji masovni mediji tekst "teče" oko njih, tako da uz sliku može biti nekoliko redaka, a ne samo jedan.
Srećom, kreatori dokumenata imaju određenu kontrolu nad načinom na koji se slike poravnavaju s okolnim tekstom pomoću atributa poravnanja oznake. .  HTML i XHTML standardi definiraju pet vrijednosti za atribut poravnanja: lijevo, desno, gore, sredina, dno.  Lijeva i desna vrijednost uzrokuju omotavanje teksta oko slike, pomaknuto prema odgovarajućem rubu.  Preostala tri poravnaju sliku vertikalni smjer u odnosu na okolni tekst.
Svi popularni preglednici, uključujući Operu, Firefox, Netscape i Internet Explorer, slažu se da je atribut align=bottom zadano okomito poravnanje i ravnomjerno postavljaju slike iznad najvišeg znaka u retku teksta, pogledajte sliku 1.  15.11.
U isto vrijeme, 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 središnju liniju 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 crtu slike sa središnjom crtom najvišeg elementa, umjesto sa središnjom crtom teksta
i Firefox, oni postavljaju sliku duž središnje crte najvišeg elementa, koji nije nužno tekst (Slika 5.12).
Osim toga, preglednici, u jednom ili drugom stupnju, podržavaju pet dodatnih značajki okomitog poravnanja slike: gornji dio teksta, centar, gornji dio, osnovnu liniju i dno (oni koji nisu pogodili njihovo značenje, podignite ruku):
Izraz align=texttop govori pregledniku da poravna gornji rub slike s gornjim rubom najvišeg tekstualnog elementa u trenutna linija.  U suprotnom, top je vrijednost koja poravnava gornji rub slike s gornjim rubom najvišeg elementa, tekstualne komponente ili slike u trenutnom retku.  Ako redak ne sadrži druge slike koje strše iznad teksta, texttop i top imaju isti učinak.  Opera ne podržava texttop, ali ga drugi popularni preglednici tumače strogo u skladu s ovim opisom.
Prvi put uveden u Internet Exploreru i Netscapeu, središte vrijednosti tumači se na isti način kao središte u Internet Exploreru, Netscapeu i Firefoxu.  Samo nemojmo zaboraviti da svatko od njih razumije značenje sredine na svoj način.  Opera zanemaruje izraz align=center.
Ako postavite atribut align oznake vrijednost absmiddle, preglednik će postaviti apsolutnu sredinu slike u odnosu na apsolutnu sredinu trenutnog retka.  To nije slučaj sa srednjim i središnjim vrijednostima, 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 duž srednjih linija.  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 oblačiće
dno i osnovna linija (zadano)
Donja i osnovna vrijednost 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 brkati s učinkom vrijednosti absbottoma, koja također uzima u obzir one dijelove slova koji idu ispod osnovne linije.1 (Ako vam je još uvijek podignuta ruka, možete je spustiti.)
Izraz align=absbottom govori pregledniku da poravna donji rub slike s pravim donjim rubom teksta u trenutnom retku.  Pravo dno je najniža točka teksta, uzimajući u obzir sve niže (npr. Donji dio znak "y"), čak i ako ih nema u retku.  Osnovna linija ide duž donjeg ruba "v" u simbolu "y".  Opera, nositelj standarda, zanemaruje absbottom vrijednost, a drugi popularni preglednici tretiraju je kako je opisano (Slika 5.13).
Koristite vrh i sredinu za kombiniranje ikona, grafičkih oznaka i drugih posebnih slika sa susjednim tekstom.  U drugim slučajevima align=bottom (odabrano prema zadanim postavkama) postiže najbolje izgled.  Kada poravnavate jednu ili više slika u nizu, odaberite vrijednost atributa koja će vam pružiti najbolji izgled vašeg dokumenta.
Specifikacija
 
HTML:
 
3.2

 
4.01

 
5.0

 
XHTML:
 
1.0

 
1.1

Opis
 
Usklađivanje sadržaja spremnika 
na rubu.

 
Sintaksa
 
...
 
Vrijednosti
centar Poravnava tekst u sredinu.  Tekst se postavlja vodoravno u prozor preglednika ili spremnik u kojem se nalazi blok teksta.  Čini se da su redovi teksta nanizani na nevidljivoj osi koja se proteže sredinom web stranice.  Ova metoda poravnanja aktivno se koristi u naslovima i raznim potpisima, kao što su opisi, daje službeni i solidan izgled dizajnu teksta.   U svim drugim slučajevima središnje 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 desni rub je raspoređen kao ljestve.  Ova metoda poravnanja najpopularnija je na web stranicama jer korisniku omogućuje jednostavno traženje novog retka i udobno čitanje velikog teksta.   desno Poravnava tekst udesno.  Ova metoda usklađivanja djeluje kao antagonist prethodnoj vrsti.  Naime, redovi teksta su poravnati uz desni rub, dok lijevi ostaje “poderan”.  Budući da lijevi rub nije poravnat, gdje se čitaju novi reci, ovaj je tekst teže čitati nego da je poravnat lijevo.  Stoga se desno poravnanje obično koristi za kratke naslove od najviše tri retka.   Ne razmatramo specifične stranice na kojima se tekst mora čitati s desna na lijevo, gdje bi možda slična metoda poravnanja bila korisna.  Ali gdje ste u našoj zemlji vidjeli takve stranice?   justify Justified, što znači istovremeno poravnato lijevo i desno.  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

 

 
 
 
 
 
 
 

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

 
Proizlaziti ovaj primjer prikazano na sl.  1.
 
Riža.  1. Poravnavanje elemenata pomoću atributa align