Vendosja e një ngjyre sfondi dhe/ose një imazhi për një faqe ose një element individual është mjaft i thjeshtë. Gjëja kryesore është të dini se ku dhe si mund të bëhet kjo, si dhe të keni një kod ngjyrash dhe / ose imazh të sfondit. Është e mundur që ju të mësoni shumë nga ky artikull, por unë e krijova atë posaçërisht për fillestarët. Prandaj, gjithçka do të jetë sa më e shkurtër dhe e detajuar në të njëjtën kohë. Gjëja kryesore është që ju do të merrni jo vetëm një ide të përgjithshme dhe shembuj të gatshëm, por edhe një kuptim se si të krijoni një sfond në HTML.

Për të vendosur sfondin në HTML, përdorni DOCTYPE të ndërmjetme

Dhe do të filloj me faktin se HTML5 nuk ka asnjë mënyrë për të vendosur. U vendos që kjo veçori të sillet në CSS. Prandaj, nëse planifikoni të përdorni sa vijon dhe dëshironi të merrni një kod të vlefshëm (të saktë), duhet të ndaleni te lloji i dokumentit kalimtar. Për ta bërë këtë, faqja juaj e internetit duhet të fillojë me rreshtin e mëposhtëm:

Kalimtare//EN" "http://www.w3.org/TR/html4/loose.dtd">

Tani që e kemi mbuluar këtë, le të vazhdojmë të kuptojmë se si krijohet sfondi. Dhe gjëja e parë që duhet vënë re këtu është ndryshimi midis ngjyrë e sfondit dhe foto sfondi. Në fillim shkon ngjyrë e sfondit, e cila mbush të gjithë hapësirën e disponueshme të faqes ose elementit të saj. Mbi të mbivendoset një përsëritje foto sfondi. Vizualisht, kjo mund të përshkruhet si më poshtë:

Sfondi i një dokumenti HTML dhe elementet e tij

Gjëja e dytë që duhet të dini është ndryshimi midis trupi i dokumentit dhe element dokumenti. Trupi i dokumentit shënohet në kodin HTML të faqes së internetit me etiketën BODY, e cila përfshin të gjithë përmbajtjen e faqes së internetit. Natyrisht, sfondi i trupit të dokumentit nuk mund të jetë transparent. Nëse sfondi i trupit të dokumentit nuk është vendosur, përdoret vlera e paracaktuar e vendosur në cilësimet e shfletuesit.

Elementet e faqes janë brenda etiketës BODY. Vlen të përmendet se nuk është e mundur të vendosni ngjyrën dhe / ose imazhin e sfondit duke përdorur HTML për të gjithë elementët e dokumentit. Për shembull, një imazh i sfondit mund të specifikohet vetëm për tabela. Si parazgjedhje, ato zakonisht kanë një sfond transparent.

Atributi bgcolor për të krijuar ngjyrën e sfondit

Për të vendosur ngjyrë e sfondit dokumenti ose elementet e tij përdorin atributin bgcolor, për shembull:

Në këtë rast, ne po vendosim ngjyrën e sfondit për faqen në tërësi. Dhe këtu është një shembull se si të vendosni ngjyrën e sfondit për një tabelë, në etiketën TABLE:

Vlen të përmendet se ngjyra e sfondit në tabelë mund të specifikohet si për rreshtat në etiketën TR ashtu edhe për qelizat e tyre në etiketën TD.

Si të gjeni kodin e ngjyrave?

Ju ndoshta keni vënë re tashmë se ngjyra në HTML është vendosur nga një speciale kodi, për shembull: #ec008c . Për të gjetur kodin e ngjyrës që ju nevojitet, mund të përdorni një nga redaktuesit grafik. Për shembull, në Photoshop mund të përdorni " Mjet për pikat e syve» (Pietë) për të marrë ngjyrë nga një pikë në figurë. Pastaj, duhet të klikoni ngjyrën që rezulton në shiritin e veglave dhe në dritaren që hapet " zgjedhës ngjyrash» (Zgjidhni ngjyrën) kopjoni kodin e ngjyrës.

Unë tërheq vëmendjen tuaj për faktin se ky kod do të jetë pa shenjën e paundit (#) në fillim, kjo shenjë do të duhet të shtohet manualisht.

Ju gjithashtu mund të përdorni shërbime të shumta në internet, për shembull:

• etj.

Parimi i tyre i funksionimit është edhe më i thjeshtë - klikoni në ngjyrën e dëshiruar dhe merrni kodin e saj.

Atributi i sfondit për të krijuar një imazh të sfondit

Si dhe në rastin e ngjyrës së sfondit, dhe në rastin e foto sfondi, Ju duhet të përdorni një atribut të veçantë, përkatësisht sfond, për shembull:

Në këtë rast, ne vendosim imazhin e sfondit për faqen në tërësi. Vlen të përmendet se për shkak të kufizimit të madhësisë së imazhit, ajo do të përsëritet, për shembull:

Siç mund ta shihni, kur përsëriteni, kalimi midis fotove është i dukshëm. Prandaj, shpesh përdoren fotografi të veçanta, ku merret parasysh ky moment.

Dhe këtu është një shembull se si të vendosni një imazh të sfondit për një tabelë, në etiketën TABLE:

Vlen të përmendet se imazhi i sfondit mund të vendoset vetëm për tabelën në tërësi dhe / ose qelizën e saj individuale. Nuk do të funksionojë për një varg.

Rruga absolute dhe relative drejt imazhit të sfondit

Vëmendje e veçantë duhet t'i kushtohet adresa e imazhit të sfondit. Në këtë rast, përdoret një rrugë relative për imazhin, d.m.th. adresa është në lidhje me vendndodhjen e skedarit të imazhit në skedarin e faqes së internetit. Ky opsion nuk mund të quhet veçanërisht i suksesshëm. Është më mirë të përdorni rrugën absolute për imazhin, d.m.th. URL-ja e tij e plotë, për shembull:

Në këtë rast, nuk do të keni asnjë problem shoqërues. Ju mund të lexoni më shumë për këtë.

Duke përmbledhur

Përdorimi i atributeve bgcolor dhe sfondit është i vjetëruar, kështu që do t'ju duhet të përdorni një DOCTYPE kalimtare për ta bërë kodin tuaj HTML të vlefshëm. Për të vendosur ngjyrën e sfondit në HTML, ai përdor kode speciale që mund t'i gjeni në një redaktues grafik ose duke përdorur shërbime të veçanta në internet. Imazhi i sfondit kopjohet brenda zonës së caktuar për të dhe shtrihet në krye të ngjyrës së sfondit. Për të specifikuar një imazh të sfondit, është më mirë të përdorni URL-në e tij të plotë. Kjo është e gjitha për mua. Faleminderit per vemendjen. Paç fat!

Pothuajse çdo faqe e njohur ka një pamje të këndshme. Në dizajnimin e faqeve të internetit, një pjesë e rëndësishme është sfondi, i cili quhet ndryshe sfondi, të cilin secili prej nesh mund ta krijojë ose ta ndryshojë. Në këtë artikull do t'ju tregoj se si të vendosni një sfond në sit.

Krijimi i një sfondi të ri për faqet e internetit

Për të përfunduar detyrën, mund të përdorni një nga 4 metodat:

• 1. Sfondi me një ngjyrë
• 2. Sfondi me teksturë
• 3. Sfondi me gradient
• 4. Sfondi me imazh të madh

Krijo një sfond me një ngjyrë

Për të krijuar ose ndryshuar sfondin e sitit, i cili përbëhet nga një ngjyrë, duhet të shkoni te skedari stil.css, në të cilin gjendet vlera - trupi (është përgjegjës për trupin kryesor të faqes). Tani duhet të shkruani funksionin e ngjyrës së sfondit nëse nuk ishte aty dhe të specifikoni kodin e ngjyrës. Në rastin kur duhet të krijoni një sfond të bardhë për sitin, do të duhet të shkruani kodin e mëposhtëm:

ngjyra e sfondit: #83C5E9 ; (sfondi blu, si në shembull)

Ju mund të gjeni një listë të plotë të ngjyrave në faqen e internetit - (STM). Për të ndryshuar ngjyrën, thjesht ndryshoni vlerën pas dy pikave dhe shijoni punën tuaj.

Krijimi i një sfondi me një strukturë

Kjo metodë është veçanërisht e popullarizuar kohët e fundit, pasi ju lejon të krijoni një sfond të bukur për sitin. Teksturat mund të jenë të thjeshta por shumë të bukura, kjo është arsyeja pse ato përdoren shpesh. Për të lidhur çdo teksturë, ajo duhet të ngarkohet në dosjen e imazhit në hostin ku është instaluar faqja juaj. Pas kësaj, duhet të shkruani kodin e mëposhtëm:

ngjyra e sfondit: #537759;

background-image: url(images/pattern.png);

Në këtë kod, ekziston një parametër i njohur për ruajtjen e ngjyrës (është jeshile) dhe një element që është përgjegjës për lidhjen e teksturës së gjelbër.

Bërja e sfondit me një gradient

Çdo imazh që është i lidhur duke përdorur funksionet css mund të përsëritet si horizontalisht ashtu edhe vertikalisht (përgjatë boshteve X dhe Y). Kjo veçori na lejon të krijojmë çdo sfond të thjeshtë për sitin me duart tona. Për ta bërë këtë, duhet të krijoni një gradient të gjerë 1 megapiksel (shih foton më poshtë), ta ruani atë si imazh dhe ta ngarkoni në host. Pas kësaj, mund të shkruani kodin e nevojshëm, përkatësisht:

ngjyra e sfondit: #83C5E9;

sfond-imazh: url(images/gradient.jpg);

sfond-përsërit: përsërit-x;

Në këtë grup, sipas prioritetit, ekziston një funksion përgjegjës për ngjyrën e sfondit që përdorim për risigurim. Pas kësaj, një parametër që është përgjegjës për lidhjen e gradientit, dhe së fundi, një funksion që është përgjegjës për përsëritjen e gradientit përgjatë boshtit X.

Përdorimi i një imazhi të madh për sfondin e faqes

Kjo metodë është e dyta më e popullarizuara, pasi ju lejon të përdorni fotografi të ndryshme për të krijuar një sfond. Për të zbatuar këtë metodë, ju duhet vetëm të ngarkoni një imazh të madh në dosjen e imazheve të faqes dhe të shkruani kodin e mëposhtëm:

ngjyra e sfondit: #000000;

sfond-imazh: url(imazhe/titulli i imazhit.jpg);

sfond-pozicioni: në qendër të sipërme;

sfond-përsërit: pa përsëritje;

Nëse gjithçka është e qartë me dy parametrat e parë, atëherë duhet të theksohen dy të fundit. Funksioni i tretë ju lejon të rregulloni imazhin në qendër të faqes, dhe parametri i fundit bllokon përsëritjen e tij në të gjithë strukturën e faqes.

Ndryshimi i sfondit në faqet e internetit të ucoz

Këto metoda të krijimit të një sfondi për një faqe mund të përdoren në sisteme të ndryshme të menaxhimit të përmbajtjes, por jo në sajte - ucoz. Për të ndryshuar sfondin për faqen ucoz, duhet të shkoni te paneli i kontrollit të faqes, shkoni te "Menaxhimi i Dizajnit", dhe më pas në "Redaktimi i modeleve".

Tani ju duhet të hapni Style Sheet (CSS), të gjeni linjën trupi dhe parametri sfond. Pas kësaj, duhet të kopjoni lidhjen, ta ngjisni në shfletuesin e Internetit dhe do të keni akses në foton që ishte sfondi.

Për të përdorur sfondin e ri, ju vetëm duhet ta ngarkoni atë në menaxherin e skedarëve. Në të njëjtën kohë, sigurohuni që emri i imazhit të ri për sfondin të jetë i njëjtë si përpara ndryshimit. Ruani punën tuaj dhe shkoni në sit për të parë punën e kryer.

Ndrysho sfondin e sajtit në HTML

Nëse dëshironi të krijoni sfondin në faqen html për shkak të imazhit, atëherë thjesht futni rreshtin në kod:

Dhe nëse doni të bëni sfondin e faqes duke përdorur ngjyrën, atëherë linja duhet të duket si kjo:

Kjo përfundon historinë tonë. Tani ju e dini se si të krijoni një sfond për një faqe interneti. Projekte të suksesshme!

Çdo dhomë do të duket shumë më mirë me një qilim të shtrenjtë persian në dysheme. Pra, çfarë nuk shkon me faqen tuaj? Ndoshta ka ardhur koha për të “mbuluar” dyshemenë e saj me një tapet të shtrenjtë elegant të punuar me dorë. Le të hedhim një vështrim më të afërt se si të krijojmë një sfond për sitin:

Sfondi për sitin

Ndodh që dizajni i vjetër i faqes është tashmë i mërzitshëm. Dhe unë dua diçka të re dhe të shijshme. Dhe dizajni i ri do të jetë i tillë nëse e gatuani vetë.

Por ndryshimi i të gjithë modelit të burimit është një gjë e pafalshme. Dhe jo të gjithë i kanë "mprehur" duart siç duhet për këtë biznes. Prandaj, është më e lehtë të rifreskoni një shabllon të vjetër duke ndryshuar ngjyrën e sfondit ose imazhin e sfondit të burimit.

Ka disa mënyra për të ndryshuar sfondin në një faqe interneti. Për këtë përdoren mundësitë e CSS ose html. Por shumë nga vetitë e sfondit kanë të njëjtin emër dhe përdorim në këto teknologji në internet.

Bazat e sfondit HTML

Disa elementë mund të përdoren si sfond:

• Ngjyrë;
• imazhi i sfondit;
• Imazhi i teksturës.

Le të shohim përdorimin e secilit prej tyre në më shumë detaje.

Për të vendosur ngjyrën e sfondit për një sajt, përdorni veçorinë e ngjyrës së sfondit të atributit stil. Kjo do të thotë, për të vendosur ngjyrën kryesore për një faqe në internet, duhet ta regjistroni atë brenda etiketës . Për shembull:

Sfondi i faqes së internetit #55D52B

Përveç kodit heksadecimal të ngjyrave, mbështetet një fjalë kyçe ose një vlerë RGB. Shembuj:

Sfondi i faqes së internetit rgb (23,113,44)

Sfondi i gjelbër i faqes në internet

Vendosja e ngjyrës së sfondit duke përdorur fjalë kyçe ka një sërë kufizimesh në krahasim me dy metodat e tjera.

Në html, mbështeten vetëm 16 fjalë kyçe me ngjyra. Këtu janë disa prej tyre: e bardhë, e kuqe, blu, e zezë, e verdhë dhe të tjerët.

Prandaj, për të vendosur sfondin për një sajt html, është më mirë të përdorni hex ose RGB.

Përveç përzgjedhjes së ngjyrave, janë të disponueshme opsione të tjera personalizimi. Vendosja e vetive të ngjyrës së sfondit në transparente e bën sfondin e faqes transparente. Kjo vlerë i është caktuar kësaj vetie si parazgjedhje.

Tani le të shohim mundësitë e gjuhës së hipertekstit për vendosjen e imazhit të sfondit për sitin. Kjo mund të bëhet me veçorinë background-image.

Siç mund ta shihni nga kodi, imazhi lidhet përmes shtegut të url-së të dhënë në kllapa. Por jo të gjitha fotografitë rezultojnë të jenë aq të mëdha sa të mbushin të gjithë zonën e ekranit me madhësinë e tyre. Le të shohim se si do të shfaqet imazhi më i vogël.

Le të supozojmë se po zhvillojmë një faqe për poezinë dhe duam të përdorim një imazh të Pegasus si sfond. Kali me krahë do të personifikojë lirinë e mendimit krijues të poetit!

Ne duam që imazhi të shfaqet një herë në mes të ekranit. Por, për fat të keq, shfletuesi nuk i kupton dëshirat tona të larta. Dhe shfaq një imazh më të vogël për sfondin e sajtit aq herë sa mund të përshtatet zona e ekranit:

Ndoshta, katër kuaj të buzëqeshur me krahë do të jenë shumë për poetët për frymëzim. Prandaj, ne ndalojmë klonimin e Pegasusit tonë. Këtë e bëjmë me vetinë e përsëritjes së sfondit. Vlerat e mundshme:

• përsëritje-x - përsërit imazhin e sfondit horizontalisht;
• përsëritje-y - vertikalisht;
• përsëris - në të dy akset;
• pa përsëritje - përsëritja është e ndaluar.

Ndër këto opsione, ne jemi të interesuar për të fundit. Para se të ndryshojmë sfondin e faqes, ne e përdorim atë në kodin tonë:

Por, sigurisht, është më mirë nëse fletushka jonë ndodhet në mes të ekranit. Vetia background-position është vetëm për pozicionimin e imazhit të sfondit në faqe. Ju mund të vendosni koordinatat e vendndodhjes në disa mënyra:

• fjale kyçe ( lart, poshtë, qendër, majtas, djathtas);
• Përqindja - numërimi mbrapsht fillon nga këndi i sipërm i majtë;
• Në njësi matëse (pikselë).

Le të përdorim opsionin më të thjeshtë për përqendrim:

Ndodh që ju duhet të rregulloni pozicionin e figurës kur lëvizni. Prandaj, përpara se të bëni një imazh në sfondin e sajtit, përdorni veçorinë speciale të sfondit-bashkëngjitje . Vlerat që pranon janë:

• rrotulloni;


• fikse.

Na duhet vlera e fundit. Tani kodi ynë i shembullit do të duket si ky:

Sfondi i teksturës së faqes në internet

Në shembullin e parë, ne përdorëm një peizazh të madh dhe të bukur shkretëtirë për sfond. Por për një bukuri të tillë ju duhet të paguani plotësisht. Pesha e një imazhi me cilësi të lartë mund të arrijë disa megabajt.

Një vëllim i tillë nuk ndikon në shpejtësinë e ngarkimit të faqes nga shfletuesi me një lidhje interneti me shpejtësi të lartë. Por çfarë ndodh me internetin celular, kur përdorni të cilin do të duhet shumë kohë për të shkarkuar disa "metra"?

Të gjitha këto probleme zgjidhen me ndihmën e një sfondi me teksturë. Ai përdor një imazh të vogël si model teksture. Edhe nëse përsëritet shumë herë, vizatimi ngarkohet vetëm një herë.

Për të krijuar një sfond të errët për sitin, shkoni te Photoshop, krijoni një imazh në formën e një shiriti 1200 piksele të gjatë dhe 15 piksele të gjerë. Pastaj aplikojmë një gradient të thjeshtë bardh e zi dhe lidhim strukturën që rezulton me faqen e faqes:

Mjetet CSS

Të gjitha vetitë e përshkruara më sipër vlejnë gjithashtu për fletët e stilit Cascading. Le të krijojmë një sfond uebsajti css duke rishkruar një nga shembujt tanë të mëparshëm.

Shumë stilistë rishtar të paraqitjes, të cilët thjesht po gërmojnë në thelbin e krijimit të faqeve, shpesh pyesin veten se si të bëjnë një imazh të sfondit në html. Dhe nëse disa njerëz mund ta kuptojnë këtë detyrë, atëherë ka ende probleme gjatë shtrirjes së imazhit në gjerësinë e plotë të monitorit. Në të njëjtën kohë, unë do të doja që faqja të shfaqet në të njëjtën mënyrë në të gjithë shfletuesit, kështu që duhet të plotësohet kërkesa për pajtueshmërinë e ndër-shfletuesve. Ju mund ta vendosni sfondin në dy mënyra: duke përdorur dhe stilimin e CSS. Secili zgjedh opsionin më të mirë për veten e tij. Sigurisht, stili CSS është shumë më i përshtatshëm, sepse kodi i tij ruhet në një skedar të veçantë dhe nuk merr kolona shtesë në etiketat kryesore të faqes, por së pari, le të shohim një metodë të thjeshtë për vendosjen e një imazhi në sfondin e faqes.

Etiketat bazë HTML për krijimin e një sfondi

Pra, le të kalojmë te çështja, sfondi në html është me ekran të plotë. Në mënyrë që faqja të duket e bukur, duhet të kuptoni një detaj mjaft të rëndësishëm: mjafton vetëm të bëni një sfond gradient ose ta pikturoni atë me një ngjyrë të fortë, por nëse keni nevojë të futni një foto në sfond, nuk do shtrihet në të gjithë gjerësinë e monitorit. Fillimisht, duhet të zgjidhni një imazh ose të bëni vetë një dizajn me një shtrirje të tillë në të cilën do të shfaqni faqen e faqes. Vetëm pasi imazhi i sfondit të jetë gati, ne e transferojmë atë në një dosje të quajtur "Images". Në të do të ruajmë të gjitha fotografitë, animacionet dhe skedarët e tjerë grafikë të përdorur. Kjo dosje duhet të jetë në direktoriumin rrënjë me të gjithë skedarët tuaj html. Tani mund të kalojmë te kodi. Ka disa opsione për të shkruar kodin që do të ndryshojë sfondin në një imazh.

1. Shkruani etiketën e atributeve.
2. Përmes stilit CSS në kodin HTML.
3. Shkruani stilin CSS në një skedar të veçantë.

Varet nga ju që të vendosni se si ta bëni sfondin një fotografi në HTML, por unë do të doja të them disa fjalë se si do të ishte më optimale. Metoda e parë, duke shkruar përmes një atributi tag, është zhvlerësuar prej kohësh. Opsioni i dytë përdoret në raste shumë të rralla, vetëm sepse ka shumë të njëjtin kod. Dhe opsioni i tretë është më i zakonshmi dhe efektiv. Këtu janë shembuj të etiketave HTML:

1. Mënyra e parë për të shkruar është përmes atributit tag (trupi) në skedarin index.htm. Shkruhet kështu: (sfondi i trupit= "Emri_dosjes/Emri_imazhi.extension")(/body). Kjo do të thotë, nëse kemi një fotografi me emrin "Picture" dhe shtesën JPG, dhe e kemi emërtuar dosjen si "Images", atëherë hyrja e kodit HTML do të duket kështu: (body background="Images/Picture.jpg" )… (/trupi) .
2. Metoda e dytë e shkrimit ndikon në stilin CSS, por shkruhet në të njëjtin skedar të quajtur index.htm. (body style="background: url("../Images/Picture.jpg")").
3. Dhe metoda e tretë e regjistrimit bëhet në dy skedarë. Në një dokument të quajtur index.htm, rreshti i mëposhtëm është shkruar në: (head)(link rel="stylesheet" type="text/css" href="Path_to CSS_file")(/head). Dhe në skedarin e stilit të quajtur style.css ne tashmë shkruajmë: body (background: url (Images/Picture.jpg")).

Si ta bëjmë sfondin një fotografi në HTML, ne kemi çmontuar. Tani duhet të kuptoni se si ta shtrini imazhin në të gjithë ekranin.

Mënyrat për të shtrirë imazhin e sfondit në gjerësinë e dritares

Le të paraqesim ekranin tonë si përqindje. Rezulton se e gjithë gjerësia dhe gjatësia e ekranit do të jetë 100% x 100%. Ne duhet ta shtrijmë imazhin në këtë gjerësi. Le të shtojmë një rresht në hyrjen e imazhit në skedarin style.css, i cili do ta shtrijë imazhin në gjerësinë dhe gjatësinë e plotë të monitorit. Si shkruhet kjo në stilin CSS? Gjithçka është e thjeshtë!

sfond: url (Images/Picture.jpg")

madhësia e sfondit: 100% /* kjo hyrje do të funksionojë për shumicën e shfletuesve modern */

Pra, ne kuptuam se si të bëjmë një imazh në sfond në html në ekran të plotë. Ekziston një mënyrë tjetër për të shkruar në skedarin index.htm. Edhe pse kjo metodë është e vjetëruar, është e nevojshme që fillestarët ta dinë dhe ta kuptojnë atë. Në etiketën (head)(style) div ( background-size: cover; ) (/style) (/head), kjo hyrje do të thotë që ne zgjedhim një bllok të veçantë për sfondin, i cili do të pozicionohet në të gjithë gjerësinë e dritare. Ne shikuam 2 mënyra për ta bërë sfondin e faqes një imazh html në mënyrë që imazhi të shtrihet në gjerësinë e plotë të ekranit në cilindo nga shfletuesit modernë.

Si të bëni një sfond fiks

Nëse vendosni të përdorni një imazh si sfond të një burimi të ardhshëm në internet, atëherë thjesht duhet të zbuloni se si ta bëni atë të palëvizshëm në mënyrë që të mos shtrihet në gjatësi dhe të prishë pamjen estetike. Mjafton vetëm të përshkruani këtë shtesë të vogël me ndihmë. Duhet të shtoni një frazë në skedarin style.css pas sfondit: url(Images/Picture.jpg") fikse; ose në vend të kësaj të shtoni një rresht të veçantë pas pikëpresjes - pozicioni: fiks. Kështu, imazhi juaj i sfondit do të rregullohet. Gjatë duke lëvizur nëpër përmbajtjen e faqes, do të shihni se linjat e tekstit lëvizin, por sfondi mbetet në vend. Kështu që ju mësuat se si ta bëni sfondin një imazh në html, në disa mënyra.

Puna me një tabelë në HTML

Shumë zhvillues të papërvojë të uebit, kur përballen me tabela dhe blloqe, shpesh nuk e kuptojnë se si ta bëjnë një imazh sfondin e një tabele në html. Si çdo gjë dhe stili CSS, kjo gjuhë programimi në internet është mjaft e thjeshtë. Dhe zgjidhja për këtë problem do të jetë shkrimi i disa rreshtave të kodit. Duhet ta dini tashmë se shkrimi i rreshtave dhe kolonave të tabelës shënohet me etiketat (tr) dhe (td), përkatësisht. Për ta bërë sfondin e tabelës të duket si një imazh, shtoni një frazë të thjeshtë në etiketën (tabela), (tr) ose (td) me një lidhje me imazhin: sfond = URL e imazhit. Për qartësi, ne japim disa shembuj.

Tabelat me një fotografi në vend të një sfondi: shembuj HTML

Le të vizatojmë një tabelë 2x3 dhe ta bëjmë atë sfondin e imazhit të ruajtur në dosjen "Images": (sfondi i tabelës = "Images/Picture.jpg") (tr) (td)1(/td) (td)2(/ td) (td) 3)(/td)(/tr) (tr)(td)4(/td) (td)5(/td) (td)6(/td)(/tr) (/tabela) . Kështu që tabela jonë do të pikturohet në sfondin e figurës.

Tani le të vizatojmë të njëjtën tabelë me dimensione 2x3, por futim figurën në kolonat me numër 1, 4, 5 dhe 6. (tabela)(tr)(td sfond = “Images/Picture.jpg”)1(/td) (td )2 (/td) (td)3(/td)(/tr) (tr)(td sfond = "Images/Picture.jpg")4 (/td) (td sfond = "Images/Picture.jpg") 5( /td) (sfondi td = “Imazhe/Picture.jpg”)6(/td) (/tr) (/tabela). Pas shikimit, shohim që sfondi shfaqet vetëm në ato qeliza në të cilat jemi regjistruar, dhe jo në të gjithë tabelën.

Faqja e ndër-shfletuesve

Ekziston gjithashtu një gjë e tillë si burimi i uebit i ndër-shfletuesit. Kjo do të thotë që faqet e faqes do të shfaqen në mënyrë të barabartë në lloje dhe versione të ndryshme të shfletuesve. Në këtë rast, ju duhet të personalizoni kodin HTML dhe stilin CSS për shfletuesit e nevojshëm. Për më tepër, në epokën moderne të zhvillimit të smartfonëve, shumë zhvillues të uebit po përpiqen të krijojnë faqe që janë përshtatur si për versionet celulare ashtu edhe për një pamje kompjuterike.

Me ndihmë Ngjyra dhe sfondi CSS mund të vendosni pothuajse çdo element të faqes në internet, të kontrolloni lirshëm imazhin e sfondit, përsëritjen e tij horizontalisht dhe vertikalisht. Përveç kësaj, duke përdorur CSS, mund të vendosni imazhin e sfondit kudo në ekran duke përdorur pozicionimin. Të mos vrapojmë akoma larg, të ecim me radhë.

Vetia COLOR

Kjo veti përcakton ngjyrën e elementit, më konkretisht ngjyrën e tekstit brenda elementit. Vlera jepet në një nga format e mundshme:

• emri i ngjyrës (GJELBËR, ZI, KUQ...);
• kodi heksadecimal i ngjyrave (008000, 000000, FF0000...);
• kodi dhjetor i ngjyrave në RGB (ngjyra:rgb (40, 175, 250));

Vetia COLOR trashëgohet dhe nëse një vlerë nuk vendoset për asnjë element, vlera do të trashëgohet nga paraardhësi i saj. Por mund të ndodhë që të mos jetë caktuar as për paraardhësin - atëherë fleta e stilit të shfletuesit do të aplikohet duke përdorur vlerat e paracaktuara. Ngjyra e elementit në këtë rast ka të ngjarë të jetë e zezë.

Siç e përmenda tashmë, ju mund të vendosni një ngjyrë për pothuajse të gjithë elementët, ajo mund të jetë (H1... H6), (fortë, em) dhe madje të plota (p) dhe madje edhe kufijtë e tabelës, por më shumë për këtë më vonë.

Këtu është një shembull i vendosjes së ngjyrës së tekstit duke përdorur CSS:

h1 (ngjyra: Blu)

Në këtë shembull, të gjithë titujt e nivelit të parë të faqes në internet do të jenë blu:

e fortë (ngjyra: e kuqe)

Në këtë rast, gjithçka që është në tekstin e faqes do të theksohet me etiketën të fortë, do të bëhet e kuqe.

Mund të shkruhet kështu:

h1, p, e fortë (ngjyra: jeshile)

Më pas, titujt e nivelit të parë, të gjithë paragrafët dhe gjithçka që theksohet me një etiketë do të jenë jeshile.

Kur bëhet e nevojshme të theksohen titujt me ngjyra të ndryshme, përdoren përzgjedhësit e klasave. Një atribut përdoret për të përcaktuar një klasë në HTML klasës A që mund të aplikohet për çdo element. Në kodin HTML, do t'ju duhet të shkruani:

class="blu"> Ngjyra e titujve të kësaj klase do të jetë blu

Në fletën e stilit CSS, në këtë rast, ne shkruajmë një rregull ku elementi H1 do të jetë zgjedhësi, dhe përmes pikës ( . ) emri i klasës:

h1. Blu (ngjyra: blu)

Në dokumentet HTML përdoren edhe përzgjedhësit sipas identifikuesit, ato përcaktohen nga atributi id. Një identifikues është një atribut më domethënës ose prioritar sesa një klasë. Dhe nëse si klasa ashtu edhe identifikuesi janë të specifikuara në kodin HTML për elementin, atëherë do të aplikohet stili i identifikuesit. Identifikuesi shënohet me një shenjë paund ( # ). Për të përdorur identifikuesin në kodin HTML, do t'ju duhet të shkruani:

id="blu"> Ngjyra e titujve të këtij identifikuesi do të jetë blu

Në fletën e stilit nga ana tjetër:

h1#Blu (ngjyra: blu)

Sfondi-COLOR pronë

Kjo veçori ju lejon të vendosni ngjyrën e sfondit për faqen në tërësi, paragrafin, lidhjen, në përgjithësi për çdo element HTML. Për ta bërë këtë, ngjyra ose vlera specifikohet në vlerën e pronës. transparente(transparente). Kodi për sfondin e faqes është shkruar:

trupi (ngjyra e sfondit: aqua)

Në këtë rast, sfondi i faqes do të jetë bruz, dhe për t'i dhënë sfond titullit, shkruajmë:

h1 (ngjyra e sfondit: e verdhë)

Marrim sfondin e verdhë të titujve të nivelit të parë.

Ngjyra dhe sfondi në CSS

Vetia Sfondi-Përsëriteni

Kjo veti përdoret kur vendoset për të përcaktuar nëse do të përsëritet horizontalisht dhe vertikalisht. Vlerat e vlefshme:

• përsëritni- imazhi përsëritet vertikalisht dhe horizontalisht;
• përsëris x- imazhi përsëritet vetëm horizontalisht;
• përsërit-y- imazhi përsëritet vetëm vertikalisht;
• pa përsëritje- imazhi nuk përsëritet.

Kodi është shkruar kështu:

p(
imazhi i sfondit: url( adresa e skedarit të imazhit) ;
sfond-përsërit : përsërit-x
}

Teksti i këtij paragrafi do të jetë në krye të imazhit të sfondit, i cili do të pozicionohet horizontalisht.

Sfondi-Bashnjës pronë

Kjo veçori përdoret për t'i treguar shfletuesit nëse imazhi i sfondit të faqes duhet të lëvizë me tekst ( rrotulloni) ose qëndroni ende ( fikse).

trupi (
imazhi i sfondit: url( adresa e skedarit të imazhit) ;
background-repeat : repeat-x ;
sfond-bashkëngjitje: fikse
}

Në këtë rast, imazhi i sfondit do të mbetet i fiksuar.

Sfondi-POZICIONI Prona

Kjo veti përdoret për të pozicionuar imazhin në lidhje me . Vlerat vendosen në përqindje (%), në njësi të gjatësisë (cm, px), me fjalë kyçe:

• Vertikalisht:
• krye- pjesa e sipërme e figurës është e lidhur me skajin e sipërm të faqes ose bllokut;
• qendër
• fund- pjesa e poshtme e imazhit është në linjë me skajin e poshtëm të faqes ose bllokut.
• Horizontalisht:
• majtas- skaji i majtë i figurës është në linjë me skajin e majtë të faqes ose bllokut;
• qendër- qendra e imazhit është rreshtuar në qendër të faqes ose bllokut;
• drejtë- skaji i djathtë i figurës është në linjë me skajin e djathtë të faqes ose bllokut.

Ne shkruajmë një shembull kodi në përqindje, njësi gjatësie dhe fjalë kyçe:

trupi (
imazhi i sfondit: url( adresa e skedarit të imazhit) ;
pozicioni i sfondit: 0% 0%
}

Trupi (
imazhi i sfondit: url( adresa e skedarit të imazhit) ;
Pozicioni i sfondit: 10px 25cm
}

Trupi (
imazhi i sfondit: url( adresa e skedarit të imazhit) ;
pozicioni i sfondit: qendra e sipërme
}