În acest capitol vom vorbi despre modul de utilizare a CSS pentru a atribui culoarea unui element și fondul acestuia precum și modul de utilizare a imaginii ca element de fond și controlul poziției sale.
Înainte de a merge direct la formare, va petrece o scurtă digresiune pe tema: „Culorile de pe Internet“
Culoarea în CSS poate fi definit în trei moduri:
- Valoare nominală, cum ar fi: roșu - roșu.
- Valoarea de culoare RGB. de exemplu: RGB (255,0,0) - din nou roșu.
- Hexazecimală valoare de culoare RGB. de exemplu: # FF0000 - toate același roșu.
Cu o valoare nominală de culoare toate clar negru - negru, verde - verde, măsline - măsline, etc. (Completa paleta de culori de bază, adică culorile care sunt rezervate pentru valoarea nominală, a se vedea aici.)
Cu toate acestea, din motive evidente, nu toate nuanțele de culori rezervate nume individual. Atunci când este necesar să se folosească de toate culorile „non-standard“ este necesar să se definească valoarea RGB, (Rosu, Verde. Albastru) o combinație de culoare roșie, verde și albastru din punct de vedere numeric. Fiecare nuanță a culorilor primare din sistemul RGB poate fi exprimată într-un număr de 0-255.
De exemplu, culoarea neagră va fi setat la 0,0,0 și anume absența oricărei culori. Alb - valoarea 255255255, teoretic, dacă se amestecă culorile primare ar trebui să rândul său alb, dar asta e ca și culoarea albastră clasic are o valoare 0,0,255 adică „șevalet“ numai albastru este prezent. Figura arată clar ce se întâmplă cu culorile dacă este amestecat, ca amestec nuante de culori primare pot fi realizate în orice culoare din spectrul vizibil.
Cu toate acestea, în cele mai multe cazuri, „culori Web“ sunt expresia hexazecimale valorile zecimale RGB.
În cifre hexazecimale de la 10 la 15 sunt înlocuite cu linia de alfabet și numărul latin ia forma următoare:
0, 1, 2, 3, 4, 5, 6, 7, 8, 9, A, B, C, D, E, F.
Număr mai mare hexazecimal 15ti format prin combinarea a două sau mai multe numere într-una singură. De exemplu, numărul 255 corespunde decimal FF număr hexazecimal.
Deci, pentru a exprima nuanța dorită în hexazecimal, avem nevoie de trei perechi de numere, în cazul în care prima pereche - valoarea roșie, a doua pereche de valoarea de verde, iar a treia pereche de albastru. De exemplu, același albastru clasic în expresie hexazecimal ar arata astfel: # 0000FF. Un semn hash in fata este pus pentru a indica faptul că numărul este hexazecimal, de exemplu, în numărul de # 808000 litere latine, dar nici un semn al grilajului este clar că este hexazecimal și exprimă o culoare de măsline.
Și altul. exprimând culoare în hexazecimal, puteți face trei numere, care ar fi apoi duplicat, cum ar fi înregistrarea #DAF va fi abreviat sub formă #DDAAFF.
Pfiu. Am lovit o parte din apă, să ne învețe în cele din urmă CSS ..
Pentru a vopsi textul oricărui, element în culoarea dorită, trebuie să folosim proprietatea de culoare și dându-valoarea dorită - culoarea reală.
După cum sa menționat mai sus, culoarea în CSS folosind următoarele metode pot fi date:
- # FF0000 - RGB valori de culoare hexazecimal.
- roșu - valoarea nominală a culorii.
- RGB (255,0,0) - valoare de culoare RGB.
Dar proprietatea background-color - definește culoarea de fundal a elementului.
Culoarea de fundal poate avea următoarele valori:
- # FF0000 - RGB valori de culoare hexazecimal.
- roșu - valoarea nominală a culorii.
- RGB (255,0,0) - valoare de culoare RGB.
- transparent - fundal transparent. (Implicit)
Pentru fiecare element, aveți posibilitatea să atribuiți o imagine de fundal, utilizând proprietățile CSS: background-image.
Valorile posibile sunt background-image:
- URL - calea către fișierul de imagine.
- none - Nici o imagine este. (Implicit)
Pentru a face o anumită imagine de fundal pentru un element trebuie să specificați calea către acesta, în conformitate cu următoarele adrese URL de sintaxă (fișierul cale / nume de fișier). Calea fișierului este specificat în cazul în care imaginea este într-un alt dosar.
In exemplul de mai jos, ca fundal de bază (corpul elementului) este utilizat pentru o imagine grafică, și alta pentru div bloc, posibilitatea de a folosi imagini de fundal diferite pentru diferite elemente ale paginii pot rezolva aproape orice idei de design.
În cazul în care imaginea nu umple întregul fundal al unui element, acesta este expus „dale.“
Fix imaginea de fundal permite proprietatea background-attachment. care poate lua una din două valori:
- fix - fundal fix.
- derulați - fundal mobil (implicit).
După cum sa menționat mai sus, în cazul în care imaginea nu umple întregul fundal al unui element, se repetă și răspândit „dale.“ Proprietatea background-repetiția - ajustează repetarea unei imagini de fundal.
- fără repetare - să interzică repetarea, arată doar o singură imagine.
- repeta - repeta imaginea (implicit).
- repeta-x - pentru a repeta numai pe orizontală.
- repeta-y - pentru a repeta numai pe verticală.
Cu proprietăți CSS background-position - puteți controla poziția imaginii de fundal în elementele la care este setată folosind background-image.
Poziția imaginii de fundal, și mai precis cu colțul din stânga sus, poate fi setat ca procent, pixeli, precum și orice alte unități CSS, folosind două valori, în cazul în care prima valoare va fi Indentat de frontiera stanga a unui element, și o a doua valoare de offset de la frontiera elementul superior .
De exemplu, înregistrare: fond poziția: 200px 100px; denotă faptul că imaginea de fundal este deplasată orizontal cu 200 de pixeli de elementul de frontieră din stânga și verticale 100 de pixeli din elementul de graniță sus.
Puteți utiliza următoarele valori:
orizontal:- stânga - stânga.
- Centru - poziționat în centru.
- dreapta - pe dreapta.
- top - poziționat pe partea de sus.
- Centru - poziționat în centru.
- partea de jos - situat în partea de jos.
Oh, și să-l top cap un pic despre proprietățile de bază ale fundal.
Ca o caracteristică de bază, de fundal poate primi simultan aceste sau alte valori ale proprietăților filialelor sale:
- background-attachment
- culoare de fundal
- background-image
- background-position
- fundal repetare
Toate aceste proprietăți ne-am uitat mai sus, astfel încât să intre în detaliu nu are nici un sens ..
Valorile dorite ale proprietăților filialelor indicate printr-un spațiu, în orice ordine și după cum este necesar.
Când este utilizat ca imagine de fundal folosind proprietățile background-image în același timp model de umplere folosind culori alternative culoare de fundal. Deci, dacă, indiferent de motiv, nu se va încărca imaginea de fundal sau utilizatorul dezactivat în mod intenționat în setările browser-ului, descărcarea de imagini, elementul de fond nu va rămâne „gol“.