O sa continui povestea cu CSS exact de unde am lasat-o, fiindca eu nu am facut nici un fel de pauza :-). Dar inainte de asta, am o mica observatie. De ce se vorbeste despre o cascada? Fiindca toate elementele HTML aflate intr-un element ale carui proprietati au fost stabilite intr-o foaie de stil mostenesc proprietatile respective. Asta in cazul in care nu exista un selector contextual care sa spuna pentru unul sau altul dintre ele ca lucrurile stau altfel. Unele reguli pot fi contradictorii (sau pot parea astfel). In acest caz ultima regula din cod se aplica. Mai exista tot felul de explicatii cu privire la precedenta regulilor, taria lor etc. etc. Dar nu o sa le explic. Puteti, eventual sa va uitati la un exemplu si sa mai experimentati singuri.
Acum sa vedem care erau proprietatile textului. Cel mai simplu e sa folosesc tot un
tabel:
| word-spacing | spatierea cuvintelor; valorile sunt numerice; aceasta proprietate e doar teoretica - browserele nu au implementat-o inca | cuvinte despartite de spatiu |
| letter-spacing | spatierea literelor; acelasi lucru ca mai sus; Netscape nu a implementat inca asta, IE da. | spatiu intre litere |
| text-decoration | valori posibile: none | underline | overline | line-through | blink; un efect special se obtine folosind A:link, A:active, A:visited {text-decoration: none} - linkurile nu mai apar subliniate; ca si in cazul etichetelor respective IE nu vede in continuare BLINK | text care clipeste |
| vertical-align | cu aceasta proprietate se obtine efectele de tip subscript/superscript; valori posibile: baseline | sub | super | top | text-top | middle | bottom | text-bottom; (baseline e valoarea implicita - singura pe care o primeste Netscape); la aceste valori se adauga valori pozitive sau negative (cu "-" in fata) in procente care indica cu cat la suta din dimensiunea stabilita cu line-height este ridicata sau coborata linia textului fata de linia normala (dar nu sunt inca suportate de browsere); se aplica doar elementelor inline; | textjos |
| text-transform | se foloseste pentru "capitalizare" si pt. a afisa ceva cu majuscule chiar daca nu a fost scris asa (sau invers); valori: capitalize | uppercase | lowercase | prima litera mare |
| text-align | functioneaza ca atributul ALIGN al etichetelor; valorile sunt: left | right | center | justify; se aplica doar elementelor de tip bloc; | la dreapta |
| text-indent | o proprietate foarte utila daca doriti ca prima linie a unui paragraf nou sa nu inceapa lipita de marginea din stanga; valorile sunt numerice; se aplica doar elementelor de tip bloc; | prima linie a doua linie |
Am putea imparti proprietatile in mai multe categorii. E doar o impartire mnemotehnica, fiindca nu e perfecta. Sunt proprietati legate de aspectul textului, proprietati legate de pozitionarea elementelor in pagina si proprietati de culoare. Exista, cum spuneam, si alte proprietati, mai greu de incadrat in clasificarea asta. De pilda, asa cum exista background-color, exista si background-image, cu ajutorul careia se poate stabili, in principiu pentru orice element bloc, o imagine de fundal. Valoarea introduce adresa (absoluta sau relativa a) fisierului imaginii in forma url(ADRESA). Valorile pentru culoare si imagine de fundal pot fi combinate ca valoare complexa a proprietatii background - daca nu e gasita imaginea e folosita culoarea (aveti un exemplu chiar la inceputul codului acestei pagini). O proprietate interesanta e background-attachment, cu valorile posibile: scroll | fixed. "fixed" nu functioneaza decat in IE, si doar atunci cand e vorba de BODY, dar efectul e foarte interesant - imaginea de fundal nu curge in jos impreuna cu textul, ci ramane pe loc. Alte proprietati legate de folosirea unei imagini de fundal sunt background-repeat (cu valorile: repeat | repeat-x | repeat-y | no-repeat; incercati-le singuri si o sa vedeti despre ce e vorba) si background-position (valorile uzuale sunt: center | top left | top right | bottom left | bottom right; la astea se adauga alte combinatii intre cuvintele top, bottom, center, left si right; atunci cand imaginea de fundal nu se repeta si e mai mica decat cutia, poate fi pozitionata in interiorul cutiei in care apare). Alte proprietati mai speciale (desi va sunt deja cunoscute) sunt width si height. Acestea primesc valori numerice (sau valoarea "auto") si sunt folosite pentru elemente inlocuite (in special pentru IMG) sau bloc. Alte proprietati care sunt folosite combinat in genere cu imagini (dar si cu text inline) sunt float (cu valorile: left | right | none) si clear (cu valorile none | left | right | both). In fine, elementele de tip lista au cateva proprietati specifice. Una este list-style-tipe (cu valorile: disc | circle | square | decimal | lower-roman | upper-roman | lower-alpha | upper-alpha | none). Cu ajutorul ei se stabileste ce fel de marker sa fie folosit pt. lista. O alta, alternativa, este list-style-image care are ca valoare adresa unei imagini (modelul url(ADRESA)) care sa fie folosita in loc de punct negru sau patratel sau numar etc. ca marker pentru fiecare element al listei. Ultima proprietate despre care mai vreau sa vorbesc, fiindca m-am cam plictisit (si, oricum, tot ce era mai important a fost spus) este white-space (valori posibile: normal | pre | nowrap). Cu ajutorul ei se poate stabili ca in interiorul unui element HTML oarecare ce contine si text spatiile libere sa fie tratate ca in interiorul etichetei <PRE> </PRE>.
Ok, acum trec la ultima parte. Exista o extensie naturala la CSS care ne permite sa
construim layere, iar acestea vor fi vazute si de IE. Uitati-va mai intai la
urmatorul tabel de corespondente:
| HTML | CSS | ||
| <LAYER> </LAYER> | <DIV STYLE="position: absolute;"> </DIV> | ||
| <ILAYER> </ILAYER> | <DIV STYLE="position: relative;"> </DIV> | ||
| atribut | valori | proprietate | valori |
| NAME | "a-x1-9" | ID (atribut pt. DIV) | "a-x1-9" |
| LEFT | pixeli | left | valori numerice (px, pt, em, in) |
| TOP | pixeli | top | valori numerice (px, pt, em, in) |
| PAGEX | pixeli | left (combinat cu position: absolute) |
valori numerice (px, pt, em, in) |
| PAGEY | pixeli | top (combinat cu position: absolute) |
valori numerice (px, pt, em, in) |
| HEIGHT | pixeli | height | valori numerice (px, pt, em, in) |
| WIDTH | pixeli | width | valori numerice (px, pt, em, in) |
| CLIP | pixeli xStSus, yStSus, xDrJos, yDrJos |
clip | valori numerice (px, pt, em, in) rect(Top, Right, Bottom, Left) |
| - | - | overflow | none | clip | scroll |
| Z-INDEX | numere pozitive | z-index | numere pozitive |
| VISIBILITY | hide | show | visibility | inherit | visible | hidden |
In continuare aveti un exemplu comparativ. Codul obisnuit pentru layers in Netscape (imprumutat din lectia 4) arata astfel:
Probabil ca ati adormit, sau ati renuntat pe parcurs, sau sunteti in ceata. But then again, poate ca nu. Daca v-ati batut capul pana aici, eu cred ca nu ar trebui sa renuntati. Mai e un pic (dupa care urmeaza, in continuarea acestor lectii, un tutorial de JavaScript, iar apoi unul de VRML, CGI si Perl (si PHP si MySQL), iar apoi unul de Java). Ar mai fi cateva consideratii finale de facut, dar mi-e cam somn ... foaaarte somn... extrem de somn... In fine, spun pe scurt. Ideea generala este ca hypertextul evolueaza, atata cat imi dau eu seama in urmatoarea directie. Exista o forma logica sau conceptuala a textului (etichetele indica ceva cu privire la continut - e vorba de un titlu, o definitie, un exemplu, un citat etc.) si o forma grafica (litere ingrosate, culori, sublinieri, alinieri diferite etc. etc.). Forma conceptuala a textului este creata cu ajutorul etichetelor HTML (iar sistemul acestor etichete este dezvoltat cu ajutorul unui limbaj in care pot fi definite (in codul paginii) etichete noi - Extensible Mark-up Language (XML - inlocuitorul vechiului SGML). Pe aceasta structura se aplica forma grafica a textului, folosind CSS. Pe de alta parte, aceasta lume a obiectelor HTML este pusa in miscare fie folosind limbaje de scripting, fie incapsuland in ea obiecte noi, dinamice, interactive (de pilda applet-uri java). Sigur ca tot ceea ce ati invatat deja, cu un exercitiu bun, va e suficient pentru a va lansa in cariera de webmaster/webdesigner. Daca insa vreti sa deveniti ceva mai mult decat atat (programatori de aplicatii web, de pilda), mai aveti ceva drum de parcurs. Nici eu nu sunt la capatul unui asemenea drum, recunosc :-). Incerc doar sa o iau cu un pas inaintea altor oameni care doresc sa invete cate ceva si sa scriu tot felul de povesti pentru ei. Cu siguranta ca urmatoarea poveste va fi din tara lui JavaScript. Doar ca acum mi-e groaznic de somn... Bye!