17.10.2015

Nu încă

Salutare tuturor!
Continuați să învățați elementele de bază ale HTML.
În această lecție vă voi spune și vă voi arăta cu exemple cum să faci fundal dintr-o culoare sau imagine dintr-o pagină HTML.
Este destul de simplu!
Să începem cu culoarea!
Cred că nu ați ratat-o, unde v-am spus cum să schimbați culoarea textului și la sfârșitul articolului am dat coduri pentru diferite culori și nuanțe. De ce ți-am amintit de această lecție? Da, pentru că există un tabel cu coduri de culoare gata făcute, luați-le și exersați imediat în această lecție.
Deci, cum să faci culoarea de fundal în HTML...

Culoare de fundal în HTML

Culoarea implicită de fundal într-un document HTML este albă. Cum setați culoarea dorită?
Atributul „bgcolor” ne va ajuta în acest sens. Pentru a picta fundalul, adăugați acest atribut la eticheta „corp”:

Sau cam asa:

Iată codul HTML complet:

Textul paginii va fi verde, iar fundalul va fi negru.

Rezultatul va fi astfel:

Dacă doriți să faceți un fundal dintr-o imagine, adăugați atributul „background” la eticheta „body”:

Completați orice imagine în care se află pagina dvs. web (de exemplu, pagina mea are numele „fon” cu extensia „.gif”):

Iată codul HTML complet:

Rezultatul va fi astfel:

Dacă imaginea de fundal se află în folderul imagini sau în alt folder, va arăta astfel:

Iată codul HTML complet:

Textul paginii pe un fundal frumos.

Asta e tot pentru azi! Cred că lecția nu a fost grea și înțelegi totul. Dacă aveți întrebări, scrieți în comentarii.
Va astept in urmatoarele lectii.

Postarea anterioară
Postarea următoare

De la autor: bun venit la webformyself și astăzi vreau să vă spun cum să schimbați fundalul unui site web. Culoarea de fundal sau imaginea din fundal poate juca un rol enorm în percepția unui site, așa că trebuie să știți cum să îl configurați.

Cum se schimbă fundalul în wordpress

Din nou, dacă aveți un motor wordpress, atunci schimbarea fundalului general al paginii nu este dificilă. Trebuie doar să faceți clic pe butonul „Personalizați” din fila „Aspect”. Aici trebuie să selectați „Culori”. În funcție de șablonul selectat, este posibil să fie posibilă alegerea culorilor pentru diferite elemente. Dar puteți alege culoarea paginii în orice caz - un panou de culoare convenabil se va deschide în fața dvs.

Numărul de setări aici depinde de șablonul pe care îl aveți. În orice caz, cu siguranță ar trebui să fie posibilă setarea culorii pentru întreaga pagină, în diferite șabloane puteți seta și fundalul și culoarea pentru anteturi, linkuri etc.

De fapt, asta e tot ce trebuie să știi. Dacă trebuie să descărcați imaginea de fundal, selectați elementul corespunzător și găsiți fișierul necesar pe computer.

JavaScript. Pornire rapidă

Pe cale amiabilă, poza nu trebuie să fie prea grea, deoarece va lovi foarte greu viteza de încărcare a site-ului. Este ideal să folosiți așa-numitele imagini de fundal fără sudură care se repetă orizontal și vertical pentru a umple întreg spațiul.

După încărcarea imaginii, vi se vor prezenta câteva opțiuni utile de ajustat. Comoditatea wordpress este că vedeți modificările imediat, în funcție de setările pe care le alegeți.

În primul rând, vi se va solicita să alegeți o metodă de repetare. Există deja 4 opțiuni: repetați doar orizontal, doar vertical, pe ambele părți și nu repetați. În funcție de imaginea pe care o folosești, trebuie să faci o alegere.

Repetarea economisește foarte mult dimensiunea unei imagini atunci când aceasta este mică și poate fi repetată, astfel încât să nu fie vizibile tranziții ascuțite între repetări. În acest fel, puteți economisi zeci de kiloocteți în comparație cu metoda în care este încărcată o imagine mare cu drepturi depline.

Poziţie. Nu există nimic de explicat, doar vedeți cum se schimbă aspectul paginii cu diferite poziții de fundal. Alegeți opțiunea care vă place cel mai mult.

Legare. Aceasta este o setare foarte interesantă, vă permite să alegeți dacă să defilați imaginea de fundal împreună cu conținutul sau să o înghețați într-un singur loc. Personal, îmi place întotdeauna să aleg opțiunea fixă, deoarece la derularea în jos, doar blocurile de conținut se mișcă.

De exemplu, dacă aveți o înălțime a imaginii de fundal de 1000 de pixeli, nu o repetați sau nu o remediați, atunci când derulați în jos, pur și simplu va dispărea din vedere. Fixarea fundalului permite ca imaginea să rămână vizibilă în orice moment. Uneori, aceasta este o soluție foarte eficientă.

JavaScript. Pornire rapidă

Aflați elementele de bază ale JavaScript cu un exemplu practic de construire a unei aplicații web

De fapt, asta e tot pentru schimbarea fundalului în wordpress. După cum puteți vedea, totul este cât se poate de simplu.

Cum se schimbă fundalul unui site web în html

Ei bine, am analizat o versiune pur vizuală, în care nu trebuie să intri în cod și să scrii ceva acolo. Acum să ne dăm seama cum să schimbăm fundalul prin html și css. Care sunt beneficiile acestui lucru? Puteți seta imagini de fundal nu numai pentru site-ul ca întreg, ci și pentru fiecare element separat. De exemplu, pentru un widget, meniu, antet etc. Acest lucru oferă mult mai multă flexibilitate în designul site-ului web și modificările de design.

Pentru a accesa tot acest design, trebuie să găsiți foaia de stil principală pentru șablonul dvs. De obicei se află în rădăcină sau în folderul css și se numește style.css sau main.css.

În el, vei vedea codul care decorează diferitele elemente ale site-ului tău. Dacă doriți să setați fundalul la nivel global, puteți face acest lucru atribuind un fundal selectorului de corp, adică corpului paginii.

Cum este setat fundalul?

Amintiți-vă - proprietatea de fundal. Astăzi este mai bine să folosiți doar o versiune prescurtată a acestei proprietăți. De exemplu:

body (fond: #ccc url (bg.png) no-repeat 50% 50% fix;)

corp ( fundal: #ccc url (bg.png) no-repeat 50% 50% fixat;

Ce înseamnă toate acestea? Primul parametru este de obicei o culoare solidă. Să presupunem că îl setăm pe gri. Culoarea poate fi omisă dacă este specificată o imagine de fundal. După cum puteți vedea, imaginea este setată folosind construcția url (calea către fișier). În consecință, trebuie să scrieți corect calea către fișier și, de asemenea, asigurați-vă că indicați extensia acestuia.

Toți parametrii pe care i-am notat după aceea sunt opționali și se scriu după dorință. Așadar, am indicat că imaginea de fundal nu trebuie repetată, poziționată în centru atât pe orizontală, cât și pe verticală și, de asemenea, blocată într-un singur loc pentru a nu dispărea la derulare.

După cum puteți vedea, aici sunt toți aceiași parametri pe care i-ați configurat vizual, dar aici sunt înregistrați ca valori ale proprietății de fundal.

În acest exemplu, am folosit o notație de proprietate scurtă, este doar mai convenabilă, dar de fapt, fiecare parametru individual are propria sa proprietate: culoarea de fundal pentru culoare, imaginea de fundal pentru imagine, poziția de fundal pentru setarea poziției.

Desigur, pentru a deveni fluent în aceste proprietăți, vă sfătuiesc să urmați mai întâi cursul nostru, iar dacă doriți să deveniți un utilizator avansat în raport cu limbajul css, atunci. Acolo veți învăța cum să setați mai multe fundaluri în același timp, să le setați să se repete, să folosiți degradeuri etc. Informațiile sunt foarte interesante și utile pentru constructorii de site-uri.

Ei bine, ți-am spus despre elementele de bază ale lucrului cu fundalul. Abonați-vă la portalul nostru pentru a primi știri și pentru a afla mai multe despre construirea site-ului.

JavaScript. Pornire rapidă

Aflați elementele de bază ale JavaScript cu un exemplu practic de construire a unei aplicații web

61,5K

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ărare 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.

O zi bună tuturor celor care doresc să învețe și să învețe ceva nou! Ați acordat vreodată atenție aspectului, în dezvoltarea căruia creatorii au fost prea leneși să proiecteze fundalul paginilor? Și m-am convertit. Pare jalnic. De multe ori, din cauza absenței diviziunilor cu care suntem obișnuiți între diferitele tipuri de informații, aceasta este amestecată și pur și simplu dispare dorința de a căuta mai departe pe o astfel de resursă web.

Pentru ca o astfel de nenorocire să nu mi se întâmple, am decis să scriu un articol pe tema: „Cum se face un fundal de pagină în html”. După ce ați citit postarea, veți afla ce instrumente puteți utiliza pentru a seta fundalul, cum să faceți fundalul fix sau modificabil și multe altele care vă vor face site-ul atractiv. Acum să începem!

Instrumente de bază pentru setarea fundalului paginilor web

Atributul de fundal a fost furnizat de dezvoltatorii de limbaj web pentru a seta imaginea de fundal. Este disponibil atât în ​​format css, cât și în css.

În limbajul de marcare, acesta este un atribut al etichetei body, iar în foile de stil, este o proprietate universală care vă permite să setați până la 5 caracteristici de fundal în același timp. Fundalul este un element destul de flexibil care poate fi folosit pentru a seta un fundal sub forma unei singure culori, imagini color sau chiar animație.

Deci, pentru a seta imaginea de fundal prin unitatea html este suficient să scrieți următorul cod: ... iar în loc de cuvintele „adresă fișier” introduceți calea către imagine.

Totuși, ai grijă! Dacă doriți să vedeți o pânză simplă ca fundal, specificată de o valoare din paleta de culori, atunci acest lucru se face folosind atributul bgcolor.

De exemplu, ..., am setat un fundal negru pentru site-ul nostru.

Culorile în css și html sunt specificate fie printr-un cuvânt englezesc (de exemplu, roșu), fie printr-un cod special care constă din semnul # și șase caractere după acesta (de exemplu, # FFDAB9).

Când introduceți a doua opțiune în produse software specializate pentru dezvoltatori, paleta va apărea automat în fața dvs. Dacă tocmai ați început să studiați aceste limbi web, atunci codul de culoare poate fi spionat pe Internet.

Fundalul ca proprietate în foile de stil în cascadă

Este setat fie într-un fișier separat cu stiluri css, fie în element

Pe această notă, putem rezuma munca noastră. Alătură-te rândurilor abonaților mei fideli, pune întrebări dacă ceva nu este clar și nu fi lacom cu un link către blogul meu, ci distribuie-l prietenilor tăi. Vă doresc o experiență plăcută de învățare. Pa! Pa!

Cu stima, Roman Chueshov

Lecția 7. Culoarea textului și fundalul în HTML.

Data: 2008-12-05

Cum pot seta fundalul și culoarea textului pe o pagină web?

În mod implicit, culoarea textului și, în general, orice font de pe paginile web este întotdeauna negru (#000000 ). Dar putem seta oricând absolut orice culoare care ne place și care arată decent sau este mai potrivită pentru designul unui anumit site.

Setarea culorii textului

În HTML, culoarea textului, fontului, fundalului și a altor elemente poate fi setată în două moduri:

1. Metoda 1.În etichete împerecheate atributul este scris cu numele culorii dorite. Numele culorii este indicat în engleză. De exemplu, culoarea titlului de pe pagina noastră web poate fi setată în acest fel:

Comentarii la acest articol (lecție):

Andrei! Ce site minunat ai! Deja îl folosesc în mod regulat pentru a doua săptămână: vă studiez lecțiile și lecțiile video; Ți-am citit literatura și descarc programe; făcând primii pași în programarea web! Și, cel mai important, reușesc!!! Și nu sunt deloc fizician, ci textier! Și toți cei care vizitează site-ul meu literar se pot convinge de asta: „POEMI OLEG GUZ” Detaliile mele: e-mail: [email protected] site: http://sites.google.com/site/stihiolegguz/

verificati codul cu atentie

Am încercat să schimb culoarea de fundal și nu merge! Cum schimb culoarea de fundal?