A cincea lectie




Stiti ce e frumos la cuplul asta, materie - forma? Ca pot aplica distinctia de mai multe ori la rand. De pilda, pot spune ca am un soi de materie bruta, ca o plastelina, din care modelez diferite obiecte geometrice aplicand anumite forme. Dupa aceea pot spune ca obiectele respective sunt materia si le aplic anumite culori, proprietati de elasticitate etc., iar asta ar fi acum forma. Dupa aceea pot avea mai multe bile albastre foarte saltarete - materia, si le aplic o anumita forma atunci cand definesc niste reguli dupa care interactioneaza (de pilda, atunci cand se ciocnesc intre ele isi schimba culoarea etc. etc.). Totul arata cam asa:

bile

E suficient, probabil, sa va ganditi la Kant. Spatiul si timpul sunt forme pure ale sensibilitatii, care structureaza materialul sensibil. Dupa aceea, senzatiilor in spatiu si timp, considerate ca materie, li se aplica toate conceptele intelectului (potrivit schematismului) - ca forma. Ok, despre ce e vorba? Textul simplu, neformatat (in cod ASCII sau ANSI) reprezenta materia peste care aplicam etichetele. Acum puteti sa va inchipuiti ca materia o reprezinta codul HTML - text + etichete. "Peste" asta se poate aplica iarasi o forma, iar forma asta e construita folosind CSS (sa zicem "foi cu reguli stilistice", partea cu cascada vine mai incolo). Orice foaie cu reguli stilistice cuprinde reguli de forma: 

SELECTOR { DECLARATIE }
Prin declaratie este definita regula, iar selectorul ne spune cui i se aplica. Sa le luam pe rand. Un selector poate arata asa (cascati ochii la culori si numere): 
NUME_DE_ETICHETA
de pilda: H4 
.NUME_DE_CLASA
de pilda: .special
NUME_DE_ETICHETA.NUME_DE_CLASA
de pilda: B.special
NUME_DE_ETICHETA1, NUME_DE_ETICHETA2 etc.
de pilda: H4, B, SUP etc.
NUME_DE_ETICHETA1.NUME_DE_CLASA1, NUME_DE_ETICHETA2.NUME_DE_CLASA2, NUME_DE_ETICHETA3 etc.
de pilda: H4.special, FONT.test, SUP etc.
SELECTOR1 SELECTOR2 SELECTOR3 etc.
de pilda: FONT FONT 
sau: P.special B
sau: OL.test LI.special B
Sa o luam incet. Atunci cand selectorul este un nume de eticheta, inseamna ca "forma" definita de declaratie se va aplica elementelor din eticheta respectiva. Atunci cand am mai multe nume de etichete separate prin virgula, inseamna ca "forma" se va aplica tuturor elementelor din etichetele respective. Atunci cand numele nu sunt despartite prin virgula, inseamna ca "forma" nu se va aplica decat elementelor din etichete incapsulate in alte etichete potrivit ordinii din selector. De pilda, daca selectorul este OL LI B, elementele afectate vor fi doar cele din eticheta <B> </B> care apare in interiorul elementelor unei liste ordonate. Mai departe. Orice eticheta suporta atributul CLASS, care poate lua ca valori siruri alfanumerice (la fel ca atribului NAME al etichetei ancora). Putem avea, de pilda, un cod de forma: bla bla bla <b CLASS="special">bla</b> bla <br> bla <i CLASS="special">bla</i> bla bla bla <br> <font size="+1" color="red" CLASS="special">bla</font> <br> In felul acesta am definit o clasa numita "special". Acum, nu incercati sa va reprezentati ce va spun in continuare folosind diagrame fiindca nu veti ajunge nicaieri. Cu ajutorul selectorului .special pot sa identific toate elementele clasei "special", indiferent in ce fel de etichete sunt acestea plasate. Cu ajutorul selectorului B.special pot identifica submultimea special a elementelor din etichete bold (<B> </B>). Si asa mai departe. Un selector de tipul OL LI B (sau, de pilda OL.test LI.special FONT) este numit selector contextual. Partea frumoasa este ca putem construi un selector de forma: 
SELECTOR_CONTEXTUAL1, SELECTOR_CONTEXTUAL2, SELECTOR_CONTEXTUAL3 etc.
de pilda: FONT FONT, P.special B etc.
In afara de sistemul selectorilor contextuali si al claselor, orice obiect HTML poate fi identificat unic inserand in eticheta respectiva atributul ID, care primeste ca valoare un sir alfanumeric ales. In CSS selectorul care trimite la acel obiect are forma: #nume_ales. De pilda, putem avea o eticheta de forma aici text. Nici o alta eticheta nu va avea acelasi identificator ("xyz23"). Selectorul #xyz23 va trimite doar la ceea ce se gaseste in aceasta eticheta si la nimic altceva.
Mai sunteti cu mine? Ok. Partea mai complicata abia urmeaza. Declaratiile sunt de forma: 
{ 
  PROPRIETATE1: VALOARE1;
  PROPRIETATE2: VALOARE2;
  etc.
}
Atentie, proprietatile nu sunt acelasi lucru cu atributele etichetelor. Impreuna, totul arata cam asa (doar un exemplu): 
ETICHETA.CLASA{ 
  PROPRIETATE1: VAL1;
  PROPRIETATE2: VAL2;
  PROPRIETATE3: VAL3;
}
Dupa cum v-ati prins deja, proprietatile nu sunt dependente de etichete, asa cum sunt atributele. Pot spune ca o anumita proprietate a unor obiecte HTML din etichete diferite sa aiba o anumita valoare. De pilda, pot stabili ca toate titlurile de marimea 1 (H1) si toate cuvintele ingrosate sa fie de fapt scrise cu albastru. Asta o sa arate asa: 
H1, B{ 
  color: blue;
}
E suficient sa introduc aceasta regula stilistica in codul unei pagini HTML si Booom! - toate titlurile si cuvintele ingrosate vor fi albastre. Cum introduc regula in codul HTML? Simplu. O incapsulez intr-o eticheta speciala, numita STYLE. Totul va arata asa: 
<STYLE TYPE="text/css">
H1, B{ 
  color: blue;
}
</STYLE>
Tot codul de mai sus o sa-l pun undeva in HEAD. Atributul TYPE al etichetei STYLE are si el un rol, dar deocamdata nu o sa-l folositi decat cu valoarea "text/css". Cu ajutorul lui se precizeaza ce limbaj e folosit pentru a construi foaia stilistica. Da, ati ghicit, CSS e un limbaj (ca si HTML, are mai multe versiuni; daca va intreaba cineva ce ati invatat, puteti sa spuneti asa: HTML 3.2 si CSS Level 1). Exista insa si alte limbaje in care poate fi construita o foaie stilistica - ideea e aceeasi, sintaxa difera. Unul dintre ele e JavaScript. Daca foaia ar fi fost scrisa in JavaScript, valoarea atributului TYPE ar fi fost "text/javascript". N-o mai lungesc, puteti vedea aici rezultatul.

Ok, despre ce discutam? Despre proprietati si valori. Obiectele HTML sunt vazute din CSS ca fiind de mai multe tipuri:
  1. element inline: e un element HTML a carui eticheta nu introduce un rand inainte si dupa (de exemplu: STRONG, B, FONT, TT; exista o eticheta generica - ea nu modifica nimic, dar e folosita pentru a crea clase de care sa se agate CSS; eticheta este <SPAN> </SPAN> si de obicei e folosita cu atributul CLASS);
  2. element bloc (in engleza: block-level element): e un element care a carui eticheta introduce un rand inainte si dupa - elementul nu poate aparea pe acelasi rand cu alte elemente (de exemplu: H1, P, OL, LI; eticheta generica pentru acest tip de elemente este <DIV> </DIV> - e bine sa o tineti minte, fiindca o sa ne mai intalnim cu ea);
  3. element inlocuit (engl.: replaced element): acestea sunt elemente la care CSS are acces limitat - le poate cunoaste doar dimensiunile intrinseci; cu alte cuvinte, nu poate sa schimbe distanta unei imagini fata de marginile ferestrei (exemple: IMG, INPUT, TEXTAREA, SELECT); sigur, ele pot fi manipulate daca sunt puse intr-un container de tip block-level;
Exista o proprietate, display, care poate lua ca valori: block | inline | list-item | none. Prin intermediul ei, un element de un anumit tip poate fi interpretat ca element de un tip diferit ("list-item" este un element bloc, cu un marker in dreptul lui, asa cum apar elementele unei liste; daca folosesc display: none pentru un element HTML, acesta nu mai este afisat in pagina).

Proprietatile specifice elementelor bloc tin de pozitia acestor elemente in pagina. Orice bloc este ca o cutie cu urmatoarea structura: 
    _______________________________________ 
   |                                       | 
   |           margine (transparenta)      | 
   |   _________________________________   | 
   |  |                                 |  | 
   |  |        bordura (border)         |  | 
   |  |   ___________________________   |  | 
   |  |  |                           |  |  | 
   |  |  |     padding               |  |  | 
   |  |  |   _____________________   |  |  | 
   |  |  |  |                     |  |  |  | 
   |  |  |  |  continut           |  |  |  | 
   |  |  |  |_____________________|  |  |  | 
   |  |  |___________________________|  |  | 
   |  |_________________________________|  | 
   |_______________________________________| 

            | latimea elementului | 

   |            latimea cutiei             |
Pentru a stabili latimea marginii folosim margin. Exemplu: 
OL { margin: 60px } /* toate marginile au 60px */ 
OL { margin: 60px 120px } /* sus & jos = 60px, stanga & dreapta = 120px */
Dimensiunile pot fi date in mai multe feluri. Mai sus am folosit valori in pixeli (asta e motivul pentru care se adauga "px" la numar). Daca doresc sa dau dimensiuni diferite fiecarei margini in parte pot folosi mai multe proprietati: 
OL { 
    margin-top: 1em; 
    margin-bottom: 3em; 
    margin-left: 2em;    
    margin-right: 1em; 
  }
Unitatile de tip "em" sunt relative la dimensiunile literelor folosite. O unitate 'em' masoara cat inaltimea literelor majuscule standard folosite in interiorul elementului pentru care folosim valoarea. Literele, la randul lor, se masoara in puncte. In orice editor specializat aveti posibilitatea sa folositi litere de diferite marimi (in puncte). Dimensiunea obisnuita este 12pt. Diferenta dintre pixeli si puncte e urmatoarea: marimile in pixeli sunt relative la densitatea de pixeli pe ecran - data de rezolutia monitorului. Cu cat rezolutia e mai mare, cu atat densitatea de pixeli pe ecran e mai mare (considerand ca ecranul nu-si schimba dimensiunile fizice); Un punct este o unitate de marime absoluta - 1/72 dintr-un inch (2.54 cm). Recapitulare: CSS permite ca valorile pentru proprietatile spatiale sa fie absolute (pt, mm, cm, in - da, toate sunt valori legale: puncte, milimetri, centimetri si inches) sau relative (px, em, %; valorile in procente sunt in functie de o alta marime - latimea elementului bloc, marimea literei etc.).
Cum va simtiti? Ce mai faceti? La mine e ora unu si un sfert noaptea. Sambata. :-) Nu vreau sa insinuez ca asta e ziua si ora cea mai potrivita pentru a parcurge acest tutorial. Poate cineva ar dori sa intrebe: "La ce anume se foloseste CSS?" CSS se foloseste la dektop publishing si la editare HTML profesionala, fiindca ofera un control mult mai mare asupra paginilor de web decat etichetele HTML. In plus, CSS va ofera posibilitatea sa va definiti un stil personal, pe care sa-l folositi la toate paginile pe care le construiti, fara a mai scrie o multime de etichete de fiecare data. Cum se intampla asta? O foaie de stil poate fi introdusa in codul paginii, dar poate fi si salvata ca fisier separat. Un mic truc HTML ne permite sa chemam din orice pagina foaia stilistica respectiva, iar aceasta va functiona ca si cand ar fi fost scrisa in codul paginii. Tineti minte primul exemplu, nu? Voi izola regula din foaia stilistica de acolo si o voi salva intr-un fisier separat, numit stiluri01.css (nu cred ca extensia 'css' e obligatorie, dar arata mai bine asa). Acum voi scrie o pagina din interiorul careia voi apela foaia de stil. Puteti sa o vedeti aici, arata exact la fel (verificati insa codul).

Sa ne intoarcem acum la cutia noastra. Orice cutie (element bloc) poate avea o bordura. Proprietatile fiecarei laturi (sus jos stanga dreapta) pot fi accesate separat, dar o sa va explic cum pot fi modificate toate deodata. Despre ce proprietati e vorba? Grosime si culoare in principal, plus o proprietate stilistica (daca linia e continua sau punctata etc.) Pentru culoare voi avea, de pilda: 
OL {
  border-color: rgb(255, 0, 0)
}
Nu intrati in panica. 'rgb(255, 0, 0)' este o singura valoare, doar ca se foloseste codul RGB (in primul tutorial era o lectie despre culori). Valorile pentru culori pot fi date folosind codificarea RGB (mai sus am scris de fapt rosu) sau codul obisnuit in hexazecimal (dar daca il folositi, scrieti cu litere mici; aceeasi valoare de mai sus ar fi in hexazecimal '#ff0000') sau cuvinte ('red'). Ca si mai sus (la proprietatea margin) pot seta culori diferite pentru fiecare latura in parte insirand (cu spatii libere despartitoare) patru valori una dupa alta (ordinea e: sus jos stanga dreapta). De exemplu asa:
DIV {
  border-color: red green orange blue
}
Grosimea bordurii se stabileste, in aceeasi maniera, folosind border-width. Puteti folosi valori numerice (relative sau absolute) sau cuvinte (thin | medium | thick). La fel ca mai sus, puteti seta grosimi diferite pentru fiecare latura a bordurii folosind siruri de valori.
In fine, stilul bordurii poate fi stabilit cu proprietatea border-style. Valorile posibile sunt: none | dotted | dashed | solid | double | groove | ridge | inset | outset. Le puteti incerca pe rand (de preferinta in Netscape) si sa vedeti ce face fiecare.
O varianta prescurtata (in mod obisnuit nu aveti nevoie de mai mult este sa folositi, pur si simplu proprietatea border cu un sir de trei valori - prima pentru grosime, a doua pentru stil (de obicei e "solid"), iar a treia pentru culoare. Exemplu: 
BLOCKQUOTE {
  border: thin solid blue
}
Proprietatea padding (mai tineti minte atributul CELLPADDING de la tabele?) stabileste distanta continutului cutiei fata de bordura. Se foloseste exact ca margin (si tot ca si la margin exista toate cele patru proprietati: padding-top, padding-bottom, padding-left, padding-right). Acum stiti cam tot ceea ce trebuie sa stiti despre cutii. Pentru un exemplu e suficient sa inspectati codul acestei pagini pentru a vedea cum a fost construita lista ordonata din chenarul albastru de mai inainte. BTW, ce fel de element credeti ca este cel din eticheta <BODY> </BODY>? Tot o cutie.

Toate elementele HTML de tip block-level si inline au proprietati de culoare: culoarea literelor din element (color si culoarea de fundal background-color). Valorile posibile pentru culori sunt cele de mai inainte. De pilda: 
BODY {
  background-color: gray;
  color: black;
}
inlocuieste atributele BGCOLOR si TEXT din <BODY> </BODY>. Cu link-urile lucrurile stau mai complicat. link, active si visited sunt tratate ca niste clase (de fapt, pseudo-clase) ale elementului ancora (A). Selectorul pentru ele este de tipul A:link si sunt elemente inline. In cazul in care formam o clasa din unele linkuri si vrem sa selectam clasa respectiva (sa zicem ca se cheama 'test'), selectorul e de forma: A.test:visited. De pilda, codul: 
A.test:visited {
  color: gray;
}
e echivalent cu VLINK="gray" din <BODY> </BODY>, pentru link-urile din clasa test (adica cele care incep in genul <A CLASS="test" HREF="...).

Banuiesc ca pare complicat. Totul devine mult mai simplu daca experimentati. In loc de exercitii, puteti incerca singuri sa experimentati cu exemplele date aici + altele pe acelasi model. Inainte de a trece mai departe as dori sa va mai spun ceva. Exista o modalitate de a integra codurile CSS in HTML complet. Orice eticheta HTML suporta atributul STYLE, care primeste un sir de valori, despartite de ";". Fiecare valoare e o declaratie CSS. In acest sistem insa, declaratia nu functioneaza decat pentru elementul din eticheta respectiva (in acelasi fel in care se intampla atunci cand foloseam identificatorul ID si selectorul individual aferent). De pilda, un cod de genul: <FONT STYLE="background-color: yellow">TEXT PE FOND GALBEN</FONT> produce un text pe fond galben. In genere nu e folositor sa lucrati asa cu CSS, fiindca ideea e de a grupa elementele din pagina in clase si a le aplica tuturor un stil, nu de a trata fiecare obiect HTML individual, dar mie imi va fi destul de folositor sistemul acesta pentru a scrie niste exemple aici. Ok, acum stiti la ce sa va uitati in codul acestei pagini.

In afara de proprietatile de culoare si proprietatile cutiilor, exista proprietati legate de litere si proprietati legate de text. Acestea sunt cvasi-universale (doar elementele inlocuite nu le suporta - acestea au cateva proprietati speciale; o sa vedeti mai incolo). Cateva proprietati pentru litere:

font-family stabileste tipul de font care urmeaza sa fie folosit (cam ca atributul FACE al etichetei <FONT></FONT>); se foloseste de obicei un sir de valori; fiecare valoare e numele unui format de litera (font); browserul cauta pe rand seturile de caractere; daca nu e gasit primul e cautat al doilea, daca nu e gasit al doilea e cautat al treilea s.a.m.d.; ultima valoare din sir e recomandat sa fie un nume generic de litera [serif (gen 'Times' | sans-serif (gen 'Arial') | cursive | fantasy | monospaced (gen 'Courier')]; numele de fonturi care includ spatii trebuie sa fie puse intre ghilimele; EXEMPLU
font-style primeste ca valori: normal | italic | oblique; restul e de la sine inteles (pentru valoarea "oblique", daca setul de fonturi nu include si fonturi oblice, atunci toata povestea e ignorata) Exemplu cu litere italice
font-variant Doar doua valori: normal (subinteleasa) si small-caps; Netscape nu se descurca cu exemplul de aici; Exemplu cu small-caps
font-weight E vorba de grosimea literei; Aceasta poate fi stabilita folosind valori numerice intre 100 si 900 (din suta in suta), de la subtire la gros, sau folosind cuvinte (normal | bold | bolder | lighter) litere foarte groase
font-size Cu ajutorul ei se stabileste dimensiunea literei; Poate primi oricare din valorile numerice de dinainte (in pt, em, mm, px etc.) sau o valoare dintre: xx-small | x-small | small | medium | large | x-large | xx-large (acestea sunt in principiu echivalente cu valorile numerice 1-7 ale atributului SIZE al etichetei <FONT></FONT>). litere marisoare
line-height E vorba de inaltimea liniei de text. Aceasta poate sa depaseasca dimensiunile literelor. Cu ajutorul acestei proprietati se poate spatia textul la un rand si jumatate, doua etc. text la un rand
si jumatate


In varianta prescurtata, toate valorile pot fi folosite intr-un sir (despartite de spatii goale, in afara de valorile pt. font-size si line-height, care sunt despartite de "/") sub forma de valoare complexa a proprietatii font. De pilda asa: 
P { 
  font: 12pt/14pt bold italic "new century schoolbook", serif 
}
Ok, lectia asta a durat cam mult. Puteti lua o pauza aici. In lectia urmatoare continui cu proprietatile pentru text si pentru elementele inlocuite + cateva proprietati speciale ale listelor, dupa care va explic cum pot fi construite layers (care sa fie vazute si de Netscape si de IE) folosind CSS. Bye!

Cuprins  Lectia anterioara   Lectia urmatoare