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):

Andrei! 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?

O zi bună tuturor celor care vor să învețe și să învețe ceva nou! Ați acordat vreodată atenție aspectului, în timpul dezvoltării căruia creatorii au fost prea leneși să decoreze fundalul paginilor? Și m-am întors. Asta arată rău. Adesea, din cauza lipsei de diviziuni între diferitele tipuri de informații cu care suntem obișnuiți, acestea sunt amestecate și pur și simplu nu există dorința de a privi mai departe o astfel de resursă web.

Pentru ca un astfel de dezastru 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 publicația, veți afla ce instrumente puteți utiliza pentru a seta designul de fundal, cum să faceți fundalul fixat sau schimbat și multe altele care vă vor ajuta să vă faceți site-ul atractiv. Și acum să începem!

Instrumente de bază pentru setarea fundalului paginilor web

Pentru a seta o imagine de fundal, designerii de limbaj web au furnizat atributul de fundal. Este disponibil atât în ​​format , 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 fundalul sub forma unei singure culori, a unei imagini colorate sau chiar a unei animații.

Deci, pentru a seta imaginea de fundal prin unitatea html scrie doar acest cod: ...

iar în loc de cuvintele „adresă fișier” introduceți calea către imagine.

Totuși, observați! Dacă doriți să vedeți o pânză cu o singură culoare 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 de un cuvânt englezesc (de exemplu, roșu), fie de 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 puteți consulta codul de culoare pe Internet.

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

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

Pe această notă, putem rezuma munca noastră. Alăturați-vă rândurilor abonaților mei fideli, puneți întrebări dacă ceva nu este clar și nu fiți lacomi după un link către blogul meu, ci distribuiți-l prietenilor dvs. Vă doresc o învățare plăcută. Pa! Pa!

Cu stimă, Roman Chueshov

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ă de limbă 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ă.

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

Cu ajutor Culoare și fundal CSS puteți seta aproape orice element al paginii web, puteți controla liber imaginea de fundal, repetarea acesteia pe orizontală și pe verticală. În plus, folosind CSS, puteți plasa imaginea de fundal oriunde pe ecran folosind poziționare. Să nu fugim încă departe, să mergem în ordine.

proprietate COLOR

Această proprietate setează culoarea elementului, mai precis, culoarea textului din interiorul elementului. Valoarea este dată î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 va fi 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 este probabil să fie neagră.

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

Iată un exemplu de setare a culorii textului folosind CSS:

h1 (culoare: albastru)

În acest exemplu, toate titlurile de la 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.

Se poate scrie asa:

h1, p, puternic (culoare: verde)

Apoi, titlurile primului 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ă. Un atribut este folosit pentru a defini o clasă în HTML clasă A care poate fi aplicat oricărui element. În codul HTML, va trebui să scrieți:

class="blue"> Culoarea titlurilor acestei clase va fi albastru

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

h1.Albastru (culoare: albastru)

In documentele HTML se folosesc si selectori dupa identificator, sunt definiti de atribut id. Un identificator este un atribut mai semnificativ sau mai prioritar decât o clasă. Și dacă atât clasa, cât și identificatorul sunt specificate în codul HTML pentru element, atunci stilul identificatorului va fi aplicat. Identificatorul este notat cu semnul lire sterline ( # ). Pentru a utiliza identificatorul în codul HTML, va trebui să scrieți:

id="albastru"> Culoarea titlurilor acestui identificator va fi albastră

În foaia de stil, pe rând:

h1#Albastru (culoare: albastru)

Proprietate FUNDAL-CULOARE

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

h1 (culoare de fundal: galben)

Obținem fundalul galben al titlurilor primului 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 repetă.

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 folosită pentru a spune browserului dacă imaginea de fundal a paginii trebuie să deruleze cu text ( sul) sau stai pe loc ( 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 fixă.

Proprietatea BACKGROUND-POSITION

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

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