Vrlo često početnici dizajneri izgleda imaju problema sa savladavanjem kaskadnih stilskih tablica (CSS). Rad sa proredom u CSS-u nije izuzetak. Razmak između redova je vertikalna udaljenost između redova. Kao iu običnom Microsoft Word dokumentu, ovaj parametar možete promijeniti iu tekstu html datoteke.
Korištenje visine linije prilikom promjene razmaka
Prvo i najispravnije rješenje za problem razmaka je postavljanje vrijednosti za svojstvo visine reda. Po defaultu, vrijednost ovog svojstva je normalna (visina linije: normalna;). Razmak između redova automatski izračunava sam internet pretraživač i zavisi, posebno, od vrste fonta, kao i od njegove veličine. Svaku pozitivnu numeričku vrijednost koja je navedena u svojstvu stila visine linije pretraživač će tumačiti kao broj kojim se veličina trenutnog fonta mora pomnožiti.
U CSS-u, razmak između redova može biti specificiran u različitim jedinicama dužine: tačkama (pt), inčima (in), pikselima (px) i procentima (%). Procenat se izračunava u odnosu na trenutni font i podrazumevano je postavljen na 100%. Zapamtite da svojstvo line-height posuđuje svojstvo nasljeđivanja od svog roditelja.
Evo nekoliko primjera kako povećati razmak između redova u CSS-u:
Proces rada s proredom je prilično jednostavan. Trebali biste imati neko osnovno znanje o CSS-u i sposobnost povezivanja datoteke sa glavnom html stranicom. Stilovi se takođe mogu postaviti direktno na html stranici:
Da biste napravili jedan i po prored u ovoj rečenici, morate dodati sljedeći kod u CSS datoteku:
visina linije: 1,5;
Da biste napravili dvostruki razmak, možete napisati sljedeći kod:
visina linije: 200%;
U oba slučaja, pretraživač će shvatiti da trenutni font treba pomnožiti sa 2. Ova vrijednost će biti razmak između redova.
Evo primjera kako smanjiti razmak između redova (CSS):
Važno je zapamtiti da se negativna vrijednost visine reda jednostavno ne percipira, tako da njena minimalna vrijednost može biti 0. Da biste dobili pola razmaka, trebate napisati sljedeći kod:
visina linije: 0,5;
visina linije: 50%;
visina linije: 0.5pt;
Sve 3 opcije su ispravne i u skladu sa svim W3C standardima, odnosno radit će u bilo kojoj verziji preglednika.
Korištenje paddinga prilikom promjene razmaka
Međutim, osim promjene svojstva line-height, postoji još jedan način za promjenu razmaka između redova u CSS-u, a to je igranje vrijednostima svojstva paddinga. Svojstvo stila paddinga je odgovorno za dopunu u bilo kojem html objektu. Prema zadanim postavkama, ovo svojstvo je 0. Odabirom različitih vrijednosti, možete promijeniti razmak između redova, na primjer:
Rad sa proredom je jednostavan. Dovoljno je poznavati osnove CSS-a i biti u mogućnosti da povežete fajl sa glavnom html stranicom. Takođe se može postaviti direktno na stranicu sa html ekstenzijom.
Da povećate razmak između redova, povećajte vrijednost svojstva:
Tako će se razmak između redova u našem pasusu povećati za 10 piksela od početnog. Možete isto tako smanjiti razmak između redova pisanjem, na primjer:
Negativni prored
Ako ste primijetili, također nije dozvoljeno unositi negativne vrijednosti, kako se linije ne bi preklapale. U CSS-u, prored ne može biti negativan. Sa stanovišta kodiranja i standarda W3C, nikada ne možete upisati negativne vrijednosti u vrijednosti razmaka između redova.
Promijenite prored u listama
Ponekad se javlja zadatak da se promeni prored u listama
- i
- Stav 1
- Tačka 2
- Tačka 3
- stav;
- liste;
- ;
- stolovi;
- zaglavlja;
- i sve ostalo gde stavite tekst.
- pikseli;
- inches;
- bodovi;
- kamata;
- i drugi koji se koriste u CSS-u.
- Visina stavki liste.
- Uvlake za tekst lijevo.
- Uvlake gornjeg i donjeg reda.
- Maksimalna širina svake stavke.
- ... Prethodne metode neće dovesti do željenog rezultata, međutim postoji jedno svojstvo koje može promijeniti razmak na listi - ovo svojstvo - margina. Ovo svojstvo stila može biti pozitivno ili negativno. Pokažimo promjenu proreda na listi koristeći primjer:
Da biste povećali uvlačenje, morate napisati sljedeće redove u CSS datoteku:
margin-top: 10px;
Tako smo naznačili da je udaljenost od svake stavke na listi povećana za 10 piksela. Štaviše, u u ovom slučaju moguća je i negativna vrijednost. Dakle, možemo postaviti: - margin-top: -15px.
CSS je neophodan za stilizovanje teksta. Svaki stručnjak ih uvijek koristi ako stvori lijepu stranicu. Zahvaljujući ovim atributima, možete izvoditi sve operacije s tekstom.
Po pravilu, većina slagača ne voli zadani izgled teksta u html-u. CSS razmak između redova vam omogućava da prilagodite gotovo sve što možete zamisliti. A ako zađete dublje, onda možete učiniti ono što nikada niste zamišljali.
Kako napraviti prored teksta u CSS-u
Važno je shvatiti da možete postaviti veličine linija, uvlake i tako dalje za sve elemente u kojima postoji tekst. Na primjer, svi ovi atributi se dobro primjenjuju za:
Kada gledate CSS prored, prva stvar koju treba pogledati su sljedeći atributi.
U "Photoshopu" postoji koncept Leading. U CSS-u ne postoji takav atribut, ali zahvaljujući njemu možete razjasniti suštinu. Vodeća je, zapravo, udaljenost između redova.
U CSS-u, veličina linije je određena parametrima line-height i font-size. Kao što vidite, slika jasno kaže da je veličina fonta veličina fonta. Ni jedno slovo nikada ne prelazi ove granice.
Visina linije je rastojanje od sredine gornje vodeće do sredine donje vođice. Sve je to označeno strelicama na slici.
Imajte na umu da ako navedete visinu reda manju od veličine fonta, tada će linije prelaziti jedna preko druge. Obavezno to pratite kako ova situacija ne bi uspjela.
Neki ljudi misle zašto je veličina fonta rastegnuta niže od reda sa slovima. To je jednostavno. Na kraju krajeva, postoje slova koja su izostavljena ispod nivoa glavne linije. Slika ispod je ilustrativan primjer gdje se koriste simboli rastegnuti gore i dolje.
Kao što vidite, slova zauzimaju cijeli raspon veličine fonta. I visina linije je veća i jednak prostor je dodat na obje strane.
Atribut line-height može biti bilo šta:
Ne možete navesti negativnu vrijednost. Na primjer, ako unesete faktor jedan i po, tada ćete dobiti standardni prored jedan i po u tekstu.
Ako koristite procente, imajte na umu da je 100% u visini reda jednako veličini fonta.
Osim toga, možete odrediti vrijednost normalnu ili naslijediti. Ako navedete normalno, tada će pretraživač automatski izračunati udaljenost između redova prema vlastitom nahođenju. Značenje može varirati ovisno o pretraživaču. Preporučuje se postavljanje određenog broja kako bi svi korisnici imali isti.
Naslijediti znači da će vrijednost biti potpuno ista kao i roditeljski element.
Detaljniji dizajn
CSS prored nije ograničen samo na gornje atribute. Razmak se također prilagođava atributima margine i paddinga. Ako navedete atribut tačno kao margin = "5px", tada će se na svim stranama linije (paragraf) dodati razmak od 5 piksela.
Ako trebate samo navesti iznad pasusa, tada možete odrediti marginu na vrhu. Prijevod je vrlo jednostavan. Tako će biti moguće postaviti uvlake na svakoj strani.
Imajte na umu da postoji i atribut padding. Radi na isti način kao margina. Možete postaviti i opće uvlačenje i određeni smjer (lijevo, desno, gore, dolje).
Pažljivo pogledajte sliku iznad. Margina je margina izvan objekta, a padding je unutra.
Ovi atributi su globalni. Mogu se primijeniti na sve - slike, tabele, tekst, veze itd.
Zapamtite ovo jednom za svagda. Ovo je vrlo važna tačka pri dizajniranju objekata. Na primjer, zahvaljujući margini, možete odrediti uvlake između teksta i slika unutar njega. Ako ove margine nema, onda će tekst biti postavljen blizu slike.
Ako imate tekst u tabeli, koristite padding da biste sprečili da se tekst zalepi za ivice tabele, jer izgleda ružno. A ako postavite uvlačenje od najmanje 5 piksela, već će izgledati mnogo bolje. Pored visine, linija ima atribut širine.
Ponekad je ovo vrlo korisna svojstva. Na slici ispod prikazan je primjer različitih širina teksta.
Primjer registracije
Kada kreirate dizajn web stranice, uvijek morate učiniti da tekst bude što čitljiviji. Ako korisniku bude teško da pročita tekst (premali je ili prevelik), jednostavno će zatvoriti vašu stranicu.
Pokušajte uporediti dva paragrafa prikazana na slici ispod. Koji vam je tekst zgodniji za čitanje?
CSS prored je dizajniran da olakša čitanje teksta. Također, imajte na umu da se različiti fontovi mogu razlikovati u svojoj originalnoj visini.
Radi jasnoće, možete ga provjeriti u bilo kojem uređivaču. Uporedimo nekoliko fontova.
Imajte na umu da su svi fontovi napisani u 24 piksela. Kao što vidite, svi se razlikuju po visini i širini slova. Ako uporedite veće veličine, razlika će biti očiglednija.
CSS: prored na listi
Postavka razmaka se primjenjuje i na liste. Osim toga, gore opisane margine i padding su karakteristični za stilove liste. To čini liste ljepšima od standardnih. Koristeći sve ove atribute, možete odrediti:
Zaključak
Sa ovim skupom atributa, možete se igrati sa dizajnom ne samo linija, već šta god želite. Ovo su globalni parametri kojima se povinuju apsolutno svi elementi (izuzetak je veličina fonta, jer je samo za tekst).
Ako ste nedavno počeli raditi s uređivačem teksta "Word", onda možda ne znate kako se u njemu mijenja formatiranje svih aspekata. U ovom članku ćemo govoriti samo o jednom od njih - reći ćemo vam kako smanjiti razmak između redova u "Wordu". Slažete se, svi žele da dokument koji su napisali izgleda lijepo kada se odštampa, a takvi artefakti samo uništavaju ovu ljepotu. Stoga pročitajte članak do kraja da biste znali kako se nositi s njima.
Dodatni paragrafi
Prije smanjivanja razmaka između redova u "Wordu", preporučuje se prvo razumjeti paragrafe. U smislu da ponekad korisnik može staviti nekoliko umjesto jednog pasusa. Upravo te radnje dovode do činjenice da između redova postoji veliki bijeli prostor.
Da biste smanjili vrijeme potrošeno na traženje ovih nijansi, možete koristiti vizualizaciju.Ova funkcija se aktivira klikom na ikonu koja se nalazi na traci s alatima. Nalazi se na kartici "Početna" i označena je ikonom "¶". Klikom na nju moći ćete vidjeti sve Paragraf u ovom slučaju je također prikazan simbolom "¶".
Sada samo trebate pronaći dodatne pasuse i izbrisati ih. Ovo je bio prvi način, ali ne i posljednji, pa idemo na drugi.
Problem razmaka
Sljedeći način da ga smanjite je da promijenite stil u Bez razmaka. Međutim, ova metoda se preporučuje samo ako je jaz jako velik i izražen. Činjenica je da takva metoda može radikalno promijeniti svo formatiranje vašeg dokumenta i time uništiti rad.
Dakle, da biste uklonili veliki razmak između redova, morate otići na karticu "Početna" i tamo pronaći odjeljak pod nazivom "Stilovi". U njemu morate odabrati stil "Bez razmaka". Ako nije na ploči, proširite odjeljak odgovarajućim gumbom.
Ako imate najnoviju verziju "Worda", tada se ove manipulacije moraju obaviti na kartici "Dizajn", u odjeljku "Formatiranje dokumenta". Alat se zove Paragraph Spacing.
Izvodimo kompletno podešavanje: otvorite "Paragraph"
Prije toga smo razmatrali metode koje ne daju potpunost radnji, mogle su samo promijeniti neko formatiranje u kratkom vremenu. Ali ako želite ukloniti razmak između redova i ne oštetiti cijeli dokument, onda je najbolje koristiti punu postavku. Upravo sada ćemo razgovarati o tome kako smanjiti razmak između redova u "Wordu" korištenjem fleksibilnih postavki oblikovanja.
Prvo morate odabrati područje teksta koje ćete promijeniti. Nakon toga idite na karticu "Početna" i u njoj, u odjeljku "Paragraf", kliknite na ikonu sa strelicom koja pokazuje u donji desni ugao. Sama ikona se nalazi u donjem desnom uglu sekcije.
Vršimo potpuno podešavanje: postavite vrijednost
Čim to učinite, pred vama će se pojaviti prozor postavki "Paragraph". U njemu odmah obratite pažnju na odjeljak "Interval". U njemu se provode sva podešavanja koja su nam potrebna. Možete promijeniti razmak između pasusa i između redova samog pasusa. Da biste uradili prvo, koristite brojač pored reči "Prije:" i "Nakon:".
U slučaju kada želite potpuno ukloniti interval, stavite "0". Ako želite ukloniti razmak između samih redova, koristite padajuću listu s desne strane. Možete koristiti unaprijed postavljene postavke (jednostruki, 1,5 reda, dvostruki, minimalni, tačni i množitelj) ili ručno unijeti vrijednost u polje "vrijednost:".
Dakle, prošli ste, da tako kažem, obuku za Word na temu kako smanjiti razmak između redova.
Nekretnina visina linije postavlja razmak između redova teksta (prored). Svojstvo ne postavlja razmak između redova teksta kako se čini, ono postavlja visina reda teksta... To znači da će se stvarni razmak između redova izračunati na sljedeći način: visina linije - veličina slova= udaljenost između redova teksta. Ili obrnuto visina linije = veličina slova+ razmak između redova teksta.
Nekretnina visina linije ponekad se koristi na nestandardan način za centriranje teksta okomito.
Sintaksa
Selektor (visina linije: CSS jedinice | procenti | množilac | normalno | naslijediti;)
Vrijednosti
Podrazumevano, pretraživač automatski bira prored ( normalno).
Primjeri
Primjer
visina linije - veličina slova= 35px - 13px = 21px:
P (veličina fonta: 13px; visina linije: 35px;)
Rezultat izvršavanja koda:
Primjer
Smanjite razmak na 21px - 13px = 7px:
P (veličina fonta: 13px; visina linije: 21px;)
Rezultat izvršavanja koda:
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.
Primjer
U ovom primjeru, razmak između redova teksta će biti visina linije - veličina slova = 13px - 13px = 0px- linije se gotovo drže zajedno (repovi slova gornje linije dodirivat će repove slova donje):
P (veličina fonta: 13px; visina linije: 13px;)
Rezultat izvršavanja koda:
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.
Primjer
U ovom primjeru vrijednost visina linije- množitelj 1,5 puta veći od veličine fonta. Dakle visina linijeće biti ekvivalentan veličina slova * 1.5 = 13px * 1.5 = 20px... I pravi jaz između redova će biti visina linije - veličina slova = 20px - 13px = 7px:
P (veličina fonta: 13px; visina linije: 1,5;)
Rezultat izvršavanja koda:
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.
Primjer
Povećajmo množitelj:
P (veličina fonta: 13px; visina linije: 2,5;)
Rezultat izvršavanja koda:
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.
Primjer
Ako ti uradiš visina linije manji veličina slova, tada će linije općenito stati jedna na drugu:
P (veličina fonta: 13px; visina linije: 9px;)
Rezultat izvršavanja koda.
Nekretnina visina linije postavlja razmak između redova teksta (prored). Svojstvo ne postavlja razmak između redova teksta kako se čini, ono postavlja visina reda teksta... To znači da će se stvarni razmak između redova izračunati na sljedeći način: visina linije - veličina slova= udaljenost između redova teksta. Ili obrnuto visina linije = veličina slova+ razmak između redova teksta.
Nekretnina visina linije ponekad se koristi na nestandardan način za centriranje teksta okomito.
Sintaksa
Selektor (visina linije: CSS jedinice | procenti | množilac | normalno | naslijediti;)
Vrijednosti
Podrazumevano, pretraživač automatski bira prored ( normalno).
Primjeri
Primjer
visina linije - veličina slova= 35px - 13px = 21px:
P (veličina fonta: 13px; visina linije: 35px;)
Rezultat izvršavanja koda:
Primjer
Smanjite razmak na 21px - 13px = 7px:
P (veličina fonta: 13px; visina linije: 21px;)
Rezultat izvršavanja koda:
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.
Primjer
U ovom primjeru, razmak između redova teksta će biti visina linije - veličina slova = 13px - 13px = 0px- linije se gotovo drže zajedno (repovi slova gornje linije dodirivat će repove slova donje):
P (veličina fonta: 13px; visina linije: 13px;)
Rezultat izvršavanja koda:
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.
Primjer
U ovom primjeru vrijednost visina linije- množitelj 1,5 puta veći od veličine fonta. Dakle visina linijeće biti ekvivalentan veličina slova * 1.5 = 13px * 1.5 = 20px... I pravi jaz između redova će biti visina linije - veličina slova = 20px - 13px = 7px:
P (veličina fonta: 13px; visina linije: 1,5;)
Rezultat izvršavanja koda:
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.
Primjer
Povećajmo množitelj:
P (veličina fonta: 13px; visina linije: 2,5;)
Rezultat izvršavanja koda:
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.
Primjer
Ako ti uradiš visina linije manji veličina slova, tada će linije općenito stati jedna na drugu:
P (veličina fonta: 13px; visina linije: 9px;)
Rezultat izvršavanja koda.
