mājas › Tālrunis › Atstarpes starp rindām html. CSS iestatījumi: Rindstarpa

Atstarpes starp rindām html. CSS iestatījumi: Rindstarpa

Īpašums līnijas augstums iestata atstarpi starp teksta rindiņām (rindstarpu). Īpašums nenosaka atstarpi starp teksta rindiņām, kā varētu šķist, tas nosaka teksta rindiņas augstums. Tas nozīmē, ka faktiskā atstarpe starp rindām tiks aprēķināta šādi: līnijas augstums - fonta izmērs= attālums starp teksta rindiņām. Vai arī otrādi līnijas augstums = fonta izmērs+ attālums starp teksta rindiņām.

Īpašums līnijas augstums dažreiz izmanto nestandarta veidā, lai centrētu tekstu augstumā.

Sintakse

Atlasītājs ( līnijas augstums: CSS vienības | procenti | reizinātājs | normāls | mantot; )

Vērtības

Pēc noklusējuma pārlūkprogramma automātiski izvēlas rindstarpu ( normāli).

Piemēri

Piemērs

līnijas augstums - fonta izmērs= 35 pikseļi - 13 pikseļi = 21 pikseļi:

P (fonta izmērs: 13 pikseļi; līnijas augstums: 35 pikseļi; )

Koda izpildes rezultāts:

Piemērs

Samazināsim atstarpi līdz 21px - 13 pikseļi = 7 pikseļi:

P (fonta izmērs: 13 pikseļi; līnijas augstums: 21 pikseļi; )

Koda izpildes rezultāts:

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean a dapibus magna, ac interdum nisl. Suspendisse eget fringilla nibh, eu commodo arcu. Donec lacinia tempor velit sed tincidunt. Aliquam porttitor nulla purus, vel vulputate ipsum faucibus sed. Phasellus sodales, lorem vel cursus vehicula, ante purus lacinia dui, interdum fringilla massa eros ut dui.

Piemērs

Šajā piemērā attālums starp teksta rindiņām būs līnijas augstums - fonta izmērs = 13 pikseļi - 13 pikseļi = 0 pikseļi- līnijas gandrīz salips kopā (augšējās līnijas burtu astes pieskarsies apakšējās līnijas burtu astēm):

P (fonta izmērs: 13 pikseļi; līnijas augstums: 13 pikseļi; )

Koda izpildes rezultāts:

Piemērs

Šajā piemērā vērtība līnijas augstums- reizinātājs 1,5 no fonta lieluma. Līdz ar to līnijas augstums būs līdzvērtīgi fonta izmērs * 1.5 = 13 pikseļi * 1.5 = 20 pikseļi. Un īstā atstarpe starp rindām būs līnijas augstums - fonta izmērs = 20 pikseļi - 13 pikseļi = 7 pikseļi:

P (fonta izmērs: 13 pikseļi; līnijas augstums: 1,5; )

Koda izpildes rezultāts:

Piemērs

Palielināsim reizinātāju:

P (fonta izmērs: 13 pikseļi; līnijas augstums: 2,5; )

Koda izpildes rezultāts:

Piemērs

Ja jūs to darāt līnijas augstums mazāk fonta izmērs, tad līnijas parasti pārklājas viena ar otru:

P (fonta izmērs: 13 pikseļi; līnijas augstums: 9 pikseļi; )

Koda izpildes rezultāts.

Atstarpju apstrāde starp burtiem un vārdiem

1. Attālums starp vārdiem vārdu atstarpes

Iestata atstarpi starp vārdiem. Var izmantot pozitīvas un negatīvas vērtības. Ar negatīvu nozīmi vārdi var pārklāties viens ar otru.

Vārdu atstarpes vērtību ietekmē teksta līdzināšanas rekvizīta vērtība attaisnota teksta gadījumā. Iedzimts.

Sintakse

P (vārdu atstarpes: parastais;) p (vārdu atstarpes: 2 pikseļi;)
Rīsi. 1. Atstarpes starp vārdiem

2. Burtu atstarpes

Īpašums iestata attālumu starp burtiem (izsekošanas apjomu) un simboliem. Var pieņemt pozitīvas un negatīvas vērtības. Ieteicams izmantot, lai palielinātu virsrakstu, definīciju uc izteiksmīgumu un lasāmību. Iedzimta.

Sintakse

P (burtu atstarpe: parasta;) p (burtu atstarpe: 2 pikseļi;)
Rīsi. 2. Attāluma mainīšana starp burtiem, izmantojot burtu atstarpes īpašību

3. Darbs ar atstarpēm

Īpašums apstrādā atstarpes starp vārdiem un rindiņu pārtraukumus elementā. Nav iedzimta.

atstarpe
Vērtības:
normāli	Noklusējuma vērtība. Starp vārdiem tiek ievietota tikai viena atstarpe. Teksts tiek iesaiņots tikai nepieciešamības gadījumā.
nowrap	Aizliedz līnijas pārtraukumus, izņemot gadījumus, kad tie tiek izmantoti .
iepriekš	Atstarpes tekstā netiek ignorētas, pārlūkprogramma parāda papildu atstarpes un rindiņu pārtraukumus.
iepriekšēja iesaiņošana	Saglabā tekstā atstarpes, vajadzības gadījumā pievienojot rindiņu pārtraukumus.
pirmsrindas	Noņem papildu atstarpes, ja vien .
sākotnējā	Iestata rekvizīta vērtību uz noklusējuma vērtību.
mantot	Manto rekvizītu vērtību no vecākelementa.

Sintakse

P (baltā atstarpe: parastais;) p (baltā atstarpe: neiesaiņota;) p (baltā atstarpe: pirms;) p (baltā atstarpe: pirms iesaiņojuma;) p (atstarpe: pirms rindas;)

4. Cilnes izmēra iestatīšana

Lai mainītu atkāpes apjomu, kas iegūts, izmantojot taustiņu TAB, izmantojiet rekvizītu tab-size. Rekvizītu vērtības tiek ignorētas, ja atstarpes rekvizīts ir iestatīts uz vienu no trim vērtībām pirms rindas , normāls vai nowrap .

Darbojas tikai elementiem Un <pre>Citiem bloka elementiem vērtība vienmēr būs vienāda ar vienu. Rekvizītu vērtības, kas norādītas garuma vienībās, tiek atbalstītas tikai pārlūkprogrammā Chrome 42+.</p> <p><b>Sintakse</b></p><p>Iepriekš (-moz-tab-size: 16;) /* Firefox */ iepriekš (-o-tab-size: 16;) /* Opera 10.6-12.1 */ iepriekš (cilnes izmērs: 16;)</p> <p>Diezgan bieži iesācējiem izkārtojuma dizaineriem ir problēmas apgūt kaskādes stila lapas (CSS). Darbs ar rindstarpām CSS nav izņēmums. Līniju atstarpe ir vertikālais attālums starp līnijām. Tāpat kā parastajā Microsoft Word dokumentā, šo parametru var mainīt arī html faila tekstā.</p><h2>Līnijas augstuma izmantošana, mainot atstarpes</h2><p>Pirmais un vispareizākais risinājums problēmas ar intervāliem risināšanai būtu iestatīt vērtību line-height rekvizītam. Šī rekvizīta noklusējuma vērtība ir normāla (līnijas augstums: normāls;). Rindu atstarpi automātiski aprēķina pati interneta pārlūkprogramma, un tas jo īpaši ir atkarīgs no fonta veida, kā arī no tā lieluma. Jebkura pozitīvā skaitliskā vērtība, kas norādīta rindiņas augstuma stila rekvizītā, pārlūkprogrammā tiks interpretēta kā skaitlis, ar kuru jāreizina pašreizējais fonta lielums.</p><p>CSS rindstarpu var norādīt dažādās garuma vienībās: punktos (pt), collās (collas), pikseļos (pikseļos) un procentos (%). Procenti tiek aprēķināti attiecībā pret pašreizējo fontu un pēc noklusējuma ir 100%. Neaizmirstiet, ka līnijas augstuma rekvizīts aizņemas mantojuma rekvizīta vērtību no tā vecākelementa.</p><p>Šeit ir daži piemēri, kā palielināt rindstarpu CSS: <p>Darbs ar rindstarpu ir diezgan vienkāršs. Jums ir jābūt pamatzināšanām par CSS un jāspēj savienot failu ar galveno html lapu. Stilus var iestatīt arī tieši html lapā:</p></p><p>Lai šajā teikumā izveidotu pusotru atstarpi, CSS failā jāpievieno šāds kods:</p><p>līnijas augstums: 1,5;</p><p>Lai veiktu dubultās atstarpes, varat ierakstīt šādu kodu:</p><p>līnijas augstums: 200%;</p><p>Abos gadījumos pārlūkprogramma sapratīs, ka pašreizējais fonts ir jāreizina ar 2. Šī vērtība būs rindstarpa.</p><p><img src='https://i2.wp.com/syl.ru/misc/i/ai/230259/1120514.jpg' width="100%" loading=lazy loading=lazy></p><p>Tagad šeit ir piemērs, kā samazināt rindstarpu (CSS):</p><p>Ir svarīgi atcerēties, ka negatīva līnijas augstuma vērtība vienkārši netiek uztverta, tāpēc tās minimālā vērtība var būt 0. Lai iegūtu pusintervālu, jāieraksta šāds kods:</p><p>līnijas augstums: 0,5;</p><p>līnijas augstums: 50%;</p><p>līnijas augstums: 0.5pt;</p><p>Visas 3 opcijas ir pareizas un atbilst visiem W3C standartiem, tāpēc tās darbosies jebkurā pārlūkprogrammas versijā.</p><h2>Polsterējuma izmantošana, mainot atstarpes</h2><p>Tomēr papildus līnijas augstuma rekvizīta maiņai ir vēl viens veids, kā mainīt rindstarpas CSS — tas ir “spēlēties” ar polsterējuma rekvizīta vērtībām. Polsterējuma stila rekvizīts ir atbildīgs par iekšējo pildījumu jebkurā html objektā. Pēc noklusējuma šis rekvizīts ir 0. Atlasot dažādas vērtības, varat mainīt rindstarpu, piemēram: <p>Darbs ar rindstarpu ir ļoti vienkāršs. Pietiek zināt CSS pamatus un prast failu savienot ar galveno html lapu. To var iestatīt arī tieši lapā ar html paplašinājumu.</p></p><p><img src='https://i0.wp.com/syl.ru/misc/i/ai/230259/1120513.jpg' width="100%" loading=lazy loading=lazy></p><p>Lai palielinātu atstarpi starp rindām, palieliniet rekvizīta vērtību:</p><p>Tādējādi attālums starp līnijām mūsu rindkopā tiks palielināts par 10 pikseļiem attiecībā pret sākotnējo. Ar tādiem pašiem panākumiem jūs varat samazināt atstarpi starp rindām, rakstot, piemēram:</p><h2>Negatīvā rindstarpa</h2><p>Ja pamanījāt, tas arī neļauj ievadīt negatīvas vērtības, lai jūs nesanāktu ar rindām, kas pārklājas viena ar otru. CSS atstarpe rindā nevar būt negatīva. No kodēšanas un W3C standartu viedokļa jūs nekad nevarat ierakstīt negatīvas vērtības rindstarpu vērtībās.</p><h2>Rindstarpu maiņa sarakstos</h2><p>Dažreiz rodas uzdevums mainīt rindstarpu sarakstos <ul>Un <ol>. Iepriekšējās metodes nenovedīs pie vēlamā rezultāta, tomēr ir viens īpašums, kas var mainīt atstarpi sarakstā - tas ir maržas rekvizīts. Šim stila īpašumam var būt gan pozitīva, gan negatīva vērtība. Parādīsim rindstarpu izmaiņas sarakstā, izmantojot piemēru:</p><p><li>1. punkts</li></p><p><li>2. punkts</li></p><p><li>3. punkts</li></p><p>Lai palielinātu atkāpi, CSS failā jāieraksta šādas rindas:</p><p>mala augšpusē: 10 pikseļi;</p><p>Tādējādi mēs norādījām, ka attālums no katra saraksta vienuma palielinās par 10 pikseļiem. Turklāt šajā gadījumā ir iespējama arī negatīva vērtība. Tātad mēs varam iestatīt: - margin-top: -15px.</p> <p>HTML piemales rekvizīts tiek izmantots, lai pievienotu piemali vai atstarpi starp dažādiem elementiem. Polsterējuma rekvizīts tiek izmantots, lai pievienotu atstarpi starp saturu un norādītā HTML elementa apmali (rāmi).</p> <p>Atšķirību starp malu un polsterējumu var redzēt šajā attēlā:</p> <p>Apskatiet arī demonstrāciju, lai labāk izprastu atšķirību starp šiem diviem īpašumiem.</p> <p>Skatīt demonstrāciju un kodu</p> <p>Mums ir trīs div elementi. Pirmie divi ir ar HTML piemales rekvizītu, bet trešais ir ar polsterējuma rekvizītu. Atstarpe starp div elementiem ir piemale , un atstarpe starp tekstu trešā div iekšpusē un tā apmales līniju ir polsterējums .</p> <h2>CSS polsterējums un piemales sintakse</h2> <p>Sintakse, ko izmanto, lai deklarētu vienu CSS maržas rekvizītu, ir:</p> <p>Šis kods nosaka polsterējumu visos virzienos: augšā, apakšā, pa kreisi un pa labi. Ja jums ir jāiestata polsterējums dažādiem virzieniem, varat to izdarīt, izmantojot šādu saīsināto deklarāciju:</p> <p>piemale: 10 pikseļi 20 pikseļi 50 pikseļi 100 pikseļi;</p> <ul><li>10px — augšējais polsterējums;</li> <li>20 pikseļi - labais polsterējums;</li> <li>30px — apakšas polsterējums;</li> <li>40 pikseļi — kreisā polsterēšana.</li> </ul><p>Varat arī atsevišķi iestatīt piemales kreiso HTML un citus norādījumus:</p> <p>Piezīme: var izmantot, lai definētu atkāpi px, pts, cm utt.</p> <h3>CSS polsterējuma rekvizītu sintakse</h3> <p>Polsterējuma rekvizītu var iestatīt, izmantojot vienu/saīsinātu deklarāciju vai izmantojot atsevišķu deklarāciju katram virzienam.</p> <p>Viena deklarācija ar vienu nozīmi:</p> <p>Katram virzienam ar vienu reklāmu:</p> <p>polsterējums: 10 pikseļi 20 pikseļi 50 pikseļi 100 pikseļi;</p> <p>Ja ir norādītas četras vērtības, to secība ir tāda pati kā HTML CSS maržas īpašumam.</p> <p>Katram virzienam atsevišķi:</p> <p>polsterējums-top: 10px; polsterējums pa labi: 20 pikseļi; polsterējums apakšā: 30 pikseļi; polsterējums pa kreisi: 40 pikseļi;</p> <h3>Piemērs piemaļu un atkāpju iestatīšanai HTML sarakstā</h3> <p>Ievadā es parādīju div elementā izmantotās piemales un polsterējuma īpašības. Šajā demonstrācijā es izveidoju sarakstu, izmantojot izvēlnes vienumus, kas ir saites. Saraksts tiek ievietots div elementā. Tajā ir izvēlnes vienumi hipersaišu veidā.</p> <p>Sarakstu nosaka citi CSS rekvizīti, taču, neizmantojot HTML piemales un pildījuma rekvizītus, tas izskatīsies šādi:</p> <p><img src='https://i2.wp.com/internet-technologies.ru/wp-content/uploads/articles/201610/without-padding-mar-031114.png' height="136" width="200" loading=lazy loading=lazy></p> <p>Skatīt demonstrāciju un kodu</p> <p>Pievienojot 10 pikseļu piemales saitēm iekšpusē <ul>:</p> <p>mēs iegūsim šādu skatu:</p> <p><img src='https://i0.wp.com/internet-technologies.ru/wp-content/uploads/articles/201610/3-css-padding-031115.png' height="211" width="203" loading=lazy loading=lazy></p> <p><img src='https://i1.wp.com/internet-technologies.ru/wp-content/uploads/articles/201610/4-css-margin-031116.png' height="228" width="208" loading=lazy loading=lazy></p> <p>Skatiet tiešsaistes demonstrāciju un kodu</p> <p>Visa klase saitēm elementā <ul>būs šādi:</p> <p>polsterējums: 10 pikseļi; piemale: 2 pikseļi; teksta noformējums: nav; krāsa: #fff; fona krāsa: #DA8119; displejs: bloks;</p> <h3>Lauku demonstrēšana, izmantojot HTML tabulas piemēru</h3> <p>Tālāk ir parādīts pildījuma rekvizīta izmantošanas piemērs HTML tabulā. Esmu izveidojis tabulu ar vairākām rindām.</p> <p>Tabula ir veidota, izmantojot dažādus CSS rekvizītus. Vispirms apskatiet, kā tabula izskatās, neizmantojot polsterējuma rekvizītu:</p> <p><br><img src='https://i1.wp.com/internet-technologies.ru/wp-content/uploads/articles/201610/5-css-table-padding-031124.png' width="100%" loading=lazy loading=lazy></p> <p>Skatīt demonstrāciju un kodu</p> <p>Pievienojot laukus, mēs iegūstam tabulu, kas izskatās šādi:</p> <p><br><img src='https://i0.wp.com/internet-technologies.ru/wp-content/uploads/articles/201610/table-with-padding-031125.png' width="100%" loading=lazy loading=lazy></p> <p>Skatīt demonstrāciju un kodu</p> <p>Tālāk ir norādīts stilu kods, kas tiek izmantots . Visu kodu var redzēt, izmantojot iepriekš norādīto saiti:</p> <p>polsterējums: 20 pikseļi; apmale: svītrots 1px #DF7000; fons: #D0E8AC; krāsa: #000;</p> <h3>Piemaļu un polsterējuma izmantošanas piemērs ar formas elementu</h3> <p>HTML piemales polsterējuma rekvizītus var lietot arī veidlapas elementiem: teksta laukiem, pogām utt.</p> <p>Polsterējuma rekvizīts, kad tas tiek lietots tekstlodziņā, norāda atstarpi starp kursoru tekstlodziņā un tā apmali. piemale pievieno polsterējumu starp dažādiem teksta laukiem vai citiem formas elementiem.</p> <p>Lai padarītu to skaidrāku, es izveidošu veidlapu un parādīšu atšķirību starp laukiem, izmantojot piemales un polsterējuma rekvizītus un bez tiem. Veidlapas sākotnējais izskats, neizmantojot piemales un polsterējuma īpašības:</p> <p><img src='https://i1.wp.com/internet-technologies.ru/wp-content/uploads/articles/201610/padding-form-without-031122.png' height="201" width="242" loading=lazy loading=lazy></p> <p>Pievienojot laukus tekstlodziņa klasei un btn pogu klasei, mēs iegūstam veidlapu, kas izskatās šādi:</p> <p>Piemales teksta laukiem:</p> <p>Pogu lauki:</p> <p>polsterējums: 9 pikseļi 15 pikseļi;</p> <p><img src='https://i1.wp.com/internet-technologies.ru/wp-content/uploads/articles/201610/8-css-padding-form-031121.png' height="239" width="247" loading=lazy loading=lazy></p> <p>Skatīt demonstrāciju un kodu</p> <p>Lai palielinātu vai samazinātu piemales starp teksta laukiem, izmantojiet HTML CSS piemales rekvizītu. Šajā demonstrācijā es izmantoju negatīvu vērtību, lai samazinātu attālumu starp laukiem.</p> <p>Veidlapas lauki izskatīsies šādi:</p> <p><img src='https://i1.wp.com/internet-technologies.ru/wp-content/uploads/articles/201610/9-css-margin-form-031117.png' height="212" width="245" loading=lazy loading=lazy></p> <p>Skatīt demonstrāciju un kodu</p> <p>Pēc negatīvas vērtības izmantošanas HTML piemalē attālums starp teksta laukiem samazinājās par 3 pikseļiem.</p> <p>Izmantojot polsterējuma rekvizītu, mēs palielinājām attālumu starp kursoru teksta laukā un apmales līniju, ko nosaka citi rekvizīti. Tagad laukums izskatās daudz labāk.</p> <p>Par pogu <span>Saglabāt</span>” mēs izmantojām arī polsterējuma īpašību:</p> <p>polsterējums: 9 pikseļi 15 pikseļi;</p> <p>ko izmanto teksta līdzināšanai visos virzienos.</p> <p>Raksta tulkojums " <span>CSS polsterējums un piemale – izskaidrots ar 4 HTML elementiem</span>» sagatavoja draudzīgā projekta komanda</p> <p>CSS rindstarpu iestatīšana ir ļoti vienkārša. Šim nolūkam ir īpašs īpašums. Bet, protams, ir arī daudzi citi parametri, kas ir universāli un kurus var attiecināt uz tekstu.</p><p>Ja iestatījumi netiek veikti, tiek iestatītas noklusējuma vērtības. Ja vēlaties, varat mainīt šo attālumu. Vērtība var būt procenti vai pikseļi.</p><h2>Rindas augstums</h2><p>CSS attālumu starp rindām var parādīt ar šādu attēlu.</p><p>Augšējā attēlā ir parādīti parametri ar atbilstošajiem attālumiem. Teksts atrodas fonta izmēra laukā. Lūdzu, ņemiet vērā, ka teksta rindiņa nesākas no pamatnes, bet nedaudz virs tās. Tālāk ir paredzēta vieta burtiem, kuriem ir zemāk esošie elementi (g, y un tā tālāk).</p><p>Ņemiet vērā, ka atstarpi starp fonta izmēra blokiem sauc par vadošo. Šis rekvizīts neparādās HTML un CSS, taču tas ir pieejams citos grafiskajos un teksta redaktoros. Piemēram, programmā Adobe Photoshop.</p><p><img src='https://i1.wp.com/fb.ru/misc/i/gallery/43047/1366115.jpg' height="229" width="252" loading=lazy loading=lazy></p><p>Augšējā attēlā parādīts, kur programmā Photoshop varat norādīt vadošo pozīciju. Un blakus tam ir fonta izmēra parametrs.</p><p><img src='https://i1.wp.com/fb.ru/misc/i/gallery/43047/1366116.jpg' height="230" width="250" loading=lazy loading=lazy></p><h2>Līnijas augstuma izmantošanas piemēri</h2><p>CSS attālumu starp rindām var iestatīt procentos. Tālāk ir sniegts ilustratīvs piemērs.</p><p><img src='https://i0.wp.com/fb.ru/misc/i/gallery/43047/1366117.jpg' width="100%" loading=lazy loading=lazy></p><p>Ja vērtība ir maza, jūsu vietnes lietotājam to būs neērti lasīt.</p><p>Attālumu var mainīt arī pēc fonta lieluma. Ja atšķirība starp galvenajiem parametriem ir ļoti atšķirīga skaitļos, tad šī atšķirība tiek kompensēta, palielinot priekšējo.</p><h2>Dizaina smalkumi</h2><p>CSS atstarpi starp rindām var vēl vairāk pielāgot, izmantojot dažādus polsterējumus. Apskatīsim piemēru attēlā.</p><p><img src='https://i0.wp.com/fb.ru/misc/i/gallery/43047/1366118.jpg' height="276" width="330" loading=lazy loading=lazy></p><p>Mūsu gadījumā laukā “Elements” būs teksts. Polsterējums ir polsterējums objekta iekšpusē, un mala ir polsterējums aiz objekta. Apmale ir rāmis. Tas varētu būt 0 pikseļi vai 100.</p><p>Nākamajā attēlā vienlaikus ir parādīts viss teksta polsterējums, apmale un rindiņas augstums.</p><p><img src='https://i0.wp.com/fb.ru/misc/i/gallery/43047/1366119.jpg' width="100%" loading=lazy loading=lazy></p><p>Ja jūsu teksts ir mazs, tikai viena rindiņa vai katra rindiņa ir atsevišķā rindkopā, attālumu var pielāgot, veicot atkāpi starp šīm rindkopām. Tas ir, marķēšanai un polsterēšanai starp rindām vienā elementā nav nekādas ietekmes. Tie veido atkāpi tikai gar objekta malām. Objekts ir visa rindkopa, nevis rindas tajā. Šeit ir svarīgi neapjukt.</p><p>Gadījumos, kad ir daudz līniju, un tas viss atrodas vienā objektā, ieteicams mainīt fontu ar galvenajiem parametriem.</p><h2>Kā palielināt atstarpi starp CSS rindām</h2><p>Atstarpes starp HTML rindiņām var norādīt jebkurai klasei vai visām teksta rindkopām. Ja norādāt šādi: p ( line-height:20px; ), tad absolūti visās lapas rindkopās būs 20 pikseļu rindas. Ja dažādās vietās nepieciešami dažādi izmēri, ieteicams to darīt šādi.</p><p>Mēs pierakstām stilus.</p><p>1. klase (līnijas augstums: 20 pikseļi;)</p><p>2. klase (līnijas augstums: 16 pikseļi;)</p><p>3. klase (līnijas augstums: 12 pikseļi;)</p><p>Skaidrības labad pievienosim rāmi, lai jūs varētu redzēt, ka tas darbojas. Nākotnē tas ir jānoņem.</p><p><img src='https://i0.wp.com/fb.ru/misc/i/gallery/43047/1366120.jpg' width="100%" loading=lazy loading=lazy></p><p>Lūdzu, ņemiet vērā, ka trešajā gadījumā svītra pārskrēja tekstam. Tas ir tāpēc, ka tas ir lielāks par līnijas augstumu. Tāpēc ir svarīgi nodrošināt, lai šādas pretrunas nepastāvētu. Ja izveidojat nelielu līnijas augstumu, attiecīgi samaziniet fontu.</p><p>Nav ieteicams tekstu padarīt pārāk mazu un atstarpi starp rindām pārāk mazu. Jo neviens lietotājs nevar mierīgi to visu izlasīt. Viņa acis ātri nogurst. Meklētājprogrammas arī saka, ka tekstam jābūt lietotājam draudzīgam.</p><p>Turklāt pēdējā laikā liels uzsvars tiek likts uz mobilo ierīču lietotāju ērtībām. Tur ieteikumos vienmēr teikts, ka fonta izmēram jābūt normālam, nevis mazam. Tas jo īpaši ietekmē saites. Ņemot vērā to mazo izmēru, lietotājam būs grūti orientēties vietnē.</p><p>Google meklētājprogrammā ir īpašs rīks, kas palīdz veikt šo analīzi. Tas ir ļoti ērti tīmekļa pārziņiem.</p><p>Tālāk ir sniegts iespējamo rezultātu piemērs.</p><p><img src='https://i1.wp.com/fb.ru/misc/i/gallery/43047/1366121.jpg' width="100%" loading=lazy loading=lazy></p> <script type="text/javascript">  </script><br> <br> <script>document.write("<img style='display:none;' src='//counter.yadro.ru/hit;artfast_after?t44.1;r"+ escape(document.referrer)+((typeof(screen)=="undefined")?"": ";s"+screen.width+"*"+screen.height+"*"+(screen.colorDepth? screen.colorDepth:screen.pixelDepth))+";u"+escape(document.URL)+";h"+escape(document.title.substring(0,150))+ ";"+Math.random()+ "border='0' width='1' height='1' loading=lazy loading=lazy>");</script> </div> <div class="single-popular"> <div class="single-popular-tit col-lg-12">Populārs kategorijā:</div> <div class="single-popular-item col-lg-6 col-md-6 col-sm-6 col-xs-6"> <div class="single-popular-item-wrp"> <img width="150" height="120" src="/uploads/5be8b76667696c4cd63a8c38979b50af.jpg" class="attachment-sm-widget size-sm-widget wp-post-image" alt="Kā apvienot Photoshop slāņus vienā vai apvienot tos grupā Kā apvienot vairākus slāņus programmā Photoshop"/ loading=lazy loading=lazy> <div class="single-popular-item-tit">Kā apvienot Photoshop slāņus vienā vai apvienot tos grupā...</div> <a href="https://innovakon.ru/lv/settings/sposoby-obedineniya-sloev-v-fotoshope-kak-obedinit-sloi-v-fotoshope-v.html" rel="bookmark" title="Kā apvienot Photoshop slāņus vienā vai apvienot tos grupā Kā apvienot vairākus slāņus programmā Photoshop">lasīt</a> <div class="clr"> </div> </div> </div> <div class="single-popular-item col-lg-6 col-md-6 col-sm-6 col-xs-6"> <div class="single-popular-item-wrp"> <img width="150" height="120" src="/uploads/33b72e60e1d3066a9663f391221dc014.jpg" class="attachment-sm-widget size-sm-widget wp-post-image" alt="Kontaktu pārsūtīšana uz jaunu Android tālruni"/ loading=lazy loading=lazy> <div class="single-popular-item-tit">Kontaktu pārsūtīšana uz jaunu Android tālruni</div> <a href="https://innovakon.ru/lv/phone/perenos-kontaktov-na-novyi-telefon-android-android-prilozheniya.html" rel="bookmark" title="Kontaktu pārsūtīšana uz jaunu Android tālruni">lasīt</a> <div class="clr"> </div> </div> </div> <div class="single-popular-item col-lg-6 col-md-6 col-sm-6 col-xs-6"> <div class="single-popular-item-wrp"> <img width="150" height="120" src="/uploads/ff504b14456f4702a94368a161811b1d.jpg" class="attachment-sm-widget size-sm-widget wp-post-image" alt="Samsung Galaxy atsāknējas pats — Solutions Galaxy note 4 atsāknējas atsevišķi"/ loading=lazy loading=lazy> <div class="single-popular-item-tit">Samsung Galaxy atsāknējas pats — Galaxy piezīmju risinājumi...</div> <a href="https://innovakon.ru/lv/internet/esli-xiaomi-postoyanno-perezagruzhaetsya-samsung-galaksi-perezagruzhaetsya-sam-po.html" rel="bookmark" title="Samsung Galaxy atsāknējas pats — Solutions Galaxy note 4 atsāknējas atsevišķi">lasīt</a> <div class="clr"> </div> </div> </div> <div class="single-popular-item col-lg-6 col-md-6 col-sm-6 col-xs-6"> <div class="single-popular-item-wrp"> <img width="150" height="120" src="/uploads/242e09224609f2b7cbd6b5b9f2adc411.jpg" class="attachment-sm-widget size-sm-widget wp-post-image" alt="Kaspersky Rescue Disk galvenās funkcijas"/ loading=lazy loading=lazy> <div class="single-popular-item-tit">Kaspersky Rescue Disk galvenās funkcijas</div> <a href="https://innovakon.ru/lv/rates/skachat-zagruzochnyi-disk-kasperskogo-osnovnye-vozmozhnosti-kaspersky-rescue.html" rel="bookmark" title="Kaspersky Rescue Disk galvenās funkcijas">lasīt</a> <div class="clr"> </div> </div> </div> <div class="clr"></div> </div> </div> <div class="sidebar col-lg-3 col-md-4 col-sm-12"> <div class="sidebar-wrp"> <div class="sidebar-wrp-title">Jaunākie raksti</div> <div class="sidebar-wrp-des"> <div class="last-post col-lg-12 col-md-12 col-sm-6 col-xs-6"> <div class="last-post-img"> <img width="60" height="48" src="/uploads/d93303aadea847492ee52538b585df87.jpg" class="attachment-sm-widget2 size-sm-widget2 wp-post-image" alt="" / loading=lazy loading=lazy> </div> <div class="last-post-tit">MacBook nevar izveidot savienojumu ar wifi MacBook neredzēs...</div> <div class="clr"></div> <a href="https://innovakon.ru/lv/phone/macbook-ne-podklyuchaetsya-k-wifi-avtomaticheski-makbuk-ne-podklyuchaetsya-k-wifi-makbuk-ne-vidit-vai-fai.html">lasīt</a> </div> <div class="last-post col-lg-12 col-md-12 col-sm-6 col-xs-6"> <div class="last-post-img"> <img width="60" height="48" src="/uploads/094fe0c598853f299be65e8611b45d60.jpg" class="attachment-sm-widget2 size-sm-widget2 wp-post-image" alt="" / loading=lazy loading=lazy> </div> <div class="last-post-tit">Kā nopelnīt naudu vietnē WebMoney</div> <div class="clr"></div> <a href="https://innovakon.ru/lv/internet/kak-zarabotat-rubli-na-webmoney-kak-zarabotat-na-webmoney-proverennye.html">lasīt</a> </div> <div class="last-post col-lg-12 col-md-12 col-sm-6 col-xs-6"> <div class="last-post-img"> <img width="60" height="48" src="/uploads/280d369c9d1e343119c3d855af4b9c4d.jpg" class="attachment-sm-widget2 size-sm-widget2 wp-post-image" alt="" / loading=lazy loading=lazy> </div> <div class="last-post-tit">"Supra" tablete: klientu atsauksmes</div> <div class="clr"></div> <a href="https://innovakon.ru/lv/rates/planshet-podelka-est-takoi-supra-firma-supra-planshet-otzyvy-pokupatelei-plyusy-i-minusy.html">lasīt</a> </div> <div class="last-post col-lg-12 col-md-12 col-sm-6 col-xs-6"> <div class="last-post-img"> <img width="60" height="48" src="/uploads/b1724f08fa52145089eaa72f836127ee.jpg" class="attachment-sm-widget2 size-sm-widget2 wp-post-image" alt="" / loading=lazy loading=lazy> </div> <div class="last-post-tit">Kuģu atrašanās vietas reāllaikā</div> <div class="clr"></div> <a href="https://innovakon.ru/lv/settings/voennye-korabli-v-realnom-vremeni-onlain-mestonahozhdeniya-sudov-v.html">lasīt</a> </div> <div class="last-post col-lg-12 col-md-12 col-sm-6 col-xs-6"> <div class="last-post-img"> <img width="60" height="48" src="/uploads/534951a61241c179a7c060b9fe1143c8.jpg" class="attachment-sm-widget2 size-sm-widget2 wp-post-image" alt="" / loading=lazy loading=lazy> </div> <div class="last-post-tit">Labākās programmas Android ierakstīšanai zvaniem no...</div> <div class="clr"></div> <a href="https://innovakon.ru/lv/rates/prilozheniya-dlya-android-obuchayushchie-programmy-dlya-detei-luchshie.html">lasīt</a> </div> <div class="last-post col-lg-12 col-md-12 col-sm-6 col-xs-6"> <div class="last-post-img"> <img width="60" height="48" src="/uploads/e280b0808c5e749938522ba1df2a41ec.jpg" class="attachment-sm-widget2 size-sm-widget2 wp-post-image" alt="" / loading=lazy loading=lazy> </div> <div class="last-post-tit">Nesekotāju noņemšana pakalpojumā Twitter</div> <div class="clr"></div> <a href="https://innovakon.ru/lv/services/kak-udalit-ne-vzaimnyh-chitatelei-v-twitter-udalyaem-ne-chitatelei-v.html">lasīt</a> </div> <div class="last-post col-lg-12 col-md-12 col-sm-6 col-xs-6"> <div class="last-post-img"> <img width="60" height="48" src="/uploads/229610355b0a27a465c73ddb25664556.jpg" class="attachment-sm-widget2 size-sm-widget2 wp-post-image" alt="" / loading=lazy loading=lazy> </div> <div class="last-post-tit">Interneta pieslēgšana klēpjdatorā: viss iespējamais...</div> <div class="clr"></div> <a href="https://innovakon.ru/lv/phone/kak-vklyuchit-internet-na-kompyutere-ispolzuya-mobilnyi-telefon.html">lasīt</a> </div> <div class="last-post col-lg-12 col-md-12 col-sm-6 col-xs-6"> <div class="last-post-img"> <img width="60" height="48" src="/uploads/5399be52c80b405fedf00779a6136b42.jpg" class="attachment-sm-widget2 size-sm-widget2 wp-post-image" alt="" / loading=lazy loading=lazy> </div> <div class="last-post-tit">Samsung Galaxy S IV ir jaunais flagmanis...</div> <div class="clr"></div> <a href="https://innovakon.ru/lv/phone/samsung-galaxy-s4-vtoroi-vzglyad-samsung-galaxy-s-iv-novyi-flagman-galakticheskogo-masshtaba-galak.html">lasīt</a> </div> <div class="clr"></div> </div> </div> <div id="text-4" class="widget widget_text sidebar-wrp"> <div class="textwidget"> </div> </div> <div id="ketena1" style="height:500px;width:260px;" align="center"></div> <div class="clr"></div> </div> </div> </div> </div> <div id="footer"> <div class="container"> <div class="row"> <div class="footer-contacts col-lg-6 col-md-6 col-sm-12 col-xs-12"> <img src="/logo/logo.png" loading=lazy loading=lazy> <div class="footer-contacts-tit">innovakon.ru <br>Mobilie telefoni un sakari</div> <div class="footer-soc"> <div class="footer-soc-wrp"> <div class="soc_w"> <a href="#" class="soc-link vk" target="_blank"></a> <a href="#" class="soc-link fb" target="_blank"></a> </div> </div> </div> </div> <div class="footer-links col-lg-4 col-md-6 col-sm-12 col-xs-12"> </div> <div class="footer-links col-lg-4 col-md-4 col-sm-4 col-xs-4" style="display: block;"> <ul> <li><a href="">Projekta izdevums</a></li> <li><a href="">Reklāma mājas lapā</a></li> </ul> <ul> <li><a href="https://innovakon.ru/lv/feedback.html">Kontakti</a></li> <li><a href="https://innovakon.ru/lv/sitemap.xml">Vietnes karte</a></li> </ul> </div> </div> </div> <div class="copyright">© 2024 Mobilie tālruņi un sakari</div> </div> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> <script src="https://innovakon.ru/wp-content/themes/trudinsp/js/bootstrap.min.js"></script> <script type="text/javascript" src="https://innovakon.ru/wp-content/themes/trudinsp/js/SmoothScroll.js"></script> <a id="scroll-to-top" href="#" title="Ritiniet uz augšu">Tops</a> <script type='text/javascript' src='https://innovakon.ru/wp-content/plugins/contact-form-7/includes/js/jquery.form.min.js?ver=3.51.0-2014.06.20'></script> <script type='text/javascript' src='https://innovakon.ru/wp-content/plugins/contact-form-7/includes/js/scripts.js?ver=4.4.1'></script> <script type='text/javascript' src='https://innovakon.ru/wp-content/plugins/jquery-smooth-scroll/js/jss-script.min.js?ver=4.8.3'></script> <script type='text/javascript' src='https://innovakon.ru/wp-content/plugins/table-of-contents-plus/front.min.js?ver=1509'></script> <script type='text/javascript' src='/wp-includes/js/jquery/ui/effect.min.js?ver=1.11.4'></script> <script type='text/javascript' src='/wp-includes/js/jquery/ui/effect-blind.min.js?ver=1.11.4'></script> <script type='text/javascript'> /* <![CDATA[ */ var stbUserOptions = { "mode":"css","cssOptions":{ "roundedCorners":false,"mbottom":20,"imgHide":"http:\/\/innovakon.ru\/wp-content\/plugins\/wp-special-textboxes\/themes\/stb-metro\/minus.png","imgShow":"http:\/\/innovakon.ru\/wp-content\/plugins\/wp-special-textboxes\/themes\/stb-metro\/plus.png","strHide":"\u0421\u043a\u0440\u044b\u0442\u044c","strShow":"\u041f\u043e\u043a\u0430\u0437\u0430\u0442\u044c"} }; /* ]]> */ </script> <script type='text/javascript' src='https://innovakon.ru/wp-content/plugins/wp-special-textboxes/js/wstb.min.js?ver=5.5.101'></script> <script type='text/javascript' src='/wp-includes/js/wp-embed.min.js?ver=4.8.3'></script> <script type="text/javascript" id="slb_context">/* <![CDATA[ */if ( !!window.jQuery ) { (function($){ $(document).ready(function(){ if ( !!window.SLB ) { { $.extend(SLB, { "context":["public","user_guest"]} );} } })} )(jQuery);} /* ]]> */</script> <script type="text/javascript">  </script><br> <br> </body> </html>