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 se simte un site, așa că trebuie să știți cum să o setaț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 ales, poate fi 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 titluri, linkuri etc.

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

JavaScript. Pornire rapidă

Într-un sens bun, imaginea nu ar trebui 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ă pe orizontală și pe verticală și astfel umple întreg spațiul.

După încărcarea imaginii, vi se vor prezenta câteva opțiuni utile pentru personalizare. Frumusețea wordpress este că vedeți schimbări 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 poate economisi în mod semnificativ dimensiunea imaginii atunci când aceasta este mică ș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 mare cu drepturi depline.

Poziţie. Nu există nimic de explicat aici, 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 numai blocurile de conținut se mișcă atunci când derulez în jos.

De exemplu, dacă aveți o înălțime a imaginii de fundal de 1000 de pixeli, nu o repetați și 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ă mereu la vedere. 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 site-ului î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 în continuare fundalul prin html și css. Care sunt beneficiile? 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 și schimba designul acestuia.

Pentru a accesa toate aceste stiluri, trebuie să găsiți foaia de stil principală a șablonului. 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 proiectează diferitele elemente ale site-ului tău. Dacă doriți să setați fundalul la nivel global, acest lucru se poate face prin atribuirea unui 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 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ă punem gri. Culoarea poate fi omisă dacă este specificată o imagine de fundal. După cum puteți vedea, imaginea este specificată folosind constructul url (calea către fișier). În consecință, trebuie să scrieți corect calea către fișier și asigurați-vă că specificați extensia acestuia.

Toți parametrii pe care i-am notat după aceea sunt opționali și sunt opționali. Așadar, am precizat că imaginea de fundal nu trebuie repetată, poziționată în centru atât pe orizontală, cât și pe verticală și, de asemenea, 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 notația prescurtată a proprietății, 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 legătură cu limbajul css, atunci . Acolo veți învăța cum să setați mai multe fundaluri în același timp, să reglați repetarea acestora, 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

Lecția 7. Textul și culoarea 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 întotdeauna să setăm absolut orice culoare care ne place și care arată decent sau 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. Etichete în pereche atributul este scris cu numele culorii dorite. Numele culorii este indicat în limba engleză. De exemplu, culoarea titlului de pe pagina noastră web poate fi setată în acest fel:

Comentarii la acest articol (lecție):

Andrew! Ce site minunat ai! Îl folosesc în mod regulat din a doua săptămână acum: am studiat lecțiile și tutorialele dvs. video; Ți-am citit literatura și descarc programe; Fac primii pași în programarea web! Și, cel mai important, o pot face!!! Și 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: 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 se schimbă culoarea de fundal?

În capitolele anterioare, am compilat șablonul principal de documente HTML, am decis 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 reușit!!! Ș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 o „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: aur (aur), roșu (roșu), verde (verde) și așa mai departe ...
Dar culoarea poate consta doar dintr-un cuvânt, de exemplu „roșu”, dar dacă scrieți „verde-roșu”, atunci browserul nu va înțelege acest lucru și pur și simplu îl va ignora.
2) text="#000000"- Schema de culori RBG (rosu verde albastru). "#" acest personaj spune ca este un numar de culoare, primele doua caractere (zero in exemplul meu) spun cat am luat culoarea "rosu", a doua verde si ultimele doua albastre.
Fiecare culoare este setată 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ă dezarhivați arhiva pentru a rula fișierul culoare.html, apoi pe un câmp mare, puneț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 într-o fereastră mică din dreapta.

Acum înapoi la fișierul nostru index.htmlși salvează-l ca tsvet.html, acum să vedem ce s-a întâmplat. Cum a fost și cum este? Și aveți perfectă dreptate, deoarece 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!!! Salvați și urmăriți (se deschide într-o filă nouă)

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

În capitolul următor, vom învăța cum să gestionăm textul cu etichete BR, cum să încapsulă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, precum bgcolor (culoarea de fundal). Dar, în primul rând, aceste atribute sunt învechite (cred că vă amintiți ce înseamnă asta) și, în al doilea rând, așa cum am spus, 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

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

Cum poți specifica o culoare?

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

• Numele culorii- HTML are o listă mare iar pentru a specifica 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. Codul HEX este format din trei perechi de valori hexazecimale reprezentând numărul acestor culori din fiecare culoare. Codul de culoare trebuie să fie precedat de semnul lire sterline (#), de exemplu: #FF8C00, #CC3300 și așa mai departe.

În trecut, HTML recomanda doar utilizarea , care este garantat să se afișeze în toate browserele și pe toate monitoare în același mod. Dar astăzi nu este absolut necesar să ne limităm 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 pur și simplu nu recomand specificarea culorilor după nume, faptul este că multe browsere încă asociază culori diferite cu același nume. Prin urmare, în acest tutorial, voi folosi întotdeauna codurile 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:

<тег style="color:color name" >... - precizarea culorii textului prin nume.

<тег style="color:#HEX code" >... - 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 aplică-i un atribut.

Exemplu de schimbare a culorii textului

Text de titlu roșu

Textul paragraf albastru.

Cursiv verde. Text roșu.

Rezultat în browser

Cum se schimbă culoarea de fundal?

Culoarea de fundal a oricărui element de pagină este, de asemenea, schimbată 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.

Miniatură. Text simplu.

Rezultat în browser

Titlu.

Paragraf.

Miniatură. Text simplu.

Când schimbați culoarea de fundal a elementelor, devine foarte clar ce lățime ocupă de fapt fiecare dintre ele. După cum puteți vedea, elementele la nivel de 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 toată lățimea, doar 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 specificat în mod explicit este transparent, atât.

Teme pentru acasă.

1. Creați titlul articolului și cele două secțiuni ale acestuia. Scrieți câte un paragraf la începutul articolului și fiecare secțiune.
2. Setați întreaga pagină la 16px Courier, titlul articolului la 22px și subtitlurile la 19px.
3. Lăsați titlul articolului să aibă culoarea textului #0000CC, iar subtitrările - #CC3366.
4. Selectați #66CC33 pentru cele două cuvinte din al doilea paragraf. Și în al treilea paragraf în aceeași culoare, dar un cuvânt subliniat.
5. Rețineți că valorile atributelor de stil pot fi grupate separându-le cu punct și virgulă (;).

În amenajarea oricărui site, pe lângă funcționalitate, designul este foarte important. Acesta este ceea ce stabilește stilul și designul unei anumite companii sau persoane pentru care este creat site-ul. Ajustarea culorii de fundal și a imaginii acesteia nu este dificilă, 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 simplă. Există comenzi speciale pentru a remedia această setare.

• 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” - repetă 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 exterioare vor fi tăiate. „rotund” - aceeași opțiune, dar marginile imaginii vor fi scalate cu precizie;
• background-attachment: „Valoare”. Dacă înlocuiți eticheta „defilare” în loc de cuvântul Valoare, atunci imaginea va derula împreună cu site-ul. „fixat” - la defilare, fundalul rămâne neschimbat;
• 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 de-a lungul părții lungi și „copertă” - umple pagina cu o imagine de-a lungul lățimii.

Cunoscând elementele de bază ale umplerii unei pagini cu un fundal în HTML, sunteți gata să vă creați primul site web.