Kako podesiti pametne telefone i računare. Informativni portal
  • Dom
  • Windows 10
  • Atribut align html oznake definira. CSS svojstva za oblikovanje HTML teksta (vertikalno poravnanje, poravnanje teksta, uvlačenje teksta i ostalo)

Atribut align html oznake definira. CSS svojstva za oblikovanje HTML teksta (vertikalno poravnanje, poravnanje teksta, uvlačenje teksta i ostalo)

Do sada smo ti i ja poravnavali elemente samo lijevo. Preciznije, mi to uopšte nismo radili, a sam pretraživač, podrazumevano, poravnava elemente ulevo. Naravno, bilo bi previše dosadno poravnati sve na lijevo. Dakle, postoje Različiti putevi centralno i desno poravnanje.

Poravnanje elemenata je nešto što samo trebate znati kada. Prva stvar koju treba uraditi je da otkucate najjednostavniju stranicu.

Nekada davno postojala je oznaka

Sada vam ne savjetujem da ga koristite, zbog prisustva više moderne načine, ali ne mogu ne spomenuti. Vrlo je, vrlo jednostavan za korištenje. Sve što trebate za centriranje, stavite unutar ove oznake. Na primjer, ovdje poravnavamo naslov 1. nivoa u sredini.



Možete dodati sliku, također poravnatu u sredini, također idemo na sljedeći red koristeći oznaku
:


Naslov 1. nivoa, centriran




To je bila oznaka

koji je već zastario, osim toga, suprotno vašim očekivanjima od oznaka i jednostavno ne postoji. Recimo, prema zadanim postavkama poravnat lijevo, centriran pomoću oznake
, ali šta je sa desnim?

Kako bi riješili ovaj problem, programeri su smislili univerzalni način poravnajte elemente Html... Način je korištenje takozvanih kontejnera, koji se kreiraju pomoću oznake

... Odnosno, sve što treba staviti u određeni kontejner stavlja se unutar oznake
... I već ova oznaka ima atribut " poravnati", čija vrijednost određuje poziciju ovog kontejnera. Postoje tri vrijednosti:" lijevo", "centar", "u pravu". Po defaultu, vrijedi" lijevo„Međutim, mislim da niste iznenađeni.

Hajde da napišemo isto sada Html kod ali uz korištenje kontejnera, osim toga, nemojmo centrirati nego desno.





Kao što vidite, sve funkcioniše. Savjetujem vam da promijenite i vrijednosti atributa " poravnati"da pogledate druge vrste poravnanja 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.

Do tada bi vaša stranica trebala izgledati ovako:






Naslov 1. nivoa, centriran






Naslov 1. nivoa poravnat desno






Srdačan pozdrav, Mikhail Rusakov.

P.S. Ako želite da saznate više o Html onda pogledaj moje besplatni kurs sa primjerom kreiranja stranice na Html:

Pozdrav dragi čitaoci blog stranice. U ovom članku nastavljamo istraživati ​​osnove stylinga CSS markup i razmotrite svojstva vertical-align, text-align, text-indent i neka druga, dizajnirana za stiliziranje html teksta.

Poravnavanje teksta sa CSS-om

Počnimo s atributima stila koji kontroliraju prikazivanje teksta u blok elementima. Počnimo sa svojstva poravnanja teksta koja je zapravo zamena align atribut(koristi se za poravnavanje sadržaja html elemenata poput p paragrafa).

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

poravnanje teksta: lijevo | desno | centar | poravnati

Dostupne vrijednosti za ovo pravilo određuju poravnanje, redom: lijevo - lijevo, desno - desno, centar - centar i justify - širinu stranice (istovremeno lijevo i desno povećanjem udaljenosti između reči). Na primjer, tekst u ovom članku je poravnat sa širinom stranice (ako primijetite da ima jednake ivice i lijevo i desno) pomoću pravila text-align: justify.

Prema zadanim postavkama, horizontalno poravnanje je poravnato lijevo, tako da nije potrebno posebno specificirati text-align: left osim ako je drugačije poravnanje navedeno u nadređenim elementima.

Primjeri korištenja imovine:

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

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

uvlaka teksta:<отступ>

Ovdje su dozvoljene apsolutne i relativne vrijednosti uvlačenja. Apsolutne vrijednosti (px - pikseli, em, ex, itd.) mogu se navesti i sa znakom plus i sa znakom minus. Relativna veličina obično se daje kao procenat (%). Relativna vrijednost se izračunava iz širine površine koja je izdvojena za tekst. Dakle, css pravilo text-indent: 50% će postaviti crvenu liniju jednaku polovini dužine samog reda. Po defaultu, uvlaka "crvene linije" je nula. primjer:

p (ident teksta: 10px;)

Razmotrite sljedeće vertikalno poravnanje- vlasništvo vertikalno poravnanje... Ovo svojstvo je već primjenjivo za sve html elemente i za gotovo sva sredstva međusobnog poravnanja. inline elementi sa tekstom u odnosu na njihovu osnovnu liniju. Osim oznaka tabele td i th, u kojima će sav sadržaj biti vertikalno poravnat. sintaksa:

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

Razmotrimo svaku vrijednost detaljnije:

  • osnovna linija - poravnanje dijela teksta sa osnovnom linijom roditeljski element... Ovo je zadana postavka;
  • pod - dio teksta se prikazuje kao subscript ili indeks za roditeljski element;
  • super - dio teksta se prikazuje kao superscript ili superscript za roditeljski element;
  • top - poravnava dio teksta s gornjom ivicom nadređenog elementa;
  • text-top - poravnava fragment sa gornjom ivicom teksta roditeljskog elementa;
  • sredina - poravnanje centra fragmenta teksta sa središtem nadređenog elementa;
  • bottom - poravnanje fragmenta teksta prema donjoj ivici nadređenog elementa;
  • text-bottom - poravnanje fragmenta prema donjoj ivici teksta roditeljskog elementa;

Slika ispod prikazuje ponašanje testnih fragmenata za različite vrijednosti svojstva vertikalnog poravnanja u Internet pretraživač Explorer 11:

Pored gore navedenih vrijednosti, možete odrediti numeričke vrijednosti... Dakle, CSS pravilo vertical-align: 0 će značiti isto što i notacija vertical-align: baseline. A pravilo vertical-align: 10px će pomaknuti tekst za 10 piksela od osnovne linije. Da biste pomjerili 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.

Da biste vertikalno poravnali sadržaj ćelija tablice u vertikalnom poravnanju, koristite sljedeće vrijednosti:

  • 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 vertical-align. Brojne moguće vrijednosti daju previše različite rezultate u različitim slučajevima.

Opcije razmaka i prelamanja riječi za kontrolu prijeloma reda

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

Kao što znamo, pretraživač po defaultu spaja sve uzastopne znakove razmaka - razmake, prijelome reda i tabulatore - u jedan razmak. 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.

Korištenje vrijednosti

To će biti potpuna analogija kada se koristi oznaka 
Pretraživač će prikazati stranicu uzimajući u obzir sve dodatni prostori i crticu kako je dodao programer.  Ako se ispostavi da je redak teksta predugačak, bit će dodan horizontalna traka skrolovanje.

Nowrap vrijednost sprječava pretraživač da premota redove i tekst se prikazuje u jednom redu. Jedina stvar, dodavanje oznake
će prenijeti 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, dodaci redova se čuvaju i pretraživač može prekinuti redove koji su predugački da izbjegne horizontalno pomicanje.

Primjer upotrebe:

p (razmak: pre;)

Razmotrite sljedeće parametar prelamanja riječi, koji će vam reći da li da premotate duge riječi koje se ne uklapaju u navedeno područje. Ovo svojstvo se ne koristi često, ali ponekad ne možete bez njega:

word-wrap: normal | break-word

Normalna vrijednost govori pretraživaču da razbije tekst 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 (prelom riječi: break-word;)

Parametri sjene teksta - svojstvo sjene teksta

Za ljubitelje raznih ukrasa u CSS3 standardu postalo je moguće postaviti sjenu za tekst. Pametna upotreba svojstva text-shadow omogućava vam da primjetno animirate web stranica... sintaksa:

text-shadow: nema |<цвет> <горизонтальное смещение> <вертикальное смещение> [<радиус размытия>]

Vrijednost none poništava sjenčanje teksta i postavljena je prema zadanim postavkama.

Boja nijanse je postavljen u bilo kojem dostupnom CSS formatu i nije potreban parametar... Podrazumevano, boja senke je ista kao i boja teksta.

Horizontalni pomak sjene može se specificirati u bilo kojoj jedinici mjere koju podržava CSS. Ako je vrijednost pozitivna, sjena će biti pozicionirana desno od teksta, sa negativnim - lijevo. Nula vrijednost pozicioniraće senku direktno ispod teksta i ima smisla samo ako je senka zamućena.

Vertikalni pomak sjene također se može postaviti u bilo kojoj jedinici mjere koju podržava CSS. Pozitivna vrijednost će pomjeriti sjenu ispod teksta, a negativna vrijednost će je pomjeriti iznad. Vrijednost nula će postaviti sjenu direktno ispod teksta.

U bilo kojoj jedinici mjerenja, i radijus zamućenja senke... Što je veća vrijednost, sjena postaje šira i više se izglađuje. Ako ovaj parametar nije postavljen, tada se pretpostavlja vrijednost zamućenja. jednak nuli... Budući da algoritam za izravnavanje obično ima različitim pretraživačima je različit, izgled senke se može neznatno razlikovati u zavisnosti od pretraživača.

Razmotrimo primjer:

p (
text-shadow: crvena 1px 1px 2px;
veličina fonta: 2em;
}

A ovako će tekst paragrafa p izgledati korištenjem ovog pravila stil u Internet Explorer 11:

Ovim ćemo zaključiti članak. Da biste saznali više o CSS svojstvima, ne zaboravite da se pretplatite na ažuriranja bloga i pročitajte članke u odjeljku "". Do sljedećeg puta!

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 "ljestve". Ova metoda poravnanja je najpopularnija na stranicama, jer omogućava korisniku da lako pronađe novi red s pogledom i udobno pročita veliki tekst. centar Poravnava tekst sa središtem. Tekst je centriran horizontalno u prozoru pretraživača ili kontejneru gdje tekstualni blok... Redovi teksta su nanizani na nevidljivoj osi koja se proteže niz centar web stranice. Sličan način poravnanja se aktivno koristi u naslovima i raznim natpisima, kao što su natpisi slika, daje zvaničan i čvrst izgled dizajnu teksta. U svim ostalim slučajevima, centralno poravnanje se rijetko primjenjuje. 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 lijevo ostaje "pocijepano". Zbog činjenice da lijeva ivica nije poravnata, odnosno od nje počinje čitanje novih redova, takav tekst je teže čitljiv nego da je poravnat ulijevo. Stoga se desnim poravnanjem 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 i dobro dođe. Ali gdje ste vidjeli takve stranice u našoj zemlji? justify Justification, što znači lijevo i desno opravdanje 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

P oznaka, atribut poravnanja

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 aure te fasi 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 ExplorerChromeOperaSafariFirefox
1 1 1 1 1
AndroidFirefox MobileOpera MobileSafari mobilni
1 1 6 1

Pregledači

Sledeće konvencije se koriste u tabeli pretraživača.

  • - element je u potpunosti podržan od strane pretraživača;
  • - element ne percipira pretraživač i zanemaruje se;
  • - tokom rada, izgled razne greške, ili je stavka podržana upozorenjima.

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

Greetings Friends! Danas ćemo pričati o oznaku pasusa i o atributu poravnanja... Općenito, sav sadržaj na stranici trebao bi biti razbijen na paragrafe. Sadržaj pasusa je upisan između oznaka

Tekst…

... Kada prikažemo 2 uzastopna pasusa, tada se između njih formira nevidljivo polje koje ih odbija jedan od drugog. Oznaka je blok oznaka stoga zauzimaju cijelu širinu stranice.

Na primjer, uzmimo stranicu sa ovim kodom:

Stranica sa paragrafima.

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 kako bi napravio 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 = "vrijednost"

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, koja je odgovorna za poravnavanje sadržaja unutar pasusa i da mu daju jednu vrijednost.

Sadržaj paragrafa.

Ovaj atribut ima 4 vrijednosti:

1. Lijevo- Poravnava sadržaj ulijevo. Ovo je zadana postavka. 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. U redu- Poravnava sadržaj udesno.

Tekst…

Ovako to izgleda u pretraživaču:


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

Tekst…


4.Justify- Poravnava sadržaj prema širini stranice.

Tekst…


Sažetak lekcije:
Danas smo naučili šta je to stav u html. Paragrafi se vrlo često koriste u html-u. Također naučio šta je atribut oznake. I naučio atribut poravnanja poravnati. Koji može uzeti jednu od sljedećih vrijednosti: lijevo (zadano),u redu,centar,opravdati.

Pozdrav dragi čitaoci blog stranice. Danas nastavljamo sa proučavanjem, a na redu 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 pogledali smo svojstva koja se namjeravaju konfigurirati izgled fontovi kada.

Pa, a još ranije, detaljno smo ispitali 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 kako ne biste bili zbunjeni, savjetujem vam da proučite materijale navedenim redoslijedom.

Dekoracija teksta, poravnavanje 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 paragrafa ili naslova).

Ima samo četiri moguća značenja:

Značenje ostaje isto kao i prije. Poravnaj tekst Je horizontalno poravnanje linija. Ovo pravilo se odnosi samo na blok elemente (paragrafe, naslove, itd.), tj. one oznake u kojima se može pojaviti više linija. Jer Budući da može postojati samo jedan red umetnutih elemenata, nema posebnog smisla koristiti za poravnavanje teksta u njima.

Jasno je da vrijednosti ovog pravila znače poravnanje, redom: lijevo (lijevo), desno (desno), centar (centar) 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 od toga.

Na primjer, poravnao sam prethodni pasus po širini (možete vidjeti da ima jednake granice i s lijeve i s desne strane) koristeći:

Poravnanje teksta: justify;

Tekst je po defaultu horizontalno poravnat ulijevo, tj. ne morate posebno pisati text-align: left, osim ako, naravno, prethodno niste naveli drugačije poravnanje. Usput, ovaj pasus sam ponovo poravnao u centar (centar). ilustrativni primjer, ali ovdje je, mislim, sve jasno.

Sljedeće css pravilo uvlaka teksta omogućava vam da postavite crvenu liniju, na primjer, za tekst u oznaci pasusa P.

Iz čega se izračunavaju procenti u uvlačenju teksta? Od širine područja koje je izdvojeno za tekst. One. Uvlaka teksta Css pravila: 50% će postaviti crvenu liniju jednaku polovini dužine ovog istog reda. Pa, ovaj paragraf je samo 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. Za postignuće ovog rezultata Napisao sam sljedeće CSS pravilo za paragraf tag P:

Uvlaka teksta: -1em;

Pa i zajednička upotreba text-indent (za postavljanje standardne crvene linije) može izgledati ovako: text-indent: 40px; (usputno 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 više redova (paragrafi, naslovi, itd.).

Dakle, idemo sada na tekst-dekoracija(dekoracija pomoću horizontalne linije), koja je već primijenjena na sve Html element m (i mala slova i blok).

Može imati samo četiri značenja:

One. može se koristiti s dekoracijom teksta: precrtano, precrtano ili podcrtano, ili ne koristiti uopće. Neki HTML elementi već imaju zadani stil horizontalna linija na primjer (podvučeni su po defaultu).

Stoga, naglašavanje nečeg drugog podvlačenjem (osim hiperlinkova) nije dobro, jer u podsvijesti korisnika piše da kada je podvučeno (a i istaknuto bojom), znači da možete kliknuti na ovo da idete. Ali isticanjem običnog teksta podvlačenjem dovodite korisnika u zabludu i naknadno razočaranje vašim resursom (mislio je, ali se pokazalo da...).

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

Dekoracija teksta: podcrtavanje preko linije;

Vrijednosti za tekstualna dekoracija(ako želite da ih koristite nekoliko odjednom) potrebno je da napišete odvojeno razmakom.

Vertical-align - okomito 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 okomito poravnat.

Za Css, pravilo vertikalnog poravnanja može koristiti sljedeće vrijednosti:

Redovi su prema zadanim postavkama poravnati s osnovnom linijom. Vidi, prijavio sam se ovom dijelu teksta povećajte font i ova dva komada su poravnata sa baznom (donjom) linijom. A vertikalno poravnanje sa vertical-align je upravo namijenjeno za promjenu načina na koji su linije poravnate.

Na primjer, ako napišem vertical-align: baseline za isti uvećani dio teksta, tada se neće dogoditi nikakve promjene, jer osnovna vrijednost se koristi za ovo zadano css pravilo.

Inače, brojevi se mogu koristiti kao vrijednosti za njega, a natpis vertical-align: 0 značit će isto što i vertical-align: baseline, tj. osnovna vrijednost je jednaka nuli. Stoga, ako želimo da označimo bilo kakav pomak u vertikalnom poravnanju, onda će ovaj pomak biti naznačen u odnosu na osnovnu liniju (ili nulu).

Možete napisati ovako:

Vertikalno poravnanje: 10px;

I dobijamo pomak fragmenta sa uvećanim fontom prema gore 10 piksela od osnovne linije. Ako zapišemo negativnu vrijednost:

Vertical-align: -10px;

Onda dobijamo pomeranje fragmenta prema dole u odnosu na osnovnu liniju. Primjeri pokazuju da je zbog pomaka visina reda povećana tako da se tekst uklapa u nju bez naleta na susjedni red. Pomak se također može podesiti u Em i Ex, pa i kao postotak, koji će se računati od visine linije ovog elementa (sjetite se u prošlom članku smo naučili kako ga postaviti pomoću).

Da biste vertikalno poravnali sadržaj ćelija tablice u vertikalnom poravnanju, trebali biste koristiti vrijednosti Top i Bottom kako biste sadržaj poravnali na vrh i dno ćelije, respektivno (pa, sredina u ćeliji tablice se koristi kao zadana vrijednost vertikalnog poravnanja).

A za elemente fonta možete koristiti tekst-vrh, tekst-dolje, sredinu. Primijenimo na primjer na ovaj dio teksta značenje:

Vertikalno poravnanje: sredina;

Šta se dogodilo kao rezultat? Srednja linija uvećanog fragmenta je poravnata sa osnovnom linijom normalnog teksta, tj. dobili smo vertikalnu središnju liniju. Za tekst na vrhu i na dnu teksta, sve će biti isto. Ovo je tekst na vrhu, kao i tekst na dnu.

Css vrijednosti sub- i super svojstva vertikalnog poravnanja odgovaraju pod- i superskriptu koji su se pojavili u čisti html(prije koristeći CSS svojstva za vizuelni 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 promijeniti ni na koji način - kako je napisano u Html-u, oni će biti prikazani. Vrijednost velikih slova za transformaciju teksta će transformisati sva slova u fragmentu u velika ( primjer je prikazan u ovoj rečenici gdje je korišteno pravilo text-transform: velika slova, 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 sva prva slova riječi učiniti velikim ( primjer u ovoj rečenici- transformacija teksta: velika slova). One. pomoću transformacije teksta možete učiniti bilo šta običan tekst, a zatim sve lako vratiti.

Stoga, ako, na primjer, imate zadatak da napišete samo sva zaglavlja velikim slovima, zatim ih obično pišite u HTML-u i napravite ih velikim slovima u CSS-u koristeći text-transform: velika slova. Zatim, ako odlučite da vratite nešto nazad, dovoljno je da napravite samo malu promenu u stilovima, a ne u sadržaju svih 100.500 naslova na vašem sajtu.

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). Veličina promjene udaljenosti u ovim pravilima može biti naznačena samo u pikselima, Em ili Ex, ali ne u procentima.

Međutim, možete koristiti i pozitivne (redak znakova ili riječi) i negativne vrijednosti(konvergencija simbola ili riječi). Na primjer, možete "Ovako da razrijedim znakove u ovoj frazi" preko sljedeći css pravila:

Razmak između slova: 0,4em;

Ili možeš "Ovako da spojite likove u ovoj frazi" preko:

Razmak između slova: -1px;

Isto se može reći i za razmak između riječi sa jedinom razlikom što će se udaljenost između riječi promijeniti, kao, na primjer, u ovoj frazi, uz pomoć ove CSS konstrukcije:

Razmak između riječi: 4em;

Slično, negativne vrijednosti se mogu koristiti u razmaku riječi kako bi se smanjila udaljenost između riječi.

Pa, i posljednje Css pravilo za danas, koje vam omogućava da na određeni način stilizirate tekst u Html kodu, je razmak... Odgovoran je za prikaz razmaka na web stranici, koji se dogodio kada pisanje html-a kod.

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 izvodi prijelome reda na web stranici točno tako da razmaka znakova to se dogodilo u kodu.

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

Jasno je da je zadana vrijednost Normalno, 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 se desili prilikom pisanja koda, a pretraživač neće moći vršiti transfere na njima.

Pa i značenje nowrap jednostavno će spriječiti pretraživač da premotava razmak koji pronađe unutar razmaka: nowrap CSS isječak. Također možete isprobati kako sve to funkcionira tako što ćete kreirati jednostavnu Html datoteku i priložiti bilo koji dio teksta u takve oznake:

isječak testnog teksta

Sretno ti! Vidimo se uskoro na stranicama blog stranice

možete pogledati više video zapisa ako odete na
");">

Možda ste zainteresovani

Stil liste (tip, slika, pozicija) - Css pravila za prilagođavanje izgleda lista u HTML kodu
Pozicioniranje sa Z-indeksom i CSS-om Pravilo kursora da promenite kursor miša
Padding, Margin and Border - postavljeni CSS interni i margine, kao i ivice za sve strane (gore, dolje, lijevo, desno)
Čemu služi CSS, kako povezati kaskadne tablice stilova Html dokument i osnove sintakse ovog jezika
Float i clear u CSS - alatima blok raspored
CSS - šta je to, kako su kaskadni stilovi povezani Html kod koristeći stil i vezu

Top srodni članci