Wakati wa kuunda ukurasa wa HTML, mtindo una jukumu muhimu. Hasa tunapozungumzia juu ya alama mbalimbali na muundo wa mapambo: mambo haya madogo husaidia kufanya "lugha" ya ukurasa wako kupatikana zaidi na wazi, na pia kubadilisha kwa kiasi kikubwa mtazamo wake na kuonekana kwa ujumla. Moja ya vipengele muhimu zaidi vya kubuni ni mstari wa usawa, na kisha tutajifunza kwa undani zaidi jinsi ya kufanya kazi nayo na jinsi ya kufanya mstari wa usawa katika html.

Mstari wa usawa ni nini na ni kwa nini?

Mstari wa mlalo katika html ni kipengele cha muundo wa ukurasa ambacho hufanya kazi kadhaa:

1. Mapambo. Husaidia kuongeza kuvutia kwa ukurasa.
2. Kugawanya. Hukuza mgawanyo mzuri wa habari za maana tofauti.
3. Kuangazia au kusisitiza. Huvuta umakini wa wageni wa ukurasa kwa habari muhimu na muhimu zaidi.

Ni mstari wa usawa ambao unachukuliwa kuwa njia inayopatikana zaidi ya kutekeleza idadi ya kazi. Ni rahisi sana kuunda, na kutoka nje inaonekana faida sana. Kwa mabadiliko rahisi kwa nambari ya html unaweza kurekebisha:

• urefu;
• upana;
• sifa za rangi;
• alignment kando moja au nyingine.

Ni muhimu kuzingatia kwamba mstari wa usawa unahusu vipengele vya kuzuia. Hii ina maana kwamba inachukua mstari mpya kwenye ukurasa, na maandishi yanayofuata yataenda chini.

Kuunda Mstari wa Mlalo katika HTML

Unaweza kuweka mstari kwa kutumia lebo rahisi - hr katika mabano ya pembetatu. Ni kifupi cha "Kanuni ya Mlalo" na huweka vigezo vya nje vya kawaida. Inatofautiana na wengine wengi kwa kuwa hauhitaji tag ya kufunga na inaweza kuwepo kwa kujitegemea. Unaweza kubadilisha sifa za nje za kitu kwa kutumia maadili ya ziada kwenye tepe:

1. Urefu. Ikiwa hutaki urefu wa mstari uenee juu ya ukurasa mzima, basi unaweza kuweka ukubwa unaotaka katika saizi au asilimia. Hii inafanywa kwa kutumia neno la ziada "upana" kwenye lebo na urefu wa nambari ulioonyeshwa baada ya "=" ishara katika alama za nukuu.

Inaonekana hivi. Kwa mfano, ikiwa tunahitaji urefu wa pikseli 100, tunaweka lebo ifuatayo: hr width=”100″

1. Mpangilio. Alignment inawezekana kwa kingo za kushoto au kulia, na pia katikati. Tabia hii inatumika tu ikiwa tayari umetaja kigezo cha upana, kwani haiwezekani kusawazisha mstari unaozunguka ukurasa mzima. Kwa usawa, tunaweka sifa ya ziada kwenye lebo ya "align" na kuongeza mwelekeo kwake: katikati - kwa kati, kushoto - kwa kushoto na kulia - kwa usawa wa kulia.

Lebo iliyokamilishwa katika kesi hii itaonekana kama hii. Kwa mfano, ikiwa tunahitaji kuweka mpangilio wa katikati kwa mstari wa mlalo wa urefu wa pikseli 150, basi lebo iliyokamilika itaonekana hivi: hr align=”center” width="150″.

Kumbuka kuwa "panga", kipimo cha upangaji, kimewekwa katika nafasi ya 1, ingawa sifa inategemea kipimo cha upana.

1. Upana. Unaweza pia kuchagua kutaja upana, na kuunda mstari wa ujasiri au nyembamba. Kigezo hiki hakitegemei chochote na kinaweza kutumika kama kigezo huru bila kubainisha urefu au mpangilio. Kwa ajili yake, tunatumia sifa ya ukubwa katika lebo na thamani ya nambari sawa na upana unaohitajika katika saizi. Nambari imeonyeshwa katika alama za nukuu baada ya sifa ya ukubwa na ishara "=".

Kwa hivyo, ikiwa tunahitaji kuunda mstari wenye upana wa pikseli 15, tunahitaji kuunda lebo ifuatayo: hr size=”15″.

1. Rangi. Pia imeainishwa kama kiashiria huru. Ili kuibadilisha, tumia sifa ya rangi pamoja na jina la rangi kwa namna ya msimbo au kwa Kiingereza. Rangi imeonyeshwa katika alama za nukuu baada ya ishara "=".

Kwa hivyo, lebo ya mstari mweupe wa kawaida inaweza kuandikwa kwa njia mbili: hr color=“#FFFFFF” au hr color=”nyeupe”

Nyeusi inaweza kuundwa kwa kutumia nambari #000000.

1. Weka mbali kivuli. Ikiwa unahitaji kipengele ambacho hakina kivuli, basi unapaswa kutumia sifa ya noshade kwenye lebo. Inaweza kutumika peke yake au kwa kuchanganya na vipengele vingine. Lebo ya mstari wa kawaida unaoitumia itaonekana kama hii: hr noshade

Kuunda Mstari Mlalo Kwa Kutumia Video

Na ikiwa unataka kupokea habari katika muundo wa kuona zaidi, kisha rejea video ifuatayo, ambayo inaelezea kwa undani uwezekano wa kufanya kazi na mstari wa usawa.

Baada ya kuamua vipimo vinavyohitajika vya mstari wa usawa, unaweza kuunda kurasa za tovuti kwa njia ambayo habari imeundwa na inayoonekana. Hii huwasaidia wageni kutambua kwa urahisi maelezo yaliyowasilishwa na kufanya tovuti yako kuwa tofauti na wengine.

Kazi

Fanya mstari wa usawa kwenye ukurasa.

Suluhisho

Mistari ya mlalo ni nzuri kwa kutenganisha kizuizi kimoja cha maandishi kutoka kwa kingine. Maandishi madogo yenye mistari mlalo juu na chini huvutia umakini wa wasomaji kuliko maandishi ya kawaida.

Kwa kutumia lebo

---

unaweza kuteka mstari wa usawa, kuonekana ambayo inategemea sifa zilizotumiwa, pamoja na kivinjari. Lebo inahusu vipengele vya kuzuia, hivyo mstari daima huanza kwenye mstari mpya, na baada ya hayo vipengele vyote vinaonyeshwa kwenye mstari unaofuata. Shukrani kwa sifa nyingi za lebo

---

laini iliyoundwa kupitia lebo hii ni rahisi kudhibiti. Ikiwa pia unaunganisha nguvu za mitindo, kisha kuongeza mstari kwenye hati inakuwa kazi rahisi.

Mstari chaguomsingi

---

kuonyeshwa kwa rangi ya kijivu na kwa athari ya sauti. Aina hii ya mstari haifai kila wakati muundo wa tovuti, hivyo hamu ya watengenezaji kubadilisha rangi na vigezo vingine vya mstari kupitia mitindo inaeleweka. Walakini, vivinjari vina mbinu mchanganyiko kwa suala hili, ndiyo sababu utalazimika kutumia mali kadhaa za mtindo mara moja. Hasa, matoleo ya zamani ya Internet Explorer hutumia sifa ya rangi kwa rangi ya mstari, wakati vivinjari vingine hutumia rangi ya asili. Lakini sio yote, lazima ueleze unene wa mstari (mali ya urefu) kuwa isiyo ya sifuri na uondoe sura karibu na mstari kwa kuweka mali ya mpaka hakuna. Kwa kuweka sifa zote pamoja kwa kichaguzi cha saa, tunapata suluhisho la ulimwengu kwa vivinjari maarufu (mfano 1).

Mfano 1: Mstari wa mlalo

HTML5 CSS 2.1 IE Cr Op Sa Fx

---

Mfuatano wa maandishi

---

Matokeo ya mfano huu yanaonyeshwa kwenye Mtini. 1.

Mchele. 1. Mstari wa usawa wa rangi

Inaonekana, kwa nini njia nne zinaweza kuhitajika? Baada ya yote, karibu kila mtu hutumia njia moja ambayo amezoea. Kwa mfano, nilibonyeza Shift na kitufe cha dashi mara kadhaa, na kwa hivyo nikapata mstari mlalo.

Lakini vipi ikiwa hii itasababisha mstari wa alama, lakini unahitaji moja thabiti?
- Uwezekano mkubwa zaidi, ufunguo wa Shift kwenye kibodi ni mbaya. Njia zingine zitakuja kuwaokoa hapa.

Labda njia ya kawaida ya kutengeneza mstari katika Neno ni kutumia funguo kadhaa kwenye kibodi.

I Nyembamba, nene, mbili, mstari wa nukta kwa kutumia kibodi

Chini ni picha ya kibodi yenye mpangilio wa Kiingereza, lakini bila mpangilio wa Kirusi, lakini hii haijalishi, kwa sababu tunavutiwa tu na funguo tatu: Shift, dash na Ingiza.

Mchele. 1. Vifunguo vitatu kwenye kibodi: Shift, dashi na Ingiza kwa mstari unaoendelea wa mlalo katika Neno.

Kwa funguo hizi tatu unaweza kuchora mstari wa usawa unaoendelea katika Neno: dotted au imara, nyembamba au nene, ndefu au fupi.

1) Unapobonyeza kitufe cha "-" (dashi) mara kadhaa kwenye kihariri cha Neno, unapata mstari wa nukta wa urefu wowote.

Kufanya nyembamba mstari mrefu katika upana mzima wa ukurasa:

• Tunapata ufunguo wa "dashi" kwenye kibodi (upande wa kulia wa ufunguo wa "zero", kwenye sura ya kijani kwenye Mchoro 1).
• Kutoka kwa mstari mpya (!) katika Neno, bonyeza kitufe hiki mara kadhaa: -
• Na kisha bonyeza kitufe cha "Ingiza" (). Mistari michache iliyochapishwa itageuka ghafla kuwa mstari mwembamba unaoendelea katika upana mzima wa ukurasa.

2) Unapobonyeza Shift na "-" (dashi) kwa wakati mmoja, SI mstari unaochapishwa, lakini mstari wa chini _______. Kwa njia hii unaweza kutengeneza laini inayoendelea ya urefu wa kiholela mahali popote kwenye hati.

Mchele. 2. Mstari mwembamba na mnene wa mlalo katika Neno

Sasa hebu tuchapishe mafuta mstari mlalo katika upana mzima wa ukurasa:

• Tena tunapata ufunguo sawa wa "dashi", pamoja na ufunguo wa Shift (upande wa kushoto au wa kulia, kama unavyopenda). Bonyeza Shift, shikilia na usiruhusu kwenda.
• Na sasa, kutoka kwa mstari mpya (!), bofya kwenye dashi mara kadhaa (kwa mfano, mara 3-4) (wakati haukutoa Shift): ___. Toa Shift.
• Sasa bonyeza kitufe cha Ingiza. Utaona mstari mnene wa mlalo thabiti.

Mlalo mwembamba, mnene, wenye nukta na mbili katika Neno kwa kutumia kibodi

­­­­­­­­­­­­­­­­­­­­­

II Line katika Neno kwa kutumia jedwali

Mstari wa usawa unaweza kupatikana kwa kutumia meza ya seli moja (1x1), ambayo mpaka wa juu au chini ni rangi (itaonekana), na pande zingine tatu za meza zina mipaka isiyo na rangi (zitakuwa zisizoonekana) .

Weka mshale mahali ambapo mstari unapaswa kuwa. Katika menyu ya juu ya Neno, bonyeza:

• Ingiza (1 kwenye Kielelezo 3),
• Jedwali (2 katika Kielelezo 3),
• Kiini kimoja (3 kwenye Kielelezo 3).

Mchele. 3. Jinsi ya kuingiza meza 1x1 (kutoka seli moja) katika Neno

Matokeo yake yatakuwa jedwali la seli moja kubwa (1x1):

Yote iliyobaki ni kuondoa mipaka kutoka pande tatu kwenye meza ya 1x1. Kwa hii; kwa hili

• nenda kwenye kichupo cha "Nyumbani" (1 kwenye Mchoro 4),
• kisha karibu na "Font" tunapata "Kifungu" na mipaka (2 kwenye Mchoro 4),
• ondoa mipaka yote kwa kubofya "Hakuna mpaka" (3 kwenye Mchoro 4),
• chagua "Mpaka wa juu" au "Mpaka wa chini" (4 kwenye Mchoro 4).

Mchele. 4. Jinsi ya kuondoa uteuzi wa mpaka kutoka kwa jedwali la Neno (fanya mipaka isionekane)

Ninaonyesha hii wazi kwenye video (mwisho wa kifungu).

Kwa njia, katika Mtini. 3 ni wazi kwamba kuna njia rahisi zaidi. Unaweza kuweka mshale mwanzoni mwa mstari katika Neno na ubofye "Mstari wa Mlalo" (5 kwenye Mchoro 4):

III Mstari katika Neno kwa kutumia kuchora

Ingiza (1 kwenye Kielelezo 5) - Maumbo (2 kwenye Kielelezo 5) - hii ni njia nyingine ya kupata mstari wa usawa katika Neno.

Ili kuweka mstari kwa usawa, shikilia kitufe cha Shift na chora mstari kwa wakati mmoja.

Mchele. 5. Jinsi ya kuchora mstari katika Neno

IV Line katika Neno kwa kutumia kibodi kwenye skrini

Kwa Windows 10, unaweza pia kupata kibodi kwenye skrini kwa kuandika "kibodi ya skrini" kwenye upau wa Kutafuta.

Mchele. 6. Kibodi ya skrini

Tutaunda mstari wa usawa kwa njia sawa na katika chaguo la kwanza na keyboard ya kawaida. Utahitaji vitufe vitatu kwenye kibodi kwenye skrini: dashi, Shift na Ingiza.

1 Dashi na Ingiza

Kutoka kwa mstari mpya katika Neno, bofya kwenye dashi (1 kwenye Mchoro 6) mara kadhaa na ubofye Ingiza. Utapata mstari mwembamba wa usawa.

2 Shift, dashi na Ingiza

Kutoka kwa mstari mpya katika Neno, kwanza bofya Shift (2 kwenye Kielelezo 6), kisha Dash (1 kwenye Kielelezo 6). Utapata mstari wa chini. Tutarudia hii mara 2 zaidi, na kisha bonyeza Enter. Matokeo yake, tutaona mstari nene wa usawa.

Ili kusisitiza baadhi ya vipengele muhimu vya tovuti, haitaumiza kutumia kila aina ya mitindo ya CSS na mali zinazotolewa kwa hili. Bila shaka, huna haja ya kuwa na wasiwasi sana juu ya maandishi na kuyaangazia, kwa mfano, kwa herufi kubwa au italiki, badilisha mandharinyuma au utengeneze sura karibu na maandishi. Lakini moja ya njia zilizowasilishwa siofaa kila wakati. Wacha tuseme una maandishi ambayo yanahitaji kugawanywa kwa sababu ya maelezo ya mzigo wake wa semantic. Hapa ndipo sifa za HTML na CSS zinakuja kuwaokoa.

Jinsi ya kutengeneza mstari katika maandishi kwa kutumia CSS

Ili kutekeleza mipango yetu, tutahitaji kuwasiliana faili ya style.css, baada ya kuandika ndani yake mali inayolingana mpaka. Hii itasababisha mstari kuonekana juu, chini au upande maalum wa maandishi. Kwa upande wake, kuna mali kadhaa zinazohusika na kuonyesha mstari, ambazo ni:

- juu ya mpaka- mstari wa usawa ulio juu ya maandishi;

- mpaka-kulia- mstari wa wima ulio upande wa kulia wa maandishi;

- mpaka-chini- mstari wa usawa ulio chini ya maandishi;

- mpaka-kushoto- mstari wa wima ulio upande wa kushoto.

Jinsi ya kutengeneza mstari katika html

Kwa kutumia mali ya CSS unaweza kubainisha maadili yote muhimu kwa kuhariri msimbo wa HTML. Ili kufanya hivyo, unahitaji kwenda kwenye sehemu ya utawala ya tovuti. Chagua moja ya nyenzo zilizochapishwa, badilisha kihariri cha maandishi hadi modi ya uhariri wa msimbo wa HTML na uweke sifa za CSS. Sampuli inaweza kuonekana hapa chini.

Maelezo mafupi ya amri

- upana- urefu wa mstari;

- imara- mstari imara;

- yenye nukta- mstari wa nukta.

Kwa uelewa wa kina wa mitindo, napendekeza kusoma hii.

Ni muhimu kuelewa kwamba katika mchakato wa kufanya mabadiliko kwenye msimbo wa tovuti, mali zinazoamua aina ya mstari, unene wake na rangi zimeorodheshwa kutengwa na nafasi.

Njia hii ina faida kadhaa:

Uwezekano mkubwa ambao unaweza kutengeneza karibu mstari wowote.

Urahisi wa kufanya mabadiliko yote muhimu moja kwa moja kwenye msimbo wa HTML. Hii hurahisisha sana kazi kwa wajenzi wa tovuti wasio na uzoefu.

Jinsi ya kutengeneza laini iliyonyooka kwa kutumia tepe ya HTML

---

Jambo la kwanza ningependa kuteka mawazo yako ni kwamba lebo hii, licha ya hila zote na kanuni za html, haina lebo ya kufunga. Inaweza kutumika popote katika msimbo wa html, kati ya vitambulisho Na

.

Tag sifa

---

- upana- inawajibika kwa urefu wa mstari. Inaweza kubainishwa kama asilimia au kwa pikseli.

- ukubwa- unene wa mstari. Imebainishwa katika saizi.

- rangi- hufafanua rangi ya mstari.

- panga- sifa inayowajibika kwa upatanishi wa mstari. Kwa upande wake, timu inahusiana naye.

Kimsingi, mistari ya usawa hutumiwa kupamba kurasa za HTML za tovuti, kuwapa kuangalia zaidi ya kuvutia. Lakini wanaweza pia kutofautisha habari kutoka kwa sehemu zilizo karibu, na kuongeza urahisi kwa wasomaji wakati wa kuisoma. Kimsingi, chora mistari ya mlalo ambapo unahitaji, ndivyo tu.

Jinsi ya kuteka mstari wa usawa?

Kuna lebo maalum ya kuchora mistari ya mlalo katika HTML

---

. Naye yuko alama ya kuzuia, yaani, inajenga mapumziko ya mstari kabla na baada ya yenyewe, hivyo mstari daima huishia kwenye mstari tofauti. Ipasavyo, inaweza tu kubainishwa ndani ya vitambulisho ambavyo vinaweza kuwa na vitu vya kuzuia, kwa mfano au

. Lakini mimi hapa

---

haiwezi kuwa na maudhui kwa sababu haina lebo ya kufunga, kumaanisha ni tupu.

Mfano wa kuchora mistari mlalo katika HTML

---

Aya.

Aya.

---

Aya.

Matokeo katika kivinjari

Aya.

Aya.

Aya.

Kama unaweza kuona, mistari inageuka kuwa nyembamba sana, isiyovutia na inayotolewa kwa upana kamili unaopatikana, kwa hiyo sasa tutajifunza jinsi ya kuzibadilisha ili zionekane kuvutia zaidi.

Jinsi ya kubadilisha rangi, unene na upana wa mistari ya usawa?

Katika matoleo ya zamani ya HTML, tag

---

kulikuwa na sifa maalum ambazo unaweza kubadilisha rangi, unene na upana wa mistari ya usawa. Hizi ni rangi, ukubwa na upana, kwa mtiririko huo. Lakini katika matoleo mapya yaliachwa kwa kupendelea Laha za Mitindo ya Kuachia (CSS), kwa hivyo, kama unavyoweza kuwa umekisia, tutatumia tena sifa ya mtindo wetu tunayopenda. Sintaksia ya jumla ni:

---

style="background:color" >- rangi ya mstari (au tuseme asili yake).

---

style="height:size" >- unene wa mstari.

---

style="width:size" >- upana wa mstari.

---

mtindo= "usuli:rangi; urefu:ukubwa; upana:ukubwa"> - au unaweza kutaja vigezo vyote mara moja, usisahau kuhusu semicolon (;).

Rangi inaweza kubainishwa kwa jina lake kwa Kiingereza au kwa msimbo wa HEX wa rangi unaotanguliwa na heshi (#). Kweli, tayari unajua juu ya hii kutoka kwa somo kuendelea badilisha maandishi na rangi ya mandharinyuma.

Lakini tutazungumza zaidi juu ya kubadilisha ukubwa. Kama unakumbuka kutoka somo la kubadilisha fonti, kuna takriban vitengo kumi vya kipimo katika CSS, lakini upana wa mstari inaweza tu kubainishwa katika saizi (px) na asilimia (%), na unene kwa ujumla tu katika saizi. Ikiwa utaweka vitengo vingine vya kipimo, haitakuwa kosa, lakini vivinjari vitapuuza tu.

Ikiwa unataja vipimo katika saizi, basi unene na upana wa mstari utategemea azimio la kufuatilia ambalo tovuti yako inatazamwa (ya juu ya azimio la skrini, nyembamba na nyembamba ya mstari).

Kama nilivyosema tayari, upana wa mstari pekee ndio unaweza kubainishwa kama asilimia. Asilimia ya ukubwa hutegemea kila wakati na huhesabiwa kulingana na saizi ya kipengee kikuu cha chombo ambamo lebo iko

---

. Katika kesi hii, vipimo vya mzazi huchukuliwa kama 100%. Kwa mfano, ikiwa tutaweka lebo

---

style="width:50%" > kipengele cha ndani

, basi bila kujali jinsi tunavyobadilisha ukubwa wa dirisha la kivinjari au azimio la kufuatilia, upana wa mstari daima utakuwa nusu ya upana wa block.

.

Mfano wa kubadilisha rangi, unene na upana wa mistari ya usawa.

---

---

---

---

Matokeo katika kivinjari

Kubadilisha nafasi ya mistari ya usawa

Unapobadilisha upana wa mstari wa usawa, unaweza kuona wazi kwamba vivinjari daima huiweka katikati. Ikiwa unataka kubadilisha msimamo wake, basi tumia tu ndani

---

linganisha sifa na maadili yafuatayo:

• kituo- mstari umewekwa katikati (thamani ya chaguo-msingi).
• kushoto- mashinikizo dhidi ya makali ya kushoto.
• haki- mashinikizo dhidi ya makali ya kulia.

Mfano wa upangaji wa mstari wa mlalo.

---

---

---

Matokeo katika kivinjari

Jinsi ya kuondoa sura karibu na mstari?

Angalia mfano wa kwanza kabisa wa somo hili. Unafikiri mistari hii ni ya rangi gani? Lakini hiyo si kweli. Zina uwazi, kama tu kipengele chochote cha ukurasa ambacho hakina rangi ya usuli iliyobainishwa! Usiniamini? Kisha angalia mfano ambapo tulibadilisha rangi ya mistari. Kwa kwanza kabisa, hatukuweka rangi, lakini tu tuliongeza ukubwa wake, na si mstari huu wa uwazi? Kwahivyo!

Sasa nitaeleza. Kwa chaguo-msingi, vivinjari huchora muafaka karibu na mistari, ambayo huunda athari ya pande tatu. Kwa hiyo, wakati hatuongeza unene wa mistari ya usawa, vivinjari vinatuonyesha tu muafaka huu, kwani unene wa mstari yenyewe ni 0px.

Ili kuondoa mpaka karibu na mstari, ambayo mara nyingi huharibu kuonekana, tutatumia sifa ya mtindo tena. Na imeandikwa hivi:

---

Kazi ya nyumbani.

1. Unda makala, sehemu, na vichwa vidogo. Waweke wote katikati.
2. Weka fonti kwa Arial kwa ukurasa mzima na Courier kwa vichwa.
3. Acha ukubwa wa fonti kwenye ukurasa mzima uwe 85% ya saizi chaguomsingi ya kivinjari. Na vichwa vina 145%, 125% na 110%, mtawaliwa, ya saizi ya fonti kwenye ukurasa.
4. Andika aya chini ya kichwa cha kwanza, nukuu ndefu chini ya pili, na shairi chini ya tatu. Na shairi liwe katikati ya ukurasa.
5. Maneno mazito matatu katika nukuu.
6. Chini ya kichwa cha makala, chora mstari mwekundu mlalo wenye unene wa saizi tatu katika upana mzima wa ukurasa.
7. Katika sehemu ya juu na chini ya shairi, chora mistari nene ya pikseli moja kwa rangi nyeusi. Hebu upana wa mstari wa juu uwe takriban sawa na upana wa mstari, na chini - nusu zaidi.
8. Ondoa muafaka usio wa lazima kutoka kwa mistari.