. I ova oznaka već ima atribut " poravnati", čija vrijednost određuje poziciju ovog kontejnera. Postoje tri vrijednosti: " lijevo", "centar", "u pravu". Podrazumevano, to je " lijevo“Međutim, mislim da vas to ne iznenađuje.

Hajde da sada napišemo isto HTML kod, ali koristeći kontejnere, pored toga, poravnajmo ne u centar, već udesno.

Kao što vidite, sve funkcioniše. Savjetujem vam da promijenite i vrijednosti atributa " poravnati" da pogledate druge vrste poravnanja sadržaja kontejnera.

Drugi način za poravnavanje elemenata HTML- ovo su tabele, ali ova tema zaslužuje posebnu raspravu, pa ćemo o njoj govoriti u jednom od sljedećih članaka.

Za sada bi vaša stranica trebala izgledati ovako:

Naslov 1. nivoa, poravnat po sredini

S poštovanjem, Mikhail Rusakov.

P.S. Ako želite da saznate više o HTML, zatim pogledajte moj besplatni kurs s primjerom izrade web stranice na HTML:

Za slike možete odrediti njihov položaj u odnosu na tekst ili druge slike na web stranici. Način na koji su slike poravnate je određen atributom align.

Ovaj atribut je zastario, umjesto toga koristite stilove.

Sintaksa

Vrijednosti

U tabeli 1 navodi moguće vrijednosti atributa align i rezultat njegove upotrebe.

Table 1. Korištenje vrijednosti atributa poravnanja

Značenje	Opis	Primjer
dnu	Poravnava donju ivicu slike sa okolnim tekstom.
lijevo	Poravnava sliku sa lijevom ivicom prozora.	Lorem ipsum dolor sit amet, consectetuer adipiscing elit...
srednji	Poravnava sredinu slike sa osnovnom linijom trenutne linije.	Lorem ipsum dolor sit amet, consectetuer adipiscing elit...
u pravu	Poravnava sliku sa desnom ivicom prozora.	Lorem ipsum dolor sit amet, consectetuer adipiscing elit...
top	Gornja granica slike je poravnata sa najvišim elementom trenutne linije.	Lorem ipsum dolor sit amet, consectetuer adipiscing elit...

Zadana vrijednost

Primjer

Ovaj tekst se premotava oko lijeve ivice slike.

Pregledači

Sljedeće oznake se koriste u tabeli pretraživača.

• - element je u potpunosti podržan od strane pretraživača;
• - element ne percipira pretraživač i ignoriše se;
• - tokom rada mogu se pojaviti razne greške ili je element podržan sa rezervacijama.

Broj označava verziju pretraživača iz koje je element podržan.

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 je raspoređena kao ljestve. Ova metoda poravnanja je najpopularnija na web stranicama, jer omogućava korisniku da lako pronađe nova linija i udobno čitanje velikog teksta. 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 se proteže niz centar web stranice. Ova metoda poravnanja se aktivno koristi u naslovima i raznim potpisima, 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. desno Poravnava tekst udesno. Ova metoda poravnanja djeluje kao antagonist prethodnom tipu. Naime, redovi teksta su poravnati prema desnoj ivici, dok lijeva ostaje “pocijepana”. Budući da lijeva ivica nije poravnata, gdje se čitaju novi redovi, ovaj tekst je teže čitati nego da je poravnat lijevo. 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 će možda sličan način poravnanja biti koristan. Ali gdje ste u našoj zemlji vidjeli takve stranice? justify Justified, što znači poravnati lijevo i desno u isto vrijeme. 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 i 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će oznake se koriste u tabeli pretraživača.

• - element je u potpunosti podržan od strane pretraživača;
• - element ne percipira pretraživač i ignoriše se;
• - tokom rada mogu se pojaviti razne greške ili je element podržan sa rezervacijama.

Broj označava verziju pretraživača iz koje je element podržan.

Pozdrav, dragi čitaoci blog stranice. Danas nastavljamo sa proučavanjem, a sljedeće imamo svojstva text-decoration, vertical-align, text-align, text-indent i niz drugih, koja pomažu u dizajniranju izgleda tekstova u Html kodu.

U prošlom članku smo pogledali svojstva koja su namijenjena za konfiguraciju izgled fontovi na .

Pa, još ranije smo detaljno pregledali sve tipove, naučili kako se mogu grupirati i koje prioritete pretraživač postavlja kada ih tumači. Istina, sve je ovo bilo podijeljeno u nekoliko članaka, pa da ne biste bili zbunjeni, savjetujem vam da proučite materijale redoslijedom kako je navedeno.

Dekoracija teksta, poravnanje teksta, uvlačenje teksta u CSS-u

Kako raditi s tekstom u Css-u? Logično bi bilo pretpostaviti da za tu svrhu postoje posebno osmišljena pravila. Počnimo s text-align, koji je zapravo zamjena za atribut align (koristio se za poravnavanje sadržaja poput P pasusa ili naslova).

Ima samo četiri moguća značenja:

Značenje ostaje isto kao i prije. Poravnaj tekst- ovo je horizontalno poravnanje linija. Ovo pravilo se odnosi isključivo na blok elemente (paragrafe, naslove, itd.), tj. one oznake u kojima se može pojaviti nekoliko redova. Jer Pošto inline elementi mogu imati samo jednu liniju, nema posebne svrhe u korištenju poravnanja teksta u njima.

Jasno je da vrijednosti ovog pravila znače poravnanje, redom: lijevo, desno, središte i širinu stranice (Justify - istovremeno lijevo i desno povećanjem udaljenosti između riječi) . Podrazumijeva se da vrijednost Justify treba koristiti za elemente sa najmanje nekoliko redova teksta, inače neće biti vidljivog efekta.

Na primjer, opravdao sam prethodni pasus (možete vidjeti da ima glatke granice i lijevo i desno) koristeći:

Text-align:justify;

Po defaultu, horizontalno poravnanje teksta je lijevo, tj. Nema potrebe posebno pisati text-align:left, osim ako, naravno, prethodno niste naveli drugačije poravnanje. Inače, ovaj pasus sam poravnao sa centrom (centrom), opet radi jasnog primjera, ali ovdje je, mislim, sve jasno.

Sljedeće Css pravilo uvlaka teksta omogućava vam da navedete crvenu liniju, na primjer, za tekst u oznaci pasusa P. Uvlačenje crvene linije može se specificirati specificiranjem vrijednosti (bilo sa znakom plus ili znakom minus, koristeći ) ili korištenjem postotaka:

Iz čega se izračunavaju procenti u uvlačenju teksta? Od širine područja dodijeljenog za tekst. One. CSS pravilo text-indent:50% će postaviti crvenu liniju jednaku polovini dužine ove linije. Pa, ovaj paragraf služi kao primjer takvog pravila.

Ili možete, na primjer, postaviti negativnu vrijednost za crvenu liniju u uvlačenju teksta i tada ćemo dobiti otprilike ono što vidite u ovom pasusu. Da bih postigao ovaj rezultat, napisao sam sljedeće CSS pravilo za oznaku P paragrafa:

Uvlaka teksta:-1em;

Pa, tipična upotreba text-indent (za postavljanje standardne crvene linije) može izgledati ovako: text-indent:40px; (usput rečeno, primijenjeno na ovaj stav). Ovo pravilo, baš kao i poravnanje teksta o kojem smo ranije govorili, odnosi se samo na blok elemente, tj. gdje se može pojaviti nekoliko redova (paragrafi, naslovi, itd.).

Ok, idemo sada na tekst-dekoracija(dizajn pomoću horizontalne linije), koji je već primijenjen na sve Html elemente (inline i blok).

Može imati samo četiri značenja:

One. može se koristiti pomoću dekoracije teksta: precrtavanje, podcrtavanje ili podvlačenje, ili ne koristiti ništa (ništa). Neki HTML elementi već imaju dizajn horizontalne linije, na primjer (podvučeni su prema zadanim postavkama).

Stoga, naglašavanje nečega drugog podvlačenjem (osim hiperlinkova) nije dobro, jer korisnici imaju zapisano u svojoj podsvijesti da kada je podvučeno (i također istaknuto bojom), to znači da mogu kliknuti na to da odu. Ali isticanjem običnog teksta podvlačenjem dovodite korisnika u zabludu i nakon toga postajete razočarani svojim resursom (on je mislio da jeste, ali se ispostavilo da...).

Nijansa u korištenju Css pravila za ukrašavanje teksta je da možete unijeti tri (ili dvije) vrijednosti odjednom za bilo koji Html element (ne izostavljajući nijedan) i kao rezultat ćete dobiti podvučeno-podvučeno-precrtano fragment teksta(zvuči i izgleda cool, zar ne?):

Text-decoration: underline overline line-through;

Vrijednosti za dekoraciju teksta (ako želite koristiti nekoliko njih odjednom) potrebno je napisati kroz razmak.

Vertical-align - vertikalno poravnanje

Zatim imamo vertikalno poravnanje - vertical-align. Za gotovo sve elemente u HTML kodu, to znači poravnavanje inline elemenata s tekstom u odnosu na njihovu osnovnu liniju. Istina, za to to znači malo drugačije - sav sadržaj koji se nalazi u ovim ćelijama bit će poravnat okomito.

Za CSS pravilo vertikalnog poravnanja možete koristiti sljedeće vrijednosti:

Linije su prema zadanim postavkama poravnate prema osnovnoj liniji. Vidi, prijavio sam se povećajte veličinu fonta za ovaj dio teksta a ova dva fragmenta su poravnata prema osnovnoj (donjoj) liniji. A vertikalno poravnanje pomoću vertikalnog poravnanja ima preciznu namjeru da promijeni način na koji su linije poravnate.

Na primjer, ako napišem vertical-align:baseline za isti uvećani dio teksta, neće doći do promjena, jer osnovna vrijednost se koristi za ovo CSS pravilo po defaultu.

Inače, kao vrijednosti za njega možete koristiti i brojeve, a natpis vertical-align:0 značit će isto što i vertical-align:baseline, tj. osnovna linija je ekvivalentna nuli. Stoga, ako želimo naznačiti bilo kakav pomak u vertikalnom poravnanju, onda će ovaj pomak biti specificiran u odnosu na osnovnu liniju (ili nulu).

Možete to napisati ovako:

vertical-align:10px;

I primićemo pomaknite fragment s većim fontom prema gore 10 piksela u odnosu na osnovnu liniju. Ako zapišemo negativnu vrijednost:

Vertical-align:-10px;

Onda dobijamo pomaknuti fragment prema dolje u odnosu na osnovnu liniju. Iz primjera je jasno da se zbog pomaka visina reda povećala tako da se tekst uklapa u njega bez sudara sa susjednom linijom. Pomak se također može specificirati u Em i Ex, i to kao postotak, koji će se izračunati iz visine linije ovog elementa (sjetite se u prošlom članku smo naučili kako ga postaviti pomoću ).

Za vertikalno poravnavanje sadržaja ćelija tabele, vertical-align bi trebalo da koristi vrednosti na vrhu i na dnu da bi se sadržaj poravnao na vrhu i dnu ćelije (pa, sredina u ćeliji tabele se koristi kao zadana vrednost vertikalnog poravnanja ).

A za elemente fonta možete koristiti text-top, text-bottom, middle. Upotrijebimo ga kao primjer ovaj dio teksta značenje:

vertical-align:middle;

Šta je bio rezultat? Srednja linija uvećanog fragmenta je poravnata sa osnovnom linijom redovnog teksta, tj. dobili smo vertikalno poravnanje sa središnjom linijom. Za tekst na vrhu i na dnu teksta sve će biti isto. Ovo je tekst na vrhu, a ovo na dnu teksta.

Vrijednosti Css svojstva vertical-align sub i super odgovaraju pod- i super-indeksu koji su se odigrali u čistom Html-u (prije korištenja CSS svojstava za vizualni dizajn).

Transformacija teksta, razmak između slova, razmak između riječi i razmak

None se koristi po defaultu i znači da se znakovi u tekstu neće ni na koji način promijeniti - kako je napisano u Html-u, ovako će biti prikazani. Vrijednost velikih slova za transformaciju teksta će transformisati sva slova u fragmentu u velika slova ( primjer je prikazan u ovoj rečenici, gdje je korišteno pravilo text-transform:uppercase, a slova su izvorno napisana malim slovima).

Vrijednost malih slova za Css pravilo transformacije teksta omogućit će vam da transformišete sve znakove u fragmentu u mala slova, a vrijednost velikog slova će učiniti da sva prva slova riječi budu velika ( primjer u ovoj rečenici- text-transform:capitalize). One. koristeći text-transform možete učiniti sve što želite s običnim tekstom, a zatim lako vratiti sve nazad.

Stoga, ako, na primjer, imate zadatak da sve naslove napišete samo velikim slovima, onda ih napišite u Html-u kao i obično, i napravite ih velikim slovima u CSS-u putem text-transform:uppercase. Zatim, ako odlučite da nešto promijenite, potrebno je samo malo promijeniti stilove, a ne sadržaj svih 100.500 zaglavlja na vašoj web stranici.

Prema zadanim postavkama, i razmak između slova i riječi su postavljeni na Normal, ili je to isto kao nula (tj. razmak između znakova i riječi se ni na koji način ne mijenja). Količina promjene udaljenosti u ovim pravilima može se specificirati samo u pikselima, Em ili Ex, ali ne i u procentima.

Međutim, možete koristiti i pozitivne (rijetkost znakova ili riječi) i negativne vrijednosti (zbližavanje znakova ili riječi). Na primjer, možete "ovo je kako razrijediti znakove u ovoj frazi" koristeći sljedeće Css pravilo:

Razmak između slova:0.4em;

Ili možeš "ovo je kako približiti simbole u ovoj frazi" korištenjem:

Razmak između slova:-1px;

Isto se može reći i za razmak između riječi, s jedinom razlikom što će se udaljenost između riječi promijeniti, kao, na primjer, u ovoj frazi, koristeći ovu CSS konstrukciju:

Razmak između riječi:4em;

Slično, možete koristiti negativne vrijednosti u razmaku između riječi kako biste smanjili razmak između riječi.

Pa, posljednje CSS pravilo za danas, koje vam omogućava da na određeni način formatirate tekst u HTML kodu, je ovo razmak. Odgovoran je za prikaz znakova razmaka na web stranici do kojih je došlo prilikom pisanja HTML koda.

Kao što se sjećate iz članka o tome, preglednik prilikom raščlanjivanja koda kombinuje sve razmake, prijelome redova i tabulatore u jedan razmak i lomi redove na web stranici tačno prema razmacima koji su se pojavili u kodu.

Dakle, bijeli prostor može imati jednu od tri vrijednosti:

Jasno je da je zadana vrijednost Normalna iu ovom slučaju se sve prikazuje kako sam maloprije opisao. Ali kada se koristi vrijednost Pre, dobijamo potpunu analogiju sa upotrebom, tj. Na web stranici tekst će biti prikazan sa svim onim dodatnim razmacima koji su bili prisutni prilikom pisanja koda, a pretraživač više neće moći vršiti prijenose pomoću njih.

Pa, šta znači? nowrap Jednostavno će spriječiti pretraživač da omota sve znakove razmaka koje pronađe unutar fragmenta sa CSS pravilom white-space:nowrap. Možete sami isprobati kako sve funkcionira tako što ćete kreirati jednostavnu Html datoteku i priložiti bilo koji dio teksta u oznake poput ove:

Sretno ti! Vidimo se uskoro na stranicama blog stranice

Možda ste zainteresovani

Stil liste (tip, slika, pozicija) - Css pravila za prilagođavanje izgleda lista u HTML kodu
Pozicioniranje pomoću Z-indeksa i pravila CSS kursora za promjenu kursora miša
Padding, Margin and Border - postavite unutrašnje i vanjske paddinge u CSS-u, kao i granice za sve strane (gore, dolje, lijevo, desno)
Čemu služi CSS, kako povezati kaskadne stilove sa HTML dokumentom i osnovna sintaksa ovog jezika
Float i clear u CSS - alatima za raspored blokova
CSS - šta je to, kako se povezuju kaskadni stilovi HTML kod koristeći Style i Link
Jedinice dimenzija (pikseli, Em i Ex) i pravila nasljeđivanja u CSS-u
Tag, klasa, Id i univerzalni selektori, kao i selektori atributa u modernom CSS-u
Pozicija (apsolutna, relativna i fiksna) - metode pozicioniranja HTML elementi u CSS-u (pravila lijevo, desno, gore i dolje)
Pozadina u CSS-u (boja, pozicija, slika, ponavljanje, prilog) - sve za postavljanje boje pozadine ili pozadinske slike HTML elemenata