Cu ajutor Culoare și fundal CSSÎl puteți atribui aproape oricărui element al unei pagini web, puteți controla liber imaginea de fundal și 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 mergem prea departe deocamdată, să mergem în ordine.

proprietate COLOR

Această proprietate specifică culoarea elementului sau, 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ă o valoare nu este setată pentru niciun element, valoarea este moștenită de la strămoșul său. Dar se poate întâmpla ca nici pentru strămoș să nu fie setat - atunci foaia de stil a browserului va fi aplicată folosind valorile implicite. Culoarea elementului în acest caz va fi cel mai probabil neagră.

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

Să ne uităm la un exemplu de setare a culorii textului folosind CSS:

h1 (culoare: albastru)

În acest exemplu, toate titlurile de primul nivel ale paginii web vor fi albastre:

puternic (culoare: roșu)

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

O poti scrie asa:

h1, p, puternic (culoare: verde)

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

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

class="Albastru" > Culoarea antetului acestei clase va fi albastru

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

h1.Albastru (culoare: albastru)

În documentele HTML, se folosesc și selectori după identificator, ei sunt determinati de atribut id. Un identificator este un atribut mai semnificativ sau mai prioritar decât o clasă. Și dacă atât o clasă, cât și un identificator sunt specificate pentru un element din codul HTML, atunci stilul de identificare va fi aplicat. Identificatorul este indicat printr-un semn hash ( # ). Pentru a utiliza identificatorul în codul HTML, va trebui să scrieți:

id="Albastru" > Culoarea antetului acestui ID va fi albastră

În foaia de stil pe rând:

h1#Albastru (culoare: albastru)

Proprietatea FUNDAL-CULOARE

Această proprietate vă permite să setați culoarea de fundal pentru pagina în întregime, un paragraf, un link sau, în general, pentru orice element HTML. Pentru a face acest lucru, valoarea proprietății specifică 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 antetului scriem:

h1 (culoare de fundal: galben)

Obținem un fundal galben pentru titlurile de primul nivel.

Culoare și fundal în CSS

Proprietatea BACKGROUND-REPEAT

Această proprietate este utilizată atunci când este setată pentru a determina dacă se va repeta pe orizontală și pe 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 acestui paragraf va fi deasupra imaginii de fundal, care va fi poziționată orizontal.

BACKGROUND-ATTACHMENT proprietate

Această proprietate este utilizată pentru a indica 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 ;
atașament de fundal: fix
}

În acest caz, imaginea de fundal va rămâne nemișcată.

Proprietatea BACKGROUND-POSITION

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

• Vertical:
• top- partea de sus a imaginii este aliniată la marginea de sus a paginii sau blocului;
• centru
• fund- partea de jos a imaginii este aliniată la marginea de jos a paginii sau a blocului.
• Orizontal:
• stânga- marginea stângă a imaginii este aliniată la marginea stângă a paginii sau blocului;
• centru- centrul imaginii este aliniat la centrul paginii sau blocului;
• dreapta- marginea dreaptă a imaginii este aliniată la 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ție de fundal: centru sus
}

Bună ziua, dragi cititori ai 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 de asemenea să menționăm regula compusă de fundal.

Nu este nimic complicat î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, ceea ce va ajuta la dezvăluirea tuturor dezavantajelor 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 studiul stilului de markup de la început, și anume cu un articol despre ce este CSS și cu ce este folosit, apoi urmați în ordinea dată. în cartea de 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 să setăm culoarea elementelor HTML folosind 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 coincide cu valoarea celei de-a doua, a treia cu a patra și, respectiv, a cincea cu a șasea ( codul de culoare „#aa33ff” poate fi scris pe scurt ca „a3f”).

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

Culoare:#303

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

Asa de, pentru fundal în Css Există cinci reguli care pot fi combinate într-una singură, dacă se dorește. Pentru a le vedea, puteți accesa pagina actuală de specificații W3C și căutați orice cu cuvântul Fundal:

1. culoare de fundal - folosind această regulă, setați culoarea de fundal pentru orice element HTML. Puteți utiliza fie un cod, fie numele nuanței, de exemplu. totul este exact la fel ca 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 ea, deoarece imaginile grele vor încetini încărcarea paginilor), calea către care va fi indicată în funcționalitatea url ().

Dacă te uiți la specificație, vei vedea asta culoarea de fundal implicită orice element va fi transparent (valoarea implicită a regulii este „background-color:transparent”). Adevărat, în elemente nu va fi transparent implicit, deoarece Acestea sunt elemente de sistem și totul despre ele este 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 de cod hexazecimal sau un cuvânt):

Culoare de fundal: #FEFCDE

De exemplu, fundalul acestui paragraf este specificat folosind background-color cu codul de culoare dat chiar mai sus.

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

Dacă vă uitați la specificația limbajului de marcare, veți vedea că imaginea de fundal este implicită la „niciuna” (adică, nu este folosită nicio imagine pentru fundal). Ei bine, dacă mai aveți nevoie de acest lucru, atunci în funcționalitatea url() va trebui să indicați calea către aceasta:

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. Vedeți 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ă imagine de fundal care indică calea către fișierul grafic, aceeași 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 specific (în exemplul nostru a fost un paragraf). De ce se întâmplă asta?

Background-repeat - repeta imaginea de fundal

Da, pentru că nu am specificat 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” (repetă imaginea pe toate axele). Răspunsul a venit firesc.

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




Background-position - poziționare de fundal

Acum apare întrebarea: 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 și există o regulă separată în acest scop. fundal-poziție:



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

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

De asemenea, din specificație reiese clar că pentru a poziționa imaginea de fundal folosind poziția de fundal, puteți utiliza atât valori relative (procente) cât și absolute (de exemplu, ). Ei bine, puteți folosi și cuvinte care vor corespunde anumitor valori digitale. Dar mai întâi lucrurile.

Când setați poziționarea imaginii de fundal folosind unități absoluteîn poziția de fundal, se utilizează următorul principiu pentru a determina poziția sa finală:

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 în sine. De exemplu, în acest paragraf am poziționat imaginea de fundal prin poziția de fundal folosind următoarele reguli CSS:

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

Vă rugăm să rețineți că în acest caz va fi aliniat la centrul zonei de vizualizare și nu la centrul zonei alocate acestor paragrafe. Este clar că, în realitate, o astfel de plasare a unei imagini de fundal este puțin probabil să fie utilizată.

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 și aceasta este tocmai utilizarea atașamentului de fundal CSS. proprietate în amenajare bloc modern.

Mai sunt ceva regulă prefabricată Context, care vă permite să combinați toate cele cinci reguli descrise mai sus într-o sticlă. În plus, valorile pentru toate cele cinci din versiunea combinată pot fi folosite în orice ordine și în orice cantitate (sunt unice și browserul nu le va confunda între ele). Orice ceea ce nu specificați în mod explicit va fi presupus de browser ca fiind valoarea implicită.

Png) fără repetare 50%;

Exemplul de regulă prefabricată este aplicată acestui paragraf pentru claritate. Nu a ieșit frumos, dar nu acesta este principalul lucru. Acest paragraf folosește o umplere ciudată de fundal galben și, de asemenea, folosește o imagine a siglei Liveinternet, aliniată la centrul paragrafului. Deoarece Dacă regulii de atașare de fundal nu i se dă nicio valoare, atunci se folosește valoarea de defilare (implicit).

Dacă pentru un element doriți să setați doar o umplere de culoare și să nu vă deranjați cu o imagine de fundal, atunci puteți face acest lucru:

Culoare de fundal: #FEFCDE

scrie:

Context: #FEFCDE

Deoarece toate celelalte valori ale regulii prefabricate vor fi luate în mod implicit și de asta 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

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

informatie scurta

versiuni CSS

Valori

url Valoarea este calea către fișierul grafic, care este specificată în construcția url(). Calea către fișier poate fi scrisă fie între ghilimele (duble sau simple), fie fără ele. none Dezactivează imaginea de fundal pentru element. inherit Moștenește valoarea părintelui.

HTML5 CSS2.1 IE Cr Op Sa Fx

Model de obiect

document.getElementById("elementID").style.backgroundImage

Browsere

Versiunile de Internet Explorer până la 7.0 inclusiv aplică un fundal la chenarul interior al unui element care are setată proprietatea hasLayout. Dacă elementul nu are un hasLayout , proprietatea background-image va respecta marginile elementului, așa cum este specificat în specificație. Diferența de afișare va fi vizibilă dacă marginile sunt punctate sau punctate mai degrabă decât solide.

Dacă elementul este setat la derulare sau automat , Internet Explorer 8 va avea o întârziere verticală de un pixel atunci când fundalul derulează.

Versiunile de Internet Explorer până la 7.0 inclusiv nu acceptă valoarea de moștenire.

Dacă fundalul este setat pentru un rând de tabel (tag ), apoi Chrome, Safari, iOS îl afișează nu așa cum este prescris de specificație, și anume pentru fiecare celulă separat. În timp ce browserul ar trebui să arate un fundal solid pentru întregul rând. Exemplul 2 arată codul care demonstrează eroarea.

HTML5 CSS2.1 IE Cr Op Sa Fx

1

2

3

Rezultatul acestui exemplu în browserul Chrome este prezentat în Fig. 1. Browserele Internet Explorer, Opera și Firefox afișează corect fundalul liniei (Fig. 2).

Orez. 1. Repetați fundalul pentru fiecare celulă

Orez. 2. Fundal pentru întreaga linie

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 atribuirea obișnuită a unei imagini sau culori ca fundal de pagină. Unele vor fi familiare, iar altele vor fi probabil noi 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, cum ar fi transparența și alocarea mai multor imagini ca fundal, dar despre asta vom vorbi mai jos, dar mai întâi ne vom uita la elementele de bază ale proprietății fundal.

culoare de fundal

Sunt mai mult decât sigur că ați atribuit deja culoarea de fundal de mai multe ori. Acest lucru se poate face folosind mai multe tipuri de notație: obișnuită (se folosește numele culorii), notație hexazecimală sau RGB. Fiecare tip este echivalent, utilizați ceea ce vă place mai mult. Încerc să folosesc cea mai scurtă opțiune, iar pentru o percepție mai ușoară, fișierul de stil rezultat 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;))

CSS3 acceptă transparența, așa că o putem adăuga la culoarea noastră, de exemplu astfel:

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

Ultima cifră a stabilit transparența la 50%. 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 a adăugat capacitatea de a atribui mai multe imagini fundalului, fiecare creându-și propriul strat, astfel încât fiecare ulterioară să se suprapună pe cea anterioară. De ce ar putea fi util acest lucru? Totul este destul de simplu - să presupunem că trebuie să înșurubați mici bibelouri în fiecare colț al site-ului. Având în vedere un aspect mai mult sau mai puțin cauciucat, utilizarea unei singure imagini nu este o opțiune. Prin urmare, facem 4 „straturi”, mutăm fiecare imagine în propriul colț și gata, problema este rezolvată

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

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

• setați o culoare de fundal contrastantă în cazul în care utilizatorul nu vede imaginea dintr-un motiv oarecare. Pur și simplu poate opri afișarea imaginilor, economisind trafic.
• Nu folosiți o imagine de fundal pentru a transmite informații importante. Din motivele expuse mai sus, este posibil ca utilizatorul să nu-l vadă.

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