Salamu kwa wasomaji wote. Mara kwa mara, mafundi wanakabiliwa na tatizo la jinsi ya kufanya mstari wa usawa au wima kwa kutumia HTML au CSS. Hivi ndivyo nitakavyokuambia kuhusu leo.
Mistari katika CSS
Kuna njia kadhaa za kutengeneza mistari. Njia moja kama hiyo ni kutumia CSS. Au tuseme, kwa kutumia Mpaka. Hebu tuangalie mfano.
Na hii ndio itatokea kama matokeo.
Mstari wa mlalo na wima kwa kutumia css.
Mistari inaweza kuchorwa katika CSS kwa kutumia opereta wa Mpaka. Ikiwa unahitaji tu mstatili na upana wa sura ya kudumu, basi unaweza kutumia tu operator hii na kuipa thamani. Kwa mfano mpaka:5px imara #000000; itamaanisha kuwa mipaka ya kuzuia ina upana sawa na saizi 5 za rangi nyeusi.
Hata hivyo, ikiwa unahitaji kuweka sio mipaka yote, lakini ni baadhi tu, basi unahitaji kutaja mipaka ambayo inahitajika na ni thamani gani kila mmoja wao atakuwa nayo. Hawa ndio waendeshaji:
- mpaka-juu - huweka thamani ya mpaka wa juu
- mpaka-chini - huweka thamani ya mpaka wa chini
- mpaka-kushoto - huweka thamani ya mpaka wa kushoto
- mpaka-kulia - huweka thamani ya mpaka wa kulia.
Mstari wa wima na mlalo katika HTML
Unaweza kuunda mistari katika HTML yenyewe. Ili kufanya hivyo, unaweza kutumia lebo ya hr.
Katika kesi hii, mstari wa usawa utatolewa, pixel moja ya juu na upana kamili.
Lakini lebo hii pia inaweza kupewa maadili fulani.
- Upana- huweka thamani ya upana wa mstari.
- Rangi- huweka rangi ya mstari.
- Pangilia- huweka mpangilio wa kushoto, katikati, kulia
- Ukubwa- huweka thamani ya unene wa mstari katika saizi.
Kwa kutumia lebo ya hr, unaweza pia kuweka mstari wima. Lakini katika kesi hii, itabidi ugeuke kwa mitindo tena.
Katika kesi hii, mstari wa wima utachorwa saizi mia moja juu, unene wa pikseli moja na pikseli tano kujongezwa.
Hitimisho.
Naam, sasa unajua jinsi unaweza kuweka mstari wa wima na usawa. Mistari inaweza kuwekwa kwenye tovuti za kawaida kwa kutumia HTML, na inaweza kuwekwa kwenye tovuti inayotumia CMS, kwa mfano, WordPress, lakini katika kesi hii, utahitaji kubadili hali ya HTML.
Kweli, ikiwa una maswali zaidi, waulize kwenye maoni.
Halo, wanachama waaminifu wa tovuti yangu ya mafunzo, pamoja na wageni wa blogi. Je, umewahi kuona kwenye kurasa za rasilimali za wavuti ambapo mstari wima katika html hutenganisha baadhi ya taarifa? Kwa hivyo hii ni njia rahisi sana, lakini yenye ufanisi ya kuteka mawazo ya msomaji kwa sehemu inayotakiwa ya maudhui.
Kwa hivyo, ninataka kutoa chapisho hili kwa zana za kusoma na vitambulisho vya kuweka mistari wima, na pia niambie ni wapi mbinu hii inaweza kutumika. Sasa tuanze!
Utenganisho wa maandishi wima unatumika kwa nini?
Watengenezaji na wabunifu wa wavuti wanajaribu kuunda tovuti ya kipekee ambayo itakuwa na kiolesura cha mtumiaji rahisi na angavu. Yote hii inafanikiwa kwa kutumia zana na mbinu mbalimbali na karatasi za mtindo wa CSS.
Mara nyingi, lafudhi huwekwa kwenye maandishi ya kurasa. Kwa hili tunatumia:
- vitambulisho maalum, kwa mfano, < nguvu>, < i>, < kubwa> na wengine;
- kugawanya maandishi katika aya na kuingiza vichwa vya viwango tofauti;
- kuchagua vitu kwa kutumia anuwai;
- kubadilisha mtindo wa fonti;
- kuanzishwa kwa viunzi katika maudhui, nk.
Hebu fikiria jambo la mwisho.
Mfumo ni utaratibu wa kawaida wa kutenganisha vitu fulani kutoka kwa wingi, kuangazia na kubuni tu maudhui ya wavuti. Zinaundwa kwa kutumia mali mpaka.
Kipengele hiki cha lugha ya CSS kinaweza kunyumbulika sana na kinaweza kuweka fremu pande zote au upande mmoja tu wa kitu kilichochaguliwa. Nimeorodhesha mali muhimu kwenye jedwali.
Sifa zote zilizo hapo juu zinaweza kudhibiti unene wa mstari, rangi na mtindo wa uwasilishaji.
Ningependa kutambua kwamba mipaka inaweza kuangalia zaidi ya mistari iliyonyooka. Wanaweza pia kuonekana:
- hatua(iliyo na alama)
- yenye nukta(kistari)
- mstari(imara)
- mara mbili(mara mbili)
- volumetric(groove, inset, ridge na mwanzo) fremu
- au kurudia mipangilio ya mtindo wa babu kwa kutumia neno kuu la kurithi.
Wakati mwingine mimi hukutana na maswali kama vile: "Je, mpaka unaweza kuwakilishwa kama picha na jinsi ya kuifanya?" Jibu ni ndiyo. Na hii inafanywa kwa urahisi sana.
Kwa hili, waundaji wa CSS walitoa kipengele picha ya mpaka, ambayo unahitaji kuonyesha njia ya picha na kuelezea unene wa kila upande wa mpaka.
Sehemu ya vitendo
Nadhani ni wakati wa kuweka nadharia kwa mtihani. Kazi yako ni kuandika mkusanyiko wa maandishi na kutenganisha pointi muhimu au nukuu kwa mistari wima. Nambari ya mfano imewasilishwa hapa chini:
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 |
Kipande hiki cha maandishi ni muhimu sana.
|
Aya ya kwanza. Kwa kutumia mpaka-kushoto
Katika aya ya kwanza, onyesha jambo kuu la maandishi kwa mstari wa kushoto wa zambarau mbili.
Kifungu cha pili. Kwa kutumia picha ya mpaka
Katika aya ya pili, tunaangazia hatua muhimu ya maandishi na mstari wa wima upande wa kushoto kwa namna ya picha.
Kama unaweza kuwa umeona, nyenzo ni nyepesi sana, lakini inaweza kuwa na manufaa kwa kutatua matatizo mengi tofauti. Kwa hili nakuaga. Usisahau kujiandikisha na kualika marafiki wako kwenye timu yetu ya kirafiki. Kwaheri!
Salamu nzuri, Roman Chueshov
Picha zina sifa kadhaa za kuvutia ambazo zinaweza kuzingatiwa kwa kutumia mabadiliko ya moja kwa moja (18) katika hali rahisi za kimwili. Kwa madhumuni yetu ya sasa, hatuhitaji jumla kamili ya fomula (18); athari tunayotaka kuonyesha inaweza kuonyeshwa hata kama vigezo vyote vinavyoashiria nafasi ya kamera ni sawa na sifuri, isipokuwa pembe moja ya kuinamisha. Ipasavyo, tunachukua na kubadilisha usemi (18) kuwa umbo rahisi zaidi:
Hebu tuchunguze mali ya picha ya mstari wa wima. Mstari wa wima wa kitu hutolewa na sehemu ya kitu
ambapo kuratibu za hatua ambayo mstari huingiliana na ndege ya sakafu, na z ni parameter ya bure, thamani ambayo inachukuliwa kati ya namba zote halisi. Ikiwa tutabadilisha v katika fomula (27) na kuondoa kigezo cha bure z kutoka kwa milinganyo miwili, tunapata mlinganyo wa mstari ulionyooka kwenye ndege ya picha.
Uchambuzi wa mlingano huu rahisi hutoa uchunguzi kadhaa wa kuvutia. Jambo muhimu zaidi ni kwamba z-intercept ni huru ya nafasi ya mstari wa wima yenyewe; inategemea tu ikiwa mstari ni wima. Kwa hiyo, kwa jiometri ya kamera iliyotolewa, picha za mistari yote ya wima hupitia hatua moja ya schof ya wima, kuratibu ambazo katika picha ni sawa na.
Mchele. 10.4. Pointi za kutoweka.
Mchele. Kielelezo 10.4 kinaonyesha athari hii katika taswira ya kizibao kimoja kilichochukuliwa na kamera iliyoinamishwa chini sana. Msomaji anaweza kuangalia sifa nyingine za mlinganyo (28) ambazo zinaendana na angavu. Kwa mfano, ikiwa imeongezeka kutoka sifuri hadi 90 °, hatua ya kutoweka wima inasonga kuelekea katikati ya ndege ya picha na mteremko wa mstari unakuwa duni. Vile vile, kwa pembe yoyote ya kamera, athari hii inaonekana zaidi wakati mistari ya wima ya kitu inaposonga kuelekea pembezoni mwa uga wa mwonekano (yaani, wakati
Inakuwa kubwa ikilinganishwa na). Kwa hivyo, hatua ya kutoweka kwa wima inaweza kuamua tu kutoka kwa vigezo vya kamera, na inaweka hali rahisi ya lazima kwenye picha za mistari ya wima.
10.5.4. MISTARI ILIYO ILALA NA MAMBO YA KULALA
Kama mfano wa mwisho wa kutumia mabadiliko ya mtazamo, hebu tuchunguze baadhi ya mali ya picha ya mstari mlalo. Kwa unyenyekevu, tutazingatia picha ya mstari wa kitu kilicho kwenye ndege ya sakafu ya mfumo wa kuratibu wa kimataifa. Sehemu yoyote ya kitu kilicho kwenye mstari kama huo ina wapi na b ni, mtawaliwa, mteremko wa mstari na urefu wa sehemu iliyokatwa na mstari huu kwenye mhimili wa kuratibu Y. Kwa kuwa tunataka kuchukua picha ya kitu. iko kwenye sakafu, ni bora kwamba kamera imeinuliwa juu ya sakafu na, labda kuelekezwa chini. Kwa mujibu wa hili, tunachukua vigezo vya kijiometri vya kamera katika fomu na basi thamani iwe chanya na hasi. Kwa vigezo hivi, mabadiliko ya moja kwa moja (18) yanarahisishwa kama ifuatavyo:
Baada ya kubadilisha katika fomula (29) na kuondoa parameta ya bure x kutoka kwa milinganyo miwili, tunapata mlinganyo wa mstari wa moja kwa moja kwenye ndege ya picha.
Hakuna sifa rahisi hasa za mteremko wa mstari huu wa picha au pointi za makutano yake na shoka za kuratibu; Fikiria, hata hivyo, makutano ya mstari huu wa picha na mstari wa upeo wa macho wa picha hii. Mstari wa upeo wa macho wa picha yoyote unafafanuliwa kama makutano ya ndege ya picha na ndege inayopita katikati ya lenzi sambamba na sakafu. Kama inavyoonyeshwa katika mtazamo wa upande wa Mtini. 10.5, equation ya mstari wa upeo wa macho (katika kuratibu picha) ina fomu Kwa wazi, uratibu wa X wa hatua ya makutano ya mstari wa picha (30) na mstari wa upeo wa macho imedhamiriwa kwa kusawazisha kujieleza (30) kwa thamani - . Baada ya kusuluhisha equation iliyosababishwa
kuhusiana na uratibu wa hatua ya makutano na upeo wa macho, tunapata hiyo
Matokeo haya pia yanaweza kupatikana kwa kubadilisha usemi (29) katika mlinganyo wa kwanza na kupita hadi kikomo kwani x huelekea kutokuwa na mwisho. Kwa hiyo, hatua ya makutano na upeo wa macho inastahili kabisa kuitwa hatua ya kutoweka ya usawa au hatua ya kutoweka na upeo wa picha ya mstari uliopewa; hiki ndicho kikomo ambacho sehemu ya picha huelekea huku nukta ya kitu ikisogea hadi isiyo na kikomo kwenye mstari ulionyooka
Mchele. 10.5. Kuelekea hesabu ya mstari wa upeo wa macho.
Tunaweza kutoa maneno mengi ya kuvutia kuhusu kujieleza (31). Kwanza, kumbuka kuwa sehemu ya kutoweka haitegemei urefu wa kamera juu ya ndege iliyo na mstari wa kitu. Pili, hatua ya kutoweka haitegemei kigezo cha tafsiri b katika mlingano wa mstari wa kitu. Kwa hiyo, tunaweza kupata hitimisho muhimu kwamba mistari yoyote miwili inayofanana na ndege ya sakafu ina hatua sawa ya kutoweka ikiwa na tu ikiwa ni sawa kwa kila mmoja. Hatimaye, tuseme tuna mistari miwili ya othogonal ya kitu kilicholala kwenye ndege sambamba na sakafu. Hebu miteremko yao iwe na sehemu zao za kutoweka na upeo wa macho ziwe na kuratibu; na Kwa kuwa mistari hii ni ya orthogonal, . Kwa hiyo, moja kwa moja kutoka kwa formula (31) tunapata
Sehemu mbili za kutoweka wakati mwingine huitwa sehemu za kutoweka za conjugate. Kwa kuwa bidhaa zao ni thamani hasi, daima hulala kwa pande tofauti za mstari wa katikati wa picha, kama inavyoonyeshwa kwenye Mtini. 10.4. Pointi za kutoweka za Conjugate ni mfano wa jinsi kizuizi fulani kwenye vitu (yaani orthogonality) kinaweza kubadilishwa kuwa kizuizi rahisi kwenye picha.
Mistari ya mlalo iliyoundwa na lebo ambayo haijaoanishwa (hakuna lebo ya kufunga inahitajika).
na inaweza kuwa vipengele vya kipekee vya kubuni. Kuunda maandishi kwa kuongeza mistari ya HTML ya mlalo itatoa ukurasa mantiki fulani ya uwasilishaji wa maandishi, na pia itarahisisha kwa msomaji kuangazia vizuizi vya habari ambavyo vinahitaji kusomwa kwa mfuatano. Lebo
inaweza kuunda mistari ya usawa ya rangi tofauti, unene na urefu. Na hii ni rahisi sana kufanya, kama inavyoonyeshwa katika mifano hapa chini.
Kwa njia, unaweza pia kutumia mali ya mtindo wa kuzuia A mistari ya wima huundwa kwa kweli katika vitalu sawa Hapa kuna mfano wa mstari wa wima nyekundu upande wa kushoto. Hapa kuna mfano wa mstari wima nyekundu upande wa kulia. Hapa kuna mfano wa mstari mwekundu mlalo hapo juu. Hapa kuna mfano wa mstari mlalo katika nyekundu hapa chini. Hapa kuna mfano wa mistari ya usawa na wima. makini na sifa ya mtindo Mduara ulioundwa kwa kutumia lebo Hapa kuna mfano wa mstari wa wima nyekundu upande wa kushoto. Hapa kuna mfano wa mstari wima nyekundu upande wa kulia. Hapa kuna mfano wa mstari mlalo katika nyekundu hapa chini. Hapa kuna mfano wa mistari ya usawa na wima. Na tukichambua mifano hii, tunaweza kupata hitimisho rahisi kwamba mistari wima huundwa vyema kwa kutumia, na chaguzi za mstari wa kati zinaweza kufanywa na. tagi Salaam wote! Leo nitakuambia jinsi ya kufanya mstari wa usawa kwa kutumia html. Kwa kweli, haja ya kufanya mstari wa usawa hutokea mara nyingi kabisa, kwa mfano, wakati unahitaji kutenganisha sehemu moja ya maandishi kutoka kwa mwingine. Hii inaweza kufanywa kwa kutumia css. Ili kufanya hivyo, ninaambatanisha sehemu inayohitajika ya maandishi kwenye kizuizi kwa kutumia tepe ya div, na kisha katika faili ya style.css au moja kwa moja kwenye msimbo wa html tunaandika sifa za kizuizi hiki kwa mpaka wa juu au chini kwa kutumia mpaka-juu na. mpaka-chini. Hapa kuna mfano:
Katika kesi hii, niliweka mtindo kwa kutumia css moja kwa moja kutoka kwa msimbo wa html, na kufanya mpaka wa juu kuwa thabiti na mpaka wa chini uwe na alama. Hivi ndivyo itakavyoonekana kwenye ukurasa: Mstari wa mlalo kwa kutumia css. Mbinu hii ina faida zake: Hasara ni pamoja na ugumu wa jamaa wa kanuni. Walakini, kama ilivyotokea, unaweza kuingiza mstari wa usawa kwenye maandishi kwa kutumia html. Wakati huo huo, sio lazima hata uingie kwenye css. Lebo hutumiwa kwa hili Kipengele cha kwanza cha lebo hii ni kwamba haina lebo ya kufunga iliyooanishwa. Inaweza kutumika popote katika msimbo wa html kati ya vitambulisho Lebo hii ina sifa zifuatazo: Hapa kuna mfano wa nambari ya html: Na hii ndivyo itakavyoonekana: Kama unaweza kuona, njia hii ina hasara zake: Lakini njia hii ni rahisi zaidi. Sasa unajua hasa jinsi ya kuunda mistari ya wima na ya usawa kwenye tovuti yako. Unaweza kuuliza maswali yako katika maoni. Na usisahau kujiandikisha
Na
katika eneo fulani. Kweli, chaguo hili haliwezi kuwa rahisi kila wakati, kwa mfano, uchoraji wakati mwingine sio daima kulipa, lakini katika hali nyingi inawezekana kutatua matatizo kwa njia hii. Kwa mfano, ndani ya mstari ulioundwa tagi
huwezi kuingiza maandishi. Lakini ndani ya vitalu, hii inawezekana na inafanywa mara kwa mara. Kwa hiyo unahitaji kuchagua chaguo lako kulingana na mahitaji ya kubuni.
Mistari ya wima katika HTML.
Na
Usumbufu pekee ni kwamba lebo haipatikani katika vivinjari vyote.
inafanya kazi sawa, lakini lazima ujaribu
na urekebishe ukurasa, au utumie vivinjari vilivyosasishwa.
Uundaji wa mistari ya mlalo:
Lebo
huingiza mstari mlalo kwenye ukurasa na ina sifa zifuatazo:Sintaksia ya lebo
:Mifano ya mistari mlalo katika HTML:
Mifano ya mistari wima katika HTML:
Sintaksia kwa mifano ya mistari wima na mlalo katika HTML:
mpaka- kushoto(-kulia): 4px imara #FF0000;:
Lakini yote inategemea mawazo na maombi. Kwa hivyo chagua na uunda.Mistari ya mlalo na wima kwa kutumia css
. Mstari wa mlalo kwa kutumia lebo ya html
.
Tunapendekeza
Jinsi ya kusakinisha faili ya XAP kwenye simu mahiri ya Windows Phone
