Si të vendosni kufirin e skajit në html. Si të futni tekstin dhe imazhet në HTML

24.06.2019 Windows 7, XP

Diten e mire! Vendosja e dhëmbëzimeve për tekstin dhe fotografitë është tema kryesore e botimit të sotëm. Le të hedhim një vështrim më të afërt se cilat qasje mund të zbatohen në praktikë.

Kur krijon një faqe interneti, një webmaster merret me blloqe teksti dhe fraza të vendosura në faqet e projektit. Zgjidhja e problemeve individuale përfshin përdorimin e etiketave HTML të shtuara në redaktues. Ekzistojnë disa lloje atributesh që ju lejojnë të largoni frazat ose të ndryshoni vendndodhjen e fragmenteve në një faqe elektronike.

Vendosja e dhëmbëzimeve duke futur hapësira

Le të shohim se si të futim tekstin në HTML duke përdorur një etiketë të veçantë që krijon një hapësirë. Ë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 mund të përpunohet nga të gjitha llojet e shfletuesve dhe webmaster do të marrë një rezultat të garantuar. Disavantazhi i metodës janë aftësitë e saj të kufizuara, sepse për të rritur distancën duhet të shtoni më shumë etiketa, dhe kjo rrëmujë dokumentin.

Aplikimi i një etikete citimi

Duke studiuar në detaje se si të futni tekstin në kodin HTML, mund të hasni në një metodë alternative që jep 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 kod identik me shembullin e dhënë:

Metoda ju lejon të manipuloni frazat brenda një vlere fikse prej 40 px. Vlen gjithashtu të përmendet se kjo etiketë zakonisht përfshin një kuotë.

Opsionet alternative

Nëse keni ndërmend të lëvizni një distancë jo standarde, do t'ju duhet të përdorni parametrin e indenteve të tekstit në lidhje me fletën e stilit CSS. Metoda në shqyrtim siguron krijimin e një devijimi të vijës së parë në distancën e kërkuar. Ndryshimet e mëposhtme duhet të bëhen në redaktues:

Kur është e nevojshme të matet numri i kërkuar i pikselëve nga një foto, preferohen kode të thjeshta por efektive.

Në rastin e parë, vendosen vetëm vlerat e kompensimit nga skajet e figurës. Në të dytën, pozicioni i figurës është vendosur në skajin e majtë me tekstin që rrjedh në të djathtë, dhe në të tretën - anasjelltas.

Informacionit i ka ardhur fundi. Më thuaj, a e gjete informacionin që po kërkonit? Përgjigja mund të shkruhet në komente.

Së fundi, do të përmend se blogu Workip i dedikohet kryesisht opsioneve monetare për të fituar para në internet. A e dini se cilat metoda janë vërtet premtuese financiarisht? Përshkrimet e disa prej tyre tashmë janë publikuar.

Publikimi i materialeve vazhdon. Regjistrohu në email për përditësimet e projektit. Shihemi me vone.

Indentation në një dokument html

“Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua tate "Velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat jo proident, sunt in culpa qui officia deserunt mollit anim id est laborum." Paragrafi 1.10.32 "de Finibus Bonorum et Malorum", shkruar nga Ciceroni në vitin 45 pas Krishtit. "Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt avolnaittas icon aut fugit, sedquia consequuntur magni dolores qui ratione voluptatem sequi nesciunt Ut an minima veniam , QUIS NOSTRUM Ushtrimet e Korporatave Suscipit Laboriosam, Nisi Ut Aliquid Ex Ea Commodi Consequatur Quality Quality? ? Përkthimi në anglisht 1914, H. Rackham "Por unë duhet t'ju shpjegoj se si lindi gjithë kjo ide e gabuar e denoncimit të kënaqësisë dhe lavdërimit të dhimbjes dhe do t'ju jap një përshkrim të plotë të sistemit dhe do t'ju shpjegoj mësimet aktuale të eksploruesit të madh e së vërtetës, mjeshtër-ndërtuesi i lumturisë njerëzore Askush nuk e refuzon, nuk e pëlqen apo i shmanget kënaqësisë, sepse ajo është kënaqësi, por sepse ata që nuk dinë të ndjekin kënaqësinë në mënyrë racionale, ndeshen me pasoja jashtëzakonisht të dhimbshme. Kushdo që e do ose ndjek ose dëshiron të marrë dhimbje nga vetja, sepse është dhimbje, por ngaqë herë pas here ndodhin rrethana në të cilat vaji dhe dhimbja mund t'i sigurojnë atij një kënaqësi të madhe. përveçse të përfitojë prej saj, por kush ka të drejtë t'i gjejë të meta një njeriu që zgjedh të shijojë një kënaqësi që nuk ka pasoja të bezdisshme, ose ai që shmang një dhimbje që nuk prodhon kënaqësi? Paragrafi 1.10.33 "de Finibus Bonorum et Malorum", shkruar nga Ciceroni në vitin 45 pas Krishtit. "Në Vero EOS dhe Accusamus et Iusto dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atti quos Dolores molestias experim Ecati Cupidate Non Provider, Similique Sunt në Culpa Qui Officia Deserunt Mollitia Dimiterumestinum io. Nam libero tempore , cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat facere possimus, omnis voluptas sumenda est, omnis dolor repellendus et aut officiis debitis aut rerum nuk është i domosdoshëm cusandae Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat." Përkthimi anglisht 1914, H. Rackham "Nga ana tjetër, ne denoncojmë me indinjatë të drejtë dhe nuk i pëlqejnë njerëzit që janë kaq të mashtruar dhe të demoralizuar nga hijeshitë e kënaqësisë së momentit, aq të verbuar nga dëshira, sa nuk mund të parashikojnë dhimbjen dhe telashet që janë të detyruar të pasojnë dhe faji i njëjtë u takon atyre që dështojnë në detyrën e tyre për shkak të dobësisë së vullnetit, që është njësoj si të thuash përmes tkurrjes nga vaji dhe dhimbja të pakontrolluar dhe kur asgjë nuk e pengon të jemi në gjendje të bëjmë atë që na pëlqen më shumë, çdo kënaqësi duhet të mirëpritet dhe çdo dhimbje duhet të shmanget, por në rrethana të caktuara dhe për shkak të pretendimeve të detyrës ose detyrimeve të biznesit, shpeshherë do të ndodhë që kënaqësitë duhet të jenë të nevojshme. Prandaj, njeriu i mençur i përmbahet këtij parimi të përzgjedhjes në këto çështje: ai i refuzon kënaqësitë për të siguruar kënaqësi të tjera më të mëdha, ose përndryshe duron dhimbje për të shmangur dhimbjet më të këqija.

Tek paragrafi (etiketa

) dhe kokën (etiketën

) shton automatikisht margjinat e sipërme dhe të poshtme, të cilat së bashku japin një distancë të madhe midis titullit dhe tekstit. Për të zvogëluar sasinë e dhëmbëzimit, duhet të shtoni në mënyrë eksplicite veçorinë margin-fund në përzgjedhësin H1. Për më tepër, mund të vendosni një vlerë pozitive, zero ose negative. Në këtë mënyrë është e lehtë të vendosni vlerën e dëshiruar të dhëmbëzimit.

Si mund të shtoj një rreshtim të rreshtit të parë për çdo paragraf?

Kur ju duhet të vendosni dhëmbëzimin e paragrafit, është më mirë të përdorni veçorinë e stilit tekst-indent. Vlera e tij përcakton se sa duhet zhvendosur teksti i rreshtit të parë djathtas nga pozicioni i tij origjinal. Gjerësia e bllokut të tekstit nuk ndryshon dhe mbetet e specifikuar fillimisht. Sasia e dhëmbëzimit mund të specifikohet në piksel, përqindje ose njësi të tjera të disponueshme (shembulli 1).

Si të ndryshoni dhëmbëzimin në një faqe interneti?

Mbushja në një faqe interneti, megjithëse nuk është e dukshme, nuk lejon që përmbajtja të përshtatet fort në skajet e dritares së shfletuesit për një përvojë të rehatshme leximi. Ju mund të vendosni vlerën tuaj të mbushjes duke ndryshuar vlerat e vetive të marzhit të përzgjedhësit të trupit.

Si të hiqni mbushjen rreth një formulari?

Kur shtoni një formular nëpërmjet një etikete

mbushja shtohet automatikisht rreth tij në krye dhe në fund. Për t'i hequr ato, përdorni një veçori të stilit të marzhit me një vlerë nule, duke e shtuar atë në përzgjedhësin FORM.

Si të ndryshoni distancën midis paragrafëve të tekstit?

Kur përdorni etiketën

Indencat shtohen automatikisht sipër dhe poshtë paragrafit të tekstit. Kjo bëhet për të ndarë vizualisht një bllok teksti nga tjetri. Është e qartë se vlerat e paracaktuara të dhëmbëzimit nuk janë gjithmonë të kënaqshme, kështu që ndonjëherë ato duhet të zvogëlohen ose rriten. Për ta bërë këtë, mund të përdorni margjinën universale të vetive , ajo përcakton dhëmbëzimin në të gjitha anët e paragrafit ose margin-lart për dhëmbëzimin në krye dhe marzh-poshtë për dhëmbëzimin në fund.

Mirësevini në blogun tim. Css (Cascading Style Sheets) ofron shumë opsione për personalizimin e pamjes së faqeve të internetit. Sot do të doja të tregoja shkurtimisht se si të përcaktojmë në CSS mbushjen në krye ose në çdo anë tjetër për çdo element.

Marzhi

Marzhi vendoset duke përdorur veçorinë marzh. Me të, mund të vendosni kufijtë 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 krijoni atë vetëm në njërën anë.

Marzhi përcakton distancën që skaji i zgjedhur i një elementi do të zhvendoset 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 në krye me 20 piksel, domethënë, skaji i tyre i sipërm do të largohet nga elementët ngjitur me të nga kjo distancë.

Margjinat mund të shkruhen në secilën anë duke përdorur vetëm një pronë margjine, në të cilën janë shkruar 4 vlera me radhë:

Div (Margjina: 20px 10px 20px 10px; )

Mbushja do të jepet nga skajet e sipërme, të djathta, të poshtme dhe të majta respektivisht. Meqenëse në këtë rast ato janë të barabarta në anët e kundërta, mund ta shkruajmë edhe kështu:

Div (Margjina: 20px 10px;)

Vlera e parë është diferenca në krye dhe në fund, dhe e dyta është diferenca në anët.

dhëmbëzimi

Mbushja e brendshme funksionon ndryshe - nuk e largon bllokun nga elementët e tjerë, por e shton atë hapësirë brenda elementit, duke e larguar përmbajtjen e bllokut nga skajet e tij. Është komode. Ku keni parë një faqe interneti 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ë dhëmbëzime të jashtme dhe të brendshme për ta bërë tekstin sa më të lehtë për t'u lexuar. Mbushja e brendshme specifikohet duke përdorur veçorinë e mbushjes, në të cilën mund të renditen 4 vlera në të njëjtën kohë, të ndara me një hapësirë, përkatësisht për të gjitha skajet.

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, vetia e mbushjes funksionon saktësisht njësoj si vetia e marzhit.

Për shembull, mund të jepni këtë pjesë të 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 mbushjet shtojnë 20 të tjera në secilën anë, për një total prej 240 pikselësh. Merrni këtë parasysh gjatë projektimit.

Do të doja të vëreja gjithashtu se mbushja u jepet normalisht vetëm elementëve të bllokut. Marzhi funksionon mirë me çdo element.

Përshëndetje! Fillimisht doja ta ndaja këtë artikull në 4 të vegjël, por më pas mendova. Per cfare? Në fund të fundit, është më i përshtatshëm kur një informacion i tillë mblidhet brenda një materiali.

Kështu që sot do të mësojmë se si të bëjmë dhëmbëzimin CSS në të majtë dhe në të gjitha anët e tjera - djathtas, lart dhe poshtë. Ato mund të bëhen për fotografi dhe tekste. Ato vijnë në dy lloje:

E jashtme;
E brendshme.

Për të parën, vetia kryesore është marzhi, për të dytën - mbushja. Për qartësi, unë bëra një shembull të vogël për ju. Për ta bërë vizualisht të përshtatshëm dallimin midis hapësirës së brendshme dhe të jashtme, shtova një tabelë të dukshme. Le të shohim se çfarë ndodhi?

Margjinat

Duke i shkruar ato në një skedar të stilit CSS, mund të vendosni orientimin e bllokut të informacionit në faqe. Për shembull, do ta lëviz majtas dhe poshtë. Më lejoni të tregoj menjëherë se si do të duket.

Në përgjithësi, mund të përdorni opsionet e mëposhtme për të vendosur dhëmbëzimet.

Majtas (diferencë-majtas).

Në të djathtë (diferencë-djathtas).

Top (margin-lart).

Poshtë (margjina-poshtë).

Tani do t'ju tregoj një nuancë tjetër interesante.

Siç mund ta shihni, mund të përdorni një nga opsionet - efekti është i njëjtë. Vetëm në rastin e dytë kodi rezulton të jetë më kompakt. Vini re gjithashtu se dhëmbëzimi është vendosur në drejtim të akrepave të orës. Gjithçka fillon në krye dhe përfundon në të majtë.

Mbushje

Procedura është e ngjashme këtu. Vetëm tani do të shtoj veti të reja jo për të gjithë tabelën, por për përmbajtjen e kolonave.

Le të shohim se çfarë doli prej saj.

Për analogji me kufijtë e brendshëm në CSS, ato të jashtme mund të shkruhen në kod të shkurtuar ose për anët veç e veç.

Këto ishin pikat kryesore. Së fundi, unë do t'ju tregoj se si mund ta bëni më të lehtë disa punë.

Shtrirja në nivelin e zgjedhur të etiketës

Në rastet e mësipërme, ato vendosen për tekst dhe imazhe në të njëjtën kohë. Në fakt, ju mund të vendosni distancën me elementët në nivelin e një etikete specifike. Unë do t'ju tregoj se si funksionon. Unë zhbëj ndryshimet e fundit dhe specifikoj kodin special në skedarin e stilit.

Le të hedhim një vështrim se çfarë ndodhi pas ruajtjes së ndryshimeve.

Fotografia mbeti në vend, vetëm teksti i mbyllur në . Manipulime të ngjashme mund të aplikohen në blloqe të tjera, për shembull, tr, span.

Si informacion shtesë, unë ofroj një botim në lidhje me detyrën për referencë tuaj. Aty përshkruhen edhe metoda mjaft interesante. Mund të jetë i dobishëm për të formuar një vijë të kuqe në tekst ose për të kryer veprime të tjera.

Për më tepër, mund të abonoheni në një buletin falas me email. Ekziston një formë e veçantë për t'u abonuar në blog. Shihemi me vone.