Një burim në internet vlerësohet nga përdoruesit sipas atraktivitetit të tij të jashtëm. Prandaj, edhe informacion tekst i dobishëm mund të mos lexohet për faktin se është i formatuar dobët. Përfundim - duhet t'i qaseni me kujdes dhe me kujdes jo vetëm përmbajtjes semantike të faqeve të faqes, por edhe saj prezantimi vizual. Pamja e jashtme Teknologjitë CSS zgjeroi mundësitë e krijimit të artikujve tërheqës. Një nga vetitë e krijuara për ta bërë shkrimin më të lehtë për t'u lexuar është dhëmbëzimi. tekst css.
Margjinat dhe mbushja: cili është ndryshimi?
Përpara se të filloni të formatoni tekstin, duhet të kuptoni se cilat janë margjinat dhe indencat. Përkundër faktit se këta elementë të shënimit në disa raste duken të njëjta për përdoruesit, ekzistojnë dallime thelbësore midis tyre:
- fusha vendoset nga prona mbushje, injeksion - diferencë;
- diferenca përcaktohet nga hendeku midis përmbajtjes dhe kufirit të bllokut, indenti - midis kufijve të blloqeve ngjitur;
- Marzhet ose mund të merren parasysh në madhësinë e elementit (gjerësia dhe lartësia), ose jo.
pronë e marzhit
Pra, për të vendosur dhëmbëzimin horizontal ose vertikal të tekstit CSS, përdorni konstruksionin diferencë. Kjo pronë vlen për etiketën duke përcaktuar paragrafin e dokumentit. Në shumë rast i thjeshtë shkruhet si:
diferenca: 12 px
Kjo linjë do të thotë që një bllok teksti (ose çdo bllok tjetër) do të jetë i prerë nga të gjitha anët me 12 piksele. Për të rritur intervalin, për shembull, tre herë, mjafton të shkruani:
diferenca: 36 px
Por, çka nëse hapësira ndërmjet blloqeve duhet të jetë e ndryshme në secilën anë? Zhvilluesit e faqeve të internetit përdorin disa forma shënimesh:
- diferenca: 11px 22px.
- diferenca: 11px 22px 33px.
- diferenca: 11px 22px 33px 44px.
Në shembullin e parë, 11 piksele do të futen nga kufijtë e poshtëm dhe të sipërm të bllokut, dhe 22 pikselë do të futen nga anët e bllokut. Sipas formës së dytë të shkrimit, do të ketë 11 piksel midis skajit të sipërm të bllokut dhe përmbajtjes, 33 pikselë midis fundit dhe 22 pikselë në anët. Në rastin e tretë, mbushja do të jetë 11 pikselë nga lart, 22 pikselë nga e djathta, 33 pikselë nga poshtë dhe 44 piksele nga e majta.
Është gjithashtu e mundur të regjistrohet distanca deri në kufirin e bllokut vetëm në njërën anë: margjina-lart, margjina-poshtë, margjina-majtas, margjina-djathtas. Pasi të keni përkthyer emrat e pronave në Rusisht, është e lehtë të merret me mend qëllimi i tyre. Për shembull, hyrja e mëposhtme thotë se mbushja e duhur do të jetë 22 pikselë:
margjina-djathtas: 22 px
Për anët e tjera, distancat rreth bllokut merren të barabarta me vlerën e elementit mëmë.
Pronës diferencë ka një veçori që zhvilluesi duhet ta ketë parasysh kur përdor dhëmbëzimin vertikal të CSS. Intervalet elementet fqinje jo kumulative, por të mbivendosura mbi njëra-tjetrën. Për shembull, le të ketë një nga blloqet margjina e poshtme: 15 px, dhe blloku ngjitur me të nga poshtë margjina e sipërme: 35 px. Aritmetika e shkollës dhe sensi i shëndoshë diktojnë që mbushja totale mes tyre të jetë 50 pikselë. Në praktikë, ky nuk është rasti. Blloko me vlera të mëdha Vetitë diferencë"thith" fqinjin e saj. Si rezultat, distanca midis elementeve do të jetë 35 piksele.
“Vija e kuqe
Bërja e një dokumenti në redaktori i tekstit, përdoruesit preferojnë të vendosin secilin paragrafi i ri duke përdorur vijën e kuqe. ME duke përdorur CSS Dhënia e tekstit në të majtë është e lehtë për t'u bërë - përdoret ndërtimi dhëmbëzimi i tekstit. Është shkruar kështu:
teksti-indent: 11px.
Kjo do të thotë, rreshti i parë i paragrafit do të zhvendoset nga buza e majtë relative me 11 piksel. Për ta bërë tekstin në faqen e internetit të duket më shumë si një dokument në redaktues, duhet të vendosni gjithashtu, domethënë të shkruani:
teksti-indent: 11px;
text-align: justifikoj.
Përveç pikselëve, kur përshkruani shënimin, lejohet të përdorni njësi të tjera - inç, pikë, përqindje. Lëreni që blloku të ketë një indentim teksti CSS prej 10%. Me një gjerësi blloku prej 500 pikselësh, vija e kuqe do të jetë 50 pikselë (10% e 500).
Për pronë e dhënë vlera mund të vendoset trashëgojnë. Një rekord i tillë thotë se blloku përdor një pronë të ngjashme të bllokut prind.
tekst-indent: trashëgoj.
Çuditërisht, mund të marrë vlerat negative! Në këtë rast, formohen të ashtuquajturat parvaz, domethënë teksti kryesor mbetet në vend, dhe rreshti i parë zhvendoset në të majtë me 22 piksel:
teksti-indent: -22px.
Që shkronjat të mos kryqëzohen kufiri i majtë shfletuesi, përveç dhëmbëzimi i tekstit ju duhet të përdorni konstruksionin për të vendosur fushën:
mbushje-majtas: 22 px
Kryesor vetitë css për konsideratë. Dhe praktika do t'ju ndihmojë t'i rregulloni ato. Këtu janë disa këshilla përfundimtare se si të zbatoni atë që keni mësuar në zhvillimin e faqes tuaj të internetit:
- vija e kuqe dhe dhëmbëzimi i tekstit janë koncepte të ndryshme dhe veçori të ndryshme përdoren për t'i specifikuar ato;
- për dhëmbëzimet vertikale rregullat e matematikës nuk funksionojnë - intervalet mbivendosen, elementi me një vlerë të madhe "fiton";
- negativ paragrafi paragraf përdoret për të treguar rreshtin e parë të një paragrafi duke përdorur një imazh.
Margjinat dhe mbushja janë stile shumë të rëndësishme kur ndërtoni një faqe HTML. Ato ju lejojnë të poziciononi më saktë elementët, të krijoni një kornizë me hapësirat e nevojshme, etj. Të dy stilet janë shumë të ngjashëm dhe kryejnë funksione të ngjashme. Por ka ende dallime.
Elementet mund të jenë të folezuar, mund të jenë ngjitur me njëri-tjetrin. Le të shohim shembullin e mëposhtëm:
Kemi dy tavolina, limon dhe ngjyre blu të vendosura njëra poshtë tjetrës. Tabelat përbëhen nga një qelizë. Ka një bllok të kuq në qelizën e tabelës së parë. Në këtë shembull, le të shohim se si funksionojnë marzhet dhe mbushja.
Fushat përcaktohen sipas stilit mbushje. Ky stil zbatohet vetëm për elementët e kontejnerëve që mund të përmbajnë elementë të tjerë. Stili ju lejon të vendosni vlerën e kufijve midis skajeve të elementit dhe përmbajtjes së tij. Stili diferencë ju lejon të vendosni mbushjen nga një element në kufijtë më të afërt të një elementi tjetër. Kufijtë e një elementi tjetër mund të jenë kufijtë e kontejnerit prind, si dhe skajet e vetë faqes.
Ka disa mënyra për të vendosur këto stile. Për shembull, specifikoni drejtpërdrejt madhësinë e të gjitha margjinave ose dhëmbëzimeve me një argument në disa njësi matëse (px, ex, em, pt, cm, e kështu me radhë):
mbushje: 3 px diferencë: 3 pxNë këtë rast, kufijtë dhe mbushja do të jenë të njëjta në të katër anët. Kur specifikoni dy argumente të ndara nga një hapësirë:
mbushje: 3px 5px; diferenca: 3px 5px;e para do të përcaktojë sasinë e margjinave/mbushjeve në krye dhe në fund, e dyta - majtas dhe djathtas. Kur jepen tre argumente:
mbushje: 3px 5px 2px; margjina: 3px 5px 2px;e para është margjina/indrazhi i sipërm, i dyti është majtas dhe djathtas në të njëjtën kohë, i treti është poshtë. Me katër argumente:
mbushje: 3px 5px 2px 6px; margjina: 3px 5px 2px 6px;e para është diferenca e sipërme/mbushja, e dyta është e djathta, e treta është fundi, e katërta është e majta. Është e lehtë të mbahet mend: e para është në krye, pastaj në drejtim të akrepave të orës. Përveç kësaj, ju mund të vendosni kufijtë dhe mbushjen për një skaj të veçantë veçmas, duke përdorur stilet e duhura: mbushje e sipërme, mbushje djathtas, mbushje-fund, mbushje-majtas, marzh-majë, marzh-djathtas, marzh-fund, margjina-majtas. Vlera e këtyre stileve mund të jetë vetëm një argument, i cili specifikon sasinë e marzhit/mbushjes për një anë të caktuar.
Në figurë, blloku i kuq ndodhet brenda qelizës së tabelës dhe ngjitet me kufijtë e saj, domethënë qeliza nuk ka kufij. Le të vendosim kufijtë e qelizave duke përdorur stilin:
mbushje: 5 pxSi rezultat, faqja do të ndryshojë në vijim:
Tani le të shohim kompensimet. Dy tabela janë ngjitur me njëra-tjetrën, nëse duam t'i largojmë pak, mund të aplikojmë dhëmbëza. Këtu ka dy opsione: ose vendosni hyrjen e poshtme të tabelës së parë, ose hyrjen e sipërme të tabelës së dytë. Le të përdorim të dytën:
margin-top: 5px;Vini re se ne vendosim indent në tabelë, dhe jo në qelizën e tabelës, siç është rasti me fushat. Këtu është rezultati:
Nga rruga, në rastin e parë (hendeku midis bllokut të kuq dhe kufijve të qelizës mëmë), i njëjti efekt mund të arrihet duke vendosur indencat e bllokut. Në përgjithësi, nëse diçka nuk është e qartë, çabonohuni në komente.
Kodi HTML i faqes eksperimentale:
<html > <kokë > <titull > Test</titull> <meta http-equiv = "Content-Type" content = "text/html;charset=utf-8" > </kokë> <trup > <stil> tabela (gjerësia: 200 px; lartësia: 150 px; kufiri: 1 px solid #555; palosja e kufirit: palos) td (rreshtim vertikal: lart; mbushje: 0 px) div (gjerësia: 100 px; lartësia: 100 px; sfondi: i kuq)</stili> <table style="background:lime"> <tr > <tdstyle="padding:5px"> <div style="margin:0px"></div> </td> </tr> </tabela> <stil tavoline = "sfondi: bojëqielli; margjina në krye: 5 px"> <tr > <td ></td> </tr> </tabela> </trupi> </html>Indenti HTML teksti- në procesin e krijimit të një faqeje, duhet të punojmë shumë me blloqe teksti, ose fraza teksti. Një herë, më duhej të shtoja një frazë teksti, në mënyrë që para kësaj fraze teksti të kishte disa teksti i dhëmbëzuar nga skajet html
blloku në të cilin është shtuar teksti i dhënë.
Kështu që, dhëmbëzimi i tekstit html, metoda e parë është më e natyrshme dhe e thjeshtë. Për të futur tekstin, shtoni përpara teksti html kodi i hapësirës - Shto kodi html hapësirat janë të mundshme në çdo redaktues html.
Unë jap një shembull të një kodi pune për vendosjen e një indenti për tekstin duke përdorur një kod hapësinor:
<html > <kokë > <titull >Dhënia e tekstit HTMLtitull > kokë > <trup > <p > HTML dhëmbëzimi i tekstit majtas, përdorni kodin e hapësirësp > trup > html >
V ky shembull, para tekstit që kemi zgjedhur, kodi i hapësirës -
shtuar katër herë, si rezultat, marrim dhëmbëzimin që na nevojitet.Ne e dimë se kodi hapësinor përpunohet nga çdo shfletues. Prandaj, duke shtuar numrin e kërkuar të hapësirave para tekstit, mund të merrni dhëmbëzimin e nevojshëm për tekstin.
Kjo metodë është e mirë në atë që do të garantohet të përpunohet nga çdo shfletues.
Por kjo metodë ka disavantazh i rëndësishëm. Për të bërë një indent për tekstin mjaftueshëm në gjatësi, në kodin html, do të duhet të shtoni përpara tekstit nje numer i madh i karaktere hapësinore, të cilat mund të duken të shëmtuara, të ngathëta dhe joprofesionale.
Një nga zgjidhjet e këtij problemi është mënyra tjetër punë me indent.
Metoda e dytë e futjes së tekstit në HTML - kjo metodë bazohet në vetitë e etiketës blockquote. Kjo etiketë cakton një dhëmbëzim prej rreth 40 pikselësh majtas dhe djathtas për tekstin e vendosur në të. Përveç kësaj, dhëmbëzimi është vendosur në krye dhe në fund. shembull html Kodi për përdorimin e kësaj metode është dhënë më poshtë:
<p ><kuota e bllokut > Dhënia e tekstit HTML në të majtë, përdorni etiketën kuotën e bllokutkuota e bllokut >p >
Siç mund ta shihni, kjo metodë e vendosjes së një indenti për tekstin është shumë e lehtë për t'u përdorur, por kjo metodë ka gjithashtu një pengesë të konsiderueshme. Dhëmbja që vendos etiketën kuota e bllokut,është fikse dhe gjithmonë është e barabartë me të njëjtën vlerë - 40 px.
Për të korrigjuar situatën, dhe kur shtoni html dhëmbëzimi dhe për teksti për të qenë në gjendje të vendosim ndonjë vlerë, do të përdorim metodën e tretë.
Dhënia e tekstit HTML, metoda e tretë.
Këtu do të përdorim veçorinë e parametrit tekst-indent të CSS Cascading Style Sheets.
Nëse e hapur referencë css, në faqen e vetive tekst-indent, do të shohim se me tekst-indent, mund të vendosim dhëmbëzimin e rreshtit të parë ose të paragrafit të parë të çdo blloku teksti.
Ne po shikojmë një shembull me një bllok teksti të shkurtër, kështu që vetitë e indentit të tekstit janë mjaft të përshtatshme për rastin tonë.
Më poshtë është kodi html që fut tekstin duke përdorur tekstin-indent. Shembulli tregon se duke vendosur tekst-indent kuptime të ndryshme argumente, ne mund të ndryshojmë sasinë e dhëmbëzimit të tekstit:
<pstyle="text-indent:100px"> HTMLdhëmbëzimiteksti, duke punuar stil css - dhëmbëzimi i tekstitp >
Sipas mendimit tim, kjo mënyrë e vendosjes së një indenti për tekstin është më optimale, por, megjithatë, le të shqyrtojmë një mënyrë tjetër për të vendosur një indent duke përdorur imazhe.
Dhënia e tekstit HTML, mënyra e katërt - këtu do të përdorim një imazh për të vendosur dhëmbëzimin.
Si shembull pune, le të shqyrtojmë menjëherë kodin html që demonstron funksionimin e kësaj metode:
Dhënia e tekstit HTML
në të majtë, përdorni imazhin
Nga shembulli i mësipërm, shihet qartë se duke ndryshuar gjerësinë e figurës, mund të ndryshojmë pozicionin e tekstit, domethënë të vendosim indentimin e dëshiruar për tekstin.
Si imazh, mund të përdorni një imazh, gjerësia dhe lartësia e të cilit janë të barabarta me një piksel. Për të parandaluar që imazhi që përdorim të jetë i dukshëm në faqe, ne do të vendosim ngjyrën që ai të jetë saktësisht i njëjtë me sfondin e faqes së sajtit.
Sipas mendimit tim, metodat e mësipërme të vendosjes së dhëmbëve për tekstin janë mjaft të mjaftueshme për të organizuar dhëmbëzimin që ju nevojitet në çdo situatë kur shtoni përmbajtje në një faqe në faqet tuaja.
Ju mirëpres në blogun tim. CSS (Cascading Style Sheets) ofron shumë opsione personalizimi pamjen faqet e internetit. Sot do të doja të tregoja shkurtimisht se si të përcaktohet në css indent sipër ose në çdo anë tjetër për çdo element.
Mbushje e jashtme
Marzhi vendoset duke përdorur veçorinë marzh. Me të, mund të vendosni mbushjen në të katër anët menjëherë ose të përdorni veçori të tjera: margin-lart, margin-left, margin-djathtas, margin-bottom, të cilat ju lejojnë ta bëni atë vetëm në njërën anë.
Marzhi përcakton distancën në të cilën skaji i zgjedhur i një elementi do të futet nga elementët e tjerë në faqe. Për shembull, hyrja:
P, div (Margjina në krye: 20 px; )
Kjo do të thotë që të gjitha blloqet dhe paragrafët do të futen nga lart me 20 piksel, domethënë, skaji i sipërm i tyre do të largohet nga elementët ngjitur me të nga kjo distancë.
Margjinat mund të shkruhen në secilën anë me vetëm një veti margjine, e cila shkruhet me 4 vlera me radhë:
Div (Margjina: 20px 10px 20px 10px; )
Prerjet do të jepen nga skajet e sipërme, djathtas, poshtë dhe majtas respektivisht. Meqenëse në këtë rast ato janë të barabarta në anët e kundërta, mund të shkruhet edhe kështu:
Div (Margjina: 20px 10px;)
Vlera e parë është mbushja në krye dhe në fund, dhe e dyta është diferenca në anët.
Indent
Mbushja funksionon ndryshe - nuk e largon kutinë nga elementët e tjerë, por e shton atë hapësirë brenda elementit, duke e larguar përmbajtjen e kutisë nga skajet e saj. Është komode. Ku keni parë një faqe ku teksti fillon në pjesën e sipërme majtas të dritares?
Unë nuk e kam parë këtë, sepse zhvilluesit e uebit përdorin gjithmonë margjina dhe dhëmbëza për ta bërë tekstin sa më të lexueshëm. Indencat shkruhen duke përdorur veçorinë e mbushjes, në të cilën 4 vlera për të gjitha skajet mund të renditen menjëherë, të ndara me një hapësirë, përkatësisht.
Gjithashtu, në mënyrë të ngjashme me margjinën, mund të shtoni emrin e anës dhe të vendosni distancën vetëm për të. Për shembull, mbushja e sipërme mund të shkruhet duke përdorur padding-top . Në përgjithësi, pronë e mbushjes funksionon saktësisht njësoj si vetia e marzhit.
Një shembull është pjesa e mëposhtme e kodit:
Blloku (gjerësia: 200 px; mbushja: 20 px; )
Sa mendoni se do të jetë gjerësia aktuale e elementit tonë? Këtu mund të shihni se është 200 piksele, por mbushja shton 20 pikselë të tjerë në secilën anë, për një total prej 240 pikselësh. Merrni parasysh këtë kur hartoni.
Dëshiroj gjithashtu të vërej se mbushja zakonisht vendoset vetëm elementet e bllokut, me shkronja të vogla është më mirë të mos e jepni. Marzhi funksionon mirë me çdo element.
Diten e mire! Vendosja e dhëmbëzimeve për tekstin dhe fotografitë është tema kryesore e botimit të sotëm. Le të shqyrtojmë më në detaje se cilat qasje mund të zbatohen në praktikë.
Kur krijon një faqe, një webmaster merret me blloqe teksti dhe fraza të vendosura në faqet e projektit. Zgjidhja e problemeve individuale shoqërohet me përdorimin Etiketat HTML shtuar në redaktor. Ekzistojnë disa lloje atributesh që ju lejojnë të zhvendosni frazat ose të ndryshoni vendndodhjen e fragmenteve në e-faqe.
Vendosja e dhëmbëzimeve duke futur hapësira
Le të shohim se si të futet teksti në HTML duke përdorur etiketë speciale, e cila siguron formimin e një hendeku. Është e nevojshme të futni kodin numrin e kërkuar herë në mënyrë që të arrihet devijimi i dëshiruar nga skaji i faqes.
Kodi i mësipërm përpunohet nga të gjitha llojet e shfletuesve dhe webmaster do ta marrë rezultat i garantuar. Disavantazhi i metodës qëndron në mundësitë e kufizuara, sepse për të rritur distancën, duhet të shtoni sasi e madhe etiketat, dhe kjo rrëmujë dokumentin.
Zbatimi i etiketës së citimit
Duke studiuar në detaje se si të futni tekstin në kodin HTML, mund të pengoheni metodë alternative duke dhënë më shumë mundësi.
Këtu do t'ju duhet të përdorni blloqe, e cila ju lejon të lëvizni fragmentin majtas dhe djathtas me rreth 40 px. Mjafton të shkruani kodin identik me shembullin e dhënë:
Metoda ju lejon të manipuloni frazat brenda një vlere fikse prej 40 px. Vlen gjithashtu të theksohet se në etiketë e dhënë zakonisht përfundojnë me një citat.
Alternativat
Nëse keni ndërmend të lëvizni në një distancë jo standarde, do t'ju duhet të përdorni parametrin e indentit të tekstit në lidhje me stilin Tabela CSS. Metoda e konsideruar siguron krijimin e një devijimi të rreshtit të parë në distancën e dëshiruar. Ndryshimet e mëposhtme duhet të bëhen në redaktues:
Kur kërkohet të matet numri i kërkuar i pikselëve nga një imazh, preferohen kode të thjeshta por efektive.
Në rastin e parë, vendosen vetëm vlerat e zhvendosjes nga skajet e figurës. E dyta vendos pozicionin e figurës përgjatë skajit të majtë me tekstin që mbështillet në të djathtë, dhe e treta - anasjelltas.
Informacionit i ka ardhur fundi. Më thuaj, a e gjete informacionin që të intereson? Përgjigja mund të shkruhet në komente.
Së fundi, do të përmend se blogu Workip i kushtohet kryesisht opsioneve monetare për të fituar para në internet. A e dini se cilat metoda janë vërtet premtuese financiarisht? Disa prej tyre tashmë janë publikuar.
Publikimi i materialeve vazhdon. Abonohuni në email për përditësimet e projektit. Deri në komunikim.
