Fundalul paginii în css. Fundal în CSS (culoare, poziție, imagine, repetare, atașament) - totul pentru a seta culoarea de fundal sau imaginea de fundal a elementelor HTML

De la autor: Bun venit tuturor. Culorile de fundal și imaginile în design web joacă un rol important, deoarece vă permit să proiectați mai atractiv orice element. Cum să faceți un fundal în html, vom căuta astăzi.

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

Îți spun chiar acum că nu este. În general, html nu este conceput pentru a proiecta pagini web. Este doar foarte incomod. De exemplu, există un atribut bgcolor care poate fi folosit pentru a 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 se setează fundalul cu css?

Deci, în primul rând, trebuie să decideți pentru ce element doriți să setați fundalul. Adică trebuie să găsim selectorul în care vom scrie regula. De exemplu, dacă trebuie să setați fundalul 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 atașat oricăror 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 (și anume, o culoare solidă, nu un gradient și nu o imagine), este utilizată 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 hexadecimal, rgb, rgba, formate hsl. Orice metodă va funcționa.

Cea mai des folosită metodă este codul hexazecimal. Pentru a selecta culorile, puteți folosi un program în care puteți vedea codul culorilor. De exemplu, Photoshop, paint sau un instrument online. În consecință, de exemplu, voi prescrie un fundal comun 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

Pentru imagine, voi folosi o pictogramă mică în limba html:

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

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

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

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

#bg(

latime: 400px

înălțime: 250px

imagine de fundal: url (html . png );

Din acest cod, puteți vedea că am folosit o nouă proprietate numită background-image. Este destinat doar inserării unei imagini ca fundal într-un element html. Să vedem ce s-a întâmplat:

Pentru a specifica o imagine, trebuie să scrieți cuvântul cheie url după două puncte și apoi să specificați calea către fișier între 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 formatul imaginii.

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

Dar ai observat o caracteristică? Browserul a luat și a înmulțit poza pe tot blocul. Deci, ca să știți, acesta este comportamentul implicit al imaginilor de fundal - se repetă pe verticală și pe orizontală atâta timp cât se pot încadra în bloc. Prin acest comportament te poți descurca cu ușurință. Pentru a face acest lucru, utilizați proprietatea background-repeat, care are 4 valori principale:

Repeat - valoarea implicită, imaginea se repetă pe ambele părți;

Repeat-x - se repetă numai pe axa 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ă. Voi scrie 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, putem termina cu asta, deoarece acestea sunt caracteristicile de bază ale lucrului cu fundal, dar vă voi arăta încă 2 proprietăți care vă permit să obțineți mai multe opțiuni de control.

Cu repetare, programatorii obișnuiau să atingă scopul de a crea texturi de fundal și degrade folosind o singură imagine minusculă. Ar putea fi de 30 pe 10 pixeli sau chiar mai mic. Sau poate un pic mai mult. Imaginea era de așa natură încât atunci când se repeta pe una sau chiar pe ambele părți, nu erau vizibile tranziții, astfel încât în ​​final 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. Gradientul de astăzi poate fi deja implementat folosind metode css3, despre asta vom vorbi cu siguranță mai târziu.

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ță cu proprietatea background-position.

Îl poți întreba în diferite moduri. O opțiune este să specificați pur și simplu părțile în care ar trebui să fie imaginea:

fundal-poziție: dreapta sus;

fundal - poziție: dreapta sus;

Adică totul a rămas la fel pe verticală: imaginea de fundal este situată deasupra, dar pe orizontală am schimbat partea spre dreapta, adică pe cea dreaptă. 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 imaginea exact în centru, o scriem astfel:

fundal-poziție: 50% 50%;

fundal-poziție: 50% 50%;

Un lucru important de reținut despre poziționare este că primul parametru este întotdeauna poziția orizontală, iar al doilea parametru 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 scădea prea mult.

Și, în sfârșit, puteți specifica poziția în pixeli. Totul este la fel, doar că în loc de % va fi px. În unele cazuri, poate fi necesară și o astfel de 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, ar fi mai corect să folosiți prescurtarea proprietății. Ea arata 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 omiteți-l. 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 prescurtat întotdeauna, chiar dacă trebuie să specificați doar o culoare sau o imagine.

Controlul dimensiunii imaginii de fundal

Imaginea noastră actuală nu se pretează foarte bine la următorul truc, așa că voi lua unul diferit. Î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 sarcina de a realiza 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 se poate face într-un astfel de caz? Desigur, cea mai simplă și mai rezonabilă opțiune ar fi pur și simplu reducerea imaginii, dar nu este întotdeauna posibil să faceți acest lucru. Să spunem că se află pe server și în acest moment nu există timp și oportunități pentru a-l reduce. Problema poate fi rezolvată cu ajutorul proprietății 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, imaginea mea acum ocupă tot spațiul din bloc, dar îi voi da o dimensiune de fundal:

dimensiunea fundalului: 80% 50%;

dimensiunea fundalului: 80% 50%;

Din nou, primul parametru este dimensiunea orizontală, al doilea este dimensiunea verticală. Vedem 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 să faceți o singură clarificare - setând dimensiunea ca procent, puteți afecta proporțiile imaginii. Asa ca ai grija daca vrei sa nu rupi proportiile.

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

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

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

Avantajul acestor valori este că nu schimbă proporțiile 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 proiectați pentru desktop-uri, trebuie să adaptați site-ul la lățimile principale ale monitorului: 1280, 1366, 1920. Dacă luați o imagine de fundal cu dimensiunea, de exemplu, 1280 pe 200, și nu setați dimensiunea fundalului pentru acesta, apoi apar ecrane cu o lățime mai mare decât un spațiu gol, 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 veți întâlni problema că utilizatorii cu o lățime a ecranului de 1920 de pixeli pot vedea o calitate suboptimă a imaginii.

Vă reamintesc că se va întinde până 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 o selecție competentă a imaginii de fundal, acest lucru nu va afecta aspectul site-ului.

Una peste alta, acesta este doar un exemplu despre cum să aplicați cunoștințele pe care le-ați dobândit în acest articol la machete din viața reală.

fundal translucid cu css

O altă caracteristică care poate fi implementată folosind css este un fundal translucid. Adică prin acest fundal se va putea vedea ce este în spatele lui.

Ca exemplu, voi seta fundalul întregii pagini la 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 setare a culorii rgba.

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

Prima valoare dintre 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, se adaugă doar un parametru - canalul alfa. Valoarea poate fi de la 0 la 1, unde 0 este transparența totală.

informatie scurta

versiuni CSS

Valori

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

HTML5 CSS2.1 IE Cr Op Sa Fx

imagine de fundal

Model obiect

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

Browsere

Internet Explorer până la versiunea 7.0 inclusiv aplică un fundal la interiorul marginii 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 randare va fi vizibilă dacă marginile sunt mai degrabă punctate (liniate sau punctate) decât solide.

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

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

Dacă fundalul este setat pentru un rând de tabel (tag ), apoi Chrome, Safari, iOS îl afișează diferit decât prescrie specificația, ș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

Context pentru TR

123


Rezultatul acestui exemplu în browserul Chrome este prezentat în Fig. 1. Browserul 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 loc unde proprietatea să nu fie folosită fundal css. S-ar părea, ce poate fi mai simplu decât această proprietate? Dar nu, posibilitățile sale sunt mult mai largi decât setarea obișnuită a unei imagini sau culori ca fundal de pagină. Unele vor fi familiare, iar altele vor fi 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 setarea mai multor imagini ca fundal, dar despre asta vom vorbi mai jos, dar mai întâi vom acoperi elementele de bază ale proprietății. fundal.

culoare de fundal

Sunt destul de sigur că ați făcut deja atribuirea culorii 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ă versiune, iar pentru percepție este mai simplu și 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;))

CSS3 introduce suport pentru transparență, astfel încât să o putem adăuga la culoarea noastră, astfel:

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

Ultima cifră setează 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 adaugă posibilitatea de a atribui mai multe imagini unui fundal, fiecare creând un fel de strat, astfel încât fiecare dintre acestea să se suprapună pe cel precedent. De ce ar putea fi util acest lucru? Totul este destul de simplu - să presupunem că trebuie să înșurubați lucruri mici în fiecare dintre colțurile site-ului. În condiția unui aspect mai mult sau mai puțin fluid, 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, trebuie 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. Poate dezactiva clar afișarea imaginilor, 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 destul de extins. Toate browserele, chiar și IE8, acceptă această proprietate.

Bună ziua, dragi cititori ai site-ului blogului. Astăzi ne vom uita la cinci reguli CSS care vă permit să setați fundalul pentru orice element în Html - fundal-poziție (imagine, repetare, culoare, atașament). Ei bine, să nu uităm să menționăm 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, ceea ce vă va ajuta să deschideți întreaga poveste a 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ă studiați stilul de markup de la început, și anume dintr-un articol despre ce este CSS și cu ce se mănâncă, ei bine, apoi urmați în ordine. specificate î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 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 cu ajutorul a trei cifre, dacă prima se potrivește cu valoarea celei de-a doua, a treia cu a patra, bine și, respectiv, cu a cincea, cu al șaselea (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 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 prin culoare este destul de simplă, dar cu fundalul va fi puțin mai complicat.

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

  1. culoare de fundal - această regulă setează culoarea de fundal pentru orice element HTML. Puteți utiliza fie codul, fie numele nuanței din acesta, de exemplu. totul este exact așa cum a fost când ați folosit culoarea.
  2. 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 paginii), 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, pentru că. acestea sunt elemente de sistem și totul este diferit pentru ele și diferă de etichetele obișnuite ale limbajului de marcare hipertext.

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

    Culoare de fundal: #FEFCDE

    De exemplu, fundalul acestui paragraf este setat 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, poziționată exact. Ce fișier grafic va fi utilizat poate fi specificat folosind imagine de fundal.

    Dacă vă uitați la specificația limbajului de marcare a stilului, veți vedea că imaginea de fundal este implicită la „niciuna” (adică, nu este utilizată nicio imagine de fundal). Ei bine, dacă mai aveți nevoie de el, atunci în funcționalitatea url () va trebui să specificaț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. Puteți vedea că întreaga zonă rezervată 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 specifică calea către fișierul grafic, chiar această imagine va fi reprodusă 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 în toate axele). Răspunsul a venit de la sine.

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


    Background-position - poziția fundalului

    Acum se pune î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, puteți, iar în acest scop există o regulă separată pozitia de fundal:

    Privind specificația CSS, devine clar de ce imaginea de fundal implicită este apăsată exact la 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 setată în mod explicit pentru element (ca în cazul nostru), atunci browserul își selectează valoarea, care este acceptată în specificația implicită (observ că axele de coordonate în CSS sunt raportate doar din marginea din stânga sus a elementului zonă).

    Se poate observa, de asemenea, din specificație că atât valorile relative (procentaj) 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 digitale. Dar mai întâi lucrurile.

    Când setați poziția imaginii de fundal folosind unități absolute background-position are următorul principiu pentru determinarea 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 î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://website/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 ferestrei de vizualizare și nu la centrul zonei rezervate 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 de vizualizare și aceasta este exact utilizarea CSS-ului atașat de fundal proprietate în amenajare bloc modern.

    Mai sunt ceva Fundal pentru reguli prefabricate, care vă permite să combinați toate cele cinci reguli descrise mai sus într-o singură sticlă. Mai mult, 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 considerat de browser ca valoare implicită.

    Png) fără repetare 50%;

    Regula de asamblare prezentată în exemplu este aplicată acestui paragraf pentru claritate. Nu a ieșit frumos, dar nu acesta este ideea. Acest paragraf folosește o culoare de fundal galben ciudată și folosește o imagine a siglei LiveInternet aliniată la centrul paragrafului. Deoarece pentru regula de atașare de fundal, nu este setată nicio valoare, apoi se folosește scroll (implicit).

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

    Culoare de fundal: #FEFCDE

    scrie:

    Context: #FEFCDE

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

    Multă baftă! Ne vedem curând pe site-ul paginilor blogului

    S-ar putea să fiți interesat

    Stil listă (tip, imagine, poziție) - reguli Css pentru personalizarea aspectului listelor în cod HTML Cum se schimbă culoarea de fundal a rândurilor de tabele, liste și alte elemente HTML de pe site folosind pseudoclasa a nth-child
    Poziție (absolută, relativă și fixă) - moduri de a poziționa elementele 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
    Padding, Margin and Border - am stabilit în CSS căptușeli interioare și exterioare, precum și chenare pentru toate părțile (sus, jos, stânga, dreapta)
    Afișare (block, none, inline) în CSS - setați tipul de afișare a elementelor HTML pe o pagină web
    Prioritățile în Css și creșterea lor datorită Important, combinarea și gruparea de selectoare, stiluri de utilizator și autor
    CSS - ce este, cum sunt conectate foile de stil în cascadă la codul HTML folosind Style și Link
    Selectori de etichetă, clasă, ID și universal, precum și selectori de atribute în CSS modern