Dhënie HTML në të gjitha anët. Si të bëni një vijë të kuqe në html ose të vendosni rreshtin e parë në një paragraf

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 kornizës së një materiali.

Pra, sot do të mësojmë se si të futim 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 janë dy llojesh:

• e jashtme;
• e brendshme.

Për të parën, përdoret marzhi i pronës kryesore, 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

Pasi t'i keni regjistruar ato në skedarin e stilit CSS, do të jetë e mundur të vendosni orientimin e bllokut të informacionit në faqe. Për shembull, zhvendoseni atë majtas dhe poshtë. Le të tregojmë 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).

Djathtas (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ë.

Indencat

Procedura këtu është e ngjashme. 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 hyrjet e brendshme në CSS, indencat e jashtme mund të shkruhen në kod të shkurtër ose për anët veç e veç.

Këto ishin pikat kryesore. Më në fund, do t'ju tregoj se si mund ta bëni më të lehtë disa punë.

Dhëmbja në nivelin e etiketave të zgjedhura

Në rastet që pamë më lart, ato janë vendosur për tekst dhe fotografi 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. Anuloj ndryshimet e fundit dhe specifikoj një kod të veçantë 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ë, propozoj për rishikim publikimin për detyrën. Ka edhe mënyra mjaft interesante të përshkruara. 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ërveç kësaj, ekziston një abonim për një shpërndarje falas të informacionit përmes adresave të postës elektronike. Ekziston një formë e veçantë për t'u abonuar në blog. Deri në komunikim.

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 blu, të vendosura njëra nën tjetrën. 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 px

Në 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 px

Si 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>

Paraqitja CSS ka qenë gjithmonë drejtkëndore. Çdo vijë e qetë është kompetencë e zhvilluesit. Rregullat e stilit ofrojnë mundësi të mjaftueshme për t'i dhënë faqes forma të lëmuara brenda rezolucionit të ekranit. Por çdo element i paraqitjes është gjithmonë një drejtkëndësh në të cilin vendndodhja e informacionit rregullohet nga rregullat CSS.

Mbushja e gjithanshme është e rëndësishme për çdo element në një faqe kur është absolutisht i pozicionuar, dhe mbushja e sipërme është e përcaktuar në mënyrë specifike në CSS sepse ka rëndësi për një sërë elementësh, veçanërisht elementë inline.

Rregullat bazë të pozicionimit

Një element blloku ka një rregull mbushjeje nga anët e elementit në të cilin ndodhet (margjina), një rregull mbushjeje për elementët brenda tij (mbushje) dhe një gjerësi kufiri (kufiri) që mund të përdoret gjithashtu.

Me rëndësi të veçantë është dhëmbëzimi në krye. CSS brenda një blloku lidh rregullat e mbushjes me rregullat për elementët e pozicionuar absolutisht dhe relativisht brenda atij blloku.

Praktika e zakonshme e rregullave CSS: ju mund të specifikoni mbushjen në të gjitha anët në mënyrë të barabartë, në çifte sipër/poshtë dhe djathtas/majtas, ose për secilën anë veç e veç. Për shembull,

• diferenca: 10 px
• mbushje: 10px20px
• mbushje: 10px20px30px40px.

Në rastin e parë, vendoset dhëmbëzimi i elementit nga anët e enës së jashtme në të cilën ndodhet. Në rastin e dytë, hapjet e sipërme dhe të poshtme janë 10 px, majtas dhe djathtas - 20 px. Në rastin e tretë, tregohen përmasat e indeve në të gjitha anët: lart, djathtas, poshtë dhe majtas.

Në të gjitha këto raste, indent CSS e sipërme është 10 px.

Rregullat që ndryshojnë pozicionin e elementeve

Nëse elementi i paraqitjes nuk është i pozicionuar absolutisht, ai ndodhet në rendin e përgjithshëm të faqes.

Nëse përcaktojmë futet nga maja e CSS në elementin scCurrInfo, qëllimi do të arrihet, dhe nëse është në nivelin li, nuk do të arrihet.

Në këtë shembull, duke përdorur mbushjen: 40px; kërkon një reduktim adekuat të rregullave të gjerësisë dhe lartësisë me 80 px. Përndryshe, madhësia e bllokut scCurrInfo do të shtrihet përtej kufijve të bllokut të jashtëm.

Nëse heqim rregullin e mbushjes nga përshkrimi scCurrInfo, por e shtojmë atë me një vlerë prej 20 px në përshkrimin e stilit të elementit të listës, marrim vetëm dhëmbëzimi i sipërm. CSS nuk do ta zbatojë këtë vlerë në anët e tjera.

Natyrisht, ky përdorim i rregullit të dhëmbëzimit zbatohet për çdo element li.

Praktikë e përgjithshme për formatimin e përmbajtjes

Disa zhvillues arrijnë përsosmërinë duke shtruar faqe me elementë blloku. Me sa duket, kjo është një praktikë klasike - të filloni me tabela dhe të përfundoni procesin tuaj arsimor në blloqe.

Liria e natyrshme në paraqitjen e bllokut është magjepsëse dhe imagjinata e zhvilluesit mund të mos kufizohet nga rregulla strikte tabelare: vetëm rreshta, vetëm qeliza, të bashkuara vetëm horizontalisht dhe vertikalisht. Asgjë e veçantë për idetë relacionale.

Ndërkohë tabelat, përveç mangësive të dukshme, kanë edhe shumë përparësi cilësore. Kur krijoni dhëmbëzime nga lart, CSS merr parasysh hyrjet në të majtë, në të djathtë (poshtë është një moment i veçantë). Rregullat e qelizave të tabelës ju lejojnë të kontrolloni shtrirjen si vertikalisht ashtu edhe horizontalisht. Duke përdorur stilet e rreshtave, të kombinuara me stilet e qelizave, mund të krijoni pamje komplekse të përmbajtjes.

Paraqitja e zakonshme e faqes në formën e drejtkëndëshave nuk e pengon aspak paraqitjen e saj në formën e një tabele. Këto janë gjithashtu drejtkëndësha, por ato janë gjithashtu qeliza tabele, domethënë kanë rregullat e tyre që plotësojnë rregullat e bllokut.

Pozicionimi absolut

Blloku me rregull POZICIONI: absolute ; do të vendoset në vendin e caktuar nga koordinatat e tij në lidhje me bllokun në të cilin ndodhet.

Një tipar karakteristik i rregullave CSS është "praktika është kriteri më i mirë i së vërtetës" në shumicën e rasteve, veçanërisht kur kërkohet përputhshmëria e ndërshfletuesve dhe faqosja bëhet me dorë, preferohet të studiohen manuale të plota në fletët e stilit kaskadë.

Përdorimi i tabelave shpesh çon në probleme të zhvendosjes së qelizave. Një kompensim i ngjashëm brenda një blloku nuk prek gjithmonë të gjithë elementët. Duke eksperimentuar, mund të arrini rezultatin e dëshiruar. Një detyrë e parëndësishme: si hiqni mbushjen e sipërme, CSS jo gjithmonë e zgjidh atë në një mënyrë të parëndësishme.

Në disa raste, kur duhet të shtypni elementët e faqes në thellësi të disa sistemeve të menaxhimit të përmbajtjes së faqes popullore, duhet t'i kushtoni vëmendje jo vetëm praktikës eksperimentale, por edhe përvojës së kolegëve.

- 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 duke futur tekstin nga skaji i html blloku në të cilin është shtuar teksti i dhënë.

Pra, mënyra e parë është më e natyrshme dhe e thjeshtë. Për të bërë një dhëmbëzim përpara tekstit, shtoni një kod hapësinor përpara tekstit html - Mund të shtoni një kod html hapësinor 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 dhëmbëzimi i tekstit majtas, përdorni kodin e hapësirës

Në këtë shembull, përpara tekstit që kemi zgjedhur, kodi i hapësirës është -  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 një pengesë të konsiderueshme. Për ta bërë dhëmbëzimin për tekstin mjaftueshëm në gjatësi, në kodin html, duhet të shtoni një numër të madh karakteresh hapësinore përpara tekstit, të cilat mund të mos duken bukur, të rëndë dhe joprofesionale.

Një nga zgjidhjet për këtë problem është mënyra e mëposhtme për të vendosur 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. Një shembull i kodit html për përdorimin e kësaj metode është dhënë më poshtë:

në të majtë, përdorni etiketën kuotën e bllokut

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 hapim referencën CSS, në faqen e vetive të tekstit-indent, do të shohim se me ndihmën e tekstit-indent, mund të vendosim indentacionin e rreshtit të parë ose 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 tekstin-indent në vlera të ndryshme të argumenteve, ne mund të ndryshojmë sasinë e indenteve të tekstit:

HTMLdhëmbëzimiteksti, funksionon stili css - dhëmbëzimi i tekstit

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:

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. Në mënyrë që imazhi që përdorim të mos jetë i dukshëm në faqe, ne do të vendosim ngjyrën për të saktësisht të njëjtë me sfondin e faqes së faqes.

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.

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 detyrave individuale shoqërohet me përdorimin e etiketave HTML të shtuara në redaktues. Ekzistojnë disa lloje atributesh që ju lejojnë të zhvendosni 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ë futet teksti në HTML duke përdorur një etiketë të veçantë që siguron formimin e një hapësire. Ë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 të marrë një rezultat të garantuar. Disavantazhi i metodës qëndron në mundësitë e kufizuara, sepse për të rritur distancën, duhet të shtoni më shumë etiketa dhe kjo rrëmujë dokumentin.

Zbatimi i etiketës së citimit

Duke parë në detaje se si të futni tekstin në kodin HTML, mund të hasni në një metodë alternative që ju jep më shumë opsione.

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ë përmendet se kjo etiketë zakonisht përfshin një kuotë.

Alternativat

Nëse keni ndërmend të lëvizni në një distancë jo standarde, do t'ju duhet të përdorni parametrin tekst-indent, i cili lidhet me fletën e stilit CSS. Metoda në shqyrtim siguron krijimin e një devijimi të vijës së parë nga distanca 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. Regjistrohu në e-mail për përditësimet e projektit. Deri në komunikim.