Një nga detyrat më të zakonshme kur redaktoni tekstin dhe blloqet në HTML dhe CSS. Jo vetëm një projektues faqosjeje, por edhe çdo menaxher i përmbajtjes që redakton përmbajtjen e një faqe interneti mund të hasë në këtë problem. Për të zgjidhur këtë problem, përdoren vetëm dy veti: ngjyra - ngjyra e tekstit, sfondi - puna me sfondin, ngjyrën ose imazhin.

Puna me Test Color në CSS

ngjyrëështë një veti që nevojitet për të specifikuar një ngjyrë vetëm për tekstin. Ngjyra mund të specifikohet ose në formatin e kodit HTML HEX ose në formatin RGB (Red Green Blue). Kodet e ngjyrave mund të zgjidhen ose në programet grafike si Photoshop ose në internet

Sintaksa e vetive:

Ngjyra: Ngjyra;
Tani ne aplikojmë pronën:

përmbajtja (
ngjyra: #444; // Teksti gri i errët në një element me klasën e përmbajtjes
}
Pse pikërisht ky shembull: specifikimi i ngjyrës për lidhjen dhe për tekstin janë gjëra të ndryshme. Mbani mend. Epo, unë personalisht rekomandoj të bëni tekstin dhe lidhjet me ngjyra të ndryshme.

Puna me prejardhje në CSS

sfondështë një veti që ju lejon të punoni me sfondin e një imazhi: vendosni ngjyrën e sfondit, vendosni një imazh si sfond (formatet jpg, gif, png), ndryshoni pozicionin e sfondit dhe parametrat e tjerë që përshkruhen më poshtë.

ngjyrë e sfondit- Kjo veti përdoret vetëm për të vendosur ngjyrën e sfondit. Pranon vetëm kodin e ngjyrave. Ngjyra mund të specifikohet në formatin RGB (Red Green Blue) ose në formatin e kodit HTML HEX.

Blloko (
ngjyra e sfondit: #fbb5b5; // vendosni ngjyrën e sfondit në ngjyrën e kuqe pastel
}
Shembujt më të mirë të ngjyrave për sfondin (modelet e dizajnit modern: Dizajni i sheshtë, etj.):

sfond-imazhështë një veti që përdoret për të vendosur disa imazhe si sfond në një element. Për të specifikuar një imazh, parametri url dhe shtegu i imazhit në lidhje me skedarin me stile css janë të mjaftueshëm.

#mbrapa (
background-image: url("images/fon.jpg");
}

sfond-përsërit- mund të përdoret vetëm nëse vetia e imazhit të sfondit është specifikuar më sipër. Kjo veti vendos rregullin e përsëritjes së imazhit. Si parazgjedhje, imazhi përsëritet përgjatë boshtit X dhe përgjatë boshtit Y deri në kufijtë e elementit (nëse sfondi është më i vogël se elementi). Në pronë, mund të specifikoni një cilësim në mënyrë që imazhi të përsëritet vetëm përgjatë boshtit X - përsëritje-x (horizontalisht), vetëm përgjatë Y - përsëritje-y (vertikale) ose të mos përsëritet fare - pa përsëritje.

#përmbajtje (

sfond-përsërit: përsërit-x; /* imazhi do të përsëritet vetëm horizontalisht deri në kufijtë e bllokut */
}

sfond-bashkëngjitje- rregullon sfondin në një pozicion, domethënë, imazhi do të lëvizë së bashku me përmbajtjen e bllokut ose do të mbetet i fiksuar. Vlera e paracaktuar është lëvizja, e cila nuk rregullon pozicionin e sfondit.

#përmbajtje (
background-image: url("background.jpg");
sfond-përsërit: përsërit-x; /* imazhi do të përsëritet vetëm horizontalisht */
sfond-bashkëngjitje: fikse; /* ngjitur në vendndodhje */
}

sfond-pozicion- një veti që specifikon vendndodhjen e sfondit në element. Përcaktohen dy vlera: pozicioni horizontal dhe më pas pozicioni vertikal. Përcaktohet ose në mënyrë dixhitale (pikselë dhe përqindje) ose alfabetikisht (majtas, qendër, djathtas, lart, poshtë). Kjo veçori nevojitet kur imazhi nuk përsëritet (pa përsëritje), dhe sfondi duhet të pozicionohet në element në një mënyrë të caktuar.

#blloko (
pozicioni i sfondit: qendra e majtë; /* horizontalisht - në anën e majtë, vertikalisht - në mes */
}
Unë mendoj se gjithçka është e qartë në koment)
Një shembull i shkrimit të një vlere dixhitale:

#çelësat (
pozicioni i sfondit: 109px 57px; /* margjina e majtë 109 pikselë, sipër 57 px */
}
Edhe këtu, mendoj se gjithçka duhet të jetë e qartë.
Shumë prona? Le të shohim se si të shkruajmë shkurtuar.

Përfundimisht. Shkurtima për sfond në CSS

Ju mund të përdorni një shënim të shkurtuar, ku të gjithë parametrat do të tregohen në rresht:

Sfondi: pozicioni i bashkëngjitjes së përsëritjes së imazhit me ngjyra;

Rreth avantazheve. Ky lloj regjistrimi redukton kohën e ngarkimit të faqes dhe paraqitjen e shfletuesit. Kini keqardhje për vizitorët tuaj, është më mirë të shkruani në këtë mënyrë, përveç nëse, sigurisht, keni nevojë për disa prona.
Po, ju mund të kapërceni çdo pronë nëse nuk ka nevojë për të! Thjesht vazhdoni të specifikoni vlerat më tej në listë.

Blloko (
sfond: #f1f1f1 url("background.jpg") përsëritje-x scroll 100px 125px;
}

Një shembull se si funksionojnë sfondet në CSS

Shembull kod. Ju mund të shihni rezultatin e punës dhe kodin burimor në lidhjen më poshtë.

Në rastin e një imazhi të sfondit, është më mirë të specifikoni dimensionet e bllokut, përndryshe do të përmasohet sipas përmbajtjes.

Mendoj se nuk ka asnjë vend ku prona të mos përdoret Sfondi CSS. Do të duket se çfarë mund të jetë më e thjeshtë se kjo pronë? Por jo, aftësitë e tij janë shumë më të gjera se caktimi i zakonshëm i një fotografie ose ngjyre si sfond i faqes. Disa gjëra do të jenë të njohura, ndërsa të tjera ndoshta do të jenë të reja për shumëkënd. Në çdo rast, do të jetë e dobishme të dini plotësisht se si funksionon sfondi.

CSS3 solli shumë gjëra të reja në pronë, të tilla si transparenca dhe caktimi i disa imazheve si sfond, por ne do të flasim për këtë më poshtë, por së pari do të shohim bazat e pronës sfond.

ngjyrë e sfondit

Jam më se i sigurt që ju e keni caktuar tashmë ngjyrën e sfondit më shumë se një herë. Kjo mund të bëhet duke përdorur disa lloje shënimesh: të rregullt (përdoret emri i ngjyrës), shënim heksadecimal ose RGB. Çdo lloj është ekuivalent, përdorni cilindo që ju pëlqen më shumë. Mundohem të përdor opsionin më të shkurtër dhe për perceptim më të lehtë, skedari i stilit që rezulton është pak më i vogël në madhësi.

P (ngjyra e sfondit: e kuqe;) p (ngjyra e sfondit: #f00;) p (ngjyra e sfondit: #ff0000;) p (ngjyra e sfondit: rgb(255, 0, 0;))

CSS3 mbështet transparencën, kështu që ne mund ta shtojmë atë në ngjyrën tonë, për shembull si kjo:

P (ngjyra e sfondit: rgba (255, 0, 0, 0.5);)

Shifra e fundit e vendosi transparencën në 50%. Mund të vendosni vlerën e transparencës nga 0 (sfondi plotësisht transparent) në 1 (plotësisht i errët).

sfond-imazh

Kjo veçori përdoret gjithashtu shumë shpesh; ju lejon të caktoni një imazh në sfond. CSS3 ka shtuar aftësinë për të caktuar imazhe të shumta në sfond, secila duke krijuar shtresën e vet, kështu që secila pasuese mbivendoset me atë të mëparshme. Pse kjo mund të jetë e dobishme? Gjithçka është mjaft e thjeshtë - le të themi se duhet të vidhosni pjesë të vogla në çdo cep të sitit. Duke pasur parasysh një paraqitje pak a shumë gome, përdorimi i një imazhi nuk është një opsion. Prandaj, ne bëjmë 4 "shtresa", zhvendosim secilën imazh në këndin e vet dhe kjo është e gjitha, problemi është zgjidhur

Trupi (imazhi i sfondit: url("image1"), url("image2"), url("image3"))

Nëse duhet të caktoni një imazh në sfond, ne lëmë vetëm të parën në kod, mendoj se kjo është e kuptueshme.
Kur përdorni ndonjë imazh si sfond, duhet të mbani mend dy rregulla:

• vendosni një ngjyrë të kundërt të sfondit në rast se përdoruesi nuk e sheh imazhin për ndonjë arsye. Thjesht mund të çaktivizojë shfaqjen e fotografive, duke kursyer trafikun.
• Mos përdorni një imazh të sfondit për të përcjellë ndonjë informacion të rëndësishëm. Për arsyet e përmendura më sipër, përdoruesi mund të mos e shohë atë.

Mbështetja për imazhe të shumta të sfondit është mjaft e gjerë. Të gjithë shfletuesit, madje edhe IE8, e mbështesin këtë pronë.

Nga autori: Pershendetje te gjitheve. Ngjyrat dhe imazhet e sfondit luajnë një rol të madh në dizajnin e uebit, pasi ato ju lejojnë të dizajnoni çdo element në mënyrë më tërheqëse. Sot do të shikojmë se si të krijojmë një sfond në HTML.

A është e mundur të përdoret HTML për të vendosur sfondin?

Unë do të them menjëherë se jo. Në përgjithësi, html nuk u krijua për të dizajnuar faqe në internet. Është thjesht shumë e papërshtatshme. Për shembull, ekziston një atribut bgcolor, me të cilin mund të vendosni ngjyrën e sfondit, por kjo është shumë e papërshtatshme.

Prandaj, ne do të përdorim fletët e stilit Cascading (CSS). Ka shumë më tepër mundësi për të vendosur një sfond. Sot do të shqyrtojmë më themeloret.

Si të vendosni sfond duke përdorur css?

Pra, para së gjithash, duhet të vendosni se në cilin element dëshironi të vendosni sfondin. Kjo do të thotë, ne duhet të gjejmë një përzgjedhës të cilit do t'i shkruajmë një rregull. Për shembull, nëse keni nevojë të vendosni sfondin për të gjithë faqen në tërësi, mund ta bëni këtë përmes përzgjedhësit të trupit dhe për të gjitha blloqet përmes përzgjedhësit div. Epo, etj. Sfondi mund dhe duhet të lidhet me çdo përzgjedhës tjetër: klasa stili, identifikues, etj.

Pasi të keni vendosur për përzgjedhësin, duhet të shkruani vetë emrin e pronës. Për të vendosur ngjyrën e sfondit (përkatësisht një ngjyrë të fortë, jo një gradient ose një imazh), përdorni veçorinë e ngjyrës së sfondit. Pas tij duhet të vendosni një dy pika dhe të shkruani vetë ngjyrën. Kjo mund të bëhet në mënyra të ndryshme. Për shembull, duke përdorur fjalë kyçe, kodin hex, formatet rgb, rgba, hsl. Çdo metodë do të bëjë.

Metoda më e përdorur është kodi heksadecimal. Për të zgjedhur ngjyrat, mund të përdorni një program që shfaq kodin e ngjyrave. Për shembull, photoshop, paint ose ndonjë mjet online. Prandaj, si shembull, unë do të shkruaj një sfond të përgjithshëm për të gjithë faqen e internetit.

trupi (ngjyra e sfondit: #D4E6B3; )

Ky kod duhet të futet në seksionin e kokës. Është e rëndësishme që skedarët të jenë në të njëjtën dosje.

Foto si sfond

Për imazhin do të përdor një ikonë të vogël të gjuhës html:

Le të krijojmë një bllok bosh me një identifikues:

< div id = "bg" > < / div >

Le t'i japim dimensione dhe sfond të qartë:

#bg (gjerësia: 400 px; lartësia: 250 px; imazhi i sfondit: url (html.png); )

#bg( gjerësia: 400 px; lartësia: 250 px; sfond - imazh : url (html . png ) ;

Nga ky kod mund të shihni se kam përdorur një pronë të re - background-image. Është menduar posaçërisht për futjen e një fotografie si sfond në një element html. Le të shohim se çfarë ndodhi:

Për të specifikuar një foto, duhet të shkruani url-në e fjalës kyçe pas dy pikave dhe më pas të tregoni shtegun për në skedar në kllapa. Në këtë rast, shtegu specifikohet bazuar në faktin se imazhi është në të njëjtën dosje me dokumentin html. Ju gjithashtu duhet të specifikoni formatin e imazhit.

Nëse e keni bërë këtë dhe sfondi nuk shfaqet ende në bllok, kontrolloni përsëri nëse e keni shkruar saktë emrin e figurës, nëse shtegu dhe shtrirja janë vendosur saktë. Këto janë arsyet më të zakonshme pse sfondi thjesht nuk shfaqet sepse shfletuesi nuk mund ta gjejë imazhin.

Por a keni vënë re një gjë? Shfletuesi mori dhe shumëzoi imazhin në të gjithë bllokun. Pra, vetëm që ta dini, kjo është sjellja e paracaktuar e imazheve të sfondit - ato përsëriten vertikalisht dhe horizontalisht për aq kohë sa mund të futen në bllok. Me këtë sjellje ju mund të kontrolloni lehtësisht. Për ta bërë këtë, përdorni veçorinë e përsëritjes së sfondit, e cila ka 4 vlera kryesore:

Përsërit - vlera e paracaktuar, imazhi përsëritet në të dy anët;

Repeat-x – përsëritet vetëm në boshtin x;

Përsërit-y – përsëritet vetëm përgjatë boshtit y;

Pa përsëritje - nuk përsëritet fare;

Ju mund të shkruani çdo vlerë dhe të shihni se çfarë ndodh. Unë do ta shkruaj kështu:

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

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

Tani përsërisni vetëm horizontalisht. Nëse vendosni mospërsëritje, atëherë do të kishte vetëm një fotografi.

Shkëlqyeshëm, mund të përfundojmë këtu, pasi këto janë aftësitë themelore të punës me sfondin, por unë do t'ju tregoj 2 veçori të tjera që ju lejojnë të merrni më shumë kontroll.

Nëpërmjet përsëritjes, dizajnerët e paraqitjes ishin në gjendje të krijonin tekstura dhe gradientë të sfondit duke përdorur një imazh të vogël. Mund të jetë 30 me 10 piksel ose edhe më i vogël. Ose ndoshta pak më shumë. Imazhi ishte i tillë që kur përsëritej në njërën ose edhe në të dyja anët, nuk dukeshin asnjë tranzicion, kështu që rezultati ishte një sfond i vetëm dhe pa probleme. Nga rruga, kjo qasje ia vlen të përdoret tani nëse dëshironi të përdorni një strukturë pa probleme në faqen tuaj të internetit si sfond. Sot, një gradient tashmë mund të zbatohet duke përdorur metodat css3, ne patjetër do të flasim për këtë më vonë.

Pozicioni në sfond

Si parazgjedhje, imazhi i sfondit, nëse nuk është caktuar të përsëritet, do të jetë në këndin e sipërm të majtë të bllokut të tij. Por pozicioni mund të ndryshohet lehtësisht duke përdorur veçorinë background-position.

Mund ta vendosni në mënyra të ndryshme. Një opsion është thjesht të tregoni anët në të cilat duhet të vendoset fotografia:

pozicioni i sfondit: lart djathtas;

sfond - pozicion : djathtas lart ;

Kjo do të thotë, vertikalisht gjithçka mbetet e njëjtë: imazhi i sfondit ndodhet në krye, por horizontalisht ne ndryshuam anën në të djathtë, domethënë djathtas. Një mënyrë tjetër për të vendosur një pozicion është si përqindje. Në këtë rast, numërimi mbrapsht fillon në çdo rast nga këndi i sipërm i majtë. 100% - i gjithë blloku. Kështu, për ta vendosur figurën saktësisht në qendër, e shkruajmë kështu:

sfond-pozicion: 50% 50%;

sfond-pozicion: 50% 50%;

Mos harroni një gjë të rëndësishme në lidhje me pozicionimin - parametri i parë është gjithmonë pozicioni horizontal, dhe i dyti është pozicioni vertikal. Pra, nëse shihni një vlerë prej 80% 20%, atëherë mund të konkludoni menjëherë se imazhi i sfondit do të zhvendoset shumë në të djathtë, por nuk do të zbresë shumë.

Dhe së fundi, mund të specifikoni pozicionin në piksele. Gjithçka është e njëjtë, vetëm në vend të % do të ketë px. Në disa raste, një pozicionim i tillë mund të jetë i nevojshëm.

Shënimi i stenografisë

Pajtohem që kodi rezulton të jetë mjaft i rëndë nëse gjithçka është vendosur ashtu siç e kemi bërë. Rezulton se rruga drejt figurës duhet të specifikohet, përsëritja dhe pozicioni. Natyrisht, përsëritja dhe pozicioni nuk janë gjithmonë të nevojshme, por në çdo rast, do të ishte më e saktë të përdorni një shënim stenografi për pronën. Duket kështu:

sfond: #333 url(bg.jpg) pa përsëritje 50% 50%;

sfond: #333 url(bg.jpg) pa përsëritje 50% 50%;

Kjo do të thotë, hapi i parë është të regjistroni ngjyrën e përgjithshme të ngurtë të sfondit, nëse është e nevojshme. Pastaj rruga drejt imazhit, përsëritja dhe pozicioni. Nëse ndonjë parametër nuk është i nevojshëm, atëherë thjesht hiqeni atë. Pajtohem, kjo është shumë më e shpejtë dhe më e përshtatshme, dhe ne gjithashtu e zvogëlojmë ndjeshëm kodin tonë. Në përgjithësi, ju këshilloj që gjithmonë të shkruani në formë të shkurtuar, edhe nëse duhet të tregoni vetëm një ngjyrë ose foto.

Kontrollimi i madhësisë së imazhit të sfondit

Imazhi ynë aktual nuk është shumë i mirë për të demonstruar mashtrimin tjetër, kështu që unë do të marr një tjetër. Le të jetë madhësia e një blloku ose më e madhe. Pra, imagjinoni se jeni përballur me detyrën për të krijuar një imazh të sfondit në mënyrë që të mos e mbushë plotësisht bllokun e tij. Dhe fotografia, për shembull, është edhe më e madhe se madhësia e bllokut.

Çfarë mund të bëni në këtë rast? Sigurisht, opsioni më i thjeshtë dhe më i arsyeshëm do të ishte thjesht zvogëlimi i imazhit, por kjo nuk është gjithmonë e mundur. Le të themi se është në server dhe për momentin nuk ka kohë apo mundësi për ta reduktuar. Problemi mund të zgjidhet duke përdorur veçorinë e madhësisë së sfondit, e cila mund të quhet relativisht e re dhe që ju lejon të manipuloni madhësinë e imazhit të sfondit, dhe në të vërtetë çdo sfond.

Kështu që imazhi im tani zë të gjithë hapësirën në bllok, por unë do t'i jap një madhësi sfondi:

madhësia e sfondit: 80% 50%;

madhësia e sfondit: 80% 50%;

Përsëri, parametri i parë përcakton madhësinë horizontale, i dyti - madhësinë vertikale. Ne shohim që gjithçka u zbatua në mënyrë korrekte - fotografia u bë 80% e gjerësisë së bllokut në gjerësi dhe gjysmë në lartësi. Këtu ju vetëm duhet të bëni një sqarim - duke vendosur madhësinë si përqindje, mund të ndikoni në përmasat e figurës. Kështu që bëni kujdes nëse doni të mos prishni përmasat.

Siç mund ta merrni me mend, madhësia e sfondit mund të specifikohet gjithashtu në pixel. Ekzistojnë edhe dy fjalë kyçe që mund të përdoren gjithashtu:

Mbulesa - imazhi do të shkallëzohet në mënyrë që të paktën në njërën anë të mbushë plotësisht bllokun.

Përmbaj – e shkallëzon atë në mënyrë që imazhi të përshtatet plotësisht në bllok në madhësinë e tij maksimale.

Avantazhi i këtyre vlerave është se ato nuk ndryshojnë përmasat e figurës, duke i lënë ato të njëjta.

Ju gjithashtu duhet të kuptoni se shtrirja e figurës mund të çojë në një përkeqësim të cilësisë së saj. Mund të jap një shembull nga jeta dhe praktika reale e stilistëve. Të gjithë e dinë dhe e kuptojnë se kur dizajnoni për desktop, duhet ta përshtatni faqen në gjerësinë e monitorit kryesor: 1280, 1366, 1920. Nëse merrni një imazh sfondi me një madhësi, të themi, 1280 me 200 dhe nuk e jepni një madhësi sfondi, pastaj ekranet me gjerësi më të madhe Do të shfaqet një hapësirë ​​boshe, imazhi nuk do ta mbushë plotësisht gjerësinë.

Në 99% të rasteve, kjo nuk i përshtatet zhvilluesit të uebit, kështu që ai vendos madhësinë e sfondit: mbulesën në mënyrë që imazhi të shtrihet gjithmonë në gjerësinë maksimale të dritares. Kjo është një teknikë e mirë për t'u përdorur, por tani do të përballeni me problemin që përdoruesit me një gjerësi ekrani prej 1920 pikselësh mund të shohin një cilësi fotografie nën optimale.

Më lejoni t'ju kujtoj, ajo do të shtrihet në gjerësinë e saj maksimale. Prandaj, cilësia do të përkeqësohet automatikisht. Zgjidhja e vetme e saktë këtu do të ishte përdorimi fillimisht i një imazhi më të madh - 1920 piksele të gjerë. Pastaj në ekranet më të gjera do të jetë në madhësinë e tij natyrale, dhe në të tjerët thjesht do të ndërpritet gradualisht, por në të njëjtën kohë, nëse imazhi i sfondit zgjidhet siç duhet, kjo nuk do të ndikojë në pamjen e faqes.

Në përgjithësi, ky është vetëm 1 shembull se si të përdorni njohuritë që keni marrë në këtë artikull kur vendosni paraqitjet reale.

Sfondi i tejdukshëm duke përdorur css

Një veçori tjetër që mund të zbatohet duke përdorur css është një sfond i tejdukshëm. Kjo do të thotë, përmes këtij sfondi do të jetë e mundur të shihet se çfarë fshihet pas tij.

Si shembull, unë do ta vendos të gjithë faqen si sfond për imazhin që kemi përdorur më parë në shembujt. Për bllokun me identifikues bg, mbi të cilin ne kryejmë të gjitha eksperimentet tona, ne do të vendosim sfondin duke përdorur formatin e vendosjes së ngjyrave rgba.

Siç thashë më herët, ka shumë formate për vendosjen e ngjyrave në CSS. Një prej tyre është rgb, një format mjaft i njohur për ata që punojnë në redaktorët grafikë. Është shkruar kështu: rgb(17, 255, 34);

Vlera e parë në kllapa është ngopja e ngjyrës së kuqe, pastaj jeshile, pastaj blu. Vlera mund të jetë numerike nga 0 në 255. Prandaj, formati rgba nuk është i ndryshëm, shtohet vetëm një parametër tjetër - kanali alfa. Vlera mund të jetë nga 0 në 1, ku 0 është transparencë e plotë.

Me ndihmë Ngjyra dhe sfondi CSS Mund ta caktoni pothuajse në çdo element të një faqeje interneti, të kontrolloni lirshëm imazhin e sfondit dhe përsëritjen e tij horizontalisht dhe vertikalisht. Përveç kësaj, duke përdorur CSS, mund të vendosni një imazh të sfondit kudo në ekran duke përdorur pozicionimin. Le të mos shkojmë shumë përpara tani për tani, le të shkojmë me radhë.

Vetia COLOR

Kjo veçori specifikon ngjyrën e elementit, ose më saktë, ngjyrën e tekstit brenda elementit. Vlera specifikohet 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 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 shumë të ngjarë të jetë e zezë.

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

Le të shohim një shembull të 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 ta shkruani kështu:

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

Pastaj 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. Për të përcaktuar një klasë në HTML, përdoret atributi klasës, i cili mund të zbatohet për çdo element. Në kodin HTML do t'ju duhet të shkruani:

class="Blu" > Ngjyra e kokës së kësaj klase do të jetë blu

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

h1. Blu (ngjyra: blu)

Në dokumentet HTML përdoren gjithashtu 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 një klasë ashtu edhe një identifikues janë specifikuar për një element në kodin HTML, atëherë do të aplikohet stili i identifikuesit. Identifikuesi tregohet me një shenjë hash ( # ). Për të përdorur identifikuesin në kodin HTML, do t'ju duhet të shkruani:

id="Blu" > Ngjyra e kokës së kësaj ID 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, një paragraf, një lidhje ose, në përgjithësi, për çdo element HTML. Për ta bërë këtë, vlera e pronës specifikon një ngjyrë ose vlerë 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 kokës shkruajmë:

h1 (ngjyra e sfondit: e verdhë)

Ne marrim një sfond të verdhë për titujt e 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ërit-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 të palëvizshëm ( 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 palëvizshëm.

Vetia BACKGROUND-POSITION

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

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

Ne shkruajmë një kod shembull 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) ;
sfond-pozicion: qendra e sipërme
}

Përshëndetje, të dashur lexues të faqes së blogut. Sot do të shikojmë pesë rregulla CSS që ju lejojnë të vendosni një sfond për çdo element në Html - pozicioni i sfondit (imazhi, përsëritja, ngjyra, bashkëngjitja). Epo, le të mos harrojmë gjithashtu të përmendim rregullin e përbërjes së sfondit.

Nuk ka asgjë të komplikuar në lidhje me këtë, por ka disa hollësi dhe nuanca që duhet të dini për një shabllon të gatshëm (mbani mend, i cili do të ndihmojë në zbulimin e të gjitha aspekteve dhe daljeve të çdo dizajni).

Më lejoni t'ju kujtoj edhe një herë se ky artikull është pjesë e një serie dhe do të ishte mirë që të filloni të studioni markup-in e stilit që në fillim, përkatësisht me një artikull se çfarë është CSS dhe me çfarë përdoret, dhe më pas të ndiqni rendin e dhënë. në librin e referencës. Edhe pse, në çdo rast, varet nga ju, por tani le të flasim për vendosjen e sfondit.

Ngjyra, ngjyra e sfondit dhe imazhi i sfondit

Le të shohim së pari se si të vendosim ngjyrën e elementeve HTML duke përdorur Rregullat e ngjyrave Css. Në fakt, gjithçka është e thjeshtë këtu. Sintaksa është krejtësisht normale dhe ju mund të vendosni ngjyrën në përputhje me mënyrën se si është bërë në gjuhën e shënjimit të hipertekstit. Siç e mbani mend, vendoset pas shenjës hash (hash - "#fe35a3"), ose duke përdorur tre shifra, nëse e para përkon me vlerën e të dytit, e treta me të katërtin dhe e pesta, përkatësisht me të gjashtën ( kodi i ngjyrave "#aa33ff" mund të shkruhet shkurtimisht si "a3f").

Gjithashtu, ngjyrat në kodin Html dhe Css mund të përfaqësohen në formën e fjalëve (për shembull, "e kuqe"), por më shpesh është kodi heksadecimal që përdoret:

Ngjyra:#303

Si shembull, e ngjyrosa këtë paragraf të vogël me të njëjtën ngjyrë si më sipër (#303). Tani është paksa e ndryshme nga ngjyra e të gjithë paragrafëve të tjerë (më e errët), e cila është vendosur në #555 në skedarin CSS të temës së WordPress që po përdor. Por vendosja e ngjyrës duke përdorur ngjyrën është mjaft e thjeshtë, por me sfond do të jetë pak më e ndërlikuar.

Kështu që, për sfondin në Css Ka pesë rregulla që mund të kombinohen në një nëse dëshironi. Për t'i parë ato, mund të shkoni në faqen aktuale të specifikimeve të W3C dhe të kërkoni çdo gjë me fjalën Sfondi:

1. ngjyra e sfondit - duke përdorur këtë rregull, ju vendosni ngjyrën e sfondit për çdo element Html. Mund të përdorni ose një kod ose emrin e hijes, d.m.th. gjithçka është saktësisht e njëjtë me atë kur përdorni ngjyra.

imazhi i sfondit - me të mund të përdorni një fotografi si sfond (por sigurohuni që të lexoni për të, sepse fotografitë e rënda do të ngadalësojnë ngarkimin e faqeve), shtegu në të cilin do të tregohet në funksionalitetin url ().

Nëse shikoni specifikimet, do ta shihni atë ngjyra e parazgjedhur e sfonditçdo element do të jetë transparent (vlera e paracaktuar e rregullit është "ngjyra e sfondit: transparent"). Vërtetë, në elementë nuk do të jetë transparent si parazgjedhje, sepse Këta janë elementë të sistemit dhe gjithçka rreth tyre është e ndryshme dhe e ndryshme nga etiketat e zakonshme të gjuhës së shënjimit të hipertekstit.

Ngjyra në ngjyrën e sfondit vendoset si standarde (gjashtë ose tre shifra të kodit heksadecimal, ose një fjalë):

Ngjyra e sfondit:#FEFCDE

Për shembull, sfondi i këtij paragrafi specifikohet duke përdorur ngjyrën e sfondit me kodin e ngjyrës të dhënë pak më lart.

Të katër rregullat e tjera CSS do të kenë të bëjnë vetëm me imazhin e sfondit, i cili mund të vendoset për çdo element Html dhe, nëse dëshironi, të pozicionohet saktësisht. Cili skedar grafik do të përdoret mund të specifikohet duke përdorur sfond-imazh.

Nëse shikoni specifikimin e gjuhës së shënjimit, do të shihni se imazhi i sfondit është i paracaktuar në "asnjë" (d.m.th., asnjë imazh nuk përdoret për sfondin). Epo, nëse ende keni nevojë për këtë, atëherë në funksionalitetin url() do t'ju duhet të tregoni rrugën drejt tij:

Background-image:url(https://site/image/comment_top_focus.gif);

Për shembull, për këtë paragraf kam përdorur një skedar grafik me një sfond, shtegu për të cilin është përshkruar më sipër. Ju shikoni që e gjithë zona e caktuar për këtë paragraf është e mbuluar me një imazh të përsëritur, i cili në origjinal duket kështu:

Ato. kur përdorni vetëm një rregull të imazhit të sfondit që tregon rrugën drejt skedarit grafik, i njëjti imazh do të shumëzohet si vertikalisht ashtu edhe horizontalisht derisa të mbulojë të gjithë zonën e caktuar në faqen e internetit për këtë element specifik Html (në shembullin tonë ishte një paragraf). Pse po ndodh kjo?

Përsëritja e sfondit - përsërit imazhin e sfondit

Po, sepse nuk kemi specifikuar asnjë vlerë për rregullin CSS sfond-përsërit, që do të thotë se vlera e paracaktuar do të përdoret për të. Duke parë specifikimin, zbulojmë se kjo vlerë korrespondon me "përsëritje" (përsëritni imazhin në të gjitha akset). Përgjigja erdhi natyrshëm.

Prandaj, me sfond-përsëritje ne mundemi menaxhoni përsëritjet e imazhit të sfondit. Ky rregull mund të ketë vetëm katër kuptime:




Background-position - pozicionimi i sfondit

Tani lind pyetja: a është e mundur të largohet imazhi i sfondit nga këndi i sipërm i majtë i zonës duke kufizuar madhësinë e elementit. Sigurisht që mundeni, dhe ka një rregull të veçantë për këtë qëllim. sfond-pozicion:



Duke parë specifikimin CSS, bëhet e qartë pse imazhi i sfondit si parazgjedhje shtypet saktësisht në skajin e sipërm majtas të zonës së elementit Html. Sepse vlera "0% 0%" është vlera e paracaktuar për rregullin e pozicionit të sfondit.

Epo, kur ky rregull nuk është vendosur në mënyrë eksplicite për një element (si në rastin tonë), atëherë shfletuesi zgjedh vlerën e tij, e cila pranohet në specifikim si parazgjedhje (vini re se boshtet e koordinatave në CSS raportohen saktësisht nga buza e sipërme e majtë të elementit të zonës).

Është gjithashtu e qartë nga specifikimi se për të pozicionuar imazhin e sfondit duke përdorur pozicionin e sfondit, mund të përdorni si vlerat relative (përqindje) ashtu edhe ato absolute (për shembull, ). Epo, mund të përdorni edhe fjalë që do të korrespondojnë me vlera të caktuara dixhitale. Por gjërat e para së pari.

Kur vendosni pozicionimin e imazhit të sfondit duke përdorur njësi absolute në pozicionin e sfondit përdoret parimi i mëposhtëm për të përcaktuar pozicionin e tij përfundimtar:

Ato. shfletuesi do të llogarisë zhvendosjet e specifikuara përgjatë boshteve X dhe Y nga origjina e zonës në të cilën është pozicionuar objekti deri në origjinën e vetë këtij imazhi. Për shembull, në këtë paragraf kam pozicionuar imazhin e sfondit nëpërmjet pozicionit të sfondit duke përdorur rregullat e mëposhtme të CSS:

Background-image:url(https://site/image/logo.png); sfond-përsërit: pa përsëritje; pozicioni i sfondit: 400px 25px;

Ju lutemi vini re se në këtë rast ai do të përafrohet në qendër të zonës së shikimit dhe jo në qendër të zonës së caktuar për këta paragrafë. Është e qartë se në realitet një vendosje e tillë e një imazhi të sfondit nuk ka gjasa të përdoret.

Megjithatë, nëse vendosni një pozicion fiks të sfondit për elementë të tillë si Body ose Html (d.m.th. në etiketat që mbulojnë të gjithë faqen e internetit), atëherë ky imazh do të jetë gjithmonë i dukshëm në portin e pamjes dhe ky është pikërisht përdorimi i bashkëngjitjes së sfondit CSS pronë në paraqitjen moderne të bllokut.

A ka më shumë rregull i parafabrikuar Sfondi, e cila ju lejon të kombinoni të pesë rregullat e përshkruara më sipër në një shishe. Për më tepër, vlerat për të pesë në versionin e kombinuar mund të përdoren në çdo mënyrë dhe në çdo sasi (ato janë unike dhe shfletuesi nuk do t'i ngatërrojë ato me njëri-tjetrin). Çdo gjë që nuk e specifikoni në mënyrë eksplicite do të supozohet nga shfletuesi si vlera e paracaktuar.

Png) pa përsëritje 50%;

Rregulli shembull i parafabrikimit zbatohet në këtë paragraf për qartësi. Nuk doli e bukur, por kjo nuk është gjëja kryesore. Ky paragraf përdor një mbushje të çuditshme të sfondit të verdhë, dhe gjithashtu përdor një imazh të logos Liveinternet, të rreshtuar në qendër të paragrafit. Sepse Nëse rregullit të bashkëngjitjes së sfondit nuk i jepet asnjë vlerë, atëherë përdoret vlera e lëvizjes (parazgjedhja).

Nëse për ndonjë element dëshironi të vendosni vetëm një mbushje me ngjyra dhe të mos shqetësoheni me një imazh të sfondit, atëherë mund ta bëni këtë në vend të kësaj:

Ngjyra e sfondit:#FEFCDE

shkruaj:

Sfondi:#FEFCDE

Sepse të gjitha vlerat e tjera të rregullit të parafabrikimit do të merren si parazgjedhje, dhe kjo është ajo që ju nevojitet.

Paç fat! Shihemi së shpejti në faqet e faqes së blogut

Mund të shikoni më shumë video duke shkuar te

");">


Ju mund të jeni të interesuar

Stili i listës (lloji, imazhi, pozicioni) - Rregullat Css për personalizimin e paraqitjes së listave në kodin Html Si të konfiguroni ngjyrën e sfondit të alternuar të rreshtave të tabelave, listave dhe elementëve të tjerë Html në sajt duke përdorur pseudo-klasën e fëmijës së ntë
Pozicioni (absolut, relativ dhe fiks) - mënyra për të pozicionuar elementët Html në CSS (rregullat majtas, djathtas, lart dhe poshtë)
Fluturoni dhe pastroni në CSS - mjetet e paraqitjes së bllokut
Pozicionimi duke përdorur Z-indeksin dhe rregullin e Kursorit CSS për të ndryshuar kursorin e miut