Le të shkruajmë të njëjtën gjë tani Kodi HTML por me përdorimin e kontejnerëve, përveç kësaj, le të mos përafrim në qendër, por djathtas.

Siç mund ta shihni, gjithçka funksionon. Unë ju këshilloj të ndryshoni edhe vlerat e atributeve " rreshtoj"Për të parë llojet e tjera të shtrirjes së kontejnerëve.

Një mënyrë tjetër për të lidhur elementët HTML- këto janë tabela, por kjo temë meriton një diskutim më vete, kështu që ne do të flasim për të në një nga artikujt e mëposhtëm.

Deri atëherë, faqja juaj duhet të duket si kjo:

Titulli i nivelit 1, në qendër

Niveli 1 shkon djathtas

Përshëndetje, Mikhail Rusakov.

P.S. Nëse dëshironi të dini më shumë rreth HTML pastaj shiko timen kurs falas me një shembull të krijimit të një faqeje në HTML:

Përshëndetje të dashur lexues të faqes së blogut. Në këtë artikull, ne vazhdojmë të eksplorojmë bazat e stilimit Shënimi CSS dhe merrni parasysh vetitë vertikale-align, text-align, text-indent dhe disa të tjera, të dizajnuara për të stiluar tekstin html.

Përafrimi i tekstit me CSS

Le të fillojmë me atributet e stilit që kontrollojnë paraqitjen e tekstit në elementet e bllokut. Le të fillojmë me vetitë e rreshtimit të tekstit që në fakt është një zëvendësim atribut align(përdoret për të lidhur përmbajtjen e elementeve html si paragrafët p).

Prona e stilit rreshtimi i tekstit pyet shtrirje horizontale teksti dhe ka vetëm katër vlera të mundshme:

rreshtimi i tekstit: majtas | djathtas | qendër | justifiko

Vlerat e disponueshme për këtë rregull përcaktojnë shtrirjen, përkatësisht: majtas - majtas, djathtas - djathtas, qendër - në qendër dhe justifikojnë - në gjerësinë e faqes (njëkohësisht majtas dhe djathtas duke rritur distancën mes fjalëve). Për shembull, teksti në këtë artikull është rreshtuar me gjerësinë e faqes (nëse vëreni se ka kufij të barabartë majtas dhe djathtas) duke përdorur rregullin e rreshtimit të tekstit: justifikoni.

Si parazgjedhje, shtrirja horizontale është e rreshtuar majtas, kështu që nuk është e nevojshme të specifikohet në mënyrë specifike text-align: majtas, përveç nëse një rreshtim tjetër është specifikuar në elementet mëmë.

Shembuj të përdorimit të pronës:

p (drejtimi i tekstit: justifikoj)
h1 (drejtimi i tekstit: në qendër)

Vetia tjetër CSS tekst-ident pyet dhëmbëzimi për vijën e kuqe, për shembull për tekstin në etiketën e paragrafit f. Ky rregull, si tekst-align, zbatohet vetëm për elementët e bllokut. Sintaksë:

teksti-indent:<отступ>

Këtu lejohen vlerat absolute dhe relative të dhëmbëzimit. Vlerat absolute (px - pikselë, em, ex, etj.) Mund të specifikohen si me një shenjë plus ashtu edhe me një shenjë minus. Madhësia relative zakonisht jepet si përqindje (%). Vlera relative llogaritet nga gjerësia e zonës që është lënë mënjanë për tekstin. Pra, teksti i rregullit css: 50% do të vendosë vijën e kuqe të barabartë me gjysmën e gjatësisë së vetë kësaj rreshti. Si parazgjedhje, pika e "vijës së kuqe" është zero. Shembull:

p (identifikimi i tekstit: 10 px;)

Konsideroni tjetër shtrirje vertikale- pronë vertikal-drejtuar... Kjo veçori është tashmë e zbatueshme për të gjithë elementët html dhe për pothuajse të gjitha mjetet e përafrimi me njëri-tjetrin. elemente inline me tekst në lidhje me bazën e tyre. Me përjashtim të etiketave të tabelës td dhe th, në të cilat e gjithë përmbajtja do të përafrohet vertikalisht. Sintaksë:

rreshtim vertikal: bazë | nën | super | lart | tekst-lart | mes | poshtë | tekst-poshtë |<величина>

Le të shqyrtojmë secilën vlerë në më shumë detaje:

• bazë - përafrimi i një pjese të tekstit me vijën bazë elementi prind... Ky është standardi;
• nën - një pjesë e tekstit shfaqet si nënshkrim ose nënshkrim për elementin prind;
• super - një pjesë e tekstit shfaqet si një mbishkrim ose mbishkrim për elementin prind;
• lart - rreshton një pjesë të tekstit në skajin e sipërm të elementit prind;
• text-top - rreshton fragmentin në skajin e sipërm të tekstit të elementit prind;
• mes - shtrirja e qendrës së fragmentit të tekstit në qendër të elementit prind;
• fund - shtrirja e fragmentit të tekstit në skajin e poshtëm të elementit prind;
• text-bottom - shtrirja e fragmentit në skajin e poshtëm të tekstit të elementit prind;

Figura më poshtë tregon sjelljen e fragmenteve të provës për vlera të ndryshme të veçorisë vertikale të rreshtimit në Shfletuesi i internetit Explorer 11:

Përveç vlerave të mësipërme, mund të specifikoni vlerat numerike... Pra, rregulli CSS vertikal-align: 0 do të thotë njësoj si shënimi vertikal-align: baseline. Dhe rregulli i rreshtimit vertikal: 10 px do ta kompensojë tekstin 10 pikselë nga vija bazë. Për të zhvendosur tekstin poshtë, vlera duhet të specifikohet me një minus.

Mund të vendoset edhe ndërrimi njësi relative matje, për shembull në em dhe në ex ose si përqindje.

Për të lidhur vertikalisht përmbajtjen e qelizave të tabelës në rreshtim vertikal, përdorni vlerat e mëposhtme:

• lart - për të lidhur përmbajtjen në kufirin e sipërm të qelizës;
• fund - për të lidhur përmbajtjen në kufirin e poshtëm të qelizës;
• mes - për t'u lidhur në qendër të qelizës (përdoret si parazgjedhje).

Për arritje rezultatin e dëshiruar, zakonisht duhet të eksperimentosh kuptime të ndryshme vetitë e stilit vertikal-linjë. Të shumta vlerat e mundshme japin rezultate shumë të ndryshme në raste të ndryshme.

Opsionet e hapësirës së bardhë dhe të mbështjelljes së fjalëve për të kontrolluar ndërprerjet e rreshtave

Më pas është parametri i hapësirës së bardhë, i cili është përgjegjës për shfaqjen e karaktereve të hapësirës së bardhë në faqen html.

Siç e dimë, si parazgjedhje shfletuesi bashkon të gjitha karakteret e njëpasnjëshme të hapësirës së bardhë - hapësirat, ndërprerjet e rreshtave dhe skedat - në një hapësirë. Nje perjashtim etiketë

, teksti i vendosur në të shfaqet siç është, me të gjitha hapësirat.

Vetia e hapësirës së bardhë ka sintaksën e mëposhtme:
hapësirë ​​e bardhë: normale | para | mbështjellje | para-mbështjellje | rreshtim paraprak
Është e qartë se vlera normale përdoret si parazgjedhje dhe lë gjithçka siç përshkruhet më sipër, të gjitha hapësirat e njëpasnjëshme kombinohen në një dhe ndërprerjet e linjës vendosen automatikisht.
Duke përdorur një vlerë 
Do të jetë një analogji e plotë kur përdorni etiketën 
Shfletuesi do të japë faqen duke marrë parasysh të gjitha hapësira shtesë dhe viza lidhëse siç është shtuar nga zhvilluesi.  Nëse rreshti i tekstit rezulton të jetë shumë i gjatë, atëherë ai do të shtohet shirit horizontal rrotullimi.

Vlera nowrap parandalon shfletuesin nga mbështjellja e rreshtave dhe teksti shfaqet në një rresht të vetëm.  E vetmja gjë, shtimi i një etikete 
do të transferojë tekstin në linjë e re.
Vlera e para-mbështjelljes ruan të gjitha sekuencat e hapësirave dhe ndërprerjet e rreshtave, por nëse rreshti nuk përshtatet në zonën e specifikuar, shfletuesi automatikisht e mbështjell tekstin në një rresht të ri.
E pra, vlera e para-linjës konverton hapësirat në një hapësirë, furnizimet e rreshtave ruhen dhe shfletuesi mund të thyejë linjat që janë shumë të gjata për të shmangur lëvizjen horizontale.
Shembull përdorimi:
p (hapësira e bardhë: para;)
Konsideroni tjetër parametër word-wrap, i cili do t'ju tregojë nëse duhet të mbështillni ose jo fjalë të gjata që nuk përshtaten në zonën e specifikuar.  Kjo pronë nuk përdoret shpesh, por ndonjëherë nuk mund të bëni pa të:
fjalë-mbështjellje: normale | fjalë e thyer
Vlera normale i thotë shfletuesit të thyejë tekstin vetëm në hapësira, dhe kjo është sjellje normale e shfletuesit.  Dhe vlera e fjalës së thyer lejon shfletuesin të fusë ndërprerje rreshtash brenda fjalëve.  Shembull:
p (fjalë-mbështjellje: thyer-fjalë;)
Parametrat e hijes së tekstit - vetia tekst-hije
Për adhuruesit e zbukurimeve të ndryshme në standardin CSS3, u bë e mundur të vendosni një hije për tekstin.  Përdorimi i zgjuar i vetive text-shadow ju lejon të animoni dukshëm faqe interneti...  Sintaksë:
tekst-hije: asnjë |<цвет> <горизонтальное смещение> <вертикальное смещение> [<радиус размытия>]
Vlera asnjë anulon hijezimin e tekstit dhe vendoset si parazgjedhje.
Ngjyra e hijesështë vendosur në çdo format CSS të disponueshëm dhe nuk është parametri i kërkuar...  Si parazgjedhje, ngjyra e hijes është e njëjtë me ngjyrën e tekstit.
Kompensimi horizontal i hijes mund të specifikohet në çdo njësi matëse të mbështetur nga CSS.  Nëse vlera është pozitive, hija do të pozicionohet në të djathtë të tekstit, me negative - në të majtë. Vlera zero do të pozicionojë hijen drejtpërdrejt nën tekst dhe ka kuptim vetëm nëse hija është e paqartë.
Kompensimi vertikal i hijes gjithashtu mund të vendoset në çdo njësi matëse të mbështetur nga CSS.  Një vlerë pozitive do të lëvizë hijen poshtë tekstit; një vlerë negative do ta lëvizë atë mbi të.  Vlera zero do ta pozicionojë hijen direkt nën tekst.
Në çdo njësi matëse, dhe rrezja e turbullimit të hijes...  Sa më e lartë të jetë vlera, aq më e gjerë bëhet hija dhe aq më shumë zbutet.  Nëse ky parametër nuk është vendosur, atëherë supozohet vlera e turbullimit. e barabartë me zero...  Meqenëse algoritmi i zbutjes zakonisht ka shfletues të ndryshëmështë e ndryshme, pamja e hijes mund të ndryshojë pak në varësi të shfletuesit.
Le të shqyrtojmë një shembull:
p ( 
tekst-hije: e kuqe 1px 1px 2px; 
madhësia e shkronjave: 2em; 

}
Dhe kështu do të duket teksti i paragrafit p duke përdorur të këtij rregulli stil në Internet Explorer 11:

Kjo do të përfundojë artikullin.  Për të mësuar më shumë rreth veçorive të CSS, mos harroni të abonoheni në përditësimet e blogut dhe të lexoni artikujt në seksionin "".  Deri herën tjetër!
Përshkrim
 
Rreshton një bllok teksti në skaj.
Stilet duhet të përdoren në vend të këtij atributi
 
Sintaksë
 
vlerat
majtas Rreshton tekstin në të majtë.  Në këtë rast, linjat e tekstit janë rreshtuar në të majtë, dhe skaji i djathtë është "shkallë".  Kjo metodë e shtrirjes është më e popullarizuara në sajte, pasi i lejon përdoruesit të gjejë lehtësisht një rresht të ri me një shikim dhe të lexojë me lehtësi tekst të madh.  qendër Rreshton tekstin në qendër.  Teksti përqendrohet horizontalisht në dritaren e shfletuesit ose në kontejnerin ku bllok teksti...  Linjat e tekstit janë të lidhura së bashku në një bosht të padukshëm që shkon poshtë qendrës së faqes së internetit.  Një metodë e ngjashme rreshtimi përdoret në mënyrë aktive në tituj dhe tituj të ndryshëm, siç janë titrat e figurave, ajo i jep një pamje zyrtare dhe solide dizajnit të tekstit.  Në të gjitha rastet e tjera, shtrirja në qendër përdoret rrallë. arsyeja se është e papërshtatshme të lexosh një sasi të madhe teksti të tillë.  djathtas Rreshton tekstin djathtas.  Kjo metodë e shtrirjes vepron si një antagonist ndaj llojit të mëparshëm.  Domethënë, rreshtat e tekstit janë të rreshtuara djathtas, ndërsa e majta mbetet e "shqyer".  Për shkak të faktit se skaji i majtë nuk është i rreshtuar, domethënë, prej tij fillon leximi i rreshtave të rinj, një tekst i tillë është më i vështirë për t'u lexuar sesa nëse do të ishte i rreshtuar në të majtë.  Prandaj, justifikimi i drejtë zakonisht përdoret për tituj të shkurtër jo më shumë se tre rreshta.  Ne nuk marrim parasysh faqe specifike ku teksti duhet të lexohet nga e djathta në të majtë, është e mundur atje mënyrë të ngjashme shtrirjes dhe të vijnë në ndihmë.  Por ku keni parë faqe të tilla në vendin tonë?  justify Justification, që do të thotë justifikim majtas dhe djathtas në të njëjtën kohë.  Për të kryer këtë veprim, shfletuesi në këtë rast shton hapësira midis fjalëve. 
Vlera e paracaktuar
 
Shembull.  Rreshtimi i tekstit


 
 
 
 
 
 
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 tegue duis fecilore  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.
 

Shfletuesit: Desktop Mobile ?

Internet Explorer
krom
Opera
Safari
Firefox
1

1

1

1

1


Android
Firefox Mobile
Opera Mobile
Safari celular
1

1

6

1


✖

Shfletuesit
Konventat e mëposhtme përdoren në tabelën e shfletuesit.
- elementi mbështetet plotësisht nga shfletuesi;
- elementi nuk perceptohet nga shfletuesi dhe injorohet;
- gjatë funksionimit, shfaqja e gabime të ndryshme, ose artikulli mbështetet me paralajmërime.
Numri tregon versionin e shfletuesit nga i cili mbështetet elementi.
Pershendetje miq!  Sot do të flasim për etiketa e paragrafit dhe për atributin e shtrirjes...  Në përgjithësi, e gjithë përmbajtja në një faqe duhet të ndahet në paragrafë.  Përmbajtja e paragrafit shkruhet midis etiketave 
Teksti…
...  Kur shfaqim 2 paragrafë të njëpasnjëshëm, atëherë midis tyre krijohet një fushë e padukshme, e cila i largon nga njëri-tjetri.  Etiketa është bllok etiketë prandaj zënë të gjithë gjerësinë e faqes.

Për shembull, le të marrim një faqe me këtë kod:

 

 
 
 
 
 
 

 Paragrafi i parë: Lorem Ipsum është thjesht tekst bedel i industrisë së shtypjes dhe shtypjes.  Lorem Ipsum ka qenë teksti standard i industrisë që nga vitet 1500, kur një printer i panjohur mori një galeri të tipit dhe e përzjeu atë për të bërë një libër ekzemplar tipi.
 

 Paragrafi i dytë:Është një fakt i vërtetuar prej kohësh që një lexues do të shpërqendrohet nga përmbajtja e lexueshme e një faqeje kur shikon paraqitjen e saj.  Qëllimi i përdorimit të Lorem Ipsum është se ai ka një shpërndarje pak a shumë normale të shkronjave, në krahasim me përdorimin e "Përmbajtja këtu, përmbajtja këtu", duke e bërë atë të duket si anglisht e lexueshme.
 

Le të shohim se si duket ky rast në një shfletues:
 


Ju ndoshta keni vënë re se ka një etiketë në kodin e faqes e forte, kjo etiketë e bën tekstin të trashë.
Atributet e etiketimit
Për çdo etiketë, ju mund, në disa raste, madje duhet të specifikoni atributet.  Nëpërmjet atributit, ne i tregojmë shfletuesit saktësisht se si të shfaqë këtë ose atë element në faqe.
Atributi specifikohet brenda kllapave të etiketës hapëse dhe ka sintaksën e mëposhtme: emri_atributi = "vlera"
Atributi i shtrirjes
Për shembull, ne kemi një paragraf në një faqe dhe duam të rreshtojmë përmbajtjen e tij.  Për ta bërë këtë, ne shkruajmë atributin brenda etiketës hapëse rreshtoj, e cila është përgjegjëse për përafrimin e përmbajtjes brenda paragrafit dhe i jep një vlerë.
Përmbajtja e paragrafit.


Ky atribut ka 4 vlera:
Ka mbetur 1- Vendos përmbajtjen në të majtë.  Ky është standardi.  Kjo do të thotë, nëse nuk e specifikojmë atributin për paragrafin rreshtoj, atëherë përmbajtja brenda paragrafit është radhitur si parazgjedhje në të majtë.  Kjo mund të shihet në shembullin e mëparshëm.
2. E drejta- Vendos përmbajtjen në të djathtë.

 
Teksti…
Kështu duket në shfletues:
 

3.Qendra- Vendos përmbajtjen në qendër të faqes.

 
Teksti…
 

4.Justifikuar- Përafron përmbajtjen me gjerësinë e faqes.

 
Teksti…
 

Përmbledhja e mësimit: 
Sot mësuam se çfarë është paragraf në html.  Paragrafët përdoren shumë shpesh në html.  Mësuam gjithashtu se çfarë është atributi i etiketës.  Dhe mësoi atributin e shtrirjes rreshtoj. E cila mund të marrë një nga vlerat e mëposhtme: majtas (e parazgjedhur),drejtë,qendër,justifikoj.
Përshëndetje të dashur lexues të faqes së blogut.  Sot vazhdojmë të studiojmë dhe me radhë kemi veçoritë text-decoration, vertical-align, text-align, text-indent dhe një sërë të tjerash, të cilat ndihmojnë në dizajnimin e pamjes së teksteve në kodin Html.
Në artikullin e fundit, ne shikuam vetitë që synohen të konfigurohen pamjen fontet kur.
Epo, dhe edhe më herët, ne shqyrtuam të gjitha llojet në detaje, mësuam se si mund të grupohen dhe cilat përparësi vendos shfletuesi kur i interpreton ato.  Vërtetë, e gjithë kjo u nda në disa artikuj, kështu që për të mos u ngatërruar, ju këshilloj të studioni materialet në rendin e dhënë.
Dekorimi i tekstit, rreshtimi i tekstit, futja e tekstit në CSS
Si të punoni me tekst në Css?  Do të ishte logjike të supozohej se ka rregulla të hartuara posaçërisht për këtë qëllim.  Le të fillojmë me text-align, i cili në fakt është një zëvendësim për atributin align (ai është përdorur për të rreshtuar përmbajtjen si paragrafët P ose titujt).
Ka vetëm katër kuptime të mundshme:
Kuptimi mbetet i njëjtë si më parë. Përafrimi i tekstitËshtë shtrirja horizontale e vijave.  Ky rregull vlen vetëm për elementët e bllokut (paragrafët, titujt, etj.), d.m.th.  ato etiketa në të cilat mund të shfaqen disa rreshta.  Sepse  Meqenëse mund të ketë vetëm një element të linjës së rreshtit, nuk ka kuptim të veçantë në përdorimin e rreshtimit të tekstit në to.
Është e qartë se vlerat e këtij rregulli nënkuptojnë shtrirjen, përkatësisht: në të majtë (majtas), në të djathtë (djathtas), në qendër (në qendër) dhe në gjerësinë e faqes (Justify - njëkohësisht në të majtë dhe drejt duke rritur distancën midis fjalëve) ...  Vetëkuptohet që vlera Justify duhet të përdoret për elementë me të paktën disa rreshta teksti, përndryshe nuk do të ketë efekt të dukshëm nga kjo.
Për shembull, unë justifikova paragrafin e mëparshëm në gjerësi (mund ta shihni se ka kufij të barabartë në të majtë dhe në të djathtë) duke përdorur:
Text-align: justify;
Si parazgjedhje, teksti është rreshtuar horizontalisht në të majtë, d.m.th.  ju nuk keni nevojë të shkruani text-align: majtas posaçërisht, përveç nëse, sigurisht, keni specifikuar më parë një rreshtim tjetër.  Nga rruga, unë e rreshtova këtë paragraf në qendër (në qendër) përsëri për shembull ilustrues, por këtu, mendoj, gjithçka është e qartë.
Rregulli tjetër css tekst-indent ju lejon të vendosni vijën e kuqe, për shembull, për tekstin në etiketën e paragrafit P.
Nga cilat janë përqindjet e llogaritura në tekst-indent?  Nga gjerësia e zonës që është lënë mënjanë për tekstin.  ato.  Teksti i rregullit Css-indent: 50% do të vendosë vijën e kuqe të barabartë me gjysmën e gjatësisë së së njëjtës rresht.  Epo, ky paragraf është vetëm një shembull i një rregulli të tillë.
Ose, për shembull, mund të vendosni një vlerë negative për vijën e kuqe në tekst-indent, dhe më pas do të marrim afërsisht atë që shihni në këtë paragraf.  Për arritje të këtij rezultati Kam shkruar rregullin e mëposhtëm CSS për etiketën e paragrafit P:
Teksti-indent: -1em;
Epo dhe përdorim të përbashkët teksti-indent (për të vendosur një vijë standarde të kuqe) mund të duket kështu: tekst-indent: 40px;  (zbatohet me këtë paragraf).  Ky rregull, ashtu si rreshtimi i tekstit i diskutuar më parë, vlen vetëm për elementët e bllokut, d.m.th.  ku mund të shfaqen disa rreshta (paragrafë, tituj, etj.).
Pra, tani le të kalojmë në tekst-dekorim(dekorimi duke përdorur një vijë horizontale), e cila tashmë është aplikuar për të gjithë Elementi HTML m (si shkronjat e vogla ashtu edhe blloku).
Mund të ketë vetëm katër kuptime:
ato.  mund të përdoret me dekorimin e tekstit: mbivendosja, rreshtimi ose nënvizimi, ose mos përdorni fare.  Disa elementë HTML tashmë kanë stilin e paracaktuar vije horizontale për shembull (ato janë të nënvizuara si parazgjedhje).
Prandaj, të theksosh diçka tjetër me nënvizim (përveç hiperlidhjeve) nuk është mirë, sepse në subkoshiencën e përdoruesve shkruhet që pasi të nënvizohet (dhe të theksohet edhe me ngjyra), do të thotë se mund të klikosh mbi këtë për të shkuar.  Por, duke theksuar tekstin e zakonshëm me nënvizim, ju po mashtroni përdoruesin dhe zhgënjim pasues me burimin tuaj (mendoi ai, por doli që ...).
Nuanca në përdorimin e rregullit të dekorimit të tekstit Css është se ju mund të shkruani tre (ose dy) vlera në të njëjtën kohë për çdo element Html (duke mos hequr asnjë) dhe si rezultat do të merrni fragment teksti i nënvizuar-nënvizuar-strikethrough(tingëllon dhe duket bukur, apo jo?):
Dekorimi i tekstit: nënvizoni vijën e sipërme;
Vlerat për dekorim teksti(nëse doni të përdorni disa prej tyre në të njëjtën kohë) ju duhet të shkruani të ndara nga një karakter hapësinor.
Vertical-align - shtrirje vertikale
Tjetra kemi shtrirje vertikale - vertikale-align.  Pothuajse për të gjithë elementët në kodin Html, do të thotë përafrimi i elementeve inline me tekstin në lidhje me vijën e tyre bazë.  Vërtetë, për këtë do të thotë pak më ndryshe - e gjithë përmbajtja që është në këto qeliza do të rreshtohet vertikalisht.
Për Css, rregulli i rreshtimit vertikal mund të përdorë vlerat e mëposhtme:
Rreshtat janë radhitur me bazën si parazgjedhje.  Shiko, unë aplikova në këtë pjesë të tekstit rrisni fontin dhe këto dy pjesë janë të lidhura me vijën bazë (të poshtme).  Dhe rreshtimi vertikal me vertikal-align synon saktësisht të ndryshojë mënyrën e rreshtimit të linjave.
Për shembull, nëse shkruaj vertical-align: baseline për të njëjtën pjesë të zmadhuar të tekstit, atëherë nuk do të ndodhin ndryshime, pasi  vlera bazë përdoret për këtë rregull të paracaktuar css.
Nga rruga, numrat mund të përdoren si vlera për të, dhe mbishkrimi vertikal-align: 0 do të thotë njësoj si vertikal-align: bazë, d.m.th.  vlera bazë është e barabartë me zero.  Prandaj, nëse duam të tregojmë ndonjë zhvendosje në shtrirjen vertikale, atëherë kjo zhvendosje do të tregohet në lidhje me vijën bazë (ose zero).
Ju mund të shkruani kështu:
Rreshtim vertikal: 10 px;
Dhe ne marrim zhvendosja e fragmentit me fontin e zmadhuar lart 10 piksele nga vija bazë.  Nëse shkruajmë një vlerë negative:
Align vertikal: -10px;
Pastaj marrim duke lëvizur fragmentin poshtë në lidhje me bazën.  Shembujt tregojnë se për shkak të zhvendosjes, lartësia e rreshtit është rritur në mënyrë që teksti të përshtatet në të pa u përplasur me rreshtin ngjitur.  Zhvendosja gjithashtu mund të vendoset në Em dhe Ex, mirë, dhe si përqindje, e cila do të llogaritet nga lartësia e linjës së këtij elementi (kujtoni në artikullin e fundit që mësuam se si ta vendosim duke përdorur).
Për të rreshtuar vertikalisht përmbajtjen e qelizave të tabelës në rreshtim vertikal, duhet të përdorni vlerat e sipërme dhe të poshtme për të vendosur përmbajtjen në linjën e sipërme dhe të poshtme të qelizës, përkatësisht (epo, mesi në një qelizë tabele përdoret si vlera e paracaktuar e shtrirjes vertikale).
Dhe për elementet e fontit, mund të përdorni tekst-lart, tekst-fund, mes.  Le të aplikojmë për shembull për këtë pjesë të tekstit kuptimi:
Vertical-align: mes;
Çfarë ndodhi si rezultat?  Vija e mesme e fragmentit të zmadhuar është në linjë me vijën bazë të tekstit normal, d.m.th.  kemi marrë një shtrirje vertikale të vijës qendrore.  Për tekstin-lart dhe tekst-fund, gjithçka do të jetë e njëjtë.  Ky është teksti në krye, dhe po ashtu është teksti i poshtëm.
Vlerat Css të veçorisë nën dhe super të rreshtimit vertikal korrespondojnë me nënshkrimin dhe mbishkrimin që ka ndodhur në html i pastër(përpara duke përdorur CSS vetitë për dizajnin vizual).
Transformimi i tekstit, hapësira e shkronjave, hapësira e fjalëve dhe hapësira e bardhë
Asnjë nuk përdoret si parazgjedhje dhe do të thotë që karakteret në tekst nuk do të ndryshojnë në asnjë mënyrë - siç është shkruar në Html, ato do të shfaqen.  Vlera e shkronjave të mëdha për transformimin e tekstit do t'i transformojë të gjitha shkronjat në fragment në shkronja të mëdha ( një shembull është treguar në këtë fjali ku është përdorur rregulli tekst-transformim: shkronja të mëdha dhe shkronjat fillimisht janë shkruar me shkronja të vogla).
Vlera e vogël për rregullin e transformimit të tekstit Css do t'ju lejojë të transformoni të gjitha karakteret në fragment në shkronja të vogla, mirë, dhe vlera e kapitalizimit do t'i bëjë të gjitha shkronjat e para të fjalës të mëdha ( shembull në këtë fjali- teksti-transformoj: shkronja kapitale).  ato.  duke përdorur transformimin e tekstit mund të bëni gjithçka Teksti i thjeshtë, dhe më pas ktheni lehtësisht gjithçka.
Prandaj, nëse, për shembull, keni një detyrë që të shkruani vetëm të gjitha titujt me shkronja të mëdha, pastaj në Html shkruajini ato zakonisht dhe bëjini të shkruhen me shkronja të mëdha në CSS duke përdorur text-transform: shkronja të mëdha.  Pastaj, nëse vendosni të ndryshoni diçka, atëherë mjafton të bëni vetëm një ndryshim të vogël në stilet, dhe jo në përmbajtjen e të gjitha 100,500 titujve në faqen tuaj.
Si parazgjedhje, si hapësira e shkronjave ashtu edhe hapësira e fjalëve janë vendosur në Normal, ose kjo është e njëjtë me zero (d.m.th. distanca midis karaktereve dhe fjalëve nuk ndryshon në asnjë mënyrë).  Madhësia e ndryshimit të distancës në këto rregulla mund të tregohet vetëm në piksel, qoftë Em ose Ex, por jo në përqindje.
Sidoqoftë, mund të përdorni si pozitive (rrallim karakteresh ose fjalësh) dhe vlerat negative(konvergjenca e simboleve ose fjalëve).  Për shembull, ju mundeni "Kjo për të rralluar personazhet në këtë frazë" nëpërmjet css tjetër rregulloret:
Hapësira e shkronjave: 0.4em;
Ose mundeni "Kjo për të bashkuar personazhet në këtë frazë" nëpërmjet:
Hapësira e shkronjave: -1px;
E njëjta gjë mund të thuhet për ndarjen e fjalëve me ndryshimin e vetëm që distanca do të ndryshojë midis fjalëve, si, për shembull, në këtë frazë, me ndihmën e këtij konstruksioni CSS:
Hapësira e fjalëve: 4em;
Në mënyrë të ngjashme, vlerat negative mund të përdoren në ndarjen e fjalëve për të ulur distancën midis fjalëve.
Epo, dhe rregulli i fundit Css për sot, i cili ju lejon të stiloni tekstin në një mënyrë të caktuar në kodin Html, është hapesire e bardhe...  Ai është përgjegjës për shfaqjen e karaktereve të hapësirës së bardhë në faqen e internetit, e cila u zhvillua kur duke shkruar html kodi.
Siç e mbani mend nga artikulli rreth, shfletuesi, kur analizon kodin, kombinon të gjitha hapësirat, ndërprerjet e rreshtave dhe skedat në një hapësirë ​​të vetme dhe kryen ndërprerje të rreshtave në faqen e internetit saktësisht nga karaktere të hapësirës së bardhë që ka ndodhur në kod.
Pra, hapësira e bardhë mund të marrë një nga tre vlerat:
Është e qartë se vlera e paracaktuar është Normale, dhe në këtë rast gjithçka shfaqet siç përshkrova më lart.  Por kur përdorim vlerën Pre, marrim një analogji të plotë me përdorimin, d.m.th.  në faqen e internetit, teksti do të shfaqet me të gjitha ato karaktere shtesë të hapësirës së bardhë që ndodhën gjatë shkrimit të kodit dhe shfletuesi nuk do të jetë në gjendje të bëjë transferime në to.
Epo, dhe kuptimi rrep thjesht do të parandalojë që shfletuesi të mbështillet në hapësirën e bardhë që gjen brenda një hapësire të bardhë: fragment CSS nowrap.  Ju gjithashtu mund të provoni se si funksionon gjithçka duke krijuar një skedar të thjeshtë Html dhe duke mbyllur çdo pjesë të tekstit në etiketa të tilla:
 
fragment i tekstit të testit
 
Paç fat!  Shihemi së shpejti në faqet e faqes së blogut
mund të shikoni më shumë video duke shkuar te
");">
Ju mund të jeni të interesuar
Stili i listës (lloji, imazhi, pozicioni) - Rregullat Css për personalizimin e paraqitjes së listave në kodin Html 
Pozicionimi me Z-indeks dhe CSS Rregulli i kursorit për të ndryshuar kursorin e miut 
Mbushje, Margjina dhe Kufiri - vendosen CSS e brendshme dhe kufijtë, si dhe kufijtë për të gjitha anët (lart, poshtë, majtas, djathtas) 
Për çfarë është CSS, si të lidhni fletët e stilit kaskadë me Dokumenti HTML dhe bazat e sintaksës së kësaj gjuhe 
Fluturoni dhe pastroni në CSS - mjetet faqosja e bllokut
 
CSS - çfarë është, si lidhen fletët e stilit kaskadë Kodi HTML duke përdorur Style dhe Link