Katika mchakato wa kuunda tovuti, wajenzi wengi wa tovuti ya novice wanashangaa jinsi ya kubadilisha font, ukubwa na rangi ya vichwa. Ndiyo ni kweli chaguo kubwa, ambayo unaweza kuongeza upya kwa muundo wa tovuti. Lakini kuna swali lingine la kufurahisha: jinsi ya kutengeneza fremu ya html.

Je, fremu ya html ni ya nini?

Kwa kweli, hakuna kazi maalum kipengele hiki haibebi. Lakini bado, maandishi, yaliyofungwa katika sura ya kuvutia iliyoundwa, huamsha shauku fulani kati ya wasomaji. Kwa hiyo, sura karibu na maandishi inaweza kuitwa salama mojawapo ya njia za kusisitiza umuhimu wa maandishi yaliyopangwa.

Vipengele vya kuunda sura karibu na maandishi

Bila shaka, tofauti katika muundo wa sura kwa kutumia CSS mengi zaidi, lakini hiyo ni hadithi tofauti kabisa. Kwa kuongeza, njia hii inafaa kwa wajenzi wa tovuti ya juu zaidi. Nadhani wewe na mimi na kwa usaidizi wa kuhariri nambari ya html itageuka sio chini sura nzuri html.

Katika hatua ya kwanza, unahitaji kuelewa kuwa sura inaweza kufanywa kwa kila mtu kipengele cha html bila kujali ni aina gani ya lebo

,

, , na kadhalika.

Kwa upande wake, kuna tofauti kati ya muafaka uliojengwa ndani na vipengele vya kuzuia.

Sura ya aina iliyojengwa iko ndani ya vitambulisho, au kwa usahihi zaidi, msimbo wa html unaohusika na maonyesho yake umefungwa kati ya lebo fulani. Matokeo yake, tunapata sura ya html karibu na maandishi, ambayo tunahitaji kuandika amri fulani ili kuweka indents za ndani.

Muafaka wa kuzuia huundwa kwa upana mzima wa kizuizi, ambayo husababisha hitaji la kutaja amri zinazohusiana na kupunguza upana.

Bila shaka, ili kufanya maandishi katika sura ya html, tutalazimika kurejea kwa mitindo iliyojengwa. Mbinu hii itafaa zaidi kwa kuangazia misemo ya kibinafsi, aya katika maandishi na picha. Ikiwa unahitaji kuangazia sehemu maalum ya kiolezo kinachoonyeshwa kwenye kurasa zote za tovuti, ni busara kuhariri faili ya style.css ya kiolezo.

Jinsi ya kutengeneza fremu kuzunguka maandishi katika html

Nadhani kuna nadharia nyingi. Ni wakati wa kufanya mazoezi. Kama mfano, nitaambatanisha na sura ya kijani kibichi na mandharinyuma ya kijivu moja ya mapendekezo muhimu ya makala hii.

Jambo muhimu! Mitindo iliyojengewa ndani hufanya kazi vizuri na haina madhara Uhalali wa HTML tovuti.

Ili kutekeleza sura sawa, unahitaji kurejelea lebo

PENDEKEZO LAKO.

Tangu katika katika mfano huu iliyojengwa ndani mitindo ya css, ninaona kuwa ni muhimu vile vile kukutambulisha kwa kila mmoja wao.

1. mpaka- mali inayohusika na kuonyesha sura. Ili kurahisisha kazi hiyo, sikutaja kila mali kando - upana wa mpaka (unene wa mipaka ya sura), rangi ya mpaka (rangi). mfumo wa html) Badala yake, nilifupisha msimbo wa html kidogo kwa kuandika mali zote baada ya koloni.

Kwa mabadiliko mwonekano frame badilisha tu thamani imara. Mipaka ifuatayo ya fremu ipo:

Ridge - misaada.

Vitone - vitone.

Mara mbili - mara mbili.

Iliyopigwa - yenye alama.

Imara - imara.

2. pedi- mali inayohusika na umbali kati ya sura na kitu kilichofungwa ndani yake.

Ukipenda, unaweza kucheza na mitindo zaidi kidogo kwa kuongeza idadi ya amri zilizoambatanishwa kati ya vitambulisho vya kufungua na kufunga.

Mali ukingo. Kwa njia hii, unaweza kuingiza vipengele vilivyo nje ya fremu.

ili kubadilika usuli Inatosha kusajili mali ya rangi ya asili, kubainisha msimbo wa rangi inayotaka baada ya koloni.

Sura karibu picha za html Imefanywa kwa njia ile ile, kwa hivyo haifai kuwa na shida nayo. Kitu pekee anayeanza anahitaji kujua ni kwamba ili kuionyesha, mali lazima iandikwe kwa lebo moja .

Kwa muhtasari, tunaweza kusema kwamba ili kufanya sura karibu na picha au maandishi, inatosha kufungua maonyesho ya msimbo wa html wa makala na kuandika mali maalum ndani yake kati ya vitambulisho fulani.

Asante kwa umakini wako na kukuona hivi karibuni kwenye kurasa za Stimylrosta.

Imepatikana katika maandishi makosa ya kisarufi? Tafadhali ripoti hii kwa msimamizi: chagua maandishi na ubonyeze mchanganyiko wa hotkey Ctrl+Ingiza

Vlad Merzhevich

Kwa kutumia CSS, unaweza kuongeza mpaka kwa kipengele kwa njia kadhaa. Kimsingi, bila shaka, hutumiwa mali ya mpaka, kama ya ulimwengu wote, pamoja na muhtasari na, kwa kushangaza, sanduku-kivuli , kazi kuu ambayo ni kuunda kivuli. Ifuatayo, tutazingatia njia hizi na tofauti zao kati yao wenyewe.

muhtasari wa mali

Mali rahisi zaidi ya kuunda muafaka. Inayo vigezo sawa na border , lakini inatofautiana sana katika maelezo kadhaa:

• muhtasari unaonyeshwa kuzunguka kipengele (mpaka ndani);
• muhtasari hauathiri vipimo vya kipengele (mpaka huongezwa kwa upana na urefu wa kipengele);
• muhtasari unaweza tu kuweka kuzunguka kipengele nzima, lakini si kwa pande za mtu binafsi (mpaka inaweza kutumika kwa upande wowote au wote kwa mara moja);
• muhtasari hauathiriwi na radius ya fillet iliyoainishwa na mali ya mpaka-radius (mpaka umeathiriwa).

Swali linatokea - katika kesi gani muhtasari unahitajika, wakati jukumu lake, licha ya tofauti zilizoorodheshwa, linachukuliwa kabisa na mpaka? Hakuna hali nyingi, lakini hutokea:

• kuunda muafaka tata wa rangi nyingi;
• kuongeza sura kwa kipengele wakati unapoinua panya juu yake;
• kujificha mpaka ambao kivinjari huongeza moja kwa moja kwa baadhi ya vipengele wakati wa kupokea kuzingatia;
• kwa muhtasari, unaweza kuweka umbali kutoka kwa ukingo wa kipengee hadi kwa fremu kwa kutumia mali ya muhtasari, kuunda .

Muafaka wa rangi nyingi

Unahitaji kuelewa kuwa muhtasari hauchukui nafasi ya mpaka na unaweza kuwa pamoja nayo kwa urahisi, kama inavyoonyeshwa kwenye mfano 1.

Mfano 1: Kuunda Mfumo

Katika mfano huu, sura nyeusi imeongezwa karibu na kipengele, ambacho kinatenganishwa na historia na mpaka mweupe (Mchoro 1).

Mchele. 1. Sura karibu na kipengele

Fremu wakati wa kutumia: hover

Wakati wa kuongeza fremu kupitia mpaka, upana wa kipengele huongezeka, ambayo inaonekana kabisa wakati wa kuchanganya mpaka na :hover pseudo-class. Kuna njia mbili za "kushinda" hii. Jambo rahisi zaidi ni kuchukua nafasi ya mpaka na outline , ambayo, kama tunavyojua, haiathiri saizi ya kitu (mfano 2).

Mfano wa 2: Fremu kwenye Hover

muhtasari sio mzuri kila wakati, ikiwa tu kwa sababu pembe za kuzunguka haziathiri. Njia ya pili inafaa hapa - ongeza sura isiyoonekana au sura inayofanana na rangi ya asili, na kisha ubadilishe vigezo vyake wakati wa kuzunguka (mfano 3). Halafu hakuna uhamishaji wa kitu kitatokea, kwani sura tayari iko. Lakini tunakumbuka kila wakati kuwa upana wa kipengee unajumuisha maadili ya upana, mpaka upande wa kushoto na mpaka wa kulia. Hali ni sawa na urefu.

Mfano wa 3: Fremu kwenye Hover

Mpaka kuzunguka mashamba ya fomu

Katika baadhi ya vivinjari (Chrome, Safari, matoleo ya hivi karibuni Opera) ikoni ndogo huonyeshwa karibu na sehemu za fomu zinapopokea umakini. sura ya rangi(Mchoro 2). Ili kuiondoa, ongeza tu kwenye sifa ya muhtasari katika mitindo thamani hakuna, kama inavyoonyeshwa kwenye mfano 4.

Mchele. 2. Sura kuzunguka kando

Mfano 4. Kuondoa sura

Fremu kupitia sanduku-kivuli

Ingawa kipengele cha kivuli-kisanduku kinakusudiwa kuongeza kivuli karibu na kipengele, kinaweza pia kutumiwa kuunda mipaka ambayo haiwezi kuundwa kwa kutumia border au outline . Hii yote ni shukrani kwa ukweli kwamba idadi ya vivuli inaweza kuwa na ukomo, vigezo ambavyo vimeorodheshwa kutengwa na koma.

Ili kupata fremu, vigezo vitatu vya kwanza vinapaswa kuwekwa hadi sifuri; vinawajibika kwa nafasi ya kivuli na ukungu wake. Kigezo cha nne katika kwa kesi hii inawajibika kwa unene wa mpaka, na ya tano inaweka rangi ya mpaka. Kwa sura ya pili, parameter ya nne ni sawa na jumla ya unene wa muafaka mbili.

Mfano wa 4 unaonyesha jinsi ya kuongeza fremu mbili na mpaka mmoja kulia kwa kutumia kipengele kimoja cha kivuli.

Mfano 4: Kutumia sanduku-kivuli

Matokeo ya mfano huu yanaonyeshwa kwenye Mtini. 3.

Mchele. 3. Muafaka ulioundwa na mali ya sanduku-kivuli

fremu ya CSS3 inakamilisha uwezo wa kuunda mipaka ya vipengee na sifa zinazoruhusu pande zote pembe kipengele, na pia kutumia Picha kuunda mipaka ya kipengele.

Pembe za mviringo na muafaka wa picha

1. Pembe zinazozunguka na mpaka-radius

Usaidizi wa kivinjari

YAANI: 9.0
Firefox: 4.0
Chrome: 4.0
Safari: 5.0, 3.1 -kiti cha wavuti-
Opera: 10.5
iOS Safari: 7.1
Opera Mini: —
Kivinjari cha Android: 4.1
Chrome kwa Android: 44

Mali hukuruhusu kuzunguka pembe za vitu vya ndani na kuzuia. Mviringo wa kila pembe hufafanuliwa kwa kutumia radii moja au mbili kufafanua umbo lake - mduara au duaradufu. Radius inatumika kwa usuli mzima, hata kama kipengele hakina mpaka, nafasi halisi ya secant imedhamiriwa kwa kutumia sifa ya klipu ya usuli.

Mali ya kipenyo cha mpaka hukuruhusu kuzungusha pembe zote kwa wakati mmoja, na ukitumia eneo la mpaka-juu-kushoto-radius , mpaka-top-right-radius , border-bottom-right-radius , mpaka-bottom-left-radius wewe. inaweza kuzunguka kila kona tofauti.

Ukiweka thamani mbili za mali ya mpaka-radius, thamani ya kwanza itazunguka juu kushoto Na kona ya chini kulia, na ya pili - juu kulia Na chini kushoto.

Thamani zilizoainishwa kupitia / kuamua mlalo Na radii ya wima. Mali hairithiwi.

Chaguo

Div (upana: 100px; urefu: 100px; mpaka: 5px imara;).r1 (radius ya mpaka: 0 0 20px 20px;).r2 (radius ya mpaka: 0 10px 20px;).r3 (radius ya mpaka: 10px 20px; ;) ( radius ya mpaka: 50%;).r8 (mpaka-juu: hakuna; mpaka-chini: hakuna; radius ya mpaka: 30px/90px;).r9 (radius ya mpaka-chini-kushoto: 100px;).r10 ( mpaka -radius: 0 100%;).r11 (radius ya mpaka: 0 50% 50% 50%;).r12 (radius ya mpaka-juu-kushoto: 100% 20px; radius ya mpaka-chini-kulia: 100% 20px ;)
Mchele. 1. Mifano chaguzi mbalimbali pembe za kuzuia pande zote

2. Picha ya mpaka

Usaidizi wa kivinjari

YAANI: 11.0
Firefox: 15.0, 3.5 -moz-
Chrome: 16.0, 7.0 -kiti cha wavuti-
Safari: 6.0, 3.0 -kiti cha wavuti-
Opera: 15.0, 11.0 -o-
iOS Safari: 7.1
Opera Mini: 8 -o-
Kivinjari cha Android: 4.4, 4.1 -kiti cha wavuti-
Chrome kwa Android: 42

Mali hukuruhusu kuweka picha kama fremu ya kipengele. Sharti kuu la picha ni kwamba lazima iwe na ulinganifu. Mali inajumuisha maadili yafuatayo: (picha ya mpaka: upana chanzo kipande kurudia mwanzo;) .

Kwa msaada wa hili picha rahisi Unaweza kupata fremu hizi kwa kipengele.

/* Mfano 1 */ div ( upana: 260px; urefu: 100px; mtindo wa mpaka: imara; upana-picha-mpaka: 15px; chanzo-picha-mpaka: url(border_round.png); kipande-picha-mpaka: 30 ; kurudia-picha-ya-mpaka: kunyoosha; ) /* Mfano 2 */ div ( upana: 260px; urefu: 100px; mtindo wa mpaka: imara; upana wa picha-mpaka: 15px; chanzo-chanzo cha picha: url(mpaka_wa_mviringo. png); kipande cha picha ya mpaka: 30; kurudia-picha ya mpaka: pande zote; )
Mchele. 2. Mfano wa kubuni mipaka ya kuzuia kwa kutumia picha

Kata A - B - C - D huunda pembe za sura, na sehemu ya muundo iko kati yao inajaza nafasi iliyobaki ya sura kulingana na thamani iliyopewa sifa za kurudia-picha-mpaka. Ukubwa wa sehemu ya kona (katika mfano huu nambari 30) imewekwa kwa kutumia thamani ya mali ya mpaka-picha-kipande.

2.1. mpaka-picha-upana

Sifa hii inabainisha upana wa picha kwa mpaka wa kipengele. Ikiwa upana haujabainishwa, itabadilika kuwa 1.

mpaka-picha-upana
Maadili:
urefu	Huweka upana wa mpaka katika vitengo vya urefu - px / em . Unaweza kuweka kutoka kwa maadili moja hadi nne kwa wakati mmoja. Ikiwa thamani moja imetajwa, basi upana wa pande zote za sura ni sawa, maadili mawili yanataja upana wa juu-chini na kulia-kushoto, nk.
nambari	Nambari ya nambari ambayo thamani ya upana wa mpaka inazidishwa.
%	Upana wa fremu ya kipengele huhesabiwa kulingana na saizi ya picha. Mlalo kuhusiana na upana, wima - kuhusiana na urefu.
kiotomatiki	Inalingana na thamani ya kipande cha picha ya mpaka.
awali
kurithi

Sintaksia

Div (upana-picha-mpaka: 30px;) Mtini. 3. Mfano wa kuweka upana wa sura ya picha kwa kutumia aina mbalimbali maadili

2.2. mpaka-picha-chanzo

Mali hiyo inataja njia ya picha ambayo itatumika kupamba mipaka ya block.

Sintaksia

Div (chanzo-picha-mpaka: url(border.png);)

2.3. vipengele vya mpaka-picha-kipande

Mali huamua ukubwa wa sehemu za picha zinazotumiwa kufafanua mipaka ya kipengele na kugawanya picha katika sehemu tisa: pembe nne, kingo nne kati ya pembe, na sehemu ya kati.

Maadili:
nambari	Ukubwa wa sehemu za sura inaweza kuweka kwa kutumia maadili moja, mbili, tatu au nne. Thamani moja huweka mipaka kuwa saizi sawa kwa kila upande wa kipengele. Maadili mawili: ya kwanza huamua ukubwa wa juu na kikomo cha chini, pili - kulia na kushoto. Maadili matatu: ya kwanza huamua ukubwa wa mpaka wa juu, wa pili - wa kulia na wa kushoto, na wa tatu - mpaka wa chini. Thamani nne: Inafafanua ukubwa wa mipaka ya juu, kulia, chini na kushoto. Nambari ya nambari inawakilisha nambari ya px.
%	Ukubwa wa mpaka huhesabiwa kulingana na saizi ya picha. Mlalo kuhusiana na upana, wima - kuhusiana na urefu.
jaza	Thamani imeonyeshwa pamoja na nambari au asilimia. Ikiwa imeelezwa, picha haijakatwa na makali ya ndani ya sura, lakini pia inajaza eneo ndani ya sura.
awali	Huweka sifa hii kwa thamani yake chaguomsingi.
kurithi	Hurithi thamani ya mali hii kutoka kwa kipengele kikuu.

Sintaksia

Div (kipande-picha-mpaka: 50 20;)
Mchele. 4. Mfano wa kubainisha vipande vya sura ya picha

2.4. mpaka-picha-rudia

Kipengele hiki hudhibiti jinsi taswira ya usuli inavyojaza nafasi kati ya pembe za fremu. Inaweza kubainishwa kwa kutumia thamani moja au jozi ya thamani.

Sintaksia

Div (mpaka-picha-kurudia: kurudia;) Mtini. 5. Mfano wa kurudia sehemu ya kati ya sura ya picha kwa kutumia aina tofauti za maadili

2.5. mpaka-picha-mwanzo

Mali inakuwezesha kuhamisha sura ya picha zaidi ya mipaka ya kipengele kwa urefu maalum. Inaweza kubainishwa kwa kutumia moja au maadili manne.

Sintaksia

Div (mwisho-picha-mwanzo: 10px;)
Mchele. 6. Mfano wa kuhamisha sura ya picha kwa kutumia aina tofauti za maadili

3. Muhtasari wa kukabiliana na fremu ya nje

Sifa hii inabainisha umbali kati ya mpaka wa kipengele cha mpaka na mpaka wa nje ulioundwa kwa kutumia sifa ya muhtasari.

... rangi ya mpaka: waridi; muhtasari: 1px kijivu kilichokatika; kipunguzo cha muhtasari: 3px; ) /*Kielelezo 3:*/ img (mpaka: 3px wa ndani wa waridi; muhtasari: 1px kijivu kilichokatika; kukabiliana na muhtasari: 1px; )
Mchele. 7. Mfano wa kupamba picha na sura ya nje

4. Sura ya gradient

Thamani ya picha ya mpaka inaweza kuwa sio picha tu, bali pia kujaza gradient.

Fremu yenye mwangaza

Moja ya rangi ni wazi. Kwa njia hii, unaweza kuweka mipaka kwa pande zote za kipengele mara moja au tofauti kwa kila upande. Unene wa mpaka unadhibitiwa na mali ya upana wa mpaka.

* (sanduku la ukubwa:sanduku la mpaka;).kunja ( urefu: 200px; pedi: 25px; mandharinyuma: #00E4F6; ) .gradient ( urefu: 150px; upana: 50%; ukingo: 0 otomatiki; mpaka: 10px thabiti uwazi ; picha ya mpaka: gradient-linear(kulia, uwazi 0%, #ADF2F7 100%); kipande cha picha-mpaka: 1; )

Bahasha ya posta

* (sanduku-ukubwa:sanduku la mpaka;).kunja ( urefu: 200px; pedi: 25px; ) .gradient ( urefu: 150px; upana: 50%; ukingo: 0 otomatiki; mpaka: 10px isiyo na uwazi thabiti; picha ya mpaka: 10 kurudia-linear-gradient(45deg, #A7CECC, #A7CECC 10px, transparent 10px, transparent 20px, #F8463F 20px, #F8463F 30px, transparent 30px, transparent 40px )

Utumizi mmoja wa kufurahisha wa mali ya kivuli-kisanduku cha CSS3 ni kuunda sura mbili kuzunguka kipengele. Sana athari ya kuvutia kwa muundo wa ukurasa, Lakini itafanya kazi katika matoleo mapya ya vivinjari ambavyo vinaauni box-shadow .

Walakini, kuna njia zingine kadhaa za kuunda athari hii. Aidha, matumizi ya wazi picha ya mandharinyuma ni mbali sana na bora.

KATIKA somo hili Njia tano zinawasilishwa kwa kuunda mpaka mara mbili karibu na kipengee. Aidha, moja tu yao inahitaji picha, na wengine wote hutumia kanuni safi CSS na msaada bora katika vivinjari.

Njia ya 1: mpaka na muhtasari

Njia hii inafanya kazi tu katika vivinjari vinavyounga mkono sifa ya muhtasari (yote isipokuwa IE6/7). Unaongeza mali zote mbili za mpaka na muhtasari kwenye kipengee.

Moja (mpaka: imara 6px #fff; muhtasari: imara 6px #888; )

Sababu ya njia hii kufanya kazi ni hiyo fremu ya muhtasari daima huonyeshwa nje ya mstatili. Suala la sifa ya muhtasari hutokea wakati wa kutumia vipengele vilivyoelea kwa sababu mpaka unaingiliana na vipengele vilivyo karibu.

Njia ya 2: Kipengele cha Pseudo

Njia hii inahitaji nafasi kabisa mfumo:

Mbili ( mpaka: imara 6px #fff; nafasi: jamaa; z-index: 1; ) .two:kabla ( maudhui: ""; onyesha: block; nafasi: kabisa; juu: -12px; kushoto: -12px; mpaka: imara 6px #888; upana: 312px; pedi-chini: 12px; urefu mdogo: 100%; z-index: 10; )

Vipengee muhimu ni kuweka sifa ya z-index (ili kipengele cha uwongo kipishe maudhui), uwekaji, na thamani ya min-height. Mali ya mwisho huhifadhi elasticity ya sura.

Njia ya 3: Kivuli

Wengi njia bora, kwa kuwa mstari mmoja tu wa nambari unahitajika na mipangilio ya mali ya kisanduku-kivuli.

Tatu ( box-shadow: 0 0 0 6px #fff, 0 0 0 12px #888; )

Vivuli viwili hutumiwa kufanya sura mbili kuonekana. Wametenganishwa na koma. Ukungu umewekwa kuwa 0. Kwa kuwa kivuli cha pili kinafunika cha kwanza, kina mara mbili upana mkubwa. Wakati muhimu- matumizi ya rangi ya opaque, ambayo hujenga mpaka wazi kati ya muafaka.

Kama mali ya muhtasari, kivuli-sanduku hakina athari vipengele vya jirani na inaweza kuingiliana nao. Kwa hiyo, ni muhimu kuweka shamba kwa ajili ya kuunda kuonekana kwa utungaji.

Kwa kawaida, usaidizi wa mali ya kivuli-kisanduku ni mdogo kwa vivinjari vipya zaidi.

Njia ya 4: Kipengele cha ziada cha div

KATIKA njia hii kutumika kipengele cha nje