Stilurile costituie una dintre noutatile aduse de specificatia HTML 4. Ele permit, în 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 în 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, în sectiunea de antet a documentului, a meta-informatiei:
<meta http-echiv="content-style-type" content="text/css">, în cazul stilurilor în cascada, respectiv:
<meta http-echiv="content-style-type" content="text/javascript">, pentru stiluri JavaScript.
Ne vom rezuma în aceasta lucrare la prezentarea modelului implicit de stil, si anume: Cascading Styles Sheets (CSS).
În functie de locul în care sunt definite, stilurile pot fi:
o in-line (locale);
o interne;
o externe.
Stiluri in-line (locale)
Stilurile in-line (locale) se definesc în interiorul etichetei elementului de text dorit. Aceasta modalitate de definire de stil poate fi întâlnita numai în 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 între 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&l 737i84h t;/p> <h5>Bloc de text albastru - Header5</h5> <p>Bloc de text albastru - Paragraf normal&l 737i84h t;/p> </span> </body> </html> |
|
Stiluri interne
Stilurile interne se definesc în interiorul documentului HTML curent, în sectiunea head a acestuia, în tagurile <style> si </style>. Stilurile astfel definite sunt mai putin prioritare decât stilurile in-line, dar mai puternice decât 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 în fisiere externe, de tip htm sau css. Pentru a putea utiliza, într-un document HTML, un stil definit într-un fisier extern, acesta trebuie, fie "legat", fie importat în documentul HTML.
Pentru a lega o foaie de stil la un document HTML, se va include, în 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: Într-o foaie de stil comentariile sunt specifice limbajului C:
/* comentarii */
b. Importarea unei foi de stil într-un document web
Pentru a importa o foaie de stil într-un document HTML, se va include, în 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
În 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.
În 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 incluzând în 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 în 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 incluzând în 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 pâna 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 în cascada provine de la faptul ca, la un moment dat, pentru un bloc de text, este posibil sa fie definite mai multe stiluri, în care unele atribute intra în conflict. Problema care se pune este: Care stil este prioritar, deci care dintre atributele redefinite vor controla aspectul blocului?
Amplasarea stilurilor în cascada rezolva aceasta problema, respectând urmatoarea regula: stilurile in-line au cea mai mare prioritate, apoi cele interne si, în cele din urma, stilurile externe, cu prioritate minima.
Amplasarea stilurilor în 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 în 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 în functie de mediu
Este posibila definirea de stiluri diferite pentru medii diferite. Aceasta deoarece nu întotdeauna 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, în 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 între cele doua fiind pozitia elementului HTML curent fata de pagina noua. Cele doua atribute au sens numai atunci când 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, pâna când întâlneste o pagina goala în partea stânga, 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 când 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>.
În 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 între rânduri samd.
font-style - permite definirea stilului fontului, care poate fi:
normal (valoare implicita);
italic;
oblique.
normal (valoare implicita);
small-caps.
o valoare cuprinsa între 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 îngrosarea 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. În mod normal, fiecare element al tabelei este mai mare decât 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 întreg, reprezentând 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 încadrat între 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 între rânduri (între liniile de baza a doua rânduri consecutive). Atributul poate primi valorile:
normal - este valoarea implicita si stabileste între doua rânduri consecutive un rând liber;
o valoare numerica pozitiva (factor de scala). În acest caz, distanta între rânduri 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 între 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 între caractere. Valorile primite pot fi:
normal - valoare implicita. Browserele pot modifica distanta între caractere, în cazul utilizarii valorii normal, pentru a alinia justify un bloc de text. Utilizarea unei valori explicite pentru distanta între 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 înalt element de pe linie;
middle - aliniaza centrul (pe verticala) elementului curent cu linia de baza a blocului parinte la care adauga jumatate din înaltimea 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 înaltimea 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 stânga). Indentarea nu se efectueaza si în mijlocul blocului, dupa un element de tip linie noua, cum sunt <br> si <hr>. Valorile primite de atributul text-indent sunt exprimate în:
valoare absoluta - numere întregi pozitive sau negative, urmate de o unitate de masura;
procent din latimea blocului parinte. În 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, însa 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 cuvânt în litera mare;
uppercase - converteste toate literele blocului în litere mari;
lowercase - converteste toate literele blocului în 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 întregi cuprinse în 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 însotita de o culoare de fond (atributul background-color), necesara în situatia în 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 împreuna. 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, atât cât se întinde textul;
repeat-x - imaginea este multilicata numai pe orizontala, realizându-se o banda orizontala de imagine;
repeat-y - imaginea este multilicata numai pe verticala, realizându-se o banda verticala de imagine;
no-repeat - imaginea este afisata o singura data, fara multiplicare.
background-position - permite stabilirea pozitiei, în raport cu blocul de text, a primei imagini (cea din coltul stânga-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 în 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.12.8.1. Cele patru categorii de dimensiuni ale blocurilor-
Legenda:
margin - distanta între blocul curent si blocul parinte;
border-width - latimea chenarului;
padding - distanta între chenar si continutul blocului;
width / height - lungimea / înaltimea blocului.
Atributul border-width poate primi de la una la patru valori, corespunzatoare laturilor de sus / dreapta / jos, respectiv stânga, 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 stânga 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 stânga si dreapta, iar cea de-a treia, a laturii de jos. Daca primeste patru valori, ele vor corespunde, în ordine, laturilor sus, dreapta, jos, stânga (ordinea arcelor de ceas).
Se pot defini grosimi, separat, pentru fiecare latura a chenarului în parte, utilizând 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 întrerupta;
inset - chenar 3D umbrit în dreapta-jos;
outset - chenar 3D umbrit în stânga-sus;
groove - chenar 3D apasat;
ridge - chenar 3D ridicat;
Ca si în cazul atributului border-width, atributul border-style poate primi mai multe valori, facilitând 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 în parte, se poate realiza utilizând 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 în 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 întreaga nenegativa, urmata de o unitate de masura;
procent din distanta corespunzatoare a blocului parinte;
auto.
Implicit, atributul margin ia valoarea 0, nelasând spatiu în nici o directie.
Pentru definirea distantelor pentru fiecare latura în 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 întregi nenegative, urmate de o unitate de masura;
procente din marimea corespunzatoare a blocului parinte;
auto
Urmatoarele atribute permit definirea distantelor interne pentru fiecare latura în parte:
padding-top
padding-right
padding-bottom
padding-left.
Stiluri pentru distante în 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 întreg 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 în cazul inserarii de imagini in-line, permitând controlul dimensiunilor acestora. În 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 stânga 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;
o circle
square
decimal
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, în 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 în forma de mâna;
move - cursor în forma de cruce;
e-resize, ne-resize, nw-resize, n-resize, se-resize, sw-resize, s-resize, w-resize - cursor în forma de sageata (prefixul indica directia sagetii: est, nord-est samd.);
text - cursor în forma de punct de inserare;
wait - cursor în forma de clepsidra;
help - cursor în 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="https://www.rolink.ro/Info.htm" style=" cursor:help">Informatii</a></p> </body></html> |
|
|
