Vaje za HTML: razmik med vrsticami CSS

Razmik med vrsticami CSS je zelo potreben za oblikovanje besedila. Vsak strokovnjak jih vedno uporablja, če ustvari lepo spletno stran. Zahvaljujoč tem atributom lahko izvajate vse operacije z besedilom.

Praviloma večini oblikovalcev ni všeč privzeta postavitev besedila v html. Razmik med vrsticami CSS vam omogoča, da prilagodite skoraj vse, kar si lahko predstavljate. In če greste globoko, lahko naredite, kar niste nikoli pomislili.

Kako narediti razmik med vrsticami besedil v CSS

Pomembno je razumeti, da lahko velikost vrstic, zamikov itd. Nastavite na vse elemente, kjer je besedilo. Vsi atributi so na primer odlični za:

• odstavka;
• seznamov;
• ;
• mize;
• glave;
• in vse ostalo, kjer objavljate besedilo.

Glede na razmik med vrsticami CSS, najprej bodite pozorni na naslednje atribute.

V "Photoshopu" je koncept vodenja. Takšnega atributa v CSS-ju ni, a zahvaljujoč temu lahko pojasnimo bistvo. Dejansko je vodilna razdalja med črtami.

V CSS je velikost vrstice nastavljena s parametrom višina vrstice in velikost pisave. Kot lahko vidite, slika jasno navaja, da je velikost pisave velikost pisave. Nobena črka ne presega teh omejitev.

Višina črte je razdalja od sredine zgornjega vodilnega do sredine spodnjega vodilnega. Vse to je prikazano na sliki.

Če podate višino črte, ki je manjša od velikosti pisave, se vrstice prekrivajo. Bodite prepričani, da sledite temu, da se izognete takšni situaciji.

Nekateri mislijo, zakaj je velikost pisave raztegnjena nižje od črte. Preprosto je. Navsezadnje obstajajo črke, ki so nižje od glavne črte. Spodnja slika je jasen primer uporabe simbolov, raztegnjenih navzgor in navzdol.

Kot lahko vidite, črke zasedajo celotno območje velikosti pisave. In višina proge je večja in na obeh straneh je dodan enak prostor.

Vrednost atributa višine vrstice je lahko vsaka:

• slikovnih pik;
• palcev;
• predmeti;
• obresti;
• in drugih, ki se uporabljajo v CSS.

Negativne vrednosti ni mogoče določiti. Če na primer določite faktor, ki je enak eni in pol, dobite v besedilu standardni interval in pol.

Če podate v odstotkih, upoštevajte, da je 100% v višini vrstice enako vrednosti velikosti pisave.

Poleg tega lahko določite vrednost normalnega ali podedovanja. Če določite normalno, bo brskalnik po lastni presoji samodejno izračunal razdaljo med vrsticami. Vrednost je lahko drugačna, ker je odvisna od brskalnika. Priporočljivo je, da nastavite določeno število, tako da imajo vsi uporabniki isto stvar.

Podeduj pomeni, da bo vrednost popolnoma enaka kot nadrejeni element.

Podrobnejša zasnova

Razmik vrstic CSS dejansko ni omejen na zgoraj navedene atribute. Razdalja se še vedno prilagaja z atributi margin in padding. Če atribut podate točno kot margin = '5px', potem se z vseh strani vrstice (odstavka) doda razdalja 5 slikovnih pik.

Če morate določiti samo nad odstavkom, lahko določite zgornji rob. Prevajanje je zelo preprosto. Tako boste lahko z vsake strani nastavili zamik.

Upoštevajte, da obstaja tudi atribut oblazinjenja. Deluje popolnoma enako kot marža. Nastavite lahko tako skupno alinejo kot tudi določeno smer (levo, desno, navzgor, navzdol).

Pozorno si oglejte risbo zgoraj. Margina - vdolbina zunaj predmeta in oblazinjenje - znotraj.

Ti atributi so globalni. Uporabijo se lahko za vse - slike, tabele, besedilo, povezave in tako naprej.

Zapomni si to enkrat za vselej. To je zelo pomembna točka pri oblikovanju predmetov. Na primer, zahvaljujoč robu, lahko določite zamik med besedilom in slikami v njem. Če te alineje niso prisotne, bo besedilo postavljeno blizu slike.

Če imate besedilo v tabeli, uporabite oblazinjenje, da preprečite, da bi se besedilo držalo robov tabele, saj to izgleda grdo. In če nastavite zamik vsaj 5 slikovnih pik, bo to že videti veliko bolje. Poleg višine ima črta tudi širino atributa.

Včasih je to zelo potrebna lastnina. Spodnja slika prikazuje primer različne širine besedila.

Primer oblikovanja

Ustvarjanje spletne strani mora biti besedilo vedno berljivo. Če je uporabniku težko prebrati besedilo (premajhno ali preveliko), bo preprosto zaprl vaše spletno mesto.

Poskusite primerjati dva odstavka, prikazana na spodnji sliki. Katero besedilo želite prebrati?

Razmik vrstic CSS je zasnovan tako, da je zaznavanje besedila priročno. Prav tako ne pozabite, da se lahko različne pisave razlikujejo glede na začetno višino.

Zaradi jasnosti lahko preverite v katerem koli urejevalniku. Primerjajte nekaj pisav.

Upoštevajte, da so vse pisave napisane v 24 slikovnih pik. Kot lahko vidite, se vsi razlikujejo po višini in širini črk. Če primerjate dimenzije več, bo razlika bolj očitna.

CSS: razmik med vrsticami na seznamu

Prilagoditev intervalov se izvaja na seznamih. Poleg tega sta v slogovnih seznamih značilni zgoraj opisani rob in oblazinjenje. Zahvaljujoč tem seznamom postali lepši od standarda. Z uporabo vseh teh atributov lahko nastavite:

• Višina elementov seznama.
• Zamenjajte besedilo v levo.
• Zamiki za črte nad in spodaj.
• Največja širina vsakega elementa.

Zaključek

Lastništvo takega niza atributov, lahko igrate z zasnovo ne samo vrstice, ampak vse, kar želite. To so globalni parametri, ki veljajo za vse elemente (izjema je velikost pisave, ker je le za besedilo).