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:
- 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”.
- 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).
- 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:
<!DOCTYPE html>
<html>
<head>
<title>Scrierea textelor cu HTML si CSS</title>
</head>
<body>
<h1>Titlul paginii</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce lobortis enim at ipsum ultricies fringilla. Vestibulum nisl felis,<br />ultricies vel aliquet a, dapibus sed metus. Proin sed nisl sed nisl venenatis sodales vel sed eros. <q>Nulla porttitor, sem sed varius elementum</q>, ipsum dolor ullamcorper dolor, facilisis rutrum neque leo eget magna.</p>
<blockquote>Donec ut ipsum nulla, et adipiscing tortor. Donec cursus dapibus dolor sit amet molestie. Etiam rutrum viverra arcu sed pharetra. Ut velit felis, rutrum dapibus tempor ac, dictum vel magna. Fusce lacinia dictum tellus eget sagittis. Praesent sit amet tortor lectus, vitae pulvinar velit. Sed ut sollicitudin ante.</blockquote>
<h2>Subtitlu</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce lobortis enim at ipsum ultricies fringilla. Vestibulum nisl felis,<br />ultricies vel aliquet a, dapibus sed metus. Proin sed nisl sed nisl venenatis sodales vel sed eros. <q>Nulla porttitor, sem sed varius elementum</q>, ipsum dolor ullamcorper dolor, facilisis rutrum neque leo eget magna.</p>
</body>
</html>
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:
<!DOCTYPE html>
<html>
<head>
<title>Scrierea textelor cu HTML si CSS</title>
<style type="text/css">
h1 {
color: red;
}
p {
background-color: #19a3fa;
color: rgb(255,255,255);
}
blockquote {
color: lime;
}
</style>
</head>
<body>
<h1>Titlul paginii</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce lobortis enim at ipsum ultricies fringilla. Vestibulum nisl felis,<br />ultricies vel aliquet a, dapibus sed metus. Proin sed nisl sed nisl venenatis sodales vel sed eros. <q>Nulla porttitor, sem sed varius elementum</q>, ipsum dolor ullamcorper dolor, facilisis rutrum neque leo eget magna.</p>
<blockquote>Donec ut ipsum nulla, et adipiscing tortor. Donec cursus dapibus dolor sit amet molestie. Etiam rutrum viverra arcu sed pharetra. Ut velit felis, rutrum dapibus tempor ac, dictum vel magna. Fusce lacinia dictum tellus eget sagittis. Praesent sit amet tortor lectus, vitae pulvinar velit. Sed ut sollicitudin ante.</blockquote>
<h2>Subtitlu</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce lobortis enim at ipsum ultricies fringilla. Vestibulum nisl felis,<br />ultricies vel aliquet a, dapibus sed metus. Proin sed nisl sed nisl venenatis sodales vel sed eros. <q>Nulla porttitor, sem sed varius elementum</q>, ipsum dolor ullamcorper dolor, facilisis rutrum neque leo eget magna.</p>
</body>
</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:
Lecturi suplimentare:
W3Schools: CSS Colors – http://www.w3schools.com/cssref/css_colors.asp
