CSS (foile de stil in cascada)
IntroducereFoile de stil reprezinta viitorul in formatarea si nu numai a paginilor html. Foile de stil reprezinta in sens general instructiuni de formatare aplicabile unui element, unei pagini sau unui site web.
Practic prin foile de stil se urmareste separarea continutului unei pagini(ceea ce se vede) de instructiunile de formatare.
Instructiunile de formatare cu foi de stil stabilesc cum sa arate elementele dintr-o pagina, cum pot fie le amplasate in pagina (pozitia), cand pot fi partial sau total invizibile si altele.
Exista 3 posibilitati de scriere a instructiunilor de formatare:
1.-prin fisiere externe care au extensia .css -in acest caz avem foi de stil externe si instructi unile se aplica la intreg site-ul(daca fisierul css a fost inclus in paginile site-ului web).
2.-in zona head a paginii prin intermediul perechii de taguri <style> ... </style> -in acest caz avem foi de stil interne si se aplica doar paginii respective
3.-in interiorul tagului respectiv prin intermediul atributului style. –in acest caz avem foi de stil in linie si se aplica doar tagului respectiv.
De unde vine denumirea de ... in cascada? Va rog sa tineti minte ceea ce urmeaza! Este f.important! Sa presupunem ca ptr o pagina si ptr unele taguri si ptr unele atribute din ele avem toate cele trei tipuri de instructiuni de formatare. Care regula de stil se aplica mai intai?
Cea mai mare putere o au instructiunile din foile de stil in linie,apoi cele din foile de stil interne si apoi instructiunile din foile de stil in linie.Concret:
1.Daca intr-un tag exista foi de stil in linie (ceva de genul <nume_tag style= ”…instructiuni…”>) acestea vor fi executate cu precadere,chiar daca exista si alte tipuri de foi de stil, repet este vorba acelasi document,acelasi tag,acelasi atribut.
2.Daca in interiorul tagului nu exista foi de stil in linie se vor executa foile de stil interne (ceva de genul <style>…..instructiuni.. </style>) chiar daca exista foi de stil externe.
3.Daca nu exista nici un fel de foii de stil in pagina atunci se vor executa foile de stil din fisierul extern care este introdus in pagina.
In concluzie:daca intr-o pagina avem toate cele trei tipuri de foi de stil(foi de stil in cascada adica foi de stil una dupa alta) se vor executa intai cele in linie,daca nu exista cele
in linie se executa cele interne, si daca nu exista nici foi in linie nici interne se vor executa cele externe (daca exista).
Cum arata o foaie de stil
Luam cazul general foi de stil interne ;Ele se scriu in zona head prin intermediul tagului <style>.Expl:
Cod: Selectaţi tot
<html>
<head><title> </title>
<style>
Aici se scriu regulile din foia de stil
</style>
</head>
<body>
</body>
</html>Cum arata o instructiune la modul supergeneral
selector {atribut1:valoare1;atribut2:valoare2;……}
selector reprezinta elementul sau elementele html ce se doresc formatate (poate fi p,h,a sau oricare alt element html.)
atribut1:valoare1 unde atribut1 reprezinta numele unei proprietati css a respectivului element iar valoare1 o valoare acceptata ptr acea proprietate urmata de unitatea de masura (cand exista).
Exp:
1. Vrem ca toate titlurile h1 din pagina sa fie scrise cu Rosu
Cod: Selectaţi tot
h1 {color:red;}Cod: Selectaţi tot
h1#nume_identificator {color:red;}Cod: Selectaţi tot
h1#nume1,h1#nume2 {color:red;}Practic pentru a putea folosi CSS trebuie sa cunoastem:
-ce selectoare si cum specificam ce selectoare folosim;
-ce atribute (proprietati)vrem sa folosim ;
-ce valori folosim ptr atributul respectiv;
-ce unitati de masura folosim;
Pentru selectoare putem folosi urmatoarele constructii:
- tipul selectorului (exemplu: p) in acest caz toate elementele din pagina web care sunt de tipul specificat vor fi afectate(in cazul nostru toate elementele p)
- tipul si numele selectorului (exemplu: p#nume) elementul afectat de regula de stil va fi doar elementul p care are id=”nume”.Daca,din greseala,sunt mai multe elemente de acelasi tip cu aceiasi valoare ptr id va fi afectat de regula de stil doar primul.
- contextul in care se afla elementul respectiv (exemplu: p div elementul sau elementele afectate sunt doar elementele div(toate) incluse in paragrafe(toate):
Presupunem exemplul de mai jos:
Cod: Selectaţi tot
<div>Text1………..
<p>Text2……… </p>
</div>Deci cand scrim div p se intelege: elementele p (toate) incluse in elementele div (toate).
+Modul de folosire al contextului este destul de flexibil. Exemplu:
div#nume1 p - toate elementele p incluse in elementul div cu numele nume1.
div#nume1 div#nume2 - elementul div cu id=nume2 inclus in elem div cu id=nume1
div p img - toate elem img incluse in elem p incluse in elem div.
Schematic aceasta structura se poate reprezenta asa:
Cod: Selectaţi tot
<div ……>
<p…….>
<img ……>
</p>
</div>Elem img este fiu doar ptr div,iar div este tata ptr elem img
Atributele elementelor
Atribute de tip font-....
Incepem cu atributele de tip font-…,care definesc caracteristicile fontului(caracterului) folosit la titluri,paragrafe,etc. Daca nu specificam la un atribut oarecare o valoare permisa ,atunci se va folosi valoarea implicita.
font-family = defineste familiile(stilurile) de fonturi folosite;se pot folosi mai multe valori ptr un atribut font-family ,despartite de virgule. Daca o valoare este formata din mai multe cuvinte,acestea se trec intre ghilimele. Practic acest atribut este o lista din care browserul alege in ordine tipul de font folosit.
Expl:
Cod: Selectaţi tot
Nume_element { font-family: font1,font2,…,fontN}Primul tip de font este font1;daca nu recunoaste acest tip de font se incearca folosirea font2 si tot asa pana cand se gaseste un tip de font cunoscut de browser.Se recomanda ca pe ultimile pozitii sa se foloseasca fonturi generice:serif,monospace.
Expl:
Cod: Selectaţi tot
p,h2 { font-family:arial,”new times roman”,verdana,serif;}Alte tipuri de font-…sunt:
font-size defineste marimea caracterelor
font-style defineste stilul caracterelor
font-weight defineste grosimea caracterelor
Obs: Mai exista si alte atribute ptr text precum text-align
Atentie :la tipurile de valori numerice se trece si unitatea de masura.
Ptr a defini culoarea unui font se foloseste atributul color.
Expl:
Cod: Selectaţi tot
p {color:red;font-size:32px;}Cautati si veti gasi toate informatiile necesare despre fonturi.
Setarea culorii
Pentru ca am pomenit de culori se vedem cum se seteaza o culoare in pagini web.Exista trei metode,fiecare metoda dand aceleasi rezultate:
color: nume_culoare sau
color: #valoare hexadecimala (atentie!Inainte de numarul hexa al culorii se pune diez(#)) sau
color:rgb(vr,vg,vb) in care
nume_culoare reprezinta numele unei culori in limba engleza
valoare hexadecimala reprezinta o culoare exprimata printr-un numar hexadecimal,care esta format pe langa cele zece cifre(de la 0 la 9) si de cateva litere mari(A,B,C,D,E,F) . Gasiti suficient material in care aflati culoarea si numarul hexadecimal asociat.
rgb((vr,vg,vb) reprezinta o culoare care se obtine prin “amestecul” a trei culori ,in ordine rosu,verde si albastru;vr,vg,vb reprezinta trei numere naturale cu valori de la 0 la 255 , fiecare numar indicand participatia culorii respective in culoarea finala.Daca numarul depaseste valoarea de 255 se va lua in calcul valoarea maxima ptr acea componenta de culoare.
Obs: Gasiti date despre CSS bine structurate(in lb engleza insa) la adresa http://www.w3c" target="_blank school.
Exercitiu:
1.Ne propunem sa facem o pagina web in care :
Titlurile se fie : centrate le mijloc,scrise cu caractere Verdana ,ingrosate,inaltime de 38 pixeli, de culoare rosie,disatanta dintre caractere de 4 pixeli,distanta dintre cuvinte de 8 pixeli.
Paragrafele se fie scrise cu Times New Roman,inaltime 14 puncte,culoare magenta, aplecate spre dreapta(acest lucru se realizeaza cu font-style:oblique);
2. De asemenea ne propunem ca primul titlu si al doilea paragraf sa difere de regulile de stil scrise in zona head,astfel:primul titlu sa fie scris cu verde si centrat pe mijloc iar al doilea paragrapf scris cu alta culoare si inaltimea caracterelor sa fie de 24 pixeli.
Iata :
Cod: Selectaţi tot
<html>
<head><title>Pagina mea de web </title>
<style>
h1,h2,h3,h4,h5,h6 {text-align:left;font-family:verdana;font-weight:700;font-size:38px, color:red;}
p {font-family:”Times New Roman”;font-size:14pt;color:magenta;font-style:oblique;}
</style>
</head>
<body>
<br />
<br />
<h2 style=”color:green; text-align:center;”>Tipuri de muzica</h2>
<p>Acesta este primul paragraf. Acesta este primul paragraf .Acesta este primul paragraf.
Acesta este primul paragraf Acesta este primul paragraf Acesta este primul paragraf Acesta este primul paragraph.
</p>
<h5>Despre muzica usoara</h5>
<h4>Muzica usoara contemporana</h4>
<p style=”color:blue;font-size:24px;”> Acesta este al doilea paragraph. Acesta este al doilea paragraph Acesta este al doilea paragraph Acesta este al doilea paragraph Acesta este al doilea paragraph Acesta este al doilea paragraph
</p>
</body>
</html>