Trajtimi i hapësirave midis shkronjave dhe fjalëve
1. Hapësira ndërmjet fjalëve ndarje fjalësh
Vendos hapësirën midis fjalëve. Mund të përdoren vlera pozitive dhe negative. Me një kuptim negativ, fjalët mund të mbivendosen.
Vlera e ndarjes së fjalëve ndikohet nga vlera e veçorisë text-align kur teksti është rreshtuar në gjerësi. I trasheguar.
Sintaksë
P (hapësira ndërmjet fjalëve: normale;) p (hapësira ndërmjet fjalëve: 2 px;)
Oriz. 1. Largësia ndërmjet fjalëve
2. Hapësira midis shkronjave
Vetia cakton distancën midis shkronjave (sasia e përcjelljes) dhe simboleve. Mund të marrë vlera pozitive dhe negative. Është e këshillueshme që të përdoret për të rritur ekspresivitetin dhe lexueshmërinë e titujve, përkufizimeve, etj. Të trashëguara.
Sintaksë
P (hapësira midis shkronjave: normale;) p (hapësira midis shkronjave: 2 px;)
Oriz. 2. Ndryshimi i hapësirës ndërmjet shkronjave duke përdorur veçorinë e ndarjes së shkronjave
3. Trajtimi i hapësirës së bardhë
Vetia trajton hapësirat midis fjalëve dhe ndërprerjeve të rreshtave brenda një elementi. E pa trashëguar.
hapesire e bardhe | |
---|---|
Vlerat: | |
normale | Vlera e paracaktuar. Midis fjalëve futet vetëm një hapësirë, hapësirat shtesë fshihen. Teksti mbështillet vetëm nëse është e nevojshme. |
rrep | Parandalon thyerjet e linjave, përveç kur aplikohet . |
para | Hapësirat në tekst nuk shpërfillen; shfletuesi shfaq hapësira shtesë dhe ndërprerje rreshtash. |
mbështjellja paraprake | Ruan hapësirat në tekst duke bërë ndërprerje rreshtash aty ku është e përshtatshme. |
paralinjë | Heq hapësirat shtesë përveç rasteve . |
fillestare | Vendos vlerën e pronës në vlerën e saj të paracaktuar. |
trashëgojnë | Trashëgon vlerën e pronës nga elementi mëmë. |
Sintaksë
P (hapësirë e bardhë: normale;) p (hapësirë e bardhë: tanirape;) p (hapësirë e bardhë: para;) p (hapësirë e bardhë: para-mbështjellje;) p (hapësirë e bardhë: vija paraprake;)
4. Vendosja e madhësisë së skedës
Për të ndryshuar sasinë e dhëmbëzimit të marrë me tastin Tab, përdorni veçorinë tab-size. Vlerat e vetive shpërfillen kur vendoset një nga tre vlerat para-line, normale ose nowrap të veçorisë së hapësirës së bardhë.
Punon vetëm për elementë
Sintaksë
Pre (-moz-tab-size: 16;) / * Firefox * / pre (-o-tab-size: 16;) / * Opera 10.6-12.1 * / pre (madhësia e skedës: 16;)
Në CSS, është shumë e lehtë të vendosësh ndarjen midis rreshtave. Ekziston një pronë e veçantë për këtë. Por, sigurisht, ka shumë parametra të tjerë që janë universalë dhe mund të aplikohen në tekst.
Nëse nuk bëhen cilësime, vendosen vlerat e paracaktuara. Nëse dëshironi, mund ta ndryshoni këtë distancë. Vlera mund të jetë ose përqindje ose piksel.
Lartësia e vijave
Në CSS, ndarja e rreshtave mund të demonstrohet me figurën e mëposhtme.
Imazhi i mësipërm tregon parametrat me distancat përkatëse. Teksti vendoset në hapësirën e madhësisë së shkronjave. Vini re se linja e tekstit nuk fillon në bazë, por pak më e lartë. Hapësira më poshtë është dhënë për shkronjat që kanë elementë poshtë (g, y, e kështu me radhë).
Vini re se hapësira midis blloqeve të madhësisë së shkronjave quhet kryesore. Në HTML dhe CSS, kjo veti nuk shfaqet në asnjë mënyrë, por është në redaktuesit e tjerë të grafikës dhe tekstit. Për shembull, në Adobe Photoshop.
Fotografia e mësipërme tregon se ku në Photoshop mund të specifikoni drejtimin. Dhe pranë tij është parametri i madhësisë së shkronjave.
Shembuj të përdorimit të lartësisë së vijës
Në CSS, ndarja e rreshtave mund të vendoset si përqindje. Një shembull ilustrues është dhënë më poshtë.
Në rastin e një vlere të vogël, do të jetë e papërshtatshme për përdoruesin e faqes tuaj të lexojë.
Distanca mund të ndryshohet edhe nga madhësia e shkronjave. Nëse ndryshimi midis parametrave kryesorë është shumë i ndryshëm në numër, atëherë ky ndryshim do të kompensohet nga një rritje në kryesimin.
Hollësitë e dizajnit
Në CSS, ndarja e rreshtave mund të rregullohet më tej me dhëmbëzime të ndryshme. Le të shohim një shembull në figurë.
Në fushën "Element", në rastin tonë, do të ketë tekst. Mbushja është mbushja brenda objektit, dhe diferenca është mbushja pas objektit. Kufiri është një kufi. Mund të jetë 0 piksel, ose mund të jetë 100.
Imazhi i mëposhtëm tregon të gjithë mbushjen, kufirin dhe lartësinë e rreshtit të tekstit në të njëjtën kohë.
Nëse teksti juaj është i vogël, vetëm një rresht, ose secila rresht është në një paragraf të veçantë, atëherë distanca mund të rregullohet nga dhëmbëzimi midis këtyre paragrafëve. Kjo do të thotë, ndarja dhe mbushja midis rreshtave në të njëjtin element nuk kanë asnjë efekt. Ata futin vetëm skajet e objektit. Objekti është i gjithë paragrafi, jo rreshtat në të. Është e rëndësishme të mos ngatërrohemi këtu.
Në rastet kur ka shumë rreshta, dhe e gjithë kjo ndodhet në një objekt, rekomandohet të ndryshoni fontin me parametrat kryesorë.
Si të rritet hapësira midis linjave CSS
Hapësira ndërmjet rreshtave HTML mund t'i caktohet çdo klase ose për të gjithë paragrafët në tekst. Nëse specifikoni kështu: p (lartësia e vijës: 20 px;), atëherë absolutisht të gjithë paragrafët në faqe do të jenë me rreshta me madhësi 20 pikselë. Nëse keni nevojë për madhësi të ndryshme në vende të ndryshme, atëherë rekomandohet të bëni si më poshtë.
Ne regjistrojmë stilet.
Klasa 1 (lartësia e rreshtit: 20 px;)
Klasa 2 (lartësia e rreshtit: 16 px;)
Klasa 3 (lartësia e rreshtit: 12 px;)
Për qartësi, le të shtojmë një kufi në mënyrë që të shihni se funksionon. Në të ardhmen, ajo duhet të hiqet.
Vini re se në rastin e tretë, shiriti kaloi mbi tekst. Kjo për faktin se është më e madhe se lartësia e vijës. Prandaj, është e rëndësishme të sigurohet që të mos ketë kontradikta të tilla. Nëse e bëni lartësinë e rreshtit të vogël, atëherë zvogëloni fontin në përputhje me rrethanat.
Nuk rekomandohet të bëni tekst shumë të vogël dhe hapësirë të vogël midis rreshtave. Meqenëse asnjë përdorues nuk mund t'i lexojë të gjitha me qetësi. Sytë e tij do të lodhen shpejt. Motorët e kërkimit gjithashtu thonë që teksti të jetë miqësor për përdoruesit.
Për më tepër, kohët e fundit i është kushtuar shumë rëndësi komoditetit për përdoruesit e celularëve. Atje, udhëzimet thonë gjithmonë se madhësia e shkronjave duhet të jetë normale, jo e vogël. Kjo është veçanërisht e vërtetë për lidhjet. Me madhësinë e tyre të vogël, përdoruesi do ta ketë të vështirë të lundrojë në faqe.
Google ka një mjet të dedikuar për të ndihmuar me këtë analizë. Është shumë miqësore për webmaster.
Këtu është një shembull i rezultateve që mund të jenë.
CSS është thelbësor për stilimin e tekstit. Çdo specialist i përdor gjithmonë nëse krijon një faqe të bukur. Falë këtyre atributeve, ju mund të kryeni çdo veprim me tekstin.
Si rregull, shumica e shtypësve nuk e pëlqejnë paraqitjen e paracaktuar të tekstit në html. Hapësira e linjave CSS ju lejon të personalizoni pothuajse çdo gjë që mund të imagjinohet. Dhe nëse shkoni më thellë, atëherë mund të bëni atë që nuk e kishit imagjinuar kurrë.
Si të bëni ndarjen e rreshtave të tekstit në CSS
Është e rëndësishme të kuptoni se mund të vendosni madhësitë e rreshtave, dhëmbëzimet etj. për të gjithë elementët ku ka tekst. Për shembull, të gjitha këto atribute zbatohen mjaft mirë për:
- paragraf;
- listat;
- ;
- tavolina;
- headers;
- dhe çdo gjë tjetër ku vendosni tekstin.
Kur shikoni ndarjen e rreshtave CSS, gjëja e parë që duhet të shikoni janë atributet e mëposhtme.
Në “Photoshop” ekziston koncepti i Leading. Nuk ka një atribut të tillë në CSS, por falë tij, ju mund të sqaroni thelbin. Drejtues, në fakt, është distanca midis linjave.
Në CSS, madhësia e një rreshti përcaktohet nga parametrat e lartësisë së rreshtit dhe madhësisë së shkronjave. Siç mund ta shihni, figura tregon qartë se madhësia e shkronjave është madhësia e fontit. Asnjë shkronjë e vetme nuk shkon përtej këtyre kufijve.
Lartësia e vijës është distanca nga mesi i pjesës së sipërme që çon në mes të pjesës së poshtme kryesore. E gjithë kjo tregohet me shigjeta në figurë.
Ju lutemi vini re se nëse specifikoni një lartësi rreshti më të vogël se madhësia e shkronjave, atëherë linjat do të kalojnë njëra mbi tjetrën. Sigurohuni që ta monitoroni këtë në mënyrë që kjo situatë të mos funksionojë.
Disa njerëz mendojnë pse madhësia e shkronjave është e shtrirë më poshtë se vija me shkronja. Është e thjeshtë. Në fund të fundit, ka shkronja që janë lënë jashtë nivelit të linjës kryesore. Figura më poshtë është një shembull ilustrues ku përdoren simbolet e shtrira lart e poshtë.
Siç mund ta shihni, shkronjat zënë të gjithë gamën e madhësisë së shkronjave. Dhe lartësia e linjës është më e lartë dhe hapësira e barabartë shtohet në të dy anët.
Atributi line-height mund të jetë çdo gjë:
- piksele;
- inç;
- pikë;
- interesi;
- dhe të tjera që përdoren në CSS.
Ju nuk mund të specifikoni një vlerë negative. Për shembull, nëse futni një faktor prej një e gjysmë, atëherë merrni hapësirën standarde një e gjysmë në tekst.
Nëse përdorni përqindje, mbani në mend se 100% në lartësinë e rreshtit është e barabartë me madhësinë e shkronjave.
Përveç kësaj, ju mund të specifikoni vlerën normale ose të trashëgoni. Nëse specifikoni normale, atëherë distanca midis linjave do të llogaritet automatikisht nga shfletuesi sipas gjykimit të tij. Kuptimi mund të ndryshojë pasi varet nga shfletuesi. Rekomandohet të vendosni një numër specifik në mënyrë që të gjithë përdoruesit të kenë të njëjtin.
Trashëgimi do të thotë se vlera do të jetë saktësisht e njëjtë me elementin prind.
Dizajn më i detajuar
Hapësira e linjës CSS nuk është e kufizuar vetëm në atributet e mësipërme. Hapësira rregullohet gjithashtu nga atributet e diferencës dhe mbushjes. Nëse specifikoni atributin saktësisht si diferencë = "5px", atëherë një distancë prej 5 pikselësh do të shtohet në të gjitha anët e rreshtit (paragrafi).
Nëse ju duhet vetëm të specifikoni mbi një paragraf, atëherë mund të specifikoni një diferencë të lartë. Përkthimi është shumë i thjeshtë. Kështu, do të jetë e mundur të vendosen dhëmbëza në secilën anë.
Vini re se ekziston gjithashtu një atribut mbushjeje. Ajo funksionon në të njëjtën mënyrë si diferenca. Mund të vendosni si një dhëmbëzim të përgjithshëm ashtu edhe një drejtim specifik (majtas, djathtas, lart, poshtë).
Shikoni nga afër foton e mësipërme. Marzhi është diferenca jashtë objektit dhe mbushja është brenda.
Këto atribute janë globale. Ato mund të aplikohen për gjithçka - fotografi, tabela, tekst, lidhje etj.
Mos harroni këtë një herë e përgjithmonë. Kjo është një pikë shumë e rëndësishme kur dizajnoni objekte. Për shembull, falë margjinës, mund të specifikoni dhëmbëzimet midis tekstit dhe imazheve brenda tij. Nëse këto margjina mungojnë, atëherë teksti do të vendoset afër figurës.
Nëse keni tekst në një tabelë, atëherë përdorni mbushjen për të parandaluar ngjitjen e tekstit në skajet e tabelës, pasi duket i shëmtuar. Dhe nëse vendosni një indent prej të paktën 5 pikselësh, tashmë do të duket shumë më mirë. Përveç lartësisë, linja ka një atribut gjerësie.
Ndonjëherë kjo është një pronë shumë e dobishme. Fotografia më poshtë tregon një shembull të gjerësive të ndryshme të tekstit.
Shembull i regjistrimit
Kur krijoni një dizajn uebsajti, gjithmonë duhet të veproni në mënyrë që teksti të jetë sa më i lexueshëm. Nëse përdoruesi e ka të vështirë të lexojë tekstin (është shumë i vogël ose shumë i madh), ai thjesht do të mbyllë faqen tuaj.
Provoni të krahasoni dy paragrafët e paraqitur në foton më poshtë. Cili tekst është më i përshtatshëm për ju për të lexuar?
Hapësira e rreshtave CSS është krijuar për ta bërë tekstin më të lehtë për t'u lexuar. Gjithashtu, mbani në mend se fontet e ndryshme mund të ndryshojnë në lartësinë e tyre origjinale.
Për qartësi, mund ta kontrolloni në çdo redaktues. Le të krahasojmë disa fonte.
Vini re se të gjitha fontet janë shkruar me 24 piksele. Siç mund ta shihni, të gjitha ato ndryshojnë në lartësinë dhe gjerësinë e shkronjave. Nëse krahasoni madhësitë më të mëdha, ndryshimi do të jetë më i dukshëm.
CSS: ndarja e rreshtave në një listë
Cilësimi i ndarjes vlen edhe për listat. Përveç kësaj, diferenca dhe mbushja e përshkruar më sipër janë karakteristikë e stileve të listës. Kjo i bën listat më të bukura se ato standarde. Duke përdorur të gjitha këto atribute, mund të specifikoni:
- Lartësia e artikujve të listës.
- Ndarjet për tekstin në të majtë.
- Ndarjet e vijës së sipërme dhe të poshtme.
- Gjerësia maksimale e secilit artikull.
konkluzioni
Me këtë grup atributesh, ju mund të luani me dizajnin jo vetëm të linjave, por çfarëdo që dëshironi. Këto janë parametra globalë që absolutisht të gjithë elementët i binden (përjashtim është madhësia e shkronjave, pasi është vetëm për tekst).
Duke punuar me një stil për tekstin, mund të vendosni hapësirën e dëshiruar midis karaktereve, fjalëve dhe rreshtave. Distanca të tilla vendosen në çdo njësi CSS, qoftë px, pt, em ose një tjetër. Përjashtim janë përqindjet - ato mund të përdoren për të vendosur ndarjen midis rreshtave (drejtues), por ato nuk funksionojnë kur vendosni ndarjen midis karaktereve ose fjalëve.
Hapësira e karaktereve CSS: hapësira midis shkronjave
Ju mund të vendosni ndarjen e karaktereve duke përdorur veçorinë CSS për ndarjen e shkronjave. Përveç vlerave normale (pozitive dhe negative), mund të përdorni edhe vlerat trashëgimore (për të trashëguar vlerën nga prindi) dhe normale (nëse dëshironi të ktheni hapësirën normale të karaktereve).
Një shembull i një regjistrimi të ndarjes së karaktereve:
P (hapësira midis shkronjave: 2em;)
Hapësira ndërmjet fjalëve: ndarje fjalësh
Vetia e ndarjes së fjalëve CSS ndryshon nga ajo e mëparshme në atë që vendos hapësirën midis fjalëve, jo midis karaktereve. Kjo pronë ka edhe vlera normale dhe trashëguese. Mund të specifikohen vlerat negative. Një shembull i shkrimit të një stili tregohet më poshtë:
P (hapësira e fjalëve: 6 px;)
Hapësira e rreshtave: vijë-lartësi
Vetia CSS e lartësisë së vijës mund të përdoret për të vendosur hapësirën midis rreshtave të tekstit. Siç u tha në fillim të temës, për të vendosur kryesuesin, përveç njësive të tjera matëse, lejohet përdorimi i përqindjeve. Lejohet gjithashtu të shkruhet vlera si shumëzues (numra më të mëdhenj se 0): për të llogaritur distancën, shfletuesi do të shumëzojë madhësinë e shkronjave me numrin e specifikuar. Vlerat negative nuk funksionojnë. Vlerat e disponueshme janë normale dhe të trashëguara.
Më poshtë është një shembull se si të bëni ndarjen e rreshtave CSS:
P (lartësia e vijës: 180%;)
Në pamjen e ekranit, mund të shihni se si duket teksti me të tre vetitë:
Pamja e ekranit: Hapësira CSS
Rezultatet
Kur vendosni hapësirën midis fjalëve, karaktereve ose rreshtave, para së gjithash, sigurohuni që teksti në fund të fundit të jetë i lehtë për t'u lexuar. Vetitë e tilla duhet të trajtohen me kujdes dhe të përdoren gjithmonë me moderim, pa fanatizëm, përndryshe e gjithë përmbajtja tekstuale kërcënon të kthehet në një grup shkronjash të palexueshme.