CSS Tutorial 02 – Culorile in CSS

Ce ar fi internetul fara culoare? Si de ce sa nu ai culoare daca tot ai tehnologia care sa o redea.

Dupa cum am spus si in tutorialele html, CSS-ul este folosit pentru a aduce stil informatiei transmise. Acum, dupa ce am invatat ce este html si cu ce se mananca, ar trebui sa invatam cum sa folosim CSS-ul pentru ca informatia sa arate bine pe internet.

Multe tutoriale despre CSS incep fie direct cu realizarea unui design de site, fie cu termeni putin mai grei precum “box model”.

Eu m-am hotarat sa incep cu simpla culoare.

Culorile in CSS pot fi scrise in mai multe formate:

  1. In limbaj natural, de la culori precum: “red”, “blue”, “yellow”; pana la unele mai originale precum: “chocolate”, “cornflowerblue”, “lime”, “mediumspringgreen” sau… (si acum sa te vad daca stii ce culoare este asta…) “whitesmoke”.
  2. Prin codul hexazecimal al culorii, avand o variatie de la “#ffffff” (alb) pana la “#000000” (negru). Codul hexazecimal se imparte in trei parti de cate doua caractere, fiecare pereche de caractere fiind echivalentul hexazecimal principalelor culori care se regasesc la orice monitor, televizor etc. Fiecare pixel al monitorului este de fapt un manunchi de trei culori aprinse in intensitati diferite. Cele trei culori: Red (Rosu), Green (Verde) si Blue (Albastru) primesc voltaje diferite in functie de culoarea care trebuie afisata. Combinatia celor trei culori poate da nastere la aproape 16,7 milioane de culori (existand pana la 256 de intensitati pentru fiecare culoare rezulta 256 x 256 x 256 = 16,777,216 culori).
  3. Prin valoarea RGB. Fara transformarea valorilor RGB in hexazecimal, se pot scrie direct valorile acestea in CSS prin secventa “rgb(100,169,10)“.

Asadar, cum scriem culorile in CSS

Sa luam ca exemplu o pagina HTML fara stil adaugat:

Toate browserele vor afisa in mod automat paginile html cu text negru si fundal alb.

Acum sa adaugam culoare la texte. Vom face asta prin adaugarea unui element <style></style> in head-ul paginii. Daca iti amintesti, am spus in lectia anterioara ca exista mai multe modalitati de introducere a codului CSS intr-o pagina HTML:

Dupa cum vezi am incercat toate cele trei metode de afisare a culorilor. Personal prefer afisarea prin cod hexazecimal, dar asta doar din cauza obisnuintei. Cea mai utila forma de afisare a culorilor si cu multe avantaje pentru viitor este cea prin codul RGB.

Daca ai fost prezent atat fizic cat si in spirit la prima lectie de CSS iti poti imagina cam ce spune codul pe care l-am scris. Headingul h1 ar trebui sa aiba culoarea rosie, in timp ce paragrafele ar trebui sa fie scrise cu alb (color: rgb(255,255,255);) pe un fundal de culoare albastra (background-color: #19a3fa;). Citatul blockquote este scris cu o culoare verde-lime (color: lime;).

O astfel de pagina ar trebui sa arate in cele mai multe browsere astfel:

culori

Lecturi suplimentare:

W3Schools: CSS Colors – http://www.w3schools.com/cssref/css_colors.asp

Posted in CSS

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes:

<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">

No spam? * Time limit is exhausted. Please reload CAPTCHA.