Kako postaviti pametne telefone i računala. Informativni portal
  • Dom
  • Windows 10
  • Atribut align html oznake definira. CSS svojstva za ukrašavanje HTML teksta (okomito poravnanje, poravnanje teksta, uvlačenje teksta i ostalo)

Atribut align html oznake definira. CSS svojstva za ukrašavanje HTML teksta (okomito poravnanje, poravnanje teksta, uvlačenje teksta i ostalo)

Do sada smo samo poravnavali elemente ulijevo. Točnije, mi to uopće nismo napravili, a sam preglednik prema zadanim postavkama poravnava elemente ulijevo. Naravno, bilo bi predosadno sve poravnati ulijevo. Stoga postoje razne načine središnje i desno poravnanje.

Poravnavanje elemenata je nešto što jednostavno trebate znati kada. Prvo što trebate učiniti je upisati najjednostavniju stranicu.

Bila jednom jedna oznaka

Ne savjetujem vam da ga sada koristite, zbog prisutnosti više moderne načine ali ne mogu ne spomenuti. Korištenje je vrlo, vrlo jednostavno. Sve što vam je potrebno za centriranje, stavite unutar ove oznake. Ovdje, na primjer, ovdje poravnavamo naslov 1. razine u sredini.



Možete dodati i sliku centriranu, idemo i na sljedeći redak koristeći oznaku
:


Naslov 1. razine centriran




Bila je to oznaka

, koji je već zastario, osim toga, suprotno vašim očekivanjima od oznaka i jednostavno ne postoji. Recimo da je prema zadanim postavkama poravnato lijevo, centrirano pomoću oznake
, ali što je s onim pravim?

Kako bi riješili ovaj problem, programeri su smislili univerzalni način poravnanje elemenata HTML. Metoda je korištenje takozvanih spremnika, koji se stvaraju pomoću oznake

. Odnosno, sve što treba staviti u određeni spremnik nalazi se unutar oznake
. I ova oznaka već ima atribut " uskladiti", čija vrijednost određuje položaj ovog spremnika. Postoje tri vrijednosti: " lijevo", "centar", "pravo". Zadana vrijednost je " lijevo Međutim, mislim da vas to ne čudi.

Zapišimo sada isto HTML kôd, ali uz korištenje spremnika, osim toga, nemojmo se poravnati u središte, već udesno.





Kao što vidite, sve radi. Savjetujem vam da također promijenite vrijednost atributa " uskladiti" kako biste pogledali druge vrste usklađivanja sadržaja spremnika.

Još jedan način za poravnavanje elemenata HTML- ovo su tablice, ali ova tema zaslužuje posebnu raspravu, pa ćemo o njoj govoriti u nekom od sljedećih članaka.

Za sada bi vaša stranica trebala izgledati ovako:






Naslov 1. razine centriran






Naslov razine 1, poravnat udesno






S poštovanjem, Mikhail Rusakov.

p.s. Ako želite saznati više o HTML onda pogledaj moju besplatni tečaj s primjerom izrade stranice na HTML:

Pozdrav, dragi čitatelji bloga. 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.

Poravnanje teksta pomoću CSS-a

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

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, odnosno: lijevo - lijevo, desno - desno, središte - središte i poravnanje - prema širini stranice (lijevo i desno istodobno povećanjem udaljenost između riječi). Na primjer, tekst ovog članka poravnat je prema širini stranice (ako primijetite da ima jednake obrube i s lijeve i s desne strane) pomoću pravila text-align:justify.

Prema zadanim postavkama, horizontalno poravnanje je lijevo, tako da ne morate posebno navesti text-align:left osim ako nije navedeno drugo poravnanje na nadređenim elementima.

Primjeri korištenja imovine:

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

Sljedeće CSS svojstvo tekst-ident postavlja uvlaka za crvenu liniju, na primjer za tekst u oznaci odlomka p. Ovo pravilo, kao i poravnanje 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 navodi kao postotak (%). Relativna vrijednost izračunava se iz širine područja koje je rezervirano za tekst. Dakle, css pravilo text-indent:50% postavit će crvenu liniju jednaku polovici duljine ove linije. Prema zadanim postavkama, uvlaka "crvene linije" je nula. Primjer:

p ( text-ident: 10px; )

Zatim, razmislite okomito poravnanje- vlasništvo okomito poravnati. Ovo svojstvo je već primjenjivo za sve html elemente i za gotovo sva međusobna usklađivanja sredstava 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 svaku vrijednost detaljnije:

  • osnovna linija - poravnanje dijela 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 - tekstni fragment se prikazuje kao superskript ili superskript za nadređeni element;
  • vrh - poravnanje fragmenta teksta na gornji rub 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;
  • dno - poravnanje fragmenta teksta na donji rub nadređenog elementa;
  • text-bottom - poravnajte fragment na donji rub teksta nadređenog elementa;

Na donjoj slici možete vidjeti ponašanje testnih fragmenata s različitim vrijednostima svojstva vertikalnog poravnanja Internet preglednik Istraživač 11:

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

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

Za okomito poravnavanje sadržaja ćelija tablice u vertical-align, trebali biste koristiti sljedeće vrijednosti:

  • vrh - za poravnavanje sadržaja s gornjom granicom ćelije;
  • bottom - 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 okomitog poravnanja. Brojni moguće vrijednosti daju vrlo različite rezultate u različitim slučajevima.

Mogućnosti razmaka i prijeloma riječi koje kontroliraju prijelome redaka

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

Kao što znamo, preglednik prema zadanim postavkama kombinira sve uzastopne razmake: razmake, prijelome redaka i tabulatore u jedan razmak. 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.

Upotreba vrijednosti

Bit će potpuna analogija pri primjeni oznake 
Preglednik će prikazati stranicu s obzirom na sve dodatni prostori i crtice kako ih je dodao programer.  Ako je redak teksta predug, 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
premjestit će tekst na nova linija.

Vrijednost prethodnog 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 reci su sačuvani, a preglednik može prekinuti retke koji su predugi kako bi izbjegao horizontalno pomicanje.

Primjer upotrebe:

p (razmak: pre;)

Zatim, razmislite parametar prelamanja riječi, koji vam omogućuje da odredite želite li ili ne prelamati duge riječi koje ne stanu u navedeno 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 se tekst može prekidati samo na razmake, a to je normalno ponašanje preglednika. A vrijednost break-word pregledniku omogućuje umetanje prijeloma redaka unutar riječi. Primjer:

p ( prelom riječi: prijelomna riječ; )

Opcije sjene teksta - svojstvo sjene teksta

Za ljubitelje raznih ukrasa u standardu CSS3 postalo je moguće postaviti sjenu za tekst. Ispravno korištenje svojstva sjene teksta omogućuje vam da zamjetno oživite web stranica. Sintaksa:

tekst-sjena: 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 obvezni parametar. Prema zadanim postavkama, boja sjene 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 postavljena desno od teksta, s negativnim - lijevo. Nulta vrijednost postavit će sjenu točno ispod teksta i ima smisla samo ako je postavljeno zamućenje sjene.

Vertikalni pomak sjene također se može postaviti u bilo kojoj podržanoj CSS jedinici. Pozitivna vrijednost će pomaknuti sjenu ispod teksta, negativna vrijednost će je pomaknuti više. Vrijednost nula postavit će sjenu izravno ispod teksta.

U bilo kojoj mjernoj jedinici, i polumjer 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 izglađivanja obično ima različitim preglednicima je drugačiji, izgled sjene može se malo razlikovati ovisno o pregledniku.

Razmotrite primjer:

p(
tekst-sjena: crvena 1px 1px 2px
veličina fonta: 2em
}

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

Ovdje ću završiti članak. Da biste saznali više o CSS svojstvima, ne zaboravite se pretplatiti na ažuriranja bloga i pročitati članke iz odjeljka "". Vidimo se uskoro!

Opis

Poravnava blok teksta s rubom.

Umjesto ovog atributa moraju se koristiti stilovi

Sintaksa

Vrijednosti

lijevo Poravnava tekst ulijevo. U ovom slučaju, linije teksta su poravnate ulijevo, a desni rub se nalazi u "ljestvici". Ova metoda poravnanja najpopularnija je na web stranicama jer korisniku omogućuje jednostavno traženje novog retka i udobno čitanje velikog teksta. center Poravnava tekst prema sredini. Tekst se postavlja vodoravno u prozor preglednika ili spremnik u kojem se nalazi. blok teksta. Čini se da su redovi teksta nanizani na nevidljivu os koja prolazi središtem web stranice. Slična metoda poravnanja aktivno se koristi u naslovima i raznim natpisima, poput naslova, daje službeni i solidan izgled dizajnu teksta. U svim drugim slučajevima, središnje poravnanje se rijetko koristi taj razlog da je nezgodno čitati veliku količinu takvog teksta. desno Poravnava tekst udesno. Ova metoda usklađivanja djeluje kao antagonist prethodnoj vrsti. Naime, redovi teksta su poravnati udesno, dok lijevi ostaju "raščupani". Budući da lijevi rub nije poravnat, odnosno s kojeg se čitaju novi reci, takav je tekst teže čitljiv nego da je poravnat lijevo. Stoga se desno poravnanje obično koristi za kratke naslove od ne više od tri retka. Ne razmatramo specifične stranice na kojima se tekst mora čitati s desna na lijevo, tamo je to moguće sličan način usklađivanje će dobro doći. Ali gdje ste kod nas vidjeli takve stranice. justify Justify, što znači lijevo i desno poravnati 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

Oznaka P, 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 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 ExplorerKromOperasafariFirefox
1 1 1 1 1
AndroidFirefox MobileOpera MobileSafari Mobile
1 1 6 1

Preglednici

U tablici preglednika koristi se sljedeća oznaka.

  • - element u potpunosti podržava preglednik;
  • - preglednik ne percipira element i zanemaruje ga;
  • - može se pojaviti tijekom rada razne greške, ili je element podržan s rezervom.

Broj označava verziju preglednika iz kojeg je element podržan.

Pozdrav Prijatelji! Danas ćemo razgovarati o oznaku 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 pa zauzimaju cijelu širinu stranice.

Na primjer, uzmimo stranicu sa sljedećim kodom:

Stranica s paragrafima.

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 odvući pažnju čitljiv sadržaj stranice kada gleda njezin izgled. Smisao korištenja Lorem Ipsuma je da ima više-manje normalnu raspodjelu slova, za razliku od upotrebe "Sadržaj ovdje, sadržaj ovdje", što čini da izgleda kao čitljiv engleski.

Pogledajmo kako ovaj slučaj izgleda u pregledniku:


Vjerojatno ste primijetili da u kodu stranice postoji oznaka jak, ova oznaka podebljava tekst.

Atributi oznake

Za svaku oznaku možete, u nekim slučajevima čak i trebate navesti atribute. Preko atributa govorimo pregledniku točno kako prikazati ovaj ili onaj element na stranici.

Atribut je naveden unutar zagrada uvodne 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 je sadržaj unutar odlomka prema zadanim postavkama poravnat ulijevo. To se može vidjeti u prethodnom primjeru.

2.U pravu– 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 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 (zadano)pravo,centar,opravdati.

Pozdrav, dragi čitatelji bloga. Danas nastavljamo proučavati i sljedeći smo na redu sa svojstvima text-decoration, vertical-align, text-align, text-indent i brojnim drugima koji pomažu u oblikovanju izgleda teksta u Html kodu.

U prošlom smo članku pogledali svojstva koja se namjeravaju konfigurirati izgled fontovi na .

Pa, još ranije smo detaljno ispitali sve vrste, naučili kako se mogu grupirati i koje prioritete preglednik postavlja kada ih tumači. Istina, sve je to podijeljeno u nekoliko članaka, pa kako 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? Bilo bi logično pretpostaviti da za tu svrhu postoje posebno izrađena pravila. Počnimo s text-alignom, koji je zapravo zamjena za atribut align (koristio se za poravnavanje sadržaja poput P odlomaka ili naslova).

Ima samo četiri moguće vrijednosti:

Značenje ostaje isto kao i prije. poravnati tekst je horizontalno poravnanje linija. Ovo se pravilo odnosi samo na blok elemente (odlomke, naslove itd.), tj. one oznake u kojima se može pojaviti više redaka. Jer može postojati samo jedan redak u inline elementima, tada nema posebne svrhe koristiti text-align u njima.

Jasno je da vrijednosti ovog pravila znače poravnanje, redom: lijevo (lijevo), desno (desno), središte (središte) i širinu stranice (Opravdanje - i lijevo i desno povećanjem udaljenosti između riječi) . Podrazumijeva se da vrijednost Justify treba koristiti za elemente s barem nekoliko redaka teksta, inače neće biti vidljivog učinka od ovoga.

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

tekst-align:justify;

Prema zadanim postavkama, tekst je vodoravno poravnat ulijevo, tj. Ne morate posebno pisati text-align:left, osim ako, naravno, prethodno niste odredili drugačije poravnanje. Usput, ponovno sam poravnao ovaj odlomak u središte (centar). dobar primjer, ali ovdje je, mislim, sve jasno.

Sljedeće css pravilo uvlaka teksta omogućuje vam postavljanje crvene linije, na primjer, za tekst u oznaci odlomka P. Uvlaka crvene linije može se postaviti određivanjem vrijednosti (i sa znakom plus i sa znakom minus, koristeći ) ili korištenjem postotka :

Koji su postoci iz uvlake teksta? Od širine prostora koji je rezerviran za tekst. Oni. CSS pravilo text-indent:50% postavit će crvenu liniju na polovicu duljine te linije. Pa, ovaj paragraf je samo primjer takvog pravila.

I možete, na primjer, postaviti negativnu vrijednost za crvenu liniju u uvlaci teksta i tada ćemo dobiti nešto poput onoga što vidite u ovom paragrafu. Za postignuće dati rezultat Napisao sam sljedeće CSS pravilo za P oznaku paragrafa:

uvlaka teksta:-1em;

Dobro i uobičajena uporaba text-indent (za postavljanje standardne crvene linije) može izgledati ovako: text-indent:40px; (usput, primijenjeno na ovaj odlomak). Ovo pravilo, poput poravnanja teksta o kojem je ranije bilo riječi, odnosi se samo na blok elemente, tj. gdje se može pojaviti više redaka (odlomci, naslovi itd.).

Dakle, prijeđimo na tekst-ukras(ukras vodoravnom crtom), koji se već primjenjuje na sve html element m (i mala slova i blok).

Može imati samo četiri značenja:

Oni. može se koristiti s tekstualnim ukrasom: prekocrtati (precrtati), precrtati (line-through) ili podcrtati (podcrtati), dobro, ili ne koristiti ništa (ništa). Neki Html elementi već imaju zadani stil vodoravna crta, na primjer (podvučeni su prema zadanim postavkama).

Dakle, isticanje nečeg drugog podcrtanim (osim hiperlinkova) nije dobro, jer korisnici imaju podsvjesni zapis da nakon što je podcrtano (i također označeno bojom), onda možete kliknuti na to i otići. Ali podcrtavanjem običnog teksta dovodite korisnika u zabludu i kasnije razočaranje svojim resursom (on je to mislio, ali pokazalo se ...).

Nijansa u korištenju Css pravila ukrašavanja teksta je u tome što će biti moguće napisati tri (ili dvije) vrijednosti odjednom za bilo koji Html element (ne izostavljajući nijednu) i kao rezultat ćete dobiti podcrtaj-podcrtaj-precrtaj dio teksta(zvuči i izgleda cool, zar ne?):

Dekoracija teksta: podcrtano nadcrtano kroz liniju;

Vrijednosti za ukras teksta(ako želite koristiti nekoliko njih odjednom) morate napisati kroz prostorni lik.

Vertical-align - okomito poravnanje

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

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

Redovi su prema zadanim postavkama poravnati s osnovnom linijom. Vidi, prijavio sam se ovom dijelu teksta povećajte font a ova dva fragmenta su poredana na osnovnoj (donjoj) liniji. A okomito poravnavanje s okomitim poravnavanjem služi samo za promjenu načina 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 koristi se za ovo zadano Css pravilo.

Usput, brojevi se također mogu koristiti kao vrijednosti za to, a vertical-align:0 će značiti isto što i vertical-align:baseline, tj. vrijednost osnovne linije je ekvivalentna nuli. Stoga, ako želimo navesti bilo koji pomak u okomitom poravnanju, tada će taj pomak biti naznačen u odnosu na osnovnu liniju (ili nulu).

Možete napisati ovako:

okomito poravnanje:10px;

I dobivamo pomaknite fragment s uvećanim fontom prema gore 10 piksela od osnovne linije. Ako napišemo negativnu vrijednost:

okomito poravnanje:-10px;

Onda dobivamo pomaknuti fragment prema dolje u odnosu na osnovnu liniju. Iz primjera je vidljivo da se zbog pomaka visina retka povećala tako da tekst stane u njega bez sudara sa susjednim retkom. Pomak se također može postaviti u Em i Ex, dobro, kao postotak, koji će se izračunati iz visine linije ovog elementa (zapamtite, u prošlom smo članku naučili kako ga postaviti pomoću ).

Za okomito poravnavanje sadržaja ćelija tablice u vertikalnom poravnanju, upotrijebite vrijednosti Top i Bottom da biste dobili vrh odnosno dno ćelije (dobro, sredina u ćeliji tablice koristi se kao zadana vrijednost okomitog poravnanja).

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

okomito poravnanje:sredina;

Što se dogodilo kao rezultat? Srednji red uvećanog fragmenta poravnat je uz osnovnu liniju čistog teksta, tj. dobili smo okomito poravnanje na srednjoj liniji. Za text-top i text-bottom sve će biti isto. Kao text-top i kao text-bottom.

Css vrijednosti pod- i super svojstava vertikalnog poravnanja odgovaraju pod- i superindeksu koji su se dogodili u čisti HTML(prije Upotreba CSS-a svojstva za vizualni dizajn).

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

None se koristi prema zadanim postavkama i znači da se znakovi u tekstu neće mijenjati ni na koji način - kako su napisani u Html-u, bit će prikazani. Vrijednost Uppercase za tekstualnu transformaciju transformirat će sva slova fragmenta u velika slova ( primjer je prikazan u ovoj rečenici, gdje je korišteno pravilo text-transform:uppercase, a slova su izvorno pisana malim slovima).

Vrijednost malih slova za Css pravilo transformacije teksta omogućit će vam transformaciju svih znakova fragmenta u mala slova, pa, vrijednost velikih slova će učiniti da sva prva slova riječi budu velika ( primjer u ovoj rečenici- tekst-transformacija: kapitaliziraj). Oni. s text-transformom možete raditi bilo što čisti tekst, a zatim lako sve vratiti natrag.

Stoga, ako npr. imate zadatak da sva zaglavlja budu samo napisana velika slova, a zatim ih napišite normalno u Html, a već u CSS-u učinite ih velikim slovima putem text-transform: uppercase. Zatim, ako odlučite nešto promijeniti, dovoljno je napraviti samo malu promjenu u stilovima, a ne u sadržaju svih 100.500 naslova na vašoj stranici.

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

Međutim, možete koristiti i pozitivne (rijetke simbole ili riječi) i negativne vrijednosti(konvergencija simbola ili riječi). Na primjer, možete "ovako, razrijedi znakove u ovoj frazi" pomoću sljedeći css propisi:

Razmak između slova:0,4em;

Ili je moguće "Ovo je kako spojiti likove u ovoj frazi" pomoću:

Razmak između slova:-1px;

Isto se može reći i za razmak riječi s jednom razlikom, da će se u ovom slučaju udaljenost promijeniti već između riječi, kao npr. u ovom izrazu uz pomoć takve CSS konstrukcije:

Razmak između riječi:4em;

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

Pa, posljednje Css pravilo za danas, koje vam omogućuje stiliziranje teksta u Html kodu na određeni način, je bijeli prostor. Odgovoran je za prikaz razmaka na web stranici koja se dogodila kada pisanje HTML-a kodirati.

Kao što se sjećate iz članka o tome, preglednik, prilikom raščlambe koda, kombinira sve razmake, prijelome retka i kartice u jedan razmak i prelama retke na web stranici točno prema znakovi razmaka koji se dogodio u kodu.

Dakle, razmak može imati jednu od tri vrijednosti:

Jasno je da je zadana vrijednost Normalno iu ovom slučaju sve se prikazuje kao što sam gore opisao. Ali kada koristimo vrijednost Pre, dobivamo potpunu analogiju s korištenjem, tj. na web stranici, tekst će biti prikazan sa svim onim dodatnim razmacima koji su se pojavili prilikom pisanja koda i preglednik ih neće moći staviti crticom.

Pa, značenje Nowrap jednostavno spriječi preglednik da prelomi na razmake koje pronađe unutar fragmenta s white-space:nowrap CSS pravilom. Možete sami isprobati kako to sve funkcionira tako da izradite jednostavnu Html datoteku i uključite bilo koji dio teksta u slične oznake:

fragment testnog teksta

Sretno ti! Vidimo se uskoro na stranicama bloga

Više videa možete pogledati ako odete na
");">

Možda će vas zanimati

Stil popisa (vrsta, slika, položaj) - Css pravila za prilagodbu izgleda popisa u Html kodu
Pozicioniranje sa Z-indexom i CSS-om Pravilo kursora za promjenu pokazivača miša
Ispuna, margina i obrub - postavljeni css interni i margine, kao i granice za sve strane (gore, dolje, lijevo, desno)
Čemu služi CSS, kako povezati kaskadne stilske listove html dokument i osnovna sintaksa ovog jezika
Float i clear u CSS - alatima raspored blokova
CSS - što je to, kako su povezani kaskadni stilski listovi html kod sa stilom i vezom

Najpopularniji povezani članci