Nëse vendosim lartësinë e vijës = 0.4, marrim një ekspozitë të kryesimit negativ:

Pse bëjnë diçka me distancën midis rreshtave? Për shkak të dëmit? Nga asgjë për të bërë?

Të kesh hapësirën e duhur midis rreshtave mund të përmirësojë lexueshmërinë e tekstit tuaj, i cili është një aspekt shumë i rëndësishëm në dizajnin e uebit, tipografinë dhe çdo gjë tjetër që lidhet me tekstin. Dakord që kur shtuam hapësirën midis rreshtave në shembullin e dytë, teksti u bë më i këndshëm për t'u lexuar, apo jo? Por kjo nuk do të thotë aspak se sa më i madh të jetë kryesori, aq më i lartë është lexueshmëria e tekstit. Pas një pike të caktuar, vijat fillojnë të qëndrojnë shumë larg njëra-tjetrës, bëhet më e vështirë për syrin të lëvizë nga njëra në tjetrën dhe lind siklet gjatë leximit. Mbani mend mesataren e artë.

drejtues

Shumë njerëz, përfshirë dizajnerët, mendojnë kështu tipografiËshtë vetëm një zgjedhje e shkronjave, madhësisë së shkronjave dhe nëse duhet të jetë normale apo e theksuar. Për shumicën e njerëzve, këtu përfundon. Por duhet shumë më tepër për të marrë një tipografi të mirë dhe ka tendencë të jetë detaje që dizajnerët shpesh i shpërfillin.
Këto detaje i japin projektuesit kontroll të plotë, duke e lejuar atë të krijojë vendime të bukura dhe të qëndrueshme të dizajnit tipografik. Ndërsa të gjitha këto janë të zbatueshme për lloje të ndryshme mediash, në këtë artikull ne do të përqendrohemi në mënyrën se si t'i zbatojmë ato në dizajnin e uebit duke përdorur CSS. Këtu 8 mënyra të thjeshta për të përdorur CSS për të përmirësuar tipografinë dhe si rrjedhim përdorshmëria e përgjithshme e dizajnit.

1. Dimensionet

Madhësia e rreshtit të shtypjes. Për syrin e lexuesit, rreshtat e gjata apo të shkurtra janë të lodhshme. Të gjatat thyejnë ritmin pasi lexuesi e ka të vështirë të gjejë rreshtin tjetër të tekstit. E vetmja situatë në të cilën rreshtat e shkurtër janë të pranueshme është një sasi e vogël teksti. Për lexueshmëri më të mirë, gjatësia e rreshtit duhet të jetë midis 40 dhe 80 karaktere, duke përfshirë hapësirat. Për dizajne me një kolonë teksti, 65 karaktere janë ideale.

Një mënyrë e thjeshtë për të llogaritur gjatësinë e rreshtit është përdorimi i metodës së Robert Bringhurst, e cila shumëzon madhësinë e shkronjave me 30. Kjo do të thotë, nëse madhësia e shkronjave është 10 px, duke e shumëzuar atë me 30 do të merrni 300 px ose afërsisht 65 karaktere për rresht. Kodi do të duket diçka si:
p (
madhësia e shkronjave: 10 px;
gjerësia maksimale: 300 px;
}
Unë përdor px pasi më lehtëson shumë llogaritjet, por em mund të përdoret gjithashtu.

2. Drejtues

Drejtues është hapësira midis rreshtave të tekstit në trupin e një shënimi dhe luan një rol të madh në lexueshmërinë. Ndarja e saktë e rreshtave e bën më të lehtë për lexuesin të ndjekë rreshtin dhe përmirëson pamjen e tekstit. Kryesorja ndryshon edhe ngjyrën tipografike të tekstit, që është dendësia ose toni i kompozimit.
Udhëheqja ndikohet nga shumë faktorë: lloji i shkronjave, madhësia e shkronjave, plotësia, rrethanat (?) , gjatësia e rreshtit, hapësira ndërmjet fjalëve etj. Sa më e gjatë të jetë linja, aq më kryesuese. Sa më i madh të jetë madhësia e shkronjave, aq më pak prijës. Një rregull i mirë praktik është të vendosësh kryesor është 2-5 pt më i madh se madhësia e shkronjave, në varësi të kufjeve. Pra, nëse fonti është 12pt, atëherë për ueb, pjesa kryesore duhet të jetë 15pt ose 16pt.

Përcaktimi i drejtimit të saktë kërkon pak shkathtësi, por më poshtë është një shembull se si duhet të duket kodi juaj:
trupi (

madhësia e shkronjave: 12 px;
lartësia e vijës: 16 px;
}

3. Trajtimi i kuotave

Thonjëzat duhet të përpunohen në skajet e tekstit. Nëse thonjëzat bashkohen me tekstin, ato thyejnë margjinën e majtë dhe thyejnë rimën e bllokut të tekstit. Trajtimi i kuotave nuk prish shtrirjen dhe ekuilibrin majtas dhe për këtë arsye përmirëson lexueshmërinë.

Kjo arrihet lehtësisht me CSS duke përdorur elementin blockquote:
kuota e bllokut (
tekst-indenti: -0.8em;
madhësia e shkronjave: 12 px;
}

Dhënia negative do të varet nga shkronja, madhësia e shkronjave dhe margjinat.

4. Ritmi vertikal

Rrjeti bazë është baza për ritmin e qëndrueshëm tipografik në faqe. Ai i lejon lexuesit të ndjekin me lehtësi tekstin, gjë që rrit lexueshmërinë. Ritmi konstant në hapësirën vertikale e mban tekstin në një rrjet të qëndrueshëm në mënyrë që proporcioni dhe ekuilibri të ruhen në të gjithë faqen, pavarësisht nga madhësia e shkronjave, kryesore ose gjatësia e rreshtit.

Në mënyrë që të ruani ritmin vertikal me CSS, duhet të keni hapësirën dhe ndarjen e vijës (drejtuese) të barabartë me madhësinë e rrjetit bazë. Le të themi se po përdorni 15px rrjeti bazë, duke nënkuptuar 15 px midis secilës rresht të rrjetit. Pjesa kryesore do të jetë 15 pikselë dhe hapësira e paragrafëve do të jetë gjithashtu 15 px. Ja një shembull:
trupi (
font-familja: Helvetica, sans-serif;
madhësia e shkronjave: 12 px;
lartësia e vijës: 15 px;
}

P (
margjina-fund: 15px;
}

Kjo lejon që çdo paragraf të pozicionohet në rrjet duke ruajtur ritmin vertikal të tekstit.

5. Linjat e varura lart dhe poshtë

Linja e sipërme e varjes- një rresht teksti ose një fjalë në fund të një paragrafi. Linja e varjes së poshtme- një fjalë ose rresht i shkurtër teksti në fillim ose në fund të një kolone që është e ndarë nga pjesa tjetër e tekstit. Ornamentet e sipërme dhe të poshtme formojnë copa të sikletshme, ndërpresin pamjen e lexuesit dhe ndikojnë në lexueshmërinë. Kjo mund të shmanget duke rritur madhësinë e shkronjave, kryesimin, gjatësinë e rreshtit, hapësirën e fjalëve dhe ndarjen e shkronjave, ose duke futur manualisht ndërprerjet e rreshtave.

Fatkeqësisht, nuk ka asnjë mënyrë të lehtë për të parandaluar jetimët me CSS. Një mënyrë për t'i hequr qafe ato u përshkrua më lart, dhe një tjetër është jQWidon't, një shtojcë jQuery që vendos hapësira pa ndërprerje midis dy fjalëve të fundit të një elementi.

6. Izolimi

E rëndësishme nxjerr në pah fjalët pa e shpërqendruar lexuesin... Shkrimet e pjerrëta shpesh shihen si forma ideale e theksimit. Disa forma të tjera të zakonshme të theksimit janë: shkronja të zeza, shkronja të mëdha, shkronja të vogla, madhësia e shkronjave, ngjyra, nënvizimi ose shkronja të tjera. Nuk ka rëndësi se cilën e përdorni, përpiquni të përdorni vetëm një. Kombinime të tilla si shkronjat e vogla - të theksuara - kursive janë shpërqendruese dhe të ngathëta.

Këtu janë disa mënyra për të theksuar duke përdorur CSS:
shtrirje (
stili i shkronjave: italic;
}

H1 (
pesha e shkronjave: bold;
}

H2 (
tekst-transformim: shkronja të mëdha;
}

B (
font-variant: small-caps;
}
Mbani në mend se varianti i shkronjave funksionon vetëm nëse fonti mbështet shkronja të vogla.

Vetia e marzhit HTML përdoret për të shtuar mbushje ose boshllëk midis elementeve të ndryshëm. Vetia e mbushjes përdoret për të shtuar hapësirë ​​midis përmbajtjes dhe kufirit (kornizës) të elementit të specifikuar HTML.

Dallimi midis margjinës dhe dhëmbëzimit mund të shihet në figurën e mëposhtme:

Shikoni gjithashtu demonstrimin e drejtpërdrejtë për të kuptuar më mirë ndryshimin midis të dyve.

Shikoni demonstrimin dhe kodin

Kemi tre elemente div. Dy të parat janë me diferencë HTML dhe e treta është me mbushje. Hapësira ndërmjet div-ve është kufiri, dhe hapësira ndërmjet tekstit brenda ndarjes së tretë dhe vijës së tij kufitare është e mbushur.

Mbushja CSS dhe sintaksa e margjinës

Sintaksa për një deklaratë të vetme të pronësisë së marzhit CSS është:

Ky kod vendos mbushjen në të gjitha drejtimet: lart, poshtë, majtas dhe djathtas. Nëse keni nevojë të vendosni dhëmbëzim për drejtime të ndryshme, mund ta bëni këtë me deklaratën e shkurtuar të mëposhtme:

diferenca: 10px 20px 50px 100px;

• 10 px - diferenca e sipërme;
• 20 px - diferenca e djathtë;
• 30px - diferenca e poshtme;
• 40 px - dhëmbëzimi majtas.

Është gjithashtu e mundur të caktohet diferenca e HTML majtas dhe drejtimet e tjera veçmas:

Shënim: Mund të përdoret për të përcaktuar mbushjen px, pts, cm, etj.

Sintaksa e vetive të mbushjes së CSS

Vetia e mbushjes mund të vendoset duke përdorur një deklaratë të vetme / stenografi, ose duke përdorur një deklaratë të veçantë dhe për çdo drejtim.

Deklaratë e vetme me një vlerë:

Për çdo drejtim me një deklaratë të vetme:

mbushje: 10px 20px 50px 100px;

Nëse specifikohen katër vlera, rendi është i njëjtë si për vetinë e marzhit HTML CSS.

Për secilin drejtim veç e veç:

padding-top: 10px; mbushje-djathtas: 20px; mbushje-fund: 30px; mbushje-majtas: 40px;

Shembull për vendosjen e margjinave dhe indenteve në një listë HTML

Në hyrje, ju tregova vetitë e marzhit dhe të mbushjes së përdorur në elementin div. Në këtë demonstrim, unë krijova një listë duke përdorur artikujt e menysë që janë lidhje. Lista vendoset brenda një elementi div. Ai përmban artikuj të menusë në formën e hiperlidhjeve.

Lista është e specifikuar edhe nga vetitë e tjera të CSS, por pa përdorur margjinën HTML dhe vetitë e mbushjes, do të duket kështu:

Shikoni demonstrimin dhe kodin

Duke shtuar margjina 10 px për lidhjet brenda

:

marrim pamjen e mëposhtme:





Shikoni demonstrimin dhe kodin në internet

E gjithë klasa për lidhjet brenda një elementi

do të jetë si më poshtë:

mbushje: 10 px; diferenca: 2 px; tekst-dekorim: asnjë; ngjyra: #fff; ngjyra e sfondit: # DA8119; shfaqja: bllok;

Demonstrimi i fushave duke përdorur shembullin e një tabele HTML

Më poshtë është një shembull i përdorimit të vetive të mbushjes në një tabelë HTML. Kam krijuar një tabelë me shumë rreshta.

Tabela është stiluar duke përdorur veçori të ndryshme CSS. Së pari, shikoni se si duket tabela pa aplikuar veçorinë e mbushjes:




Shikoni demonstrimin dhe kodin

Duke shtuar fushat, marrim një tabelë që duket si kjo:




Shikoni demonstrimin dhe kodin

Më poshtë është kodi për stilet për të cilat përdoren. I gjithë kodi mund të shihet duke ndjekur lidhjen e mësipërme:

mbushje: 20 px; kufiri: i ndërprerë 1px # DF7000; sfond: # D0E8AC; ngjyra: # 000;

Një shembull i përdorimit të margjinave dhe mbushjes me elementin e formës

Vetitë e mbushjes së margjinës HTML mund të aplikohen gjithashtu për elementët e formimit: kutitë e tekstit, butonat, etj.

Vetia e mbushjes, e aplikuar në një kuti teksti, vendos hapësirën midis kursorit brenda kutisë së tekstit dhe kufirit të tij. margin shton mbushje midis kutive të ndryshme teksti ose elementëve të tjerë të formës.

Për ta bërë më të qartë, do të krijoj një formë dhe do të tregoj ndryshimin midis margjinave me dhe pa diferencë dhe mbushje. Pamja fillestare e formularit pa aplikuar veçoritë e marzhit dhe të mbushjes:



Duke shtuar fusha në klasën e textboxes dhe klasën e butonit btn, marrim një formë që duket si kjo:

Fushat për fushat e tekstit:

Fushat e butonave:

mbushje: 9px 15px;



Shikoni demonstrimin dhe kodin

Për të rritur ose ulur mbushjen ndërmjet kutive të tekstit, përdorni veçorinë e marzhit HTML CSS. Në këtë demonstrim, kam përdorur një vlerë negative për të ulur hapësirën midis fushave.

Fushat e formularit do të duken kështu:



Shikoni demonstrimin dhe kodin

Pas përdorimit të një vlere negative në margjinën HTML, distanca midis kutive të tekstit u ul me 3 piksel.

Duke përdorur veçorinë padding, ne kemi rritur distancën midis kursorit brenda kutisë së tekstit dhe vijës kufitare, e cila përcaktohet nga vetitë e tjera. Fusha tani duket shumë më mirë.

Për butonin " Ruaj"Ne gjithashtu aplikuam veçorinë e mbushjes:

mbushje: 9px 15px;

i cili përdoret për të rreshtuar tekstin në të gjitha drejtimet.

Përkthimi i artikullit " Mbushja dhe diferenca CSS - Shpjegohet me 4 elementë HTML“U përgatit nga një ekip miqësor i projektit