Setarea culorii de fundal și/sau a imaginii pentru o pagină sau elementul ei individual este destul de simplă. Principalul lucru este să știți unde și cum se poate face acest lucru, precum și să aveți un cod de culoare și/sau o imagine de fundal. Este posibil să înveți multe din acest articol, dar l-am creat special pentru începători. Prin urmare, totul va fi cât mai scurt și detaliat în același timp. Principalul lucru este că veți obține nu numai o idee generală și exemple gata făcute, ci și o înțelegere a modului de a crea un fundal în HTML.

Pentru a seta fundalul în HTML, utilizați un DOCTYPE intermediar

Și voi începe cu faptul că în HTML5 nu ai cum sa intrebi. S-a decis mutarea acestei funcții în CSS. Prin urmare, dacă intenționați să utilizați cele menționate mai jos și doriți să obțineți un cod valid (corect), trebuie să vă opriți la tipul de document tranzitoriu. Pentru a face acest lucru, pagina dvs. web trebuie să înceapă cu următoarea linie:

Tranzitorie// RO "" http://www.w3.org/TR/html4/loose.dtd ">

Acum că ne-am dat seama, să trecem la înțelegerea modului în care este creat fundalul. Și primul lucru de remarcat aici este diferența dintre culoare de fundalși imagine de fundal... La început merge culoare de fundal, care umple tot spațiul disponibil al paginii sau al elementului acesteia. Suprapus peste ea este o repetare imagine de fundal... Vizual, acest lucru poate fi reprezentat după cum urmează:

Fundalul unui document HTML și elementele acestuia

Al doilea lucru pe care trebuie să-l știi este diferența dintre documentul corpuluiși element de document. Corpul documentului notat în codul HTML al paginii web prin eticheta BODY, care include întregul conținut al paginii web. Evident, fundalul corpului documentului nu poate fi transparent. Dacă fundalul corpului documentului nu este specificat, se utilizează valoarea implicită setată în setările browserului.

Elementele paginii sunt în interiorul etichetei BODY. Este de remarcat faptul că nu este posibil să setați o culoare și/sau o imagine de fundal folosind HTML pentru toate elementele documentului. De exemplu, o imagine de fundal poate fi specificată numai pentru tabele. În mod implicit, acestea au de obicei un fundal transparent.

Atributul Bgcolor pentru a crea culoarea de fundal

A întreba culoare de fundal documentul sau elementele sale folosesc atributul bgcolor, de exemplu:

În acest caz, setăm culoarea de fundal pentru întreaga pagină. Și iată un exemplu despre cum să setați culoarea de fundal pentru un tabel, în eticheta TABLE:

Este de remarcat faptul că culoarea de fundal din tabel poate fi specificată pentru ambele rânduri din eticheta TR și pentru celulele acestora din eticheta TD.

Cum aflu codul de culoare?

Probabil ați observat deja că culoarea în HTML este setată la o culoare specială. cod, de exemplu: # ec008c. Pentru a afla codul culorii de care ai nevoie, poti folosi unul dintre editorii grafici. De exemplu, în Photoshop puteți folosi „ Instrument cu pipetă»(Pipetă) pentru a obține culoarea dintr-un punct din imagine. Apoi, trebuie să faceți clic pe culoarea rezultată pe bara de instrumente și în fereastra deschisă " Selector de culoare»(Selectarea culorii) copiați codul de culoare.

Vă atrag atenția că acest cod va fi fără semnul lire sterline (#) la început, acest semn va trebui adăugat manual.

De asemenea, puteți utiliza numeroase servicii online, de exemplu:

• etc.

Principiul lor de funcționare este și mai simplu - dați clic pe culoarea dorită și obțineți codul acesteia.

Atribut de fundal pentru a crea o imagine de fundal

Ca și în cazul culorii de fundal și în cazul imagine de fundal Trebuie să utilizați un atribut special, și anume fundal, de exemplu:

În acest caz, setăm imaginea de fundal pentru întreaga pagină. Este de remarcat faptul că, din cauza limitării dimensiunii imaginii, se va repeta, de exemplu:

După cum puteți vedea, la repetare, tranziția dintre imagini este vizibilă. Prin urmare, sunt adesea folosite imagini speciale, unde acest moment este luat în considerare.

Și iată un exemplu despre cum să setați imaginea de fundal pentru un tabel, în eticheta TABLE:

Este de remarcat faptul că imaginea de fundal poate fi setată numai pentru tabel ca întreg și/sau pentru celula sa individuală. Acest lucru nu va funcționa pentru un șir.

Calea absolută și relativă către imaginea de fundal

Merită să i se acorde o atenție deosebită adresa imaginii de fundal... În acest caz, se utilizează calea relativă către imagine, adică adresa este specificată în raport cu locația fișierului imagine în fișierul paginii web. Această opțiune nu poate fi numită deosebit de reușită. Cel mai bine este să folosiți o cale absolută către imagine, de exemplu. URL-ul său complet, De exemplu:

În acest caz, nu veți avea probleme însoțitoare. Puteți citi mai multe despre asta.

Să rezumam

Utilizarea atributelor bgcolor și background este învechită, așa că trebuie să utilizați DOCTYPE tranzitoriu pentru ca codul HTML să fie valid. Pentru a seta culoarea de fundal în HTML, folosește coduri speciale pe care le poți afla într-un editor grafic sau folosind servicii online speciale. Imaginea de fundal este duplicată pe culoarele zonei alocate acesteia și se suprapune cu culoarea de fundal. Este mai bine să utilizați adresa URL completă pentru a specifica imaginea de fundal. Asta e tot pentru mine. Vă mulțumim pentru atenție. Noroc!

Aproape fiecare site popular are un aspect frumos. În designul site-ului, o parte importantă este fundalul, care se mai numește și fundal, pe care fiecare dintre noi îl poate crea sau schimba. În acest articol vă voi spune cum să puneți un fundal pe site.

Crearea unui nou fundal pentru site-uri

Pentru a finaliza sarcina, puteți utiliza una dintre cele 4 metode:

• 1. Fundal cu o singură culoare
• 2. Fundal cu textură
• 3. Fundal cu un gradient
• 4. Fundal dintr-o imagine mare

Cum se creează un fundal cu o singură culoare

Pentru a crea sau modifica fundalul site-ului, care constă dintr-o singură culoare, trebuie să mergeți la fișier stil.css, în care să găsiți valoarea - corp (este responsabil pentru corpul principal al site-ului). Acum trebuie să înregistrați funcția de culoare de fundal dacă nu a existat și să specificați codul de culoare. În cazul în care trebuie să creați un fundal alb pentru un site web, va trebui să scrieți următorul cod:

culoare de fundal: # 83C5E9; (fond albastru, ca în exemplu)

Puteți găsi o listă completă de culori pe site - (STM). Pentru a schimba culoarea, schimbați doar valoarea după două puncte și bucurați-vă de munca dvs.

Crearea unui fundal cu o textură

Această metodă este deosebit de populară recent, deoarece vă permite să creați un fundal frumos pentru site. Texturile pot fi simple, dar foarte frumoase, motiv pentru care sunt adesea folosite. Pentru a conecta orice textură, trebuie să o încărcați în folderul de imagini de pe găzduirea unde este instalat site-ul dvs. După aceea, ar trebui să scrieți următorul cod:

culoare de fundal: # 537759;

imagine de fundal: url (imagini / pattern.png);

Acest cod conține parametrul familiar pentru menținerea culorii (este verde) și un element care este responsabil pentru conectarea texturii verde.

Cum să faci fundalul folosind un gradient

Orice imagine care este conectată folosind funcții css poate fi repetată, atât pe orizontală, cât și pe verticală (de-a lungul axelor Xși Y). Această oportunitate ne permite să creăm orice fundal simplu pentru site cu propriile noastre mâini. Pentru a face acest lucru, trebuie să creați un gradient de 1 megapixel (vezi imaginea de mai jos), să îl salvați ca imagine și să îl încărcați pe găzduire. După aceea, puteți scrie codul necesar, și anume:

culoare de fundal: # 83C5E9;

imagine de fundal: url (imagini / gradient.jpg);

background-repeat: repetare-x;

În acest set, la rândul său, există o funcție care este responsabilă pentru culoarea de fundal pe care o folosim pentru reasigurare. După aceea, parametrul care este responsabil pentru conectarea gradientului și, în sfârșit, funcția care este responsabilă pentru repetarea gradientului de-a lungul axei X.

Folosind o imagine de ansamblu pentru fundalul site-ului

Această metodă este a doua cea mai populară, deoarece vă permite să utilizați diferite imagini pentru a crea fundalul. Pentru a implementa această metodă, trebuie doar să încărcați o imagine mare în folderul cu imaginile site-ului și să scrieți următorul cod:

culoare de fundal: # 000000;

imagine de fundal: url (imagini / nume imagine.jpg);

fundal-poziție: centru sus;

background-repeat: fără repetare;

Dacă totul este clar cu primii doi parametri, atunci ultimii doi trebuie evidențiați. A treia funcție vă permite să fixați imaginea în centrul site-ului, iar ultimul parametru blochează repetarea acesteia în întreaga structură a paginii.

Schimbați fundalul pe site-urile ucoz

Acele metode de creare a unui fundal pentru un site pot fi utilizate pe diferite sisteme de management al site-urilor, dar nu și pe site-uri - ucoz. Pentru a schimba fundalul site-ului ucoz, trebuie să accesați panoul de control al site-ului, accesați „Managementul designului” si apoi in „Editarea șabloanelor”.

Acum trebuie să deschideți Foaia de stil (CSS), găsiți linia "Corp"și parametru "Fundal"... După aceea, trebuie să copiați linkul, să îl inserați în browserul de internet și veți avea acces la imaginea care a fost în fundal.

Pentru a utiliza un fundal nou, trebuie doar să-l încărcați în Managerul de fișiere. În același timp, asigurați-vă că numele noii imagini pentru fundal este același ca înainte de schimbare. Salvați-vă munca și accesați site-ul pentru a vedea lucrările efectuate.

Schimbați fundalul site-ului în HTML

Dacă doriți să faceți fundalul pe site-ul html folosind o imagine, atunci trebuie doar să introduceți linia din cod:

Și dacă doriți să faceți fundalul site-ului folosind culoare, atunci linia ar trebui să arate astfel:

Aceasta încheie povestea noastră. Acum știi cum să faci un fundal pentru un site web. Proiecte fericite!

Orice cameră va arăta mult mai bine dacă este acoperită cu covor persan scump. Deci de ce site-ul tău este mai rău? Poate că este timpul să-i „acoperim” podeaua cu un covor scump, elegant, lucrat manual. Să aruncăm o privire mai atentă asupra modului de a crea un fundal pentru un site web:

Fundal pentru site

Se întâmplă că vechiul design al site-ului este deja plictisitor. Și vreau ceva nou și gustos. Și noul design va fi așa dacă îl gătești singur.

Dar schimbarea întregului design al unei resurse este un lucru ingrat. Și nu toată lumea are mâinile „ascuțite” corespunzător pentru acest caz. Prin urmare, cel mai simplu mod de a reîmprospăta un șablon vechi este de a schimba culoarea de fundal a activului sau imaginea de fundal a acestuia.

Există mai multe moduri de a schimba fundalul pe site. Pentru aceasta, sunt folosite capabilitățile CSS sau html. Dar multe dintre proprietățile pentru lucrul cu fundal au același nume și metodă de aplicare în aceste tehnologii web.

Fundaluri de bază în html

Mai multe elemente pot fi folosite ca fundal:

• Culoare;
• Imagine de fundal;
• Imagine cu textură.

Să ne dăm seama cum să le folosim pe fiecare dintre ele mai detaliat.

Pentru a seta culoarea de fundal pentru site, utilizați proprietatea background-color a atributului style. Adică, pentru a seta culoarea principală pentru o pagină web, trebuie să o scrieți în interiorul etichetei ... De exemplu:

Fundalul site-ului # 55D52B

Pe lângă codul de culoare hexazecimal, este acceptat un cuvânt cheie sau o valoare RGB. Exemple:

Fundal rgb pentru site-ul web (23,113,44)

Fondul site-ului verde

Setarea culorii de fundal folosind cuvinte cheie are o serie de limitări în comparație cu celelalte două metode.

Există doar 16 cuvinte cheie color acceptate în html. Iată câteva dintre ele: alb, rosu, albastru, negru, galben alte.

Prin urmare, pentru a seta fundalul pentru site-ul html, este mai bine să utilizați formatul hexazecimal sau RGB.

Pe lângă alegerea unei culori, sunt disponibile și alte opțiuni de personalizare. Setarea proprietății background-color la transparent face ca fundalul paginii să fie transparent. Aceasta este valoarea implicită pentru această proprietate.

Acum să luăm în considerare posibilitățile limbajului hipertext pentru setarea imaginii de fundal pentru site. Acest lucru se poate face folosind proprietatea imagine de fundal.

După cum puteți vedea din cod, imaginea este legată de calea URL specificată în paranteze. Dar nu toate imaginile sunt suficient de mari pentru a umple întreaga zonă a ecranului. Să vedem cum va fi afișată imaginea mai mică.

Să presupunem că dezvoltăm un site web despre poezie și dorim să folosim imaginea lui Pegas ca fundal. Calul înaripat va personifica libertatea gândirii creatoare a poetului!

Dorim ca imaginea să apară în mijlocul ecranului o dată. Dar, din păcate, browserul nu înțelege dorințele noastre înalte. Și afișează o imagine mai mică pentru fundalul site-ului de câte ori poate găzdui zona ecranului:

Probabil, patru cai zâmbitori cu aripi pentru poeți vor fi prea mulți pentru inspirație. Prin urmare, interzicem clonarea Pegasului nostru. Facem acest lucru folosind proprietatea background-repeat. Valori posibile:

• repeat-x - repetă imaginea de fundal pe orizontală;
• repetă-y - pe verticală;
• repetă - pe ambele axe;
• no-repeat - repetarea este interzisă.

Dintre opțiunile enumerate, ne interesează ultima. Înainte de a schimba fundalul site-ului, îl folosim în codul nostru:

Dar, bineînțeles, ar fi mai bine dacă fluturașul nostru s-ar afla în mijlocul ecranului. Proprietatea background-position este concepută pentru a poziționa imaginea de fundal pe pagină. Există mai multe moduri de a seta coordonatele locației:

• Cuvântul cheie ( sus, jos, centru, stânga, dreapta);
• Procent - numărând din colțul din stânga sus;
• În unități de măsură (pixeli).

Să folosim cea mai simplă opțiune de centrare:

Se întâmplă că trebuie să remediați poziția imaginii în timp ce derulați. Prin urmare, înainte de a face o imagine pe fundalul site-ului, utilizați proprietatea specială fundal-atașament. Valori acceptate de acesta:

• sul;


• fix.

Avem nevoie de ultima valoare. Acum codul nostru exemplu va arăta astfel:

Textura de fundal a site-ului web

În primul exemplu, am folosit un peisaj deșert mare și frumos pentru fundal. Dar pentru o asemenea frumusețe trebuie să plătești integral. Greutatea unei imagini realizate la calitate înaltă poate ajunge la câțiva megaocteți.

Acest volum nu afectează în niciun fel viteza de încărcare a paginii de către browserul cu o conexiune la Internet de mare viteză. Dar ce se întâmplă cu internetul mobil, atunci când îl folosești, va dura mult timp pentru a descărca mai mulți „metri”?

Toate aceste probleme sunt rezolvate folosind un fundal texturat. Utilizează o imagine mică ca model de textură. Chiar dacă se repetă de mai multe ori, desenul este încărcat o singură dată.

Pentru a crea un fundal întunecat pentru site, accesați Photoshop, creați o imagine sub forma unei benzi de 1200 de pixeli lungime și 15 pixeli lățime. Apoi aplicați un gradient alb-negru simplu și adăugați textura rezultată pe pagina site-ului:

Instrumente CSS

Toate proprietățile descrise mai sus se aplică și foilor de stil în cascadă. Să creăm un fundal de site CSS prin rescrierea unuia dintre exemplele noastre anterioare.

Mulți designeri de layout începători care tocmai intră în esența creării site-urilor web se întreabă adesea cum să creeze o imagine de fundal în html. Și dacă unii își pot da seama de această sarcină, atunci apar aceleași probleme în timpul întinderii imaginii pe toată lățimea monitorului. În același timp, aș dori ca site-ul să fie afișat la fel pe toate browserele, deci trebuie îndeplinită cerința de cross-browser. Puteți seta fundalul în două moduri: folosind și stilul CSS. Fiecare alege cea mai bună opțiune pentru sine. Desigur, stilul CSS este mult mai convenabil, deoarece codul său este stocat într-un fișier separat și nu ocupă coloane suplimentare în etichetele principale ale site-ului, dar mai întâi să luăm în considerare o metodă simplă de a seta o imagine pe fundalul Site-ul.

Etichete HTML de bază pentru crearea unui fundal

Deci, să trecem la întrebarea, fundalul în html este ecran complet. Pentru ca site-ul să arate frumos, trebuie să înțelegeți un detaliu destul de important: trebuie doar să faceți un fundal gradient sau să-l pictați cu o culoare solidă, dar dacă trebuie să inserați o imagine în fundal, aceasta nu se va întinde. pe toată lățimea monitorului. Inițial, trebuie să selectați o imagine sau să faceți singur un design cu o astfel de extensie, în care veți afișa pagina site-ului. Abia după ce imaginea de fundal este gata, mutați-o într-un folder numit „Imagini”. În el vom stoca toate imaginile, animațiile și alte fișiere grafice folosite. Acest folder ar trebui să fie în directorul rădăcină cu toate fișierele dvs. html. Acum poți merge la cod. Există mai multe opțiuni pentru scrierea unui cod cu care fundalul se va schimba într-o imagine.

1. Scrieți eticheta de atribut.
2. Prin stilul CSS în cod HTML.
3. Scrieți stilul CSS într-un fișier separat.

Depinde de tine cum să faci din fundal o imagine în HTML, dar aș dori să spun câteva cuvinte despre cum ar fi cea mai optimă. Prima metodă prin scrierea prin atributul tag a fost demult depreciată. A doua opțiune este folosită în cazuri foarte rare, doar pentru că se obține o mulțime din același cod. Și a treia opțiune este cea mai comună și eficientă. Iată exemple HTML de etichete:

1. Prima modalitate de a scrie este prin atributul etichetei (body) din fișierul index.htm. Este scris astfel: (body background = "Folder_name / Image_name.extension") (/ body). Adică, dacă avem o poză cu numele „Imagine” și extensia JPG și am numit folderul „Imagini”, atunci codul HTML va arăta astfel: (fundalul corpului = „Imagini / Poză.jpg”) ... (/ corp) ...
2. A doua metodă de scriere afectează stilul CSS, dar este scrisă în același fișier numit index.htm. (style body = „background: url (" ../ Images / Picture.jpg ")").
3. Iar a treia modalitate de înregistrare se face în două fișiere. Într-un document numit index.htm este scrisă următoarea linie: (head) (link rel = "stylesheet" type = "text / css" href = "CSS_file_path") (/ head). Și în fișierul de stil numit style.css scriem deja: body (fond: url (Imagini / Imagine.jpg ")).

Ne-am dat seama cum să facem un fundal o imagine în HTML. Acum trebuie să vă dați seama cum să întindeți imaginea la lățimea întregului ecran.

Modalități de a întinde imaginea de fundal la lățimea ferestrei

Să ne imaginăm ecranul ca procent. Se pare că întreaga lățime și lungime a ecranului va fi 100% x 100%. Trebuie să întindem imaginea la această lățime. Adăugați o linie la intrarea de imagine din fișierul style.css, care va întinde imaginea pe toată lățimea și lungimea monitorului. Cum este scris asta în stil CSS? Este atat de simplu!

fundal: url (Imagini / Imagine.jpg ")

dimensiunea fundalului: 100%; / * aceasta va funcționa pentru majoritatea browserelor moderne * /

Așa că ne-am dat seama cum să facem o imagine de fundal în html pe ecran complet. Există, de asemenea, o modalitate de a scrie în fișierul index.htm. Deși această metodă este depășită, este necesar ca începătorii să o cunoască și să o înțeleagă. În eticheta (head) (style) div (background-size: cover;) (/ style) (/ head), această intrare înseamnă că selectăm un bloc special pentru fundal, care va fi poziționat pe toată lățimea fereastră. Am analizat 2 moduri de a face din fundalul unui site web o imagine html, astfel încât imaginea să se întindă pe toată lățimea ecranului în oricare dintre browserele moderne.

Cum să faci un fundal fix

Dacă decideți să utilizați o imagine ca fundal al unei viitoare resurse web, atunci trebuie doar să învățați cum să o faceți nemișcată, astfel încât să nu se întindă în lungime și să nu strice aspectul estetic. Este destul de ușor să prescrii acest mic adaos cu ajutorul. Trebuie să adăugați o frază în fișierul style.css după fundal: url (Imagini / Imagine.jpg ") fix; sau adăugați o linie separată după punct și virgulă - poziție: fix. Astfel, imaginea de fundal va deveni fixă. prin conținutul de pe site, vei vedea că liniile de text se mișcă, dar fundalul rămâne pe loc Așa că ai învățat cum să faci din fundal o imagine în html în mai multe moduri.

Lucrul cu un tabel în HTML

Mulți dezvoltatori web fără experiență, când se confruntă cu tabele și blocuri, adesea nu înțeleg cum să facă o imagine pe fundalul unui tabel în html. Ca orice și stilul CSS, acest limbaj de programare web este destul de simplu. Și soluția la această problemă ar fi să scrieți câteva linii de cod. Ar trebui să știți deja că ortografia rândurilor și coloanelor din tabel se notează ca etichete (tr) și, respectiv, (td). Pentru a face fundalul tabelului sub forma unei imagini, trebuie să adăugați o frază simplă la etichetă (tabel), (tr) sau (td) cu un link către imagine: fundal = URL-ul imaginii. Pentru claritate, iată câteva exemple.

Tabele cu o imagine în loc de fundal: exemple HTML

Să desenăm un tabel 2x3 și să facem din el imaginea de fundal salvată în folderul „Imagini”: (fondul tabelului = „Imagini / Imagine.jpg”) (tr) (td) 1 (/ td) (td) 2 (/ td) (td) 3) (/ td) (/ tr) (tr) (td) 4 (/ td) (td) 5 (/ td) (td) 6 (/ td) (/ tr) (/ tabel). Acest lucru va umple tabelul nostru cu fundalul imaginii.

Acum să desenăm aceeași placă de 2x3, dar introduceți imaginea în coloanele numerotate 1, 4, 5 și 6. (tabel) (tr) (td fundal = „Imagini / Imagine.jpg”) 1 (/ td) (td) 2 (/ td) (td) 3 (/ td) (/ tr) (tr) (td fundal = „Imagini / Picture.jpg”) 4 (/ td) (td fundal = „Imagini / Imagine.jpg”) 5 ( / td) (td background = „Imagini / Imagine.jpg”) 6 (/ td) (/ tr) (/ tabel). După vizualizare, vedem că fundalul apare doar în acele celule în care ne-am înregistrat, și nu în întregul tabel.

Site cross-browser

Există, de asemenea, o resursă web între browsere. Aceasta înseamnă că paginile site-ului vor fi afișate la fel de corect în diferite tipuri și versiuni de browsere. În același timp, trebuie să personalizați codul HTML și stilul CSS pentru browserele necesare. În plus, în epoca modernă a dezvoltării smartphone-urilor, mulți dezvoltatori web încearcă să creeze site-uri care sunt adaptate atât pentru versiunile mobile, cât și pentru vizualizarea computerului.

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 cu 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
}