Stilurile costituie una dintre noutatile aduse de specificatia HTML 4. Ele permit, in faza de proiectare a site-ului web, separarea continutului paginilor de aspectul lor. Stilurile faciliteaza crearea unor pagini web omogene din punct de vedere tipografic si al prezentarii.
Specificatia HTML 4 prevede doua modele de realizare a foilor de stil:
CSS - Cascading Styles Sheets stiluri in cascada;
JSS JavaScript Styles Sheets - aceasta metoda utilizeaza facilitatile limbajului Javascript.
Ambele modele permit crearea de stiluri multiple cu diferite niveluri de prioritate.
Informarea browserului asupra modelului de stiluri utilizate se realizeaza prin includerea, in sectiunea de antet a documentului, a meta-informatiei:
<meta http-echiv=content-style-type content=text/css>, in cazul stilurilor in cascada, respectiv:
<meta http-echiv=content-style-type content=text/javascript>, pentru stiluri JavaScript.
Ne vom rezuma in aceasta lucrare la prezentarea modelului implicit de stil, si anume: Cascading Styles Sheets (CSS).
In functie de locul in care sunt definite, stilurile pot fi:
in-line (locale);
interne;
externe.
Stiluri in-line (locale)
Stilurile in-line (locale) se definesc in interiorul etichetei elementului de text dorit. Aceasta modalitate de definire de stil poate fi intalnita numai in interiorul perechii <body> </body>. Proprietatile astfel definite au prioritate maxima.
Pentru a defini in-line un stil comun unui bloc de text, se utilizeaza tagul <span>, pentru care se defineste stilul comun dorit. Blocul de text se va include intre etichetele <span>, respectiv </span>.
Definirea stilurilor in-line (locale)
|
<html> <head> <title>Stiluri in-line</title> </head> <body> <h4 style='text-align: center; color: silver'>Stil in-line : Header4 argintiu, centrat</h4> <h4>Header4 obisnuit (bold, aliniat la stanga)</h4> |
|
|
<h4 style='background-color: silver'>Stil in-line: Header4 pe fundal argintiu</h4> <span style='color:blue'> <p>Bloc de text albastru - Paragraf normal</p> <h5>Bloc de text albastru - Header5</h5> <p>Bloc de text albastru - Paragraf normal</p> </span> </body> </html> |
|
Stiluri interne
Stilurile interne se definesc in interiorul documentului HTML curent, in sectiunea head a acestuia, in tagurile <style> si </style>. Stilurile astfel definite sunt mai putin prioritare decat stilurile in-line, dar mai puternice decat stilurile externe.
Definirea stilurilor interne
|
<html> <head> <title>Stiluri interne</title> <style> /*Headerele de marime 4 vor fi argintii si centrate*/ H4 /*Paragrafele vor fi aliniate la dreapta*/ P </style> </head> <body> <h4>Stil intern: Header4 argintiu, centrat</h4> |
|
|
<h4>Alt Header4 argintiu, centrat</h4> <h4 style='text-align: left'>Header4 argintiu (mostenit de la stilul intern pentru H4), dar aliniat la stanga (stil in-line prioritar fata de stilul intern)</h4> <p>Si un paragraf aliniat la dreapta (tot stil intern)</p> </body> </html> |
|
Stiluri externe
Se pot defini stiluri in fisiere externe, de tip htm sau css. Pentru a putea utiliza, intr-un document HTML, un stil definit intr-un fisier extern, acesta trebuie, fie legat, fie importat in documentul HTML.
Pentru a lega o foaie de stil la un document HTML, se va include, in sectiunea head a acestuia, secventa de includere:
<link rel=stylesheet type=text/css href=URL_Foaie_Stil>
Includerea stilurilor externe
|
<!--index.htm--> <html> <head> <title>Stiluri externe</title> <link rel='stylesheet' type='text/css' href='Stil.css'> </head> <body> <h4>Stil extern: Header4 argintiu, centrat</h4> <h4>Alt Header4 argintiu, centrat</h4> <h4 style='text-align: left'>Header4 argintiu (mostenit de la stilul extern pentru H4), |
|
|
dar aliniat la stanga (stil in-line prioritar fata de stilul extern)</h4> <p>Si un paragraf aliniat la dreapta (tot stil extern)</p> </body> </html> |
|
/*stil.css*/
H4
P
Observatie: Intr-o foaie de stil comentariile sunt specifice limbajului C:
/* comentarii */
b. Importarea unei foi de stil intr-un document web
Pentru a importa o foaie de stil intr-un document HTML, se va include, in sectiunea head a acestuia, secventa:
<style>@import url(URL_Foaie_Stil);</style>
Importarea stilurilor externe
|
<!--index.htm--> <html> <head> <title>Stiluri externe importate</title> <style>@import url(stil.css);</style> </head> <body> <h4>Stil extern: Header4 argintiu, centrat</h4> <h4>Alt Header4 argintiu, centrat</h4> |
|
|
<h4 style='text-align: left'>Header4 argintiu (mostenit de la stilul extern pentru H4), dar aliniat la stanga (stil in-line prioritar fata de stilul extern)</h4> <p>Si un paragraf aliniat la dreapta (tot stil extern)</p> </body></html> |
|
/*stil.css*/
H4
P
In functie de elementele carora le sunt destinate, stilurile pot fi:
dedicate;
clase de stiluri;
identificator;
contextuale.
Observatie: Aceasta clasificare este valabila numai pentru stilurile interne sau externe.
Stiluri dedicate
Aceste stiluri sunt dedicate elementelor de text pentru care au fost definite. Fiecare stil este definit prin intermediul unei reguli.
Forma generala a unei reguli:
lista_selectori
unde:
lista de selectori este o succesiune de identificatori de selectori, delimitati prin , (virgula), ce descriu elementele de text carora li se va aplica stilul;
descrierea este o suita de perechi de forma: atribut: valoare, perechile fiind delimitate prin ;
Definirea stilurilor dedicate
|
<html> <head> <title>Stiluri interne dedicate</title> <style> /*Headerele de marime 4 vor fi argintii si centrate*/ h4, blockquote /*Paragrafele vor fi aliniate la dreapta*/ p, </style> </head> <body> |
|
|
<h4>Stil intern dedicat headerelor de marime 4 si citatelor (text argintiu, centrat)</h4> <p>Si un paragraf aliniat la dreapta (tot stil intern)</p> <blockquote><p>Citat argintiu<br>aliniat la dreapta</p></blockquote> <p><blockquote>Citat argintiu<br>centrat</blockquote></p> </body></html> |
|
Clase de stiluri
Clasele de stiluri sunt destinate definirii unui stil general si utilizarii sale acolo unde se doreste.
In aceasta situatie, o regula are forma:
selector . nume_stil
Daca selectorul lipseste, descrierea se va aplica tuturor blocurilor de text.
Utilizarea clasei definite mai sus se realizeaza incluzand in interiorul etichetei elementului dorit secventa:
class = nume_stil
Definirea unei clase de stiluri
|
<html> <head><title>Clase de stiluri</title> <style> /*Clasa H4SC va defini titluri de marime 4, argintii, centrate*/ h4.H4SC /*Stilul clasei BR va scrie cu albastru si va alinia la dreapta orice bloc de text*/ .BR |
|
|
</style> </head> <body> <h4>Un header de marime 4 obisnuit</h4> <h4 class=H4SC>Un header de marime 4 argintiu, centrat</h4> <p class=BR>Si un paragraf albastru aliniat la dreapta</p> </body></html> |
|
Stiluri identificator
Denumirea stilurilor identificator este data de modul in care este asociat stilul respectiv unui bloc de text, prin intermediul atributului id. Definirea unui stil identificator este similara cu a unei clase de stiluri.
Regulile au forma:
# nume_stil
Utilizarea stilului identificat se realizeaza incluzand in interiorul etichetei elementului de text secventa:
id = nume_stil
Definirea unui stil identificator
|
<html> <head> <title>Stiluri Identificator</title> <style> #corp #titlu </style> </head> <body id='corp'> <h4 id='titlu'>Titlu centrat de culoare albastra</h4> <h4 id='titlu' style='color:red'>Titlu centrat de culoare rosie</h4> <p>Paragraf normal colorat in negru si aliniat de stanga.</p> </body></html> |
|
Stiluri contextuale
Stilurile contextuale permit definirea unui stil pentru un anumit context. Sintaxa regulilor este urmatoarea:
lista_selectori_context
unde selectorii din lista sunt separati prin spatii, iar descrierea stilului se conformeaza regulilor de pana acum.
Definirea stilurilor contextuale
|
<html> <head> <title>Stiluri contextuale</title> <style> /*Toate textele aldine incluse in paragrafe vor fi subliniate*/ P B </style> </head> <body> <p>Cititi<b> instructiunile</b> inainte de <b>montare</b></p> </body></html> |
|
Denumirea de stiluri in cascada provine de la faptul ca, la un moment dat, pentru un bloc de text, este posibil sa fie definite mai multe stiluri, in care unele atribute intra in conflict. Problema care se pune este: Care stil este prioritar, deci care dintre atributele redefinite vor controla aspectul blocului?
Amplasarea stilurilor in cascada rezolva aceasta problema, respectand urmatoarea regula: stilurile in-line au cea mai mare prioritate, apoi cele interne si, in cele din urma, stilurile externe, cu prioritate minima.
Amplasarea stilurilor in cascada
|
<html> <head> <title>Stiluri in Cascada</title> <link type='text/css' rel='stylesheet' href='stilCascada.css'> <style> p.rc /*clasa rc (rosu-centrat)*/ </style> </head> <body> <p>Caracteristici text: culoare=albastru (stil extern), aliniere=stanga (stil extern), caractere distantate (stil extern).</p> <p class='rc'>Caracteristici text: culoare=rosu (stil intern), aliniere=centrat (stil intern), caractere distantate (stil extern).</p> |
|
|
<p class='rc' style='color: green'>Caracteristici text: culoare= verde (stil in-line), aliniere=centrat (stil intern), caractere distantate (stil extern).</p> </body></html> |
|
Daca se doreste ca o proprietate a unui stil sa nu fie redefinita, deci, indiferent de locul si modul in care a fost definita, sa aiba prioritate maxima, atunci aceasta va fi urmata de mentiunea ! important.
Prioritate maxima
|
<html> <head> <title>Prioritate maxima</title> <style> p </style> </head> <body> <p style='color: red'>In acest document, paragrafele sunt scrise intotdeauna cu negru!</p> </body> </html> |
|
Alegerea stilului in functie de mediu
Este posibila definirea de stiluri diferite pentru medii diferite. Aceasta deoarece nu intotdeauna se doreste imprimarea unei pagini web exact asa cum este ea afisata pe monitor. Spre exemplu, utilizarea anumitor combinatii de culori ar putea face ca textul imprimat sa fie greu de deslusit.
Pentru a diferentia stilurile utilizate, in functie de mediul de redare, este utilizat atributul media al tagului style. Acesta poate primi valorile:
screen stil destinat afisarii pe monitor;
print - stil destinat imprimarii;
projection - stil destinat proiectoarelor video;
braille stil pentru redarea pe terminale destinate nevazatorilor;
speach - stilul este destinat terminalelor audio;
all orice tip de mediu.
Stiluri adecvate pentru diferite medii de redare
|
<html> <head> <title>Medii de Redare</title> <style media='screen'> body </style> <style media='print'> body </style> </head> <body> Acest document este scris cu gri, dar daca il tipariti la imprimanta va fi negru! </body> </html> |
|
Atribute pentru imprimare - page-break-before, page-break-after
Saltul la o pagina noua a documentului tiparit se poate realiza cu ajutorul atributelor page-break-before, respectiv page-break-after, diferenta intre cele doua fiind pozitia elementului HTML curent fata de pagina noua. Cele doua atribute au sens numai atunci cand este utilizat mediul print pentru redare. Ele pot primi valorile:
auto (valoare implicita) va determina introducerea saltului la pagina noua numai daca este necesar (daca nu este suficient loc pe pagina curenta);
always inserarea saltului la pagina noua se realizeaza neconditionat;
left, right insereaza un salt sau doua, pana cand intalneste o pagina goala in partea stanga, respectiv dreapta.
Atribute pentru imprimare
|
<html> <head> <title>Referat</title> <style media='print'> h1, h2, h3, h4, h5, h6 </style> </head> <body> <h3 style=' page-break-before: auto'>Capitolul 1 - inceputul primei pagini</h3> <h5>Definitii - inceputul celei de-a doua pagini</h5> <h5>Teoreme - inceputul celei de-a treia pagini</h5> </body> </html> |
|
a. Pseudoclasele controleaza comportamentul dinamic al unor elemente, cum ar fi legaturile. Astfel, starile unei legaturi pot fi personalizate cu ajutorul pseudoclaselor:
a : link descrie starea normala a unei legaturi;
a : alink descrie starea activa a unei legaturi;
a : vlink descrie o legatura vizitata;
a : hover descrierea aspectul legaturii cand aceasta primeste focusul. Simuleaza mesajele mouseOver / mouseOut asupra legaturii.
Personalizarea culorilor legaturilor se poate efectua si cu ajutorul atributelor link, alink, vlink ale tagului <body>.
In exemplul de mai jos, hiperlegaturile nu vor mai fi subliniate si vor avea culoarea rosie, indiferent de starea lor. Legaturile vizitate sunt scrise cursiv (italiv), cele active sunt afisate cu caractere aldine (bold), iar legatura care detine focusul este reprezentata cu caractere litera mare, aldine.
Pseudoclase pentru starile hiperlegaturilor
|
<html> <head> <title>Vizitati</title> <style> a a:active a:visited a:hover </style> </head> |
|
|
<body> <h4><i>Vizitati</i></h4> <ul> <li><a href='Peles.htm' title='Peles'>Castelul Peles</a></li> <li><a href='Bran.htm' title='Bran'>Castelul Bran</a></li> <li><a href='Risnov.htm' title='Risnov'>Castelul Risnov</a></li> </ul> </body></html> |
|
b. Pseudoelementele controleaza aspectul anumitor portiuni ale unui element, cum ar fi prima linie a unui paragraf. Astfel, pentru formatarea paragrafelor, avem urmatoarele pseudoelemente:
selector : first-line descrie aspectul primei linii a unui paragraf;
selector : first-letter descrie aspectul primei litere a unui paragraf;
unde selector poate descrie orice element de text.
Pseudoelemente pentru paragrafe
|
<html> <head> <title>Vlad Tepes</title> <style> p: first-letter </style> </head> <body> <p><p:first-letter>F</p:first-letter>olclorul romanesc il pastreaza pe Vlad Tepes ca pe un domnitor drept si crud.</p> |
|
|
<p><p:first-letter>S</p:first-letter>e spune ca orice valoare lasata peste noapte in mijlocul drumului era gasita a doua zi de catre proprietar neatinsa. </p> <p><p:first-letter>T</p:first-letter>radarea, hotia, lenea si chiar minciuna ajunse la urechile voievodului erau rasplatite cu o pedeapsa rapida si implacabila : tragerea in teapa.</p> </body></html> |
|
Stilurile destinate fonturilor controleaza aspectul caracterelor. Ele permit setarea marimii acestora, a familiei fontului, stilul sau, distanta intre randuri samd.
font-style permite definirea stilului fontului, care poate fi:
normal (valoare implicita);
italic;
oblique.
normal (valoare implicita);
small-caps.
o valoare cuprinsa intre 100 si 900. Valoarea 100 corespunde celui mai subtire font, iar valoarea 900, celui mai gros font;
normal (valoare implicita) caractere normale, corespund marimii 400;
bold caractere aldine, corespund marimii 700;
bolder marime relativa ce produce ingrosarea caraterelor fata de grosimea curenta;
lighter marime relativa ce produce subtierea caraterelor fata de grosimea curenta.
o marime absoluta: unul dintre elementele tabelei de marimi predefinite: xx-small; x-small; small; medium (valoare implicita); large; x-large; xx-large. In mod normal, fiecare element al tabelei este mai mare decat elementul anterior cu 50% din marimea acestuia;
o marime relativa: smaller; larger.
Utilizarea uneia dintre cele doua valori produce reducerea, respectiv marirea caracterelor cu 50%. Este echivalenta cu alegerea valorii anterioare, respectiv urmatoare, din tabela de marimi predefinite.
o marime absoluta, sub forma unui numar intreg, reprezentand lungimea caracterului, urmat de o unitate de masura: pt punct tipografic; pc pica; px pixel; in inch; mm milimetru; cm centimetru.
o marime relativa, exprimata sub forma de procente din marimea curenta, urmata de semnul %.
Daca denumirea unei familii de fonturi este alcatuita din mai multe cuvinte (ex.: Times New Roman), atunci numele va fi incadrat intre ghilimele sau apostroafe.
Stiluri pentru proprietatile fonturilor
|
<html> <head> <title>Grand Garage</title> <style> .titlu .corp .contact /*atribut unic*/ .reclama |
|
|
</style> </head> <body> <h1 align='center' class='titlu'>Grand Garage Auto S.R.L.</h1> <p class='corp'>Leader pe piata auto romaneasca, societatea noastra, Grand Garage-Auto S.R.L., comercializeaza autoturisme marca DAEWOO. </p> <p class='reclama'>Preturile noastre sunt mai mici ca niciodata. Daca pana acum nu credeai, vino sa vezi!</p> <address class='contact'>Telefonul clientului: 252.79.82</address> </body></html> |
|
Stiluri pentru culoarea caracterelor
|
<html> <head> <title>Culori text</title> </head> <body> <p style='color: red'>Rosu</p> <p style='color: #ff0'>Galben</p> <!--sau yellow sau #ffff00 sau rgb(255, 255, 0)--> si <p style='color: rgb(0, 0, 255)'>Albastru</p> </body></html> |
|
line-height seteaza distanta intre randuri (intre liniile de baza a doua randuri consecutive). Atributul poate primi valorile:
normal este valoarea implicita si stabileste intre doua randuri consecutive un rand liber;
o valoare numerica pozitiva (factor de scala). In acest caz, distanta intre randuri va fi egala cu factorul de scala multiplicat cu marimea caracterelor blocului curent. De exemplu, valoarea 1.5 a atributului line-height, este echivalenta cu 150%;
procente din marimea fontului blocului curent. Valoarea numerica este urmata de %;
distanta absoluta: valoare numerica, urmata de o unitate de masura.
word-spacing seteaza distanta intre cunvinte. Valorile primite pot fi:
normal valoare implicita;
un numar pozitiv sau negativ, urmat de o unitate de masura, ce se adauga la distanta implicita dintre cuvinte.
letter-spacing seteaza distanta intre caractere. Valorile primite pot fi:
normal valoare implicita. Browserele pot modifica distanta intre caractere, in cazul utilizarii valorii normal, pentru a alinia justify un bloc de text. Utilizarea unei valori explicite pentru distanta intre caractere va inhiba aceasta posibilitate.
un numar pozitiv sau negativ, urmat de o unitate de masura, ce se adauga la distanta implicita dintre caractere.
Stiluri pentru blocuri - Distante
|
<html> <head> <title>Grand Garage</title> <style> .titlu .corp .reclama </style> </head> <body> <h2 class='titlu'>Grand Garage </h2> |
|
|
<p class='corp'>Leader pe piata auto romaneasca, societatea noastra, Grand Garage-Auto S.R.L., comercializeaza autoturisme marca DAEWOO. </p> <p class='reclama'>Daca vrei sa intelegi aceste randuri, treci pe la reprezentanta noastra!</p> </body></html> |
|
vertical-align seteaza alinierea verticala a blocului. Aceasta poate fi:
baseline valoare implicita aliniaza linia de baza a textului cu cea a blocului parinte;
super textul va fi afisat ca exponent;
sub textul va fi afisat ca indice;
top partea superioara a elementului curent va fi aliniata la partea superioara a celui mai inalt element de pe linie;
middle aliniaza centrul (pe verticala) elementului curent cu linia de baza a blocului parinte la care adauga jumatate din inaltimea acestuia;
bottom partea inferioara a elementului curent va fi aliniata la partea inferioara a celui mai de jos element de pe linie;
text-top partea superioara a elementului curent va fi aliniata la partea superioara a textului blocului parinte;
text-bottom partea inferioara a elementului curent va fi aliniata la partea inferioara a textului blocului parinte;
procent aliniaza linia de baza a elementului curent cu procent din inaltimea sa fata de linia de baza a blocului parinte.
text-align seteaza alinierea pe orizontala a textului, care poate fi:
left valoare implicita;
center
right
justify.
Stiluri pentru alinieri ale textelor
|
<html> <head> <title>Alinieri text</title> </head> <body> <p style='text-align: left'>Text aliniat la stanga</p> <p style='text-align: right'>Text aliniat la dreapta</p> <p style='text-align: center'>Text centrat</p> <p style='text-align: justify'>Text aliniat si la stanga si la dreapta</p> </body> </html> |
|
|
|
text-indent seteaza valoarea cu care este indentata prima linie a blocului de text. Atributul poate primi o valoare pozitiva (indentare la dreapta) sau negativa (indentare la stanga). Indentarea nu se efectueaza si in mijlocul blocului, dupa un element de tip linie noua, cum sunt <br> si <hr>. Valorile primite de atributul text-indent sunt exprimate in:
valoare absoluta - numere intregi pozitive sau negative, urmate de o unitate de masura;
procent din latimea blocului parinte. In acest caz, valoarea relativa este urmata se simbolul %.
text-decoration permite decorarea textului. Atributul poate primi valorile:
none este valoarea implicita;
underline text subliniat;
overline este afisata o linie deasupra textului;
line-throught text taiat;
blink textul clipeste. Reamintim ca, la ora actuala, majoritatea browserelor recunosc aceasta proprietate, insa nu toate ofera suport pentru efectul de clipire.
Stiluri pentru decoratiunile textelor
|
<html> <head><title>Decoratiuni Texte</title><style> a </style> </head> <body> <h4>Decoratiunile textelor: </h4> <ol> <li><p style=' text-decoration: underline'>text subliniat;</p></li> <li><p style=' text-decoration: line-through'>text taiat;</p></li> <li><p style=' text-decoration: overline'>text cu o linie deasupra</p></li> <li><p style=' text-decoration: blink'>text clipitor</p></li> <li><p style=' text-decoration: none'>text normal</p></li> <li><p><a href='doc.htm'>hiperlegatura nesubliniata</p></a></li> </ol> </body> </html> |
text-transform efectueaza diferite transformari asupra caracterelor blocului de text:
capitalize converteste prima litera a fiecarui cuvant in litera mare;
uppercase - converteste toate literele blocului in litere mari;
lowercase - converteste toate literele blocului in litere mici;
none inhiba orice transformare de aceasta natura mostenita de la un alt stil.
Stiluri pentru transformarile textelor
|
<html> <head> <title>Transformari Texte</title> <style> body .up .lw .no </style> </head> <body> <h4>Transformari Texte:</h4> <ol> <li>capitalize - toate cuvintele textului incep cu litera mare;</li> <li class='up'>uppercase - toate caracterele textului sunt scrise cu litere mari;</li> |
|
|
<li class='lw'>lowercase - Toate Caracterele Textului Sunt Scrise Cu Litere Mici;</li> <li class='no'>none- este anulata orice transformare mostenita.</li> </ol> </body> </html> |
|
Stiluri pentru transformarile textelor
|
<html> <head> <title>Casa de Mobila</title> <style> address, h4 h3 a p </style> </head> <body> <h3>calitate, stil, eleganta </h3> <p>Cu o traditie de peste 10 ani in fabricarea si comercializarea mobilei de birou, societatea noastra, S.C. Mobila S.A. va invita sa vizitati paginile site-ului nostru, cu speranta ca aceasta va constitui un prim pas in stabilirea unor legaturi trainice intre dvs. si noi.</p> |
|
|
<h4 style=' text-decoration: overline; text-transform: uppercase'>Contact</h4> <address> Str. Lujerului 256<br> Tel. Clientului: 091.26.45.57<br> e-mail: <a href='contact.htm'>webmaster</a> </address> <address style='text-decoration: line-through'> Tel. vechi: 092.295.605<br> </address> </body></html> |
|
Atributul background controleaza fundalul textelor.
background-color permite stabilirea unei culori de fond pentru texte. Valoarea primita poate fi:
un nume predefinit de culoare,
un triplet hexa de forma #rrggbb,
un apel al functiei rgb(R, G, B), unde R, G, B sunt fie numere intregi cuprinse in intervalul [0, 255], fie procente din potentialul maxim ([0%, 100%]),
transparent.
Valoarea implicita este transparent.
background-image permite stabilirea unei imagini de fundal. Implicit, are valoarea none. Primeste ca parametru adresa URL a imaginii. Adeseori, utilizarea unei imagini de fundal este insotita de o culoare de fond (atributul background-color), necesara in situatia in care imaginea nu este disponibila.
background-attachement controleaza comportamentul imaginii de fundal fata de derularea textului. Valorile admise sunt:
scroll imaginea si textul sunt derulate impreuna. Aceasta este valoarea implicita.
fixed imaginea este fixa, iar textul este derulat.
background-repeat controleaza modalitatea de multiplicare a imaginii de fundal, care poate fi:
repeat este valoarea implicita si semnifica faptul ca imaginea va fi multiplicata si pe orizontala si pe verticala, atat cat se intinde textul;
repeat-x imaginea este multilicata numai pe orizontala, realizandu-se o banda orizontala de imagine;
repeat-y imaginea este multilicata numai pe verticala, realizandu-se o banda verticala de imagine;
no-repeat imaginea este afisata o singura data, fara multiplicare.
background-position permite stabilirea pozitiei, in raport cu blocul de text, a primei imagini (cea din coltul stanga-sus), fata de care se vor realiza, daca este cazul, multiplicarile adecvate. Valorile primite de atribut sunt specificate sub forma:
de valori absolute, urmate fiecare de o unitate de masura;
ex: background-position: 5pt 5pt
de valori relative, urmate fiecare de semnul %;
ex: background-position: 5% 0
top, center, bottom valorile specifica pozitia relativa a imaginii, pe orizontala, fata de text (implicit este center);
left, center, right valorile specifica pozitia relativa a imaginii, pe verticala, fata de text (implicit este center).
background stabilirea proprietatilor imaginii de fundal poate fi realizata si prin intermediul unui atribut unic, background. Valorile transmise acestui atribut sunt specificate in ordinea:
background background-color background-image background-attachement background-repeat background-position, cu mentiunea ca anumite valori pot lipsi.
Stiluri pentru fundaluri culoare de fond
|
<html> <head> <title>Grand Garage</title> <style> h3 h6 p b u </style> </head> <body> <h3 align='center'>Grand Garage Auto S.R.L.</h3> |
|
|
<h6>Despre noi</h6> <p>Leader pe piata auto romaneasca, societatea noastra, Grand Garage-Auto S.R.L., comercializeaza autoturisme marca DAEWOO. </p> <h6>Preturi</h6> <p>Preturile noastre sunt <b>mai mici ca niciodata</b>. Daca pana acum nu credeai, <u>vino sa vezi!</u></p> <h6>Contact</h6> <address>Telefonul clientului: 252.79.82</address> </body></html> |
|
Stiluri pentru fundaluri imagini de fond
|
<html> <head><title>Multiplicari imagini fundal</title></head> <body> <p style='background-image: url('Casuta.jpg'); background-repeat: repeat'>Imagine de fundal multiplicata in ambele directii.</p> <p style='background-image: url('Casuta.jpg'); background-repeat: no-repeat'>Imagine de fundal ce nu se multiplica.</p> <p style='background-image: url('Casuta.jpg'); background-repeat: repeat-x'>Imagine de fundal multiplicata pe orizontala.</p> <p style='background-image: url('Casuta.jpg'); background-repeat: repeat-y'>Imagine de fundal multiplicata pe verticala.</p> </body></html> |
|
Aspectul blocurilor de text este controlat prin intermediul a patru categorii de dimensiuni, asa cum este reprezentat schematic mai jos:
-fig.8.1. Cele patru categorii de dimensiuni ale blocurilor-
Legenda:
margin distanta intre blocul curent si blocul parinte;
border-width latimea chenarului;
padding distanta intre chenar si continutul blocului;
width / height lungimea / inaltimea blocului.
Atributul border-width poate primi de la una la patru valori, corespunzatoare laturilor de sus / dreapta / jos, respectiv stanga, separate prin spatii. Daca primeste o singura valoare, atunci toate cele patru laturi ale chenarului vor avea aceasta grosime. Daca primeste doua valori, atunci laturile de sus si jos au ca grosime prima valoare, iar laturile stanga si dreapta vor avea grosimea data de cea de-a doua valoare. Daca sunt precizate trei valori, prima dintre ele va fi grosimea laturii de sus, cea de-a doua valoare va fi grosimea laturilor stanga si dreapta, iar cea de-a treia, a laturii de jos. Daca primeste patru valori, ele vor corespunde, in ordine, laturilor sus, dreapta, jos, stanga (ordinea arcelor de ceas).
Se pot defini grosimi, separat, pentru fiecare latura a chenarului in parte, utilizand atributele:
border-top-width
border-right-width
border-bottom-width
border-left-width
Stiluri pentru chenare
|
<html> <head><title>Grosimi laturi chenare</title></head> <body> <p style=' border-style: solid; border-width: thin medium thick'> Chenar cu laturi de grosimi diferite:<br> - thick --> sus;<br> - medium --> dreapta si stanga;<br> - thin --> jos. </p></body></html> |
|
none valoare implicita ce inhiba afisarea chenarului;
solid linie continua;
double linie continua dubla;
dotted linie punctata;
dashed linie intrerupta;
inset chenar 3D umbrit in dreapta-jos;
outset chenar 3D umbrit in stanga-sus;
groove chenar 3D apasat;
ridge - chenar 3D ridicat;
Ca si in cazul atributului border-width, atributul border-style poate primi mai multe valori, facilitand definirea unui stil aparte pentru fiecare latura a chenarului. Regulile de asociere a acestor valori cu laturile sunt similare atributului border-width.
De asemenea, definirea de stiluri pentru fiecare latura in parte, se poate realiza utilizand atributele:
border-top-style
border-right- style
border-bottom- style
border-left- style
Stiluri pentru chenare
|
<html> <head> <title>Stiluri pentru chenare</title> </head> <body> <center> <p>Bloc de text fara chenar (valoare implicita)</p> <p style=' border-style: solid'>Bloc de text cu chenar-linie continua</p> <p style=' border-style: double'>Bloc de text cu chenar-linie continua dubla</p> <p style=' border-style: dotted'>Bloc de text cu chenar-linie punctata</p> <p style=' border-style: dashed'>Bloc de text cu chenar-linie intrerupta</p> <p style=' border-style: inset'>Chenar 3D-inset</p> <p style=' border-style: outset'>Chenar 3D-outset</p> <p style=' border-style: groove'>Chenar 3D-groove</p> <p style=' border-style: ridge'>Chenar 3D-ridge</p> </center> </body> </html> |
|
Ca si in cazul celorlalte doua atribute ce controleaza chenarul, atributul border-color poate primi valori pentru anumite perechi de laturi. Definirea culorilor, separat, pentru fiecare latura, se poate realiza cu atributele:
border-top-color
border-right- color
border-bottom- color
border-left- color
Stiluri pentru chenare
|
<html> <head><title>Culori laturi chenare</title><style> p </style> </head> <body> <center> <p>Chenar cu toate laturile albastre.</p> <p style='border-color: blue red'>Chenar cu laturile verticale rosii si cele orizontale albastre.</p> <p style='border-color: blue red green'>Chenar cu laturile de sus albastre, cele verticale rosii si latura de jos verde.</p> <p style='border-color: blue red green yellow'>Chenar cu fiecare latura de alta culoare.</p> </center> </body></html> |
|
absoluta printr-o valoare intreaga nenegativa, urmata de o unitate de masura;
procent din distanta corespunzatoare a blocului parinte;
auto.
Implicit, atributul margin ia valoarea 0, nelasand spatiu in nici o directie.
Pentru definirea distantelor pentru fiecare latura in parte, se pot utiliza atributele:
margin-top-width
margin-right-width
margin-bottom-width
margin-left-width
Stiluri pentru margini
|
<html> <head><title>Margini chenare</title> <style> p </style> </head> <body> <center> <p style='margin: 10% 10%'>Bloc aflat la 10% distanta pe verticala de celelalte elemente, si 10% distanta orizontala.</p> <p style='margin: 10% 30%'>Bloc aflat la 10% distanta pe verticala de celelalte elemente, si 30% distanta orizontala.</p> </center> </body></html> |
|
valori absolute valori intregi nenegative, urmate de o unitate de masura;
procente din marimea corespunzatoare a blocului parinte;
auto
Urmatoarele atribute permit definirea distantelor interne pentru fiecare latura in parte:
padding-top
padding-right
padding-bottom
padding-left.
Stiluri pentru distante in interiorul chenarului
|
<html> <head> <title>Distanta interna</title> <style> p </style> </head> <body> <p style='padding: 1cm 5%'>Bloc aflat la 1 cm distanta verticala si 5% din latimea paginii pe orizontala fata de chenar.</p> <p style='padding: 5%'>Bloc aflat la 5% din latimea paginii, distanta verticala si orizontala fata de chenar.</p> </body> </html> |
|
|
|
marime absoluta un numar intreg pozitiv urmat de o unitate de masura;
procent din dimensiunile blocului parinte;
auto browserul calculeaza dimensiunea optima.
Cele doua atribute sunt destinate blocurilor de text, dar se dovedesc extrem de utile in cazul inserarii de imagini in-line, permitand controlul dimensiunilor acestora. In acest caz, imaginea va fi redimensionata la marimea data de parametrul width sau height. Pentru a se pastra proportiile imaginii, se va utiliza unul singur dintre cele doua atribute, cel de-al doilea fiind setat pe valoarea auto.
Stiluri pentru dimensiunile blocurilor
|
<html> <head> <title>Dimensiuni blocuri</title> <style> p img </style> </head> <body> <p style='width: auto'>Paragraf de latime 'auto'.</p> <p style='width: 50%'>Paragraf ce ocupa 50% din latimea paginii.</p> Imagine de latime 20% din latimea paginii, care isi pastreaza proportia:<br> <img src='../Multimedia/imagini/Bran.jpg' border='1' align='left'> </body> </html> |
left celelalte elemente vor umple partea dreapta a blocului curent;
right celelalte elemente vor umple partea stanga a blocului curent;
none.
Stiluri pentru alinierea blocurilor
|
<html> <head> <title>Mituri si legende</title> <style> p: first-letter </style> </head> <body> <p><p:first-letter>Miturile si legendele aduc o nota de atractie suplimentara.</p:first-letter></p> </body> </html> |
|
disc valoare implicita;
circle
square
decimal 1, 2, 3 ;
lower-roman i, ii, iii ;
upper-roman I, II, III ;
lower-alpha a, b, c ;
upper-alpha A, B, C
list-style-position defineste modul de afisare. Poate lua valorile:
inside afisare compacta (echivalent cu <ul compact>);
outside valoare implicita.
list-style atribut unic ce permite definirea stilului unei liste. El primeste valorile atributelor de mai sus, in orice ordine, separate prin spatii.
Stiluri pentru liste
|
<html> <head><title>Oferta turistica</title><style> ul.casute ol </style> </head> <body> <ul class='casute'> <b>Cazare in:</b> <li> <i> hoteluri;</i> <li> <i>vile;</i> <li> <i>pensiuni agroturistice.</i> </ul> <ol><b>Servicii incluse:</b> <li><i>transport cu autocar omologat;</i> <li><i>insotitor din partea agentiei.</i> </body></html> |
|
Modificare cursorului mouse-ului se realizeaza cu ajutorul proprietatii cursor, care poate lua valorile:
auto valoare implicita;
default
crosshair
hand cursor in forma de mana;
move - cursor in forma de cruce;
e-resize, ne-resize, nw-resize, n-resize, se-resize, sw-resize, s-resize, w-resize - cursor in forma de sageata (prefixul indica directia sagetii: est, nord-est samd.);
text cursor in forma de punct de inserare;
wait - cursor in forma de clepsidra;
help - cursor in forma de ajutor.
Stiluri pentru cursorul mouse-ului
|
<html> <head><title>Forme cursor mouse</title> <style> body </style> </head> <body> <p>In acest document cursorul mouse-ului va avea forma de mina, iar deasupra hiperlegaturii de mai jos va lua forma de ajutor!</p> <p><a href='http://www.rolink.ro/Info.htm' style=' cursor:help'>Informatii</a></p> </body></html> |
|
|
Politica de confidentialitate |
 .com |
Copyright ©
2024 - Toate drepturile rezervate. Toate documentele au caracter informativ cu scop educational. |
Personaje din literatura |
| Baltagul caracterizarea personajelor |
| Caracterizare Alexandru Lapusneanul |
| Caracterizarea lui Gavilescu |
| Caracterizarea personajelor negative din basmul |
Tehnica si mecanica |
| Cuplaje - definitii. notatii. exemple. repere istorice. |
| Actionare macara |
| Reprezentarea si cotarea filetelor |
Geografie |
| Turismul pe terra |
| Vulcanii Și mediul |
| Padurile pe terra si industrializarea lemnului |
| Termeni si conditii |
| Contact |
| Creeaza si tu |
