Cum se face un fundal pe site folosind html și css

Bună ziua, cititorul meu!

Un covor frumos este capabil să decoreze orice cameră, chiar și cea mai absurdă. Resursa dvs. web este aceeași cameră. Dacă faceți un design interesant, puteți atrage un număr mare de vizitatori. Astăzi vă voi spune cum să faceți un fundal pe site.

Din experiența mea pot spune că uneori designul deranjează. Vreau ceva nou și interesant. Cea mai ușoară modalitate de a actualiza un șablon vechi este de a schimba culoarea proprietății web.

Puteți modifica designul cu html sau CSS. Cine nu știe, acestea sunt limbile și stilurile de bază de marcare, sunt folosite pentru a dezvolta pagini web de site-uri.

HTML (HyperText Markup Language) în traducere literală înseamnă "limbaj de markup hipertext", toate comenzile sale sunt interpretate de browsere și afișate pe ecran într-o formă ușor de utilizat.

CSS (Cascading Style Sheets) este un limbaj formal care descrie designul extern al unui document scris folosind limba de marcare. Practic, este folosit pentru a descrie și proiecta aspectul paginilor de Internet care au fost scrise folosind HTML.

Există multe în comun între cele două limbi, și anume nume de comandă similare și metode de utilizare. Dar html este materialul de construcție pentru o resursă web, iar CSS este cu care se confruntă.

Context în html

Urmatoarele elemente pot fi folosite ca fundal in html:

culoare;
Imagine de fundal;
Texture imagine;

Acum, să vorbim despre fiecare dintre aceste elemente în detaliu.

Pentru a seta culoarea de fundal, trebuie să utilizați o proprietate numită culoarea de fundal a etichetei de stil.

În culoarea Ntml puteți seta:

Sub forma a 3 perechi de numere de 16 cifre, fiecare dintre acestea fiind responsabil pentru componenta de culoare (roșu, verde, albastru). Pentru a face mai clară, amintiți-vă copilăria: este ca și cum ați amesteca culorile acuarelor, de exemplu, albastru + galben = verde, și în funcție de numărul fiecăruia veți obține o nouă nuanță. Deci, aici sunt numere de 16 cifre și se determină valoarea fiecărei culori.
Cuvinte cheie (verde, galben, etc.). În acest caz, vă recomandăm să utilizați numai culorile primare, deoarece numele nuanțelor pe care browserul nu le poate recunoaște.
În formatul rgb (*, *, *), unde fulgul de zăpadă este un număr de la 0 la 255. La fel ca în primul caz, specificați cantitatea unei anumite culori (roșu, verde, albastru) pentru a obține rezultatul dorit.
Recent, rgba (*, *, *, *) a devenit posibilă, în cazul în care primele cifre, ca în cazul precedent, reprezintă valoarea acestei sau acelei culori, iar ultima este nivelul de opacitate, care este determinat de un număr de la 0 la 1.

Pentru a obține un fundal transparent, setați proprietatea culorii de fundal la transparent.

Imagine de fundal

Și acum, să vedem ce caracteristici se deschide limba hipertext pentru a seta o imagine de fundal. Puteți face acest lucru cu proprietatea imaginii de fundal.

Deoarece nu toate desenele sunt mari, uneori trebuie să-l întindeți pe tot ecranul. Să presupunem că doriți ca modelul să fie reflectat în mijloc și doar o singură dată. Cu toate acestea, browserul, în loc de o imagine mare, afișează un număr mare de mici care umple întregul ecran.

Cum pot face acest lucru dacă modelul nu este cauciuc? Este foarte simplu! Dezactivați clonarea utilizând repetarea fundalului. Valorile valide pentru această proprietate sunt:

interzicerea repetării - fără repetare;
pe ambele axe - repetați;
vertical - repeta-y;
repetarea imaginii de fundal pe orizontală - repetare-x.

După cum ați ghicit, prima opțiune este importantă pentru dvs.

Desigur, este mai bine să ai desenul în mijloc. De asta există o proprietate ca poziția de fundal. Puteți specifica coordonatele în următoarele moduri:

În unele cazuri, o derulare a paginii necesită o poziție fixă a imaginii. Un fond fix al unei resurse web va ajuta la crearea unei proprietăți de atașament de fundal. Este nevoie de o valoare fixă sau de defilare. Pentru a corecta imaginea, utilizați prima valoare.

Textură fundal

Imaginile executate cu o înaltă calitate afectează viteza de descărcare a unei resurse web. Dar pe un computer, în cazul unei conexiuni on-line de mare viteză, acest lucru nu este atât de vizibil pentru utilizator ca pe dispozitivele mobile, unde astfel de pagini vor fi descărcate mult timp.

Un fundal textural în care o imagine mică este aplicată ca o cartografiere a texturilor va ajuta la rezolvarea acestei probleme. Imaginea este încărcată o singură dată, chiar și în cazul repetării repetate. Cum se face acest lucru este clar din exemplul anterior.

Instrumente CSS

Proprietățile de mai sus sunt, de asemenea, potrivite pentru tabele cascading stil (CSS). Pentru a crea un design de resurse web folosind CSS, este suficient să folosiți comenzile acelor exemple pe care le-am menționat mai sus. Rezultatul va fi același.

Cu CSS, puteți crea un fundal adaptiv care va fi afișat corect pe orice dispozitiv cu o expansiune diferită a ecranului.

Pentru stilurile CSS, se creează de obicei un fișier separat. Această opțiune este convenabilă, deoarece nu trebuie să scrieți în mod constant stiluri în fiecare document html.

Cu credincioșie! Abdullin Ruslan

Articole similare

Pagina anterioară