Una dintre cele mai comune sarcini la editarea textului și a blocurilor în HTML și CSS. Poate fi întâlnit nu doar de designerul de layout, ci și de orice manager de conținut care editează conținutul site-ului. Pentru a rezolva această problemă, sunt folosite doar două proprietăți: culoare - culoarea textului, fundal - lucru cu fundalul, culoarea sau imaginea.

Lucrul cu culoarea de testare în CSS

culoare este o proprietate necesară pentru a specifica o culoare numai pentru text. Culoarea poate fi specificată atât în ​​format de cod HTML HEX, cât și în format RGB (Roșu, Verde, Albastru). Codurile de culoare pot fi selectate fie în programe de grafică precum Photoshop, fie online

Sintaxa proprietății:

Culoare: Culoare;
Acum aplicăm proprietatea:

Continut (
culoare: # 444; // text gri închis într-un element cu conținut de clasă
}
De ce un astfel de exemplu: specificarea unei culori pentru un link și pentru text sunt două lucruri diferite. Tine minte. Ei bine, pe cont propriu recomand să fac culoarea textului și a linkurilor de diferite culori.

Lucrul cu fundal în CSS

fundal este o proprietate care vă permite să lucrați cu fundalul unei imagini: setați culoarea de fundal, setați o imagine ca fundal (formate jpg, gif, png), modificați poziția fundalului și alți parametri, care sunt descriși mai jos.

culoare de fundal- această proprietate este folosită doar pentru a seta culoarea de fundal. Acceptă numai codul de culoare. Culoarea poate fi specificată în format RGB (Red Green Blue) sau în format HTML HEX cod.

Bloc (
culoare de fundal: # fbb5b5; // setați o culoare stacojie pastelată pentru fundal
}
Cele mai bune exemple de culori pentru fundal (modele moderne de design: Flat Design etc.):

imagine de fundal este o proprietate care este folosită pentru a seta o imagine ca fundal într-un element. Pentru a specifica imaginea, sunt suficiente parametrul url și calea către imagine în raport cu fișierul cu stiluri css.

#înapoi (
imagine de fundal: url ("imagini / fon.jpg");
}

fundal-repetare- poate fi folosit numai atunci când proprietatea imagine de fundal a fost specificată mai sus. Această proprietate stabilește regula de repetare a imaginii. În mod implicit, imaginea se repetă pe axa X și pe axa Y până la marginile elementului (dacă fundalul este mai mic decât elementul). În proprietate, puteți specifica setarea astfel încât imaginile să fie repetate numai de-a lungul axei X - repetiție-x (orizontală), numai de-a lungul axei Y - repetiție-y (verticală) sau deloc - fără repetare.

#conținut (

background-repeat: repetare-x; / * imaginea se va repeta doar orizontal până la limitele blocului * /
}

atașament de fundal- fixează fundalul într-o singură poziție, adică imaginea se va derula împreună cu conținutul blocului sau va rămâne fixă. Implicit este scroll, care nu fixează poziția fundalului.

#conținut (
imagine de fundal: url ("background.jpg");
background-repeat: repetare-x; / * imaginea se va repeta doar pe orizontală * /
fundal-atașare: fix; / * fixat la locație * /
}

fundal-poziție- o proprietate care stabilește poziția fundalului în element. Sunt date două valori: poziția orizontală și apoi poziția verticală. Este setat fie în format digital (pixeli și procente), fie în litere (stânga, centru, dreapta, sus, jos). Această proprietate este necesară atunci când imaginea nu este repetată (no-repeat), iar fundalul trebuie poziționat într-un anumit mod în element.

#bloc (
fundal-poziție: centru stânga; / * orizontal - în partea stângă, vertical - în mijloc * /
}
Cred că totul este clar în comentarii)
Un exemplu de scriere a unei valori numerice:

#chei (
fundal-poziție: 109px 57px; / * marja din stânga 109 px, 57 px în partea de sus * /
}
Și aici cred că totul ar trebui să fie clar.
O mulțime de proprietăți? Vedeți cum să scrieți în formă prescurtată.

În cele din urmă. Scurtătura CSS pentru fundal

Puteți utiliza o notație abreviată, în care toți parametrii vor fi specificați într-o linie:

Fundal: poziția de atașare a repetării imaginii color;

Despre profesionisti. Scrierea astfel va reduce timpii de încărcare a paginii și randarea browserului. Fiți milă de vizitatori, este mai bine să scrieți în acest fel, dacă, desigur, aveți nevoie de mai multe proprietăți.
Da, puteți sări peste orice proprietate dacă nu este nevoie de ea! Continuați să specificați valori mai jos în listă.

Bloc (
fundal: # f1f1f1 url ("background.jpg") repeat-x scroll 100px 125px;
}

Un exemplu despre cum funcționează fundalurile în CSS

Exemplu de cod. Puteți vedea rezultatul lucrării și codul sursă la linkul de mai jos.

În cazul unei imagini de fundal, este mai bine să specificați dimensiunea blocului, deoarece în caz contrar se va redimensiona în funcție de conținut.

Cred că nu există un singur site unde proprietatea să nu fie folosită Fundal CSS... S-ar părea că ce poate fi mai simplu decât această proprietate? Dar nu, capabilitățile sale sunt mult mai largi decât scopul obișnuit al unei imagini sau al unei culori ca fundal al paginii. Ceva va fi familiar, dar ceva va deveni cu siguranță o noutate pentru mulți. În orice caz, va fi util să știți în detaliu cum funcționează fundalul.

CSS3 a adus o mulțime de lucruri noi proprietății, aceasta este transparența și atribuirea mai multor imagini ca fundal, dar despre asta vom vorbi mai jos și, mai întâi, ne vom uita la elementele de bază ale proprietății. fundal.

culoare de fundal

Sunt destul de sigur că ați făcut alocarea culorilor de fundal de mai multe ori. Acest lucru se poate face folosind mai multe tipuri de notație: regulată (se folosește numele culorii), notație hexazecimală sau RGB. Fiecare tip este egal, folosește ceea ce îți place mai mult. Încerc să folosesc cea mai scurtă versiune, iar de dragul percepției este mai simplu, iar fișierul de stil este puțin mai mic ca dimensiune.

P (culoarea fundalului: roșu;) p (culoarea fundalului: # f00;) p (culoarea fundalului: # ff0000;) p (culoarea fundalului: rgb (255, 0, 0;))

Există suport pentru transparență în CSS3, așa că îl puteți adăuga la culoarea noastră, de exemplu:

P (culoare de fundal: rgba (255, 0, 0, 0,5);)

Ultima cifră a fost setată la 50% transparență. Puteți seta valoarea transparenței de la 0 (fond complet transparent) la 1 (complet opac).

imagine de fundal

Această proprietate este, de asemenea, folosită foarte des, vă permite să atribuiți o imagine fundalului. CSS3 adaugă posibilitatea de a atribui mai multe imagini fundalului, fiecare creând un fel de strat, astfel încât fiecare ulterioară este suprapusă pe cea anterioară. De ce ar putea fi util acest lucru? Totul este destul de simplu - să presupunem că trebuie să fixați lucrurile mici în fiecare colț al site-ului. Cu condiția ca aspectul să fie mai mult sau mai puțin fluid, utilizarea unei singure imagini nu este o opțiune. Prin urmare, facem 4 "straturi", mutam fiecare imagine in coltul ei si gata, problema este rezolvata

Corp (imagine de fundal: url ("imagine1"), url ("imagine2"), url ("image3"))

Dacă trebuie să atribuiți o singură imagine fundalului, o lăsăm doar prima în cod, cred că este de înțeles.
Când utilizați orice imagine ca fundal, trebuie să aveți în vedere două reguli:

• setați o culoare de fundal contrastantă în cazul în care utilizatorul nu poate afișa o imagine dintr-un motiv oarecare. Poate opri afișarea imaginilor banale, economisește trafic.
• nu utilizați o imagine de fundal pentru a transmite informații importante. Din motivul menționat mai sus, este posibil ca utilizatorul să nu îl vadă.

Suportul pentru mai multe imagini de fundal este suficient de larg. Toate browserele, chiar și IE8, acceptă această proprietate.

De la autor: Bun venit tuturor. Culorile și imaginile de fundal joacă un rol important în designul web, deoarece permit oricărui element să fie prezentat mai atractiv. Astăzi ne vom uita la cum să facem un fundal în html.

Este posibil să te descurci cu html când setezi fundalul?

Îți spun imediat că nu. În general, html nu este conceput pentru a stila paginile web. Este doar foarte incomod. De exemplu, există un atribut bgcolor cu care puteți seta culoarea de fundal, dar acest lucru este foarte incomod.

În consecință, vom folosi foi de stil în cascadă (css). Există mai multe opțiuni pentru setarea fundalului. Astăzi le vom analiza pe cele mai elementare.

Cum setez fundalul prin css?

Deci, în primul rând, trebuie să decideți ce element trebuie să setați fundalul. Adică trebuie să găsim selectorul în care vom scrie regula. De exemplu, dacă fundalul trebuie setat pentru întreaga pagină ca întreg, atunci puteți face acest lucru prin selectorul de corp, pentru toate blocurile - prin selectorul div. Ei bine, etc. Fundalul poate și ar trebui să fie legat de orice alți selectori: clase de stil, identificatori etc.

După ce v-ați decis asupra selectorului, trebuie să scrieți numele proprietății în sine. Pentru a seta culoarea de fundal (doar o culoare solidă, nu un gradient sau o imagine), utilizați proprietatea culoarea fundalului. După aceasta, trebuie să puneți două puncte și să scrieți culoarea în sine. Acest lucru se poate face în moduri diferite. De exemplu, folosind cuvinte cheie, cod hex, rgb, rgba, formate hsl. Orice metodă va funcționa.

Metoda cea mai des folosită este codul hexazecimal. Pentru a selecta culorile, puteți folosi un program în care codul culorilor este vizibil. De exemplu, Photoshop, paint sau un instrument online. În consecință, de exemplu, voi scrie un fundal general pentru întreaga pagină web.

corp (culoare de fundal: # D4E6B3;)

Acest cod trebuie inserat în secțiunea de cap. Este important ca fișierele să fie în același folder.

Imagine ca fundal

Voi folosi o pictogramă mică de limbă html ca imagine:

Să creăm un bloc gol cu ​​un identificator:

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

Să-i dăm dimensiuni și fundal explicite:

#bg (lățime: 400px; înălțime: 250px; imagine de fundal: url (html.png);)

#bg ( latime: 400px; înălțime: 250px; fundal - imagine: url (html. png);

Din acest cod, puteți vedea că am folosit o nouă proprietate - imagine de fundal. Este conceput doar pentru inserarea unei imagini ca fundal pentru un element html. Să vedem ce s-a întâmplat:

Pentru a seta o imagine, trebuie să scrieți cuvântul cheie url după două puncte și apoi să specificați calea fișierului în paranteze. În acest caz, calea este specificată pe baza faptului că imaginea se află în același folder cu documentul html. De asemenea, trebuie să specificați raportul de aspect.

Dacă ați făcut acest lucru, iar fundalul tot nu apare în bloc, verificați din nou dacă ați scris corect numele imaginii, dacă calea și extensia au fost specificate corect. Acestea sunt cele mai comune motive pentru care fundalul pur și simplu nu este afișat deoarece browserul nu poate găsi imaginea.

Dar ai observat o particularitate? Browserul a preluat și a reprodus imaginea pe tot blocul. Deci, ca să știți, acesta este comportamentul implicit al imaginilor de fundal - se repetă pe verticală și pe orizontală până când se pot încadra în bloc. Puteți controla cu ușurință acest comportament. Pentru a face acest lucru, utilizați proprietatea background-repeat, care are 4 valori principale:

Repetare - valoare implicită, imaginea se repetă pe ambele părți;

Repeat-x - se repetă numai pentru ois x;

Repeat-y - se repetă numai de-a lungul axei y;

No-repeat - nu se repetă deloc;

Puteți scrie fiecare valoare și puteți vedea ce se întâmplă. O sa scriu asa:

background-repeat: repetare-x;

fundal - repetare: repetare - x;

Acum repetați doar pe orizontală. Dacă scrieți fără repetare, atunci ar fi o singură imagine.

Grozav, puteți termina acest lucru deja, deoarece acestea sunt posibilități de bază pentru a lucra cu fundal, dar vă voi arăta încă 2 proprietăți care vă permit să obțineți mai mult control asupra acestuia.

Cu repetare, designerii de aspect obișnuiau să obțină texturi de fundal și degrade folosind o singură imagine minusculă. Ar fi putut avea 30 de pixeli pe 10 pixeli sau mai puțin. Poate un pic mai mult. Imaginea a fost de așa natură încât, atunci când a fost repetată pe una sau chiar ambele părți, nu erau vizibile tranziții, astfel încât, ca rezultat, s-a obținut un singur fundal solid. Apropo, această abordare merită folosită acum dacă doriți să utilizați o textură fără sudură pe site-ul dvs. ca fundal. Astăzi, gradientul poate fi deja implementat folosind metode css3, cu siguranță vom vorbi despre asta.

Poziția de fundal

În mod implicit, imaginea de fundal, dacă nu este setată să se repete, va fi în colțul din stânga sus al blocului său. Dar poziția poate fi schimbată cu ușurință folosind proprietatea background-position.

Îl poți întreba în diferite moduri. Una dintre opțiuni este pur și simplu să indicați părțile în care ar trebui să fie amplasată imaginea:

fundal-poziție: dreapta sus;

fundal - poziție: dreapta sus;

Adică, pe verticală, totul a rămas la fel: imaginea de fundal este situată deasupra, dar pe orizontală, am schimbat partea spre dreapta, adică dreapta. O altă modalitate de a seta poziția este ca procent. În acest caz, numărătoarea inversă începe în orice caz din colțul din stânga sus. 100% - tot blocul. Astfel, pentru a plasa poza exact în centru, scriem astfel:

fundal-poziție: 50% 50%;

fundal - poziție: 50% 50%;

Amintiți-vă un lucru important legat de poziționare - primul parametru este întotdeauna poziția orizontală, iar al doilea este poziția verticală. Deci, dacă vedeți o valoare de 80% 20%, atunci puteți concluziona imediat că imaginea de fundal va fi deplasată puternic spre dreapta, dar nu va coborî prea mult.

Și, în sfârșit, puteți scrie poziția în pixeli. Totul este la fel, doar px va fi folosit în loc de %. În unele cazuri, poate fi necesară și această poziționare.

Notație prescurtată

Sunteți de acord că codul se dovedește a fi destul de greoi dacă totul este setat așa cum am procedat noi. Se pare că trebuie stabilită calea către imagine, și repetarea și poziția. Desigur, repetarea și poziția nu sunt întotdeauna necesare, dar, în orice caz, este mai corect să folosiți notația proprietății scurte. Arata cam asa:

fundal: # 333 url (bg.jpg) no-repeat 50% 50%;

fundal: # 333 url (bg.jpg) no-repeat 50% 50%;

Adică, primul pas este să înregistrați culoarea generală de fundal solidă, dacă este necesar. Apoi calea către imagine, repetare și poziție. Dacă nu este necesar un parametru, atunci pur și simplu îl omitem. De acord, acest lucru este mult mai rapid și mai convenabil și, de asemenea, ne reducem semnificativ codul. În general, vă sfătuiesc să scrieți întotdeauna în abrevieri, chiar dacă trebuie să indicați doar o culoare sau o imagine.

Controlul dimensiunii imaginii de fundal

Imaginea noastră actuală nu este potrivită pentru următorul truc, așa că voi lua altul. În mărime, lăsați-l să fie ca un bloc sau mai mare decât acesta. Așadar, imaginați-vă că vă confruntați cu o sarcină: să faceți o imagine de fundal, astfel încât să nu-și umple complet blocul. Și imaginea, de exemplu, este chiar mai mare decât dimensiunea blocului.

Ce poți face în acest caz? Desigur, cea mai simplă și mai rezonabilă opțiune ar fi pur și simplu să reduceți imaginea, dar nu este întotdeauna posibil să faceți acest lucru. Să presupunem că este pe server și în acest moment nu există timp sau oportunitate de a-l reduce. Problema poate fi rezolvată folosind proprietatea background-size, care poate fi numită relativ nouă și care vă permite să manipulați dimensiunea imaginii de fundal și, într-adevăr, orice fundal.

Deci, fotografia mea acum ocupă tot spațiul din bloc, dar îi voi da o dimensiune de fundal:

dimensiunea fundalului: 80% 50%;

fundal - dimensiune: 80% 50%;

Din nou, primul parametru este dimensiunea orizontală, al doilea - dimensiunea verticală. Putem vedea că totul a fost aplicat corect - fotografia a devenit 80% din lățimea blocului în lățime și jumătate în înălțime. Aici trebuie doar să faceți o clarificare - setând dimensiunea ca procent, puteți afecta proporțiile imaginii. Asa ca ai grija sa nu iesi disproportionat.

După cum puteți ghici, dimensiunea fundalului poate fi specificată și în pixeli. Există, de asemenea, două cuvinte cheie care pot fi folosite:

Coperta - imaginea va fi scalată astfel încât cel puțin o parte a acesteia să umple complet blocul.

Conține - o scalează astfel încât imaginea să se încadreze complet în bloc la dimensiunea maximă.

Avantajul acestor valori este că nu modifică raportul de aspect al imaginii, lăsându-le la fel.

De asemenea, trebuie să înțelegeți că întinderea imaginii poate duce la o deteriorare a calității acesteia. Pot da un exemplu din viața și practica reală a designerilor de layout. Toată lumea știe și înțelege că atunci când codificați pentru desktop-uri, trebuie să adaptați site-ul la lățimile de bază ale monitoarelor: 1280, 1366, 1920. Dacă luați o imagine de fundal cu o dimensiune, de exemplu, 1280x200 și nu o setați un background-size, atunci ecranele cu o lățime sunt mai mari, un spațiu gol va apărea, imaginea nu va umple complet lățimea.

În 99% din cazuri, acest lucru nu se potrivește dezvoltatorului web, așa că el setează dimensiunea fundalului: acoperire, astfel încât imaginea să se întindă întotdeauna la lățimea maximă a ferestrei. Acesta este un truc bun de utilizat, dar acum vă confruntați cu problema că utilizatorii cu o lățime a ecranului de 1920 de pixeli pot vedea o imagine de calitate suboptimă.

Permiteți-mi să vă reamintesc că se va întinde la lățimea maximă. În consecință, calitatea se va deteriora automat. Singura soluție corectă aici ar fi să folosiți inițial o imagine mai mare - 1920 pixeli lățime. Apoi, pe cele mai largi ecrane va fi în dimensiunea sa naturală, iar pe altele va fi pur și simplu tăiat încet, dar, în același timp, cu selectarea corectă a imaginii de fundal, acest lucru nu va afecta aspectul site-ului.

În general, acesta este doar un exemplu despre cum să folosiți cunoștințele pe care le-ați dobândit în acest articol, atunci când creați machete reale.

Fundal semitransparent cu css

Un alt truc care poate fi implementat folosind css este un fundal semi-transparent. Adică prin acest fundal se va putea vedea ce este în spatele lui.

Ca exemplu, voi seta întreaga pagină ca fundal cu imaginea pe care am folosit-o mai devreme în exemple. Pentru blocul cu identificatorul bg, pe care ne desfășurăm toate experimentele, vom seta fundalul folosind formatul de culoare rgba.

După cum am spus mai devreme, există multe formate în css pentru setarea culorilor. Unul dintre ele este rgb, care este un format destul de cunoscut pentru cei care lucrează în editori grafici. Se scrie astfel: rgb (17, 255, 34);

Prima valoare din paranteze este saturația de roșu, apoi verde, apoi albastru. Valoarea poate fi numerică de la 0 la 255. În consecință, formatul rgba nu este diferit, este adăugat doar un parametru - canalul alfa. Valoarea poate fi de la 0 la 1, unde 0 este transparența totală.

Cu ajutor Culoare și fundal CSS puteți seta aproape orice element al unei pagini web, puteți controla liber imaginea de fundal, repetarea acesteia pe orizontală și pe verticală. În plus, folosind CSS, puteți plasa o imagine de fundal oriunde pe ecran folosind poziționare. Să nu alergăm încă prea departe, să mergem în ordine.

proprietate COLOR

Această proprietate setează culoarea elementului, mai precis, culoarea textului din interiorul elementului. Valoarea este specificată într-una dintre formele posibile:

• denumirea culorii (VERDE, NEGRU, ROSU ...);
• cod de culoare hexazecimal (008000, 000000, FF0000 ...);
• cod de culoare zecimal în RGB (culoare: rgb (40, 175, 250));

Proprietatea COLOR este moștenită, iar dacă nu este specificată o valoare pentru niciun element, valoarea va fi moștenită de la strămoșul său. Dar se poate dovedi că nici pentru strămoș nu este specificat - atunci foaia de stil a browserului va fi aplicată folosind valorile implicite. Culoarea elementului în acest caz va fi cel mai probabil negru.

După cum am menționat deja, puteți seta culoarea pentru aproape toate elementele, poate fi (H1 ... H6), (puternic, em) și chiar numere întregi (p) și chiar margini de tabel, dar mai multe despre asta mai târziu.

Să vedem un exemplu de setare a culorii textului folosind CSS:

h1 (culoare: albastru)

În acest exemplu, toate anteturile primului nivel al paginii web vor fi albastre:

puternic (culoare: roșu)

În acest caz, tot ceea ce este în textul paginii va fi evidențiat cu o etichetă puternic, va deveni roșu.

Se poate scrie asa:

h1, p, puternic (culoare: verde)

Apoi, titlurile primului nivel, toate paragrafele și tot ceea ce este evidențiat de etichetă vor fi verzi.

Când devine necesară evidențierea titlurilor în culori diferite, atunci se folosesc selectoare de clasă. Pentru a defini o clasă în HTML, utilizați atributul clasă care poate fi aplicat oricărui element. În codul HTML, va trebui să scrieți:

clasa = "Albastru"> Culoarea antetelor acestei clase va fi albastră

În foaia de stil CSS, în acest caz, scriem o regulă în care selectorul va fi elementul H1, iar prin punct ( . ) numele clasei:

h1.Albastru (culoare: albastru)

În documentele HTML se folosesc și selectori de identificare, care sunt determinate de atribut id... Identificatorul este mai semnificativ sau mai prioritizat decât clasa. Și dacă atât clasa, cât și identificatorul sunt specificate în codul HTML pentru element, atunci stilul de identificare va fi aplicat. Identificatorul este notat prin semnul hash ( # ). Pentru a utiliza identificatorul în codul HTML, va trebui să scrieți:

id = „Albastru”> Culoarea antetelor acestui ID va fi albastră

În foaia de stil, la rândul său:

h1 # Albastru (culoare: albastru)

FUNDAL-CULOARE Proprietate

Această proprietate vă permite să setați culoarea de fundal pentru pagina ca întreg, paragraf, link, în general, pentru orice element HTML. Pentru a face acest lucru, în valoarea proprietății este specificată o culoare sau o valoare. transparent(transparent). Codul pentru fundalul paginii este scris:

corp (culoare de fundal: aqua)

În acest caz, fundalul paginii va fi turcoaz, iar pentru a da fundalul titlului, scrieți:

h1 (culoare de fundal: galben)

Primim fundalul galben al titlurilor de la primul nivel.

Culoare și fundal CSS

BACKGROUND-REPEAT Proprietate

Această proprietate este utilizată atunci când este dată pentru a determina dacă se repetă orizontal și vertical. Valori valide:

• repeta- imaginea se repetă pe verticală și pe orizontală;
• repeta-x- imaginea se repeta doar pe orizontala;
• repeta-y- imaginea se repeta doar pe verticala;
• fără repetare- imaginea nu se repeta.

Codul este scris astfel:

p (
imagine de fundal: url ( adresa fișierului imagine) ;
background-repeat: repetare-x
}

Textul pentru acest paragraf va fi deasupra imaginii de fundal, care va fi poziționată orizontal.

FUNDAL-ATASAMENT Proprietate

Această proprietate este folosită pentru a spune browserului dacă imaginea de fundal a paginii trebuie să deruleze cu text ( sul) sau rămâne nemișcat ( fix).

corp (
imagine de fundal: url ( adresa fișierului imagine) ;
background-repeat: repetare-x;
fundal-atașament: fix
}

În acest caz, imaginea de fundal va rămâne staționară.

BACKGROUND-POSITION Proprietate

Această proprietate este utilizată pentru a poziționa imaginea în raport cu. Valorile sunt specificate în procente (%), în unități de lungime (cm, px), prin cuvinte cheie:

• Vertical:
• top- partea de sus a imaginii este aliniată cu marginea de sus a paginii sau blocului;
• centru
• fund- partea de jos a imaginii este aliniată cu marginea de jos a paginii sau blocului.
• Orizontal:
• stânga- marginea stângă a imaginii este aliniată cu marginea stângă a paginii sau blocului;
• centru- centrul imaginii este aliniat la centrul paginii sau blocului;
• dreapta- marginea dreaptă a imaginii este aliniată cu marginea dreaptă a paginii sau blocului.

Scriem un exemplu de cod în procente, unități de lungime și cuvinte cheie:

corp (
imagine de fundal: url ( adresa fișierului imagine) ;
poziția de fundal: 0% 0%
}

Corp (
imagine de fundal: url ( adresa fișierului imagine) ;
poziția fundalului: 10px 25cm
}

Corp (
imagine de fundal: url ( adresa fișierului imagine) ;
poziția de fundal: sus în centru
}

Salutare dragi cititori ai site-ului blogului. Astăzi ne vom uita la cinci reguli CSS care vă permit să setați un fundal pentru orice element din Html - fundal-poziție (imagine, repetare, culoare, atașament). Ei bine, să nu uităm să menționăm și regula compusă de fundal.

Nu este nimic dificil în acest sens, dar există anumite subtilități și nuanțe pe care trebuie să le cunoașteți despre un șablon gata făcut (rețineți că acest lucru vă va ajuta să deschideți toate dezavantajele oricărui design).

Permiteți-mi să vă reamintesc încă o dată că acest articol face parte dintr-o serie și cel mai bine ar fi să începeți să învățați stilul de marcare de la început, și anume, cu un articol despre ce este CSS și cu ce se mănâncă, ei bine, apoi urmați în ordinea dată în referință. Deși, în orice caz, depinde de tine, dar acum să vorbim despre setarea fundalului.

Culoare, culoare de fundal și imagine de fundal

Să vedem mai întâi cum este setată culoarea elementelor HTML Reguli de culoare CSS... De fapt, totul este simplu aici. Sintaxa este complet normală și puteți seta culoarea în conformitate cu modul în care a fost făcută în limbajul de marcare hipertext. După cum vă amintiți, plasat după semnul hash (hash - "# fe35a3"), sau folosind trei cifre, dacă prima se potrivește cu valoarea celei de-a doua, a treia cu a patra, bine și, respectiv, a cincea cu a șasea (codul de culoare „# aa33ff” poate fi prescurtat ca „a3f”).

De asemenea, culorile din codul Html și Css pot fi reprezentate ca cuvinte (de exemplu, „roșu”), dar cel mai des este folosit codul hexazecimal:

Culoare: # 303

De exemplu, am colorat acest mic paragraf în aceeași culoare ca mai sus (# 303). Acum este ușor diferită de culoarea tuturor celorlalte paragrafe (mai închisă), care este setată ca # 555 în fișierul CSS al temei WordPress pe care o folosesc. Dar setarea culorii prin culoare este destul de simplă, dar cu fundalul va fi puțin mai complicat.

Asa de, pentru fundal în css există cinci reguli care, dacă se dorește, pot fi combinate într-o singură echipă. Pentru a le vedea, puteți accesa pagina cu specificațiile actuale a consorțiului W3C și căutați acolo orice cu cuvântul Background:

1. culoare de fundal - această regulă setează culoarea de fundal pentru orice element HTML. În ea, puteți utiliza fie codul, fie numele nuanței, adică. totul este exact cum era atunci când folosea culoarea.

imagine de fundal - cu ea puteți folosi o imagine ca fundal (dar asigurați-vă că citiți despre asta, deoarece imaginile grele vor încetini încărcarea paginii), calea către care va fi specificată în funcționalitatea url ().

Dacă te uiți la specificații, vei vedea asta culoarea de fundal implicită orice element va avea transparent (valoarea implicită a regulii este „background-color: transparent”). Cu toate acestea, în elemente va fi netransparent în mod implicit, deoarece acestea sunt elemente de sistem și au totul diferit și diferit de etichetele obișnuite ale limbajului de marcare hipertext.

Culoarea în culoarea de fundal este setată ca standard (șase sau trei cifre ale unui cod hexazecimal sau un cuvânt):

Culoare de fundal: #FEFCDE

De exemplu, fundalul acestui paragraf este stabilit exact prin culoarea de fundal cu codul de culoare dat chiar mai sus.

Toate celelalte patru reguli CSS se vor aplica doar imaginii de fundal, care poate fi setată pentru orice element HTML și, dacă se dorește, poate fi poziționată cu precizie. Ce fișier grafic va fi utilizat poate fi setat folosind imagine de fundal.

Dacă vă uitați la specificația limbajului de marcare a stilului, veți vedea că imaginea de fundal implicită este „niciuna” (adică nu este folosită nicio imagine de fundal). Ei bine, dacă mai aveți nevoie de el, atunci în url () funcțional trebuie să specificați calea către acesta:

Imagine de fundal: url (https: //site/image/comment_top_focus.gif);

De exemplu, pentru acest paragraf am folosit un fișier grafic cu un fundal, a cărui cale este descrisă chiar mai sus. Puteți vedea că întreaga zonă alocată acestui paragraf este acoperită cu o imagine care se repetă, care în original arată astfel:

Acestea. atunci când se utilizează o singură regulă de imagine de fundal care indică calea către fișierul grafic, chiar această imagine va fi înmulțită atât pe verticală, cât și pe orizontală până când acoperă întreaga zonă alocată pe pagina web pentru acest element HTML special (în exemplul nostru, a fost un paragraf). De ce se întâmplă asta?

Background-repeat - repeta imaginea de fundal

Da, pentru că nu am scris nicio valoare pentru regula CSS. fundal-repetare, ceea ce înseamnă că valoarea implicită va fi utilizată pentru aceasta. Privind specificația, aflăm că această valoare corespunde „repeat” (repetarea imaginii de-a lungul tuturor axelor). Răspunsul a venit de la sine.

Prin urmare, cu background-repeat putem gestionați repetițiile imaginii de fundal... Această regulă poate avea doar patru valori:




Background-position - poziționarea fundalului

Acum apare întrebarea dacă este posibil să mutați imaginea de fundal departe de colțul din stânga sus al zonei limitând dimensiunea elementului. Desigur că poți, iar în acest scop există o regulă separată fundal-poziție:



Privind specificația CSS, devine clar de ce imaginea implicită de fundal este amplasată exact în marginea din stânga sus a zonei elementului HTML. Deoarece valoarea „0% 0%” este implicită pentru regula poziției de fundal.

Ei bine, atunci când această regulă nu este specificată în mod explicit pentru un element (ca în cazul nostru), atunci browserul selectează valoarea care este acceptată în specificație în mod implicit (rețineți că axele de coordonate în CSS sunt raportate doar din marginea din stânga sus a elementul zonă).

Se poate vedea, de asemenea, din specificație că atât valorile relative (procente) cât și valorile absolute (de exemplu) pot fi utilizate pentru a poziționa imaginea de fundal folosind fundal-position. Ei bine, puteți folosi și cuvinte care vor corespunde anumitor valori numerice. Dar mai întâi lucrurile.

Când setați poziționarea imaginii de fundal folosind unități absoluteîn poziția de fundal are loc următorul principiu de determinare a poziției sale finale:

Acestea. browserul va calcula offset-urile specificate de-a lungul axelor X și Y de la originea zonei în care este poziționat obiectul până la originea acestei imagini. De exemplu, în acest paragraf, am poziționat imaginea de fundal în termeni de poziție de fundal folosind următoarele reguli CSS:

Imagine de fundal: url (https: //site/image/logo.png); background-repeat: fără repetare; fundal-poziție: 400px 25px;

Vă rugăm să rețineți că în acest caz va fi aliniat la centrul ferestrei de vizualizare și nu la centrul zonei alocate acestor paragrafe. Este clar că, în realitate, o astfel de aranjare a imaginii de fundal este puțin probabil să găsească aplicație.

Cu toate acestea, dacă setați o poziție fixă ​​de fundal pentru elemente precum Body sau Html (adică în etichete care acoperă întreaga pagină web), atunci această imagine va fi întotdeauna vizibilă în fereastra de vizualizare și exact aceasta este proprietatea CSS de atașament de fundal. se găsește în aspect modern bloc.

Mai sunt ceva regulă prefabricată Context, care vă permite să combinați toate cele cinci reguli descrise mai sus într-o sticlă. Mai mult, valorile pentru toate cele cinci din versiunea prefabricată pot fi folosite în orice ordine și în orice cantitate (sunt unice și browserul nu le va confunda între ele). Orice lucru pe care nu îl specificați în mod explicit, browserul va considera egal cu valoarea implicită.

Png) fără repetare 50%;

Regula de asamblare prezentată în exemplu este aplicată acestui paragraf pentru claritate. Sa dovedit că nu este frumos, dar acesta nu este principalul lucru. Pentru acest paragraf, se folosește o umplere ciudată de fundal galben, precum și o imagine a siglei LiveInternet, aliniată la centrul paragrafului. pentru că nu este specificată nicio valoare pentru regula de atașare în fundal, apoi este utilizată valoarea implicită de defilare.

Dacă pentru un element doriți să setați doar o umplere cu culoare și nu vă deranjați cu imaginea de fundal, atunci puteți în loc de:

Culoare de fundal: #FEFCDE

scrie:

Context: #FEFCDE

Pentru toate celelalte valori ale regulii combinate vor fi luate în mod implicit și asta este ceea ce aveai nevoie.

Multă baftă! Ne vedem curând pe paginile site-ului blogului

puteți viziona mai multe videoclipuri accesând

");">


S-ar putea să fiți interesat

Stilul listei (tip, imagine, pozitie) - reguli Css pentru personalizarea aspectului listelor in cod HTML Cum să configurați culoarea de fundal alternativă a rândurilor de tabele, liste și alte elemente HTML pe un site folosind pseudoclasa a nth-child
Poziție (absolută, relativă și fixă) - moduri de poziționare a elementelor HTML în CSS (reguli stânga, dreapta, sus și jos)
Float și clar în CSS - instrumente de aspect bloc
Poziționarea cu indexul Z și regula cursorului CSS pentru a schimba cursorul mouse-ului