Si të konfiguroni telefonat inteligjentë dhe PC. Portali informativ

Bazat e CSS. Shtrirja e shkronjave dhe hapësirat

Në programe të tilla si, për shembull, Microsoft Word, ndoshta keni hasur në mjete horizontale të shtrirjes së tekstit. Mund ta rreshtoni tekstin majtas ose djathtas, në qendër ose të justifikuar. E njëjta gjë është e vërtetë në CSS - rreshtimi i tekstit bëhet duke përdorur veçorinë text-align dhe vlerat përkatëse, të cilat tregohen në tabelë:

Shembull i hyrjes së stilit:

P (lidhja e tekstit: majtas;)

vlerat majtas, djathtas dhe qendrore Teksti i rreshtuar majtas pothuajse gjithmonë duket i mirë në faqet e internetit dhe është i lehtë për t'u lexuar. Rreshtimi djathtas në gjuhët evropiane, si rregull, përdoret rrallë, por nuk mund të quhet plotësisht i padobishëm: ky stil është i dobishëm për hartimin e bukur të titrave për fotot ose citimet, përafrimin e përmbajtjes së qelizave të tabelës ose fragmenteve të vogla të tekstit. Qendra përdoret shpesh për të njëjtin qëllim. Vlera e justifikuar justifikimi i tekstit CSS (justify) mund të përdoret për versionet e printuara të faqeve, por nuk rekomandohet të tërhiqeni me këtë stil në faqet e internetit të krijuara për t'u parë në një monitor. Pse? Në pamje të parë, teksti i justifikuar duket i bukur dhe i barabartë, si një kolonë në një gazetë. Por për ta shtrirë tekstin në këtë mënyrë, shfletuesi duhet të shtojë hapësirë ​​shtesë midis fjalëve, gjë që mund të rezultojë në boshllëqe të shëmtuara në tekst që e bëjnë të vështirë leximin. Në programet e krijuara për të përgatitur të dhëna për printim, ka një rregullim shumë më të mirë të intervaleve në tekst dhe shpesh përdoret mbështjellja e fjalëve, gjë që nuk është në shumë shfletues. Prandaj, është e nevojshme të kontrolloni se si duket teksti i justifikuar në faqet e internetit dhe para së gjithash t'i bëni vetes pyetjen: a është e lehtë për t'u lexuar? Kjo është veçanërisht e vërtetë për blloqet e ngushta të tekstit (përfshirë versionet celulare të faqeve). Vlerat e fillimit dhe të përfundimit Vlerat e fillimit dhe të fundit për veçorinë e rreshtimit të tekstit zbatohen në CSS3 dhe funksionojnë pothuajse njësoj si majtas dhe djathtas, por ka një ndryshim. Duke aplikuar vlerën fillestare për tekstin që shkon nga e majta në të djathtë (LTR - nga e majta në të djathtë), rreshtimi do të lihet (përkatësisht, për tekstin që shkon nga e djathta në të majtë (RTL - nga e djathta në të majtë), shtrirja do të jetë e drejtë). Logjikisht, vlera e përfundimit funksionon në mënyrë të kundërt (d.m.th., rreshton tekstin LTR djathtas dhe rreshton tekstin RTL majtas). Këto dy vlera nuk mbështeten nga disa shfletues, duke përfshirë Internet Explorer, kështu që nëse nuk është absolutisht e nevojshme, ne rekomandojmë përdorimin e vlerave majtas dhe djathtas.

Pamjet e ekranit tregojnë shembuj të përdorimit të vlerave të ndryshme për vetinë e rreshtimit të tekstit CSS:

Pamja e ekranit 1: teksti LTR me rreshtim majtas duke përdorur vlerën e fillimit. Një pamje e ngjashme mund të arrihet me vlerën e majtë.
Pamja e ekranit 2: Teksti LTR me rreshtim djathtas duke përdorur vlerën fundore. Një pamje e ngjashme mund të arrihet me vlerën e duhur.
Pamja e ekranit 3: Arsyetoni tekstin. Me një font të vogël dhe një gjerësi të madhe faqe/blloku, ky opsion për shtrirjen e tekstit në një faqe ueb duket i pranueshëm.
Pamja e ekranit 4: rritja e madhësisë së fontit dhe reduktimi i gjerësisë së bllokut në krahasim me shembullin e mëparshëm. Siç mund ta shihni, në tekst u shfaqën boshllëqe të shëmtuara (të nënvizuara me vijë të kuqe).
Pamja e ekranit 5: Dy mënyra për të rreshtuar tekstin duke përdorur shembullin e versionit celular të udhëzuesit tonë (majtas - rreshtimi i tekstit: majtas, djathtas - rreshtimi i tekstit: justifikoni). Mundohuni të lexoni tekstin në të dy kolonat dhe përcaktoni se cili opsion është më i rehatshëm për t'u lexuar.

Në rastin e dokumenteve HTML, etiketat punojnë më shumë për të shënuar përmbajtjen sesa për të treguar se si duhet të paraqitet. Më shumë kontroll mbi prezantimin arrihet me stile. Në këtë artikull, unë do të shikoj ato stile që lidhen me formatimin e paragrafit në HTML.

Etiketë

Në HTML, ju mund të specifikoni paragrafët dhe atributi align i rreshton ato majtas, djathtas, qendër ose justifikuar. Përveç tyre, ne do të përdorim atributin e stilit global.

Rreshtimi i paragrafit

Ju mund të rreshtoni një paragraf duke përdorur atributin align me vlerat e mëposhtme:

text-align: majtas|djathtas|qendër|justifikoj|fillestar|trashëgoj;

Kopjoni kodin e mëposhtëm në një skedar .html.

Përafrimi i një paragrafi me atributin Style

Ky paragraf është i rreshtuar në qendër

Ky paragraf është i rreshtuar djathtas

Ky paragraf shfaqet në dritaren e shfletuesit të justifikuar. Një paragraf i ndarë mirë justifikohet djathtas dhe justifikuar majtas duke shtuar hapësira shtesë. Mund të shihni se skajet e paragrafit të justifikuar përputhen me skajet e paragrafëve të justifikuar të majtë dhe të djathtë. Në një paragraf të rreshtuar majtas, kufiri i majtë është i barabartë, dhe në një paragraf të rreshtuar djathtas, është i djathtë. A e shihni që ky paragraf i ka të dyja skajet? Kjo arrihet falë stilit text-align:justify.

Në dritaren e shfletuesit HTML, kodi i paragrafit duket kështu.

Hapësira e rreshtave

Ju mund të kontrolloni ndarjen e rreshtave të një paragrafi me style=line-height . Përdorni atributin e stilit me vlerat e mëposhtme:

lartësia e vijës: normale|numri|gjatësia|fillestare|trashëgimi;

Më poshtë është një shembull i kodit HTML që nxjerr paragrafë me hapësirë ​​të ndryshme rreshtash:

Vendosja e hapësirës së vijës duke përdorur atributin e stilit

Ky paragraf përdor dy vlera për atributin e stilit. Lartësia e rreshtit të parë: 1.5 specifikon një hapësirë ​​e gjysmë rreshti për paragrafin, dhe vlera e dytë text-align:justify specifikon se teksti i paragrafit duhet të justifikohet në gjerësi.

Ky paragraf ka ndarje të dyfishtë rreshtash dhe është i justifikuar. line-height:2 specifikon ndarje të dyfishtë. Atributi i stilit nuk duhet të ketë dy vlera. Por nëse duhet të specifikoni dy vlera, mund ta bëni këtë duke i ndarë me një pikëpresje.


Këtu janë disa mënyra të ndryshme për të përdorur vlerën e lartësisë së vijës për atributin e stilit:

: Vendos hapësirën e rreshtave në 13 piksele;

: Vendos hapësirën ndërmjet paragrafëve në HTML në 200% të madhësisë aktuale të shkronjave;

: Vendos lartësinë e linjës në 14 piksele.

dhëmbëzimi

Kam përdorur termin "indentation" për ta bërë më të lehtë për t'u kuptuar. Por në HTML, ne përdorim hapësira për të krijuar hapësirë ​​të bardhë rreth një objekti. Ju mund të përdorni atributin stil me një vlerë mbushjeje për të vendosur dhëmbëzimin majtas ose djathtas të një paragrafi.

Më poshtë është një shembull i paragrafëve të dhëmbëzuar majtas dhe djathtas:

Dhënia e paragrafëve me atributin Style

Ky paragraf nuk është i prerë, është thjesht i justifikuar. Shikoni atributin e stilit të elementit P për këtë paragraf.

Për këtë paragraf, e vendosa dhëmbëzimin e majtë në 30 px duke përdorur padding-left:30px. Ky paragraf justifikohet gjithashtu duke përdorur stilin text-align:justify. Siç e dini tashmë, ne mund të përdorim vlera të shumta për atributin Style duke i ndarë ato me një pikëpresje.

Dhe ky paragraf ka një dhëmbëzim djathtas prej 30 pikselësh, por jo të majtë. Është e justifikuar edhe në gjerësi. Vlera 'mbushje-djathtas' e atributit style e vendos mbushjen në të djathtë. Nëse nuk e shihni efektin, zvogëloni gjerësinë e dritares së shfletuesit në mënyrë që paragrafi i justifikuar HTML të shfaqet siç duhet.


Dhimbjet midis paragrafëve (zona para dhe pas një paragrafi)

Në HTML ose CSS, ne nuk kemi nevojë për këtë. Ne thjesht mund të stilojmë mbushjen në element

Padding-lart dhe padding-bottom përcaktojnë hapësirën e bardhë para dhe pas një paragrafi, i cili funksionon si një mbushje e sipërme ose e poshtme. Shikoni shembullin e etiketës më poshtë

E vendosa paragrafin e parë HTML në 10px indent para të dytës dhe 50px pas paragrafit të dytë:

Prishja midis paragrafëve me atributin Style

Ky paragraf nuk është shënuar para ose pas. Ky është një paragraf i rregullt i justifikuar. Siç e dini tashmë, ne mund të justifikojmë një paragraf duke përdorur kodin style=”text-align:justify” brenda etiketës.

Ky paragraf është i rreshtuar. Ai gjithashtu ka një dhëmbëzim 10 px përpara paragrafit dhe 50 px pas. Brenda etiketës, vendosa 3 stile.

Ky është një paragraf normal pa dhëmbëza dhe rreshtim të paracaktuar.


Gjërat për të mbajtur mend

  • Një paragraf HTML mund të rreshtohet duke përdorur atributin align ose stilin e rreshtimit të tekstit;
  • HTML do të jepet ndryshe në varësi të madhësive të ekranit, madhësive të dritareve të shfletuesit;
  • Shtimi i hapësirave shtesë ose vijave boshe në kodin HTML nuk ndikon në daljen. Shfletuesi heq të gjitha hapësirat shtesë;
  • Etiketat përcaktojnë se çfarë duhet të shfaqet, dhe stilet përcaktojnë se si duhet të shfaqet;
  • Stilet mund të vendosen në tre mënyra të ndryshme - inline (brenda etiketave), të brendshme ( brenda të njëjtit skedar HTML me një element