De la autor: Bun venit la webformyself și astăzi vreau să vă spun cum să schimbați fundalul site-ului. Culoarea de fundal sau imaginea din fundal poate juca un rol important în modul în care arată un site, așa că trebuie să știți cum să îl setați.

Cum se schimbă fundalul în wordpress

Din nou, dacă aveți un motor WordPress, atunci schimbarea fundalului general al paginii nu va fi 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 pe care îl alegeți, este posibil să puteți alege culori 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 să setați culoarea pentru întreaga pagină în diferite șabloane, puteți seta și fundalul și culoarea pentru titluri, linkuri etc.

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

JavaScript. Pornire rapidă

Într-un sens bun, imaginea nu ar trebui să fie prea grea, deoarece acest lucru va afecta foarte mult viteza de încărcare a site-ului. Este ideal să folosiți așa-numitele imagini de fundal fără sudură, care se repetă pe orizontală și pe verticală și astfel umple întreg spațiul.

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

În primul rând, vi se va cere 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 vă permite să economisiți în mod semnificativ dimensiunea imaginii atunci când aceasta este de dimensiuni mici și poate fi repetată, astfel încât tranzițiile ascuțite între repetări să nu fie vizibile. În acest fel puteți economisi zeci de kiloocteți în comparație cu metoda în care este încărcată o imagine la dimensiune completă de dimensiuni mari.

Poziţie. Nu există nimic de explicat aici, doar uită-te la modul în care aspectul paginii se schimbă 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ă ​​pentru că atunci când derulezi î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 și nu o repetați sau capturați, atunci când derulați în jos, va dispărea pur și simplu 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 despre cum să creați o aplicație web.

De fapt, asta este 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

Bine, ne-am uitat la o versiune pur vizuală, în care nu trebuie să intrați în cod și să scrieți nimic acolo. Acum să ne dăm seama cum să schimbăm fundalul prin html și css. Ce beneficii oferă acest lucru? Puteți seta imagini de fundal nu numai pentru site în general, ci și pentru fiecare element separat. De exemplu, pentru un widget, meniu, antet etc. Acest lucru oferă mult mai multe oportunități în designul site-ului web și schimbarea designului acestuia.

Pentru a accesa toate aceste stiluri, trebuie să găsiți foaia de stil principală a șablonului dvs. De obicei se află în rădăcină sau în folderul css și se numește style.css sau main.css.

În el veți vedea codul care proiectează diverse elemente ale site-ului dvs. 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 versiunea prescurtată a scrierii acestei proprietăți. De exemplu:

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

Ce înseamnă toate acestea? Primul parametru este de obicei o culoare solidă. Să presupunem că îl setăm pe gri. Culoarea poate să nu fie specificată dacă este specificată o imagine de fundal. După cum puteți vedea, imaginea este specificată folosind constructul url (calea fișierului). Î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ă aceasta sunt opționali și pot fi specificați după dorință. Așadar, am precizat că imaginea de fundal nu trebuie repetată, să fie poziționată în centru atât pe orizontală, cât și pe verticală și, de asemenea, să fie fixată î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 abreviată de proprietate, este doar mai convenabilă, dar, de fapt, fiecare parametru individual are propria sa proprietate: culoarea de fundal pentru culoare, imaginea de fundal pentru o imagine, poziția de fundal pentru setarea unei poziții.

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 al limbajului css, atunci. Acolo veți învăța cum să setați mai multe fundaluri în același timp, să configurați repetarea acestora, să folosiți degradeuri etc. Informațiile sunt foarte interesante și utile pentru constructorii de site-uri web.

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 web.

JavaScript. Pornire rapidă

Aflați elementele de bază ale JavaScript cu un exemplu practic despre cum să creați o aplicație web.

Lecția 7. Textul și culorile de fundal în HTML.

Data: 2008-12-05

Cum să setați culoarea fundalului și a 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.

Setați culoarea 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 indicând 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! Îl folosesc în mod regulat din a doua săptămână acum: studiez lecțiile și tutorialele video; Ți-am citit literatura și descarc programe; Fac primii pași în programarea web! Și, cel mai important, o pot face!!! Dar nu sunt deloc un fizician, ci un textier! Și oricine vizitează site-ul meu literar se poate convinge de asta: „POEZI DE OLEG GUZ” Detaliile mele: email: [email protected] site: http://sites.google.com/site/stihiolegguz/

verificati codul cu atentie

Am incercat sa schimb culoarea de fundal si nu merge! Cum se schimbă culoarea de fundal?

În capitolele anterioare, am compilat un șablon de bază pentru documente HTML, am determinat ce sunt etichetele HTML, am învățat cum să salvăm și să editam fișiere HTML, iar în acest capitol am Să ne familiarizăm cu atributele eticheteiși schimbați culoarea textului și a fundalului paginii.

Să ne deschidem index.html, pentru editare: Am facut!!! Și hai să o schimbăm puțin, să adăugăm atribute: text="#000000" bgcolor="#ffffff"> Am facut-o!!! Atribut este un parametru de etichetă care este inserat în etichetă ca „pereche” (numele parametrului + valoarea parametrului).
Sunt inserate valorile atributelor etichetei:
1) text=#000000 fără ghilimele;
2) text="#000000" între ghilimele simple;
3) text="#000000" între ghilimele duble.
Oricare dintre aceste opțiuni este corectă, dar dacă vă pasă de etica codului, este mai bine să folosiți ghilimele duble, ca în exemplul meu de mai sus.

Atribut "text" controlează culoarea textului pe întreaga pagină și "bgcolor" controlează culoarea de fundal a paginii.

Acum propun să vorbim despre culori pentru documentele HTML. Culoarea este setată:
1) text="aur"- cuvinte în engleză, de exemplu: auriu (aur), roșu (roșu), verde (verde) și așa mai departe...
Dar o culoare poate consta dintr-un singur cuvânt, de exemplu „roșu”, dar dacă scrieți „verde-roșu”, browserul nu o va înțelege și pur și simplu o va ignora.
2) text="#000000"- Schema de culori RBG (rosu verde albastru). "#" acest simbol indică faptul că acesta este un număr de culoare, primele două simboluri (zerouri în exemplul meu) ne spun câte culori „roșii” am luat, al doilea este verde și ultimele două sunt albastre.
Fiecare culoare este specificată de la 00 la FF (0-1-2-3-4-5-6-7-8-9-A-B-C-D-E-F), de exemplu #000000-negru, #ffffff-alb, #ff0000-roșu, # 00ff00- verde #0000ff-albastru

Ca bonus de pe site, vă sugerez să descărcați paleta de culori (2kB), care este prezentată în poza de mai sus. Trebuie să despachetați arhiva și să rulați fișierul culoare.html, apoi pe câmpul mare, plasați cursorul mouse-ului pe culoarea de care aveți nevoie, care va fi afișată într-o fereastră mică, iar dacă faceți clic pe mouse în acest moment, codul culorii va apărea în fereastra mică din dreapta.

Acum să revenim la dosarul nostru index.htmlși salvează-l ca tsvet.html, acum să vedem ce s-a întâmplat. Cum era și cum a rămas? Și aveți perfectă dreptate, pentru că albul este pentru fundal și negru pentru text este culoarea implicită. Pentru a observa diferența, să modificăm valorile atributelor:

text=gold" bgcolor="#0900b8"> Am facut-o!!! Să salvăm și să urmărim (se deschide într-o filă nouă)

Există și alte moduri de a seta text în fișierele HTML, dar acestea două sunt considerate principale.

În capitolul următor vom învăța cum să manipulăm textul cu etichete BR și să împachetăm textul pe o altă linie.

În acest tutorial veți învăța cum să schimbați culoarea de fundal și text a oricărui element dintr-o pagină HTML. În general, în limbajul HTML, unele etichete au atribute speciale care își schimbă culoarea, de exemplu bgcolor (culoarea de fundal). Dar, în primul rând, aceste atribute sunt învechite (cred că vă amintiți ce înseamnă asta), iar în al doilea rând, așa cum am spus deja, nu toate etichetele le au. Deci, să presupunem că doriți să schimbați culoarea de fundal a unui paragraf de text. Și cum vei face asta, pentru că eticheta

Nu există un astfel de atribut? Prin urmare, ca și în lecțiile anterioare, vom folosi stiluri (CSS), adică atributul stil universal, care ne va permite să schimbăm culoarea oriunde ne dorim.

Cum poți specifica o culoare?

Culorile în HTML (și CSS) pot fi specificate în mai multe moduri, vă voi arăta pe cele mai populare și comune:

• Numele culorii- HTML are o listă mare iar pentru a indica o culoare este suficient să-i scrieți numele în engleză, de exemplu: roșu, verde, albastru.
• Cod de culoare HEX- Absolut orice culoare poate fi obtinuta prin amestecarea a trei culori de baza in proportii diferite - rosu, verde si albastru. Un cod HEX reprezintă trei perechi de valori hexazecimale responsabile pentru numărul acestor culori din fiecare culoare. Codul de culoare trebuie să fie precedat de un semn hash (#), de exemplu: #FF8C00, #CC3300 și așa mai departe.

Anterior, în HTML era recomandat să se folosească numai , care se garantează că va fi afișat identic în toate browserele și pe toate monitoare. Dar astăzi nu este nevoie să vă limitați la el, deoarece atât browserele, cât și monitoarele au învățat de mult să afișeze corect o listă mult mai mare de culori. Dar nu vă recomand să specificați culorile după nume, faptul este că multe browsere mai asociază culori diferite cu același nume. Prin urmare, în acest tutorial voi folosi întotdeauna coduri de culoare HEX.

Cum se schimbă culoarea textului?

Pentru a schimba culoarea textului în orice element al unei pagini HTML, trebuie să specificați atributul de stil în interiorul etichetei. Sintaxa generală este următoarea:

<тег stil= "culoare:nume culoare" >... - specificarea culorii textului după nume.

<тег stil= "culoare:#cod HEX" >... - specificarea culorii textului prin cod.

Și, ca de obicei, pentru a schimba culoarea textului pe întreaga pagină, trebuie doar să specificați atributul de stil în etichetă . Și dacă trebuie să schimbați culoarea fontului pentru o bucată de text, atunci includeți-o într-o etichetă și aplicați-i atributul.

Exemplu de schimbare a culorii textului

Text de titlu roșu

Textul paragraf albastru.

Verde italic. Text roșu.

Rezultat în browser

Cum se schimbă culoarea de fundal?

Culoarea de fundal a oricărui element de pagină poate fi, de asemenea, modificată folosind atributul stil. Sintaxa generală este:

<тег stil= „fond:numele culorii”>... - specificarea culorii de fundal după nume.

<тег style= "background:#HEX code" >... - specificarea culorii de fundal prin cod.

Exemplu de schimbare a culorii de fundal

Titlu.

Paragraf.

Text îngroșat. Text simplu.

Rezultat în browser

Titlu.

Paragraf.

Text îngroșat. Text simplu.

Când schimbați culoarea de fundal a elementelor, devine foarte clar cât de largă ocupă de fapt fiecare dintre ele. După cum puteți vedea, elementele bloc, cum ar fi paragrafele și titlurile, ocupă, în general, întreaga lățime disponibilă, chiar dacă conțin foarte puțin text, dar etichetele inline sunt la fel de largi ca și conținutul lor. Apropo, ultimul paragraf din exemplu ocupă și întreaga lățime, doar că fundalul său este transparent, așa că fundalul paginii este vizibil prin el. În general, fundalul tuturor elementelor de pe pagină în care nu este indicat în mod explicit este transparent, atât.

Teme pentru acasă.

1. Creați un titlu pentru articol și cele două secțiuni ale acestuia. Scrieți câte un paragraf la începutul articolului și fiecare secțiune.
2. Setați dimensiunea fontului Courier la 16 px pe întreaga pagină, 22 px pentru titlul articolului și 19 px pentru subtitluri.
3. Lăsați titlul articolului să aibă culoarea textului #0000CC, iar subtitlurile să aibă culoarea textului #CC3366.
4. Utilizați culoarea de fundal #66CC33 pentru a evidenția cele două cuvinte din al doilea paragraf. Și în al treilea paragraf, în aceeași culoare, dar cu un cuvânt subliniat.
5. Nu uitați că puteți grupa valorile atributelor de stil prin plasarea unui punct și virgulă (;) între ele.

La configurarea oricărui site web, pe lângă funcționalitate, designul este foarte important. Acesta este ceea ce stabilește propriul stil și design al unei anumite companii sau persoane pentru care este creat site-ul web. Personalizarea culorii de fundal și a imaginii este ușoară, urmând instrucțiunile din acest articol.

• style="background-image: url(‘file:///C:/Users/FILE_PATH.jpg’)”

Vă rugăm să rețineți că pentru utilizatorii cu o rezoluție mai mare a ecranului, imaginea dvs. va fi duplicată în jos și în dreapta. Nu va arăta bine dacă imaginea nu este monocromatică. Există comenzi speciale pentru a corecta acest parametru.

• background-repeat: „Valoare”. Opțiunile pentru valoarea dvs. ar putea fi: „repeat-x” – repetă imaginea de fundal atât pe orizontală, cât și pe verticală. „repeat-y” – repetare numai pe verticală. „no-repeat” – imaginea este înghețată pe loc și nu se repetă. „spațiu” – întreaga pagină va fi umplută cu numărul maxim de copii ale imaginii, cele mai exterioare vor fi decupate. „rotund” – aceeași opțiune, dar marginile imaginii vor fi scalate cu atenție;
• background-attachment: „Valoare”. Dacă înlocuiți eticheta „defilare” în locul cuvântului Valoare, imaginea va derula împreună cu site-ul. „fixat” – fundalul rămâne neschimbat la derulare;
• background-size: Value Value2. Aici valorile trebuie să ia o valoare în pixeli. De exemplu: 100px 200px. Pe lângă pixeli, sunt acceptate valori procentuale. Aceasta este o opțiune pentru a umple pagina cu o imagine. Pe lângă numere, puteți introduce doi parametri: „conține” – umple pagina cu o imagine pe partea lungă și „copertă” – umple pagina cu o imagine pe lățime.

Odată ce cunoașteți elementele de bază ale umplerii unei pagini cu fundal în HTML, sunteți gata să vă creați primul site web.