Căutare
Ultimele subiecte
Meteo
| Meteo |  |
      |
Flux 
Cine este conectat?
În total sunt 3 utilizatori conectați: 0 Înregistrați, 0 Invizibil și 3 Vizitatori Nici unul
Recordul de utilizatori conectați a fost de 20, Joi Dec 09, 2021 10:48 pm
Despre CSS
Pagina 1 din 1
Despre CSS
Scris de R32 Vin Mar 27, 2009 10:29 am
Introducere în CSS
CSS este un acronim provenind din Cascading Style Sheets, care înseamnã "foi de stil în cascada". În documentele W3C, CSS nu e definit ca un nou limbaj, ci ca un mecanism care permite formatarea documentului HTML. CSS-ul nu exclude HTML-ul din pagina web. Nu se poate realiza o pagina web folosind numai CSS, care a fost proiectat astfel încât sa conlucreze cu HTML-ul. Tagurile HTML au fost initial destinate pentru a defini continutul unui document. Pentru a afisa "Acesta este un antet", "Acesta este un paragraf" sau "Acesta este un tabel", trebuiau folosite taguri ca <h1>,<p>,<table> etc. Modul de aranjare al documentului era sarcina browser-ului, fara a fi folosite taguri de structura.
Pe masura ce Netscape si IE continuau sa adauge noi taguri HTML si atribute (ca tagul <font> si atributul color) sintaxei HTML originale, devenea din ce în ce mai greu sa creezi site-uri web în care continutul documentelor HTML sa fie separat clar de aranjamentul documentului. Stilurile definesc cum sa fie afisate elementele HTML 4.0, asa cum face tagul font sau atributul color în HTML 3.2. Stilurile sunt salvate în mod normal în fisiere diferite de cele cu extensia html. Foile de stil externe va permit sa schimbati aparitia si aranjarea tuturor paginilor în site-ul dvs. web, doar prin editarea unui singur document CSS. Daca ati încercat vreodata sa schimbati fontul sau culoarea tuturor anteturilor din paginile web pe care le-ati creat, veti întelege cum CSS va poate scuti de multa munca inutila. Proiectantii CSS-ului au urmarit îndeosebi separarea între continutul paginii (textul destinat vizitatorului si imaginile din pagina) si codul-sursa. Folosind CSS, se ajunge la un control mai fin asupra paginii web, la scaderea dimensiunii în octeti a paginii web, atunci când codul CSS e continut într-un fisier extern. Modificând fisierul CSS extern, modificam simultan toate paginile web în care acesta e inclus. Se pot crea efecte mai sofisticate decât cele produse de codul HTML: suprapunerea unei imagini peste alta imagine, a unui text peste alt text, impresia de relief, efectul hover, afisarea unor fonturi mai mari decât h1 etc.
CSS este foarte util în Web design, deoarece le permite developerilor sa controleze stilul si chenarul mai multor pagini web în acelasi timp. Ca web developer puteti defini un stil pentru fiecare element HTML si sa-l aplicati câtor pagini web doriti. Pentru a face o schimbare globala, schimbati stilul si toate elementele din paginile web vor fi modificate automat.
Dezavantaj lucrului cu CSS este ca pagina continând cod CSS poate arata diferit în navigatoare diferite, deoarece nu toate browserele interpreteaza codul CSS la fel.
Adaugând cod JavaScript, se obtin efecte si mai sofisticate, chiar de animatie. CSS + JavaScript = DHTML (Dynamic HTML). Aceste efecte spectaculoase justifica titulatura de "artisti CSS" sau "artizani CSS" acordata unor creatori de pagini web.
Foile de stil dau posibilitatea specificarii informatiei despre stil în mai multe feluri. Stilurile se pot specifica într-un singur element HTML, în interiorul elementului <head> al unei pagini HTML sau într-un fisier extern CSS. Dintr-un singur document HTML se pot face referiri catre mai multe foi de stil externe. Deci, un stil din interiorul unui element HTML are cea mai mare prioritate, ceea ce înseamna ca va suprascrie fiecare stil declarat în tagul <head>, într-o foaie de stil externa si în browser.
În documentul HTML, codul CSS poate fi introdus în mai multe moduri:
1. Codul CSS e prezent în pagina web, iar efectul sau se aplica asupra întregului document.
Cod:
<html>
<head>
<style>
b {color:red;}
i {color:blue;}
</style>
</head>
<body>
<p align=center><b>Introducere ?n CSS</b></p>
<p><i>Aceasta sectiune se adreseaza celor ce cunosc deja HTML-ul. </i></p>
</body>
</html>
Consecinta: Orice text cuprins între <b>si </b> va fi afisat cu rosu, oriunde s-ar afla în document. Orice text afisat cu italice va fi de culoare albastra.
Se observã ca introducerea codului CSS în head duce la marirea dimensiunii în octeti a fisierului.
Cod:
<html>
<head>
<style>
a { text-decoration: none; }
</style>
</head>
<body>
<a href="Intro.htm">Introducere</a>
<a href="A.htm">Partea I</a>
<a href="B.htm">Partea a II-a</a>
</body>
</html>
Eticheta <style> anunta browserul ca urmeaza codul CSS, iar </style> ca a luat sfârsit codul CSS. Efectul codului alaturat este ca toate link-urile din acest document vor aparea nesubliniate (text-decoration:none;).
2. Codul e prezent în pagina web, iar efectul sãu se aplicã elementelor izolate.
Cod:
<html>
<head>
</head>
<body>
<a href="Intro.htm" style="color:red;">Introducere</a>
<a href="A.htm" style="color:green;">Partea I</a>
<a href="B.htm" style="color:blue;">Partea a II-a</a>
</body>
</html>
Efectul acestei secvente de cod este:
Cod:
Introducere
Partea?I
Partea?a?II-a
Se observa ca nu mai avem, în acest caz, o eticheta <style>, ci un atribut style al etichetei <a>. Orice eticheta HTML poate beneficia de acest atribut. Pentru formatarea unor portiuni mari de text, puteti folosi containerele div sau span. Totusi, aceasta abordare nu satisface principiul separarii codului CSS de textul afisat în browser.
3 Codul CSS se afla într-un fisier extern, cu extensia css. Efectul sau se aplica întregului document.
Cod:
<html>
<head>
<link rel=StyleSheet href="x.css" title="Setarea link-urilor" type="text/css">
</head>
<body>
<a href="Intro.htm">Introducere</a>
<a href="A.htm">Partea I</a>
<a href="B.htm">Partea a II-a</a>
</body>
</html>
Fisierul extern poate fi scris în Notepad si salvat cu extensia css. Includerea sa în pagina web se face folosind tag-ul <link>, care trebuie sa se afle între <head>si </head> (în antetul paginii).
Fisierul x.css poate contine urmatorul cod:
Cod:
body { color: blue;}
a {color: red; text-decoration: none;}
Consecinta va fi afisarea cu fonturi albastre a întregului text, exceptând link-urile, care vor fi colorate în rosu.
Observatie:
Într-un fisier html, pot fi incluse astfel oricâte alte fisiere cu extensia css, htm, html sau pdf.
Aceasta metodã de includere a CSS-ului în pagina web e mai avantajoasã ca primele douã. Codul CSS introdus astfel conlucreazã cu cel scris direct în pagina.
4. Documentul CSS se poate importa în pagina web.
Cod:
<html>
<head>
<style>
@import url(http://www.cartomatica.net/fis/x.css);
</style>
</head>
<body>
</body>
</html>
Importul trebuie declarat imediat dupa tag-ul <style>, înaintea oricarei alte linii de cod. În exemplul alaturat, s-a realizat importul în pagina curenta a fisierului x.css din directorul fis al sitului www.cartomatica.net. Desigur, fisierul importat poate avea si o adresa relativa.
Sintaxa CSS este alcatuita din trei parti: un selector, o caracteristica si o valoare. Selectorul este elementul/tagul pe care vreti sa-l definiti, caracteristica este atributul pe care doriti sa-l schimbati si fiecare caracteristica poate lua o valoare. Caracteristica si valoarea sunt separate de semnul (
si sunt încadrate de acolade:
Cod:
body {color: black}
Daca doriti sa specificati mai mult de o caracteristica, trebuie sa separati fiecare caracteristica cu semnul (
. Exemplul de mai jos arata cum sa definiti un paragraf aliniat central, cu culoarea rosie a textului:
Cod:
p {text-align: center; color: red}
Pentru a întelege mai bine aceasta definitie de stil, puteti descrie o caracteristica pe fiecare rând, ca în exemplul urmator:
Cod:
p {
text-align: center;
color: black;
font-family: arial
}
CSS este un acronim provenind din Cascading Style Sheets, care înseamnã "foi de stil în cascada". În documentele W3C, CSS nu e definit ca un nou limbaj, ci ca un mecanism care permite formatarea documentului HTML. CSS-ul nu exclude HTML-ul din pagina web. Nu se poate realiza o pagina web folosind numai CSS, care a fost proiectat astfel încât sa conlucreze cu HTML-ul. Tagurile HTML au fost initial destinate pentru a defini continutul unui document. Pentru a afisa "Acesta este un antet", "Acesta este un paragraf" sau "Acesta este un tabel", trebuiau folosite taguri ca <h1>,<p>,<table> etc. Modul de aranjare al documentului era sarcina browser-ului, fara a fi folosite taguri de structura.
Pe masura ce Netscape si IE continuau sa adauge noi taguri HTML si atribute (ca tagul <font> si atributul color) sintaxei HTML originale, devenea din ce în ce mai greu sa creezi site-uri web în care continutul documentelor HTML sa fie separat clar de aranjamentul documentului. Stilurile definesc cum sa fie afisate elementele HTML 4.0, asa cum face tagul font sau atributul color în HTML 3.2. Stilurile sunt salvate în mod normal în fisiere diferite de cele cu extensia html. Foile de stil externe va permit sa schimbati aparitia si aranjarea tuturor paginilor în site-ul dvs. web, doar prin editarea unui singur document CSS. Daca ati încercat vreodata sa schimbati fontul sau culoarea tuturor anteturilor din paginile web pe care le-ati creat, veti întelege cum CSS va poate scuti de multa munca inutila. Proiectantii CSS-ului au urmarit îndeosebi separarea între continutul paginii (textul destinat vizitatorului si imaginile din pagina) si codul-sursa. Folosind CSS, se ajunge la un control mai fin asupra paginii web, la scaderea dimensiunii în octeti a paginii web, atunci când codul CSS e continut într-un fisier extern. Modificând fisierul CSS extern, modificam simultan toate paginile web în care acesta e inclus. Se pot crea efecte mai sofisticate decât cele produse de codul HTML: suprapunerea unei imagini peste alta imagine, a unui text peste alt text, impresia de relief, efectul hover, afisarea unor fonturi mai mari decât h1 etc.
CSS este foarte util în Web design, deoarece le permite developerilor sa controleze stilul si chenarul mai multor pagini web în acelasi timp. Ca web developer puteti defini un stil pentru fiecare element HTML si sa-l aplicati câtor pagini web doriti. Pentru a face o schimbare globala, schimbati stilul si toate elementele din paginile web vor fi modificate automat.
Dezavantaj lucrului cu CSS este ca pagina continând cod CSS poate arata diferit în navigatoare diferite, deoarece nu toate browserele interpreteaza codul CSS la fel.
Adaugând cod JavaScript, se obtin efecte si mai sofisticate, chiar de animatie. CSS + JavaScript = DHTML (Dynamic HTML). Aceste efecte spectaculoase justifica titulatura de "artisti CSS" sau "artizani CSS" acordata unor creatori de pagini web.
Foile de stil dau posibilitatea specificarii informatiei despre stil în mai multe feluri. Stilurile se pot specifica într-un singur element HTML, în interiorul elementului <head> al unei pagini HTML sau într-un fisier extern CSS. Dintr-un singur document HTML se pot face referiri catre mai multe foi de stil externe. Deci, un stil din interiorul unui element HTML are cea mai mare prioritate, ceea ce înseamna ca va suprascrie fiecare stil declarat în tagul <head>, într-o foaie de stil externa si în browser.
În documentul HTML, codul CSS poate fi introdus în mai multe moduri:
1. Codul CSS e prezent în pagina web, iar efectul sau se aplica asupra întregului document.
Cod:
<html>
<head>
<style>
b {color:red;}
i {color:blue;}
</style>
</head>
<body>
<p align=center><b>Introducere ?n CSS</b></p>
<p><i>Aceasta sectiune se adreseaza celor ce cunosc deja HTML-ul. </i></p>
</body>
</html>
Consecinta: Orice text cuprins între <b>si </b> va fi afisat cu rosu, oriunde s-ar afla în document. Orice text afisat cu italice va fi de culoare albastra.
Se observã ca introducerea codului CSS în head duce la marirea dimensiunii în octeti a fisierului.
Cod:
<html>
<head>
<style>
a { text-decoration: none; }
</style>
</head>
<body>
<a href="Intro.htm">Introducere</a>
<a href="A.htm">Partea I</a>
<a href="B.htm">Partea a II-a</a>
</body>
</html>
Eticheta <style> anunta browserul ca urmeaza codul CSS, iar </style> ca a luat sfârsit codul CSS. Efectul codului alaturat este ca toate link-urile din acest document vor aparea nesubliniate (text-decoration:none;).
2. Codul e prezent în pagina web, iar efectul sãu se aplicã elementelor izolate.
Cod:
<html>
<head>
</head>
<body>
<a href="Intro.htm" style="color:red;">Introducere</a>
<a href="A.htm" style="color:green;">Partea I</a>
<a href="B.htm" style="color:blue;">Partea a II-a</a>
</body>
</html>
Efectul acestei secvente de cod este:
Cod:
Introducere
Partea?I
Partea?a?II-a
Se observa ca nu mai avem, în acest caz, o eticheta <style>, ci un atribut style al etichetei <a>. Orice eticheta HTML poate beneficia de acest atribut. Pentru formatarea unor portiuni mari de text, puteti folosi containerele div sau span. Totusi, aceasta abordare nu satisface principiul separarii codului CSS de textul afisat în browser.
3 Codul CSS se afla într-un fisier extern, cu extensia css. Efectul sau se aplica întregului document.
Cod:
<html>
<head>
<link rel=StyleSheet href="x.css" title="Setarea link-urilor" type="text/css">
</head>
<body>
<a href="Intro.htm">Introducere</a>
<a href="A.htm">Partea I</a>
<a href="B.htm">Partea a II-a</a>
</body>
</html>
Fisierul extern poate fi scris în Notepad si salvat cu extensia css. Includerea sa în pagina web se face folosind tag-ul <link>, care trebuie sa se afle între <head>si </head> (în antetul paginii).
Fisierul x.css poate contine urmatorul cod:
Cod:
body { color: blue;}
a {color: red; text-decoration: none;}
Consecinta va fi afisarea cu fonturi albastre a întregului text, exceptând link-urile, care vor fi colorate în rosu.
Observatie:
Într-un fisier html, pot fi incluse astfel oricâte alte fisiere cu extensia css, htm, html sau pdf.
Aceasta metodã de includere a CSS-ului în pagina web e mai avantajoasã ca primele douã. Codul CSS introdus astfel conlucreazã cu cel scris direct în pagina.
4. Documentul CSS se poate importa în pagina web.
Cod:
<html>
<head>
<style>
@import url(http://www.cartomatica.net/fis/x.css);
</style>
</head>
<body>
</body>
</html>
Importul trebuie declarat imediat dupa tag-ul <style>, înaintea oricarei alte linii de cod. În exemplul alaturat, s-a realizat importul în pagina curenta a fisierului x.css din directorul fis al sitului www.cartomatica.net. Desigur, fisierul importat poate avea si o adresa relativa.
Sintaxa CSS este alcatuita din trei parti: un selector, o caracteristica si o valoare. Selectorul este elementul/tagul pe care vreti sa-l definiti, caracteristica este atributul pe care doriti sa-l schimbati si fiecare caracteristica poate lua o valoare. Caracteristica si valoarea sunt separate de semnul (
si sunt încadrate de acolade:Cod:
body {color: black}
Daca doriti sa specificati mai mult de o caracteristica, trebuie sa separati fiecare caracteristica cu semnul (
. Exemplul de mai jos arata cum sa definiti un paragraf aliniat central, cu culoarea rosie a textului:Cod:
p {text-align: center; color: red}
Pentru a întelege mai bine aceasta definitie de stil, puteti descrie o caracteristica pe fiecare rând, ca în exemplul urmator:
Cod:
p {
text-align: center;
color: black;
font-family: arial
}
R32- Posts : 88
Join date : 24/03/2009
Age : 38
Location : Suceava -
Re: Despre CSS
Scris de R32 Vin Mar 27, 2009 10:29 am
Atributul class
Cu acest atribut puteti defini stiluri diferite pentru acelasi element. Sa zicem ca vreti doua tipuri de paragrafe în documentul dvs: unul aliniat la dreapta si unul centrat. Iata cum puteti face asta cu stiluri:
Cod:
p.right {text-align: right}
p.center {text-align: center}
Trebuie sa folositi atributul class în documentul dvs. HTML:
Cod:
Cod:
Atributul id
Atributul id trebuie sa fie unic pe pagina. Nu poate exista decât un element cu un id dat într-un document. El este marcat în documentul HTML cu id în loc de class:
Cod:
Atributul id poate fi definit în doua moduri. Poate fi definit pentru a se potrivi tuturor elementelor cu un id specific sau sa se potriveasca numai unui element cu un id specific. În exemplul urmator, atributul id se va aplica tuturor elementelor cu id= "intro":
Cod:
#intro {
font-size:110%;
font-weight:bold;
color:#0000ff;
background-color:transparent
}
Pseudoclase de stiluri CSS si modalitati de modificare a cursorului
Pseudoclasele se utilizeaza pentru personalizarea legaturilor web, atât de tip text, cât si de tip imagine. Ele se definesc în interiorul unui bloc sau într-un fisier extern.
Exemplul de mai jos este edificator în acest sens:
a: link {color: blue; font-size: 15pt;}
a: hover {color: red; font-style: italic; text-decoration: none}
a: visited {color: magenta; font-size: 15pt; text-decoration: none}
a: active {color: cyan; font-size: 15pt; text-decoration: none}
Explicatii:
*
a: link se refera la modul în care arata un link în mod normal;
*
a: hover se refera la modul în care arata un link atunci când se trece cu mouse-ul peste el (în Netscape functioneaza doar de la versiunea 6);
*
a: active se refera la modul în care arata un link atunci când se efectueaza click pe el;
*
a: visited se refera la modul în care arata un link deja vizitat;
*
specificatia "text-decoration: none" elimina sublinierea implicita cu o linie albastra a link-ului.
Pentru ca numai anumite legaturi sa utilizeze un stil, se pot folosi urmatoarele trei metode:
1. a: link.CLASA1 {...} combinat cu ...
2. a: link#ID1 {...} combinat cu ...
3. a.CLASA1: link {...} combinat cu ...
Chestiune Auxiliara
În browsere cursorul mouse-ului are în general o forma simpla si binecunoscuta, luând pe parcursul vizionarii paginii respective maximum doua infatisari diferite:
*
Mâna - atunci când este pozitinat pe o legatura
*
Sageata oblica din directia dreapta jos spre stânga sus - atunci când este pozitionat pe alt obiect decât o legatura.
Acestea sunt însa formele implicite. Exista însa si cazuri în care am dori ca acel cursor sa ia o alta forma decât cele doua predefinite. La fel ca multe alte probleme care privesc modul în care arata o pagina, si aceasta problema îsi gaseste rezolvarea în folosirea CSS ca limbaj de descriere a modului de stilizare a unui document.
Proprietatea care manipuleaza forma cursorului se numeste simplu: "cursor" si poate fi introdusa în orice element "style" al unui tag html.
De exemplu, pentru obtinerea unei imagini a cursorului de tipul unei sageti însotite de un semn de întrebare la trecerea mouse-ului peste un link, iata codul care va trebui folosit:
Legatura
Efectul este urmatorul (doar pentru IE minim 4.0):
Legatura cu CSS pentru stilizare cursor
Nu este însa unicul mod de stilizare a cursorului mouse-ului. În continuare prezentam codurile pentru toate formele de cursor care se pot folosi:
auto utilizeaza setarile implicite ale utilizatorului
crosshair creeaza o cruce
default setarile implicite ale browserului
e-resize sageata Est-Vest
hand mana
help semnul intrebarii
move cruce cu sageti la capete
n-resize sageata sud-nord
ne-resize sageata SudVest - NordEst
nw-resize sageata SudEst - NordVest
pointer mana
s-resize sageata Nord - Sud
se-resize sageata NordVest - SudEst
sw-resize sageata NordEst - SudVest
text bara verticala campuri de introducere a datelor
w-resize sageata Est-Vest
wait clepsidra
div, span si etichete CSS
Eticheta html
Cu acest atribut puteti defini stiluri diferite pentru acelasi element. Sa zicem ca vreti doua tipuri de paragrafe în documentul dvs: unul aliniat la dreapta si unul centrat. Iata cum puteti face asta cu stiluri:
Cod:
p.right {text-align: right}
p.center {text-align: center}
Trebuie sa folositi atributul class în documentul dvs. HTML:
Cod:
Acest paragraf va fi aliniat la dreapta.
Cod:
Acest paragraf va fi aliniat pe centru.
Atributul id
Atributul id trebuie sa fie unic pe pagina. Nu poate exista decât un element cu un id dat într-un document. El este marcat în documentul HTML cu id în loc de class:
Cod:
Acest paragraf va fi aliniat la dreapta.
Atributul id poate fi definit în doua moduri. Poate fi definit pentru a se potrivi tuturor elementelor cu un id specific sau sa se potriveasca numai unui element cu un id specific. În exemplul urmator, atributul id se va aplica tuturor elementelor cu id= "intro":
Cod:
#intro {
font-size:110%;
font-weight:bold;
color:#0000ff;
background-color:transparent
}
Pseudoclase de stiluri CSS si modalitati de modificare a cursorului
Pseudoclasele se utilizeaza pentru personalizarea legaturilor web, atât de tip text, cât si de tip imagine. Ele se definesc în interiorul unui bloc sau într-un fisier extern.
Exemplul de mai jos este edificator în acest sens:
a: link {color: blue; font-size: 15pt;}
a: hover {color: red; font-style: italic; text-decoration: none}
a: visited {color: magenta; font-size: 15pt; text-decoration: none}
a: active {color: cyan; font-size: 15pt; text-decoration: none}
Explicatii:
*
a: link se refera la modul în care arata un link în mod normal;
*
a: hover se refera la modul în care arata un link atunci când se trece cu mouse-ul peste el (în Netscape functioneaza doar de la versiunea 6);
*
a: active se refera la modul în care arata un link atunci când se efectueaza click pe el;
*
a: visited se refera la modul în care arata un link deja vizitat;
*
specificatia "text-decoration: none" elimina sublinierea implicita cu o linie albastra a link-ului.
Pentru ca numai anumite legaturi sa utilizeze un stil, se pot folosi urmatoarele trei metode:
1. a: link.CLASA1 {...} combinat cu ...
2. a: link#ID1 {...} combinat cu ...
3. a.CLASA1: link {...} combinat cu ...
Chestiune Auxiliara
În browsere cursorul mouse-ului are în general o forma simpla si binecunoscuta, luând pe parcursul vizionarii paginii respective maximum doua infatisari diferite:
*
Mâna - atunci când este pozitinat pe o legatura
*
Sageata oblica din directia dreapta jos spre stânga sus - atunci când este pozitionat pe alt obiect decât o legatura.
Acestea sunt însa formele implicite. Exista însa si cazuri în care am dori ca acel cursor sa ia o alta forma decât cele doua predefinite. La fel ca multe alte probleme care privesc modul în care arata o pagina, si aceasta problema îsi gaseste rezolvarea în folosirea CSS ca limbaj de descriere a modului de stilizare a unui document.
Proprietatea care manipuleaza forma cursorului se numeste simplu: "cursor" si poate fi introdusa în orice element "style" al unui tag html.
De exemplu, pentru obtinerea unei imagini a cursorului de tipul unei sageti însotite de un semn de întrebare la trecerea mouse-ului peste un link, iata codul care va trebui folosit:
Legatura
Efectul este urmatorul (doar pentru IE minim 4.0):
Legatura cu CSS pentru stilizare cursor
Nu este însa unicul mod de stilizare a cursorului mouse-ului. În continuare prezentam codurile pentru toate formele de cursor care se pot folosi:
auto utilizeaza setarile implicite ale utilizatorului
crosshair creeaza o cruce
default setarile implicite ale browserului
e-resize sageata Est-Vest
hand mana
help semnul intrebarii
move cruce cu sageti la capete
n-resize sageata sud-nord
ne-resize sageata SudVest - NordEst
nw-resize sageata SudEst - NordVest
pointer mana
s-resize sageata Nord - Sud
se-resize sageata NordVest - SudEst
sw-resize sageata NordEst - SudVest
text bara verticala campuri de introducere a datelor
w-resize sageata Est-Vest
wait clepsidra
div, span si etichete CSS
Eticheta html
functioneaza asemanator cu eticheta html
, putând gazdui comenzi CSS aplicabile la un bloc sau mai multe din continutul paginii. Eticheta html este similara cu eticheta html (pe cale de a fi eliminata de consortiul W3C) aplicându-se elementelor dintr-un paragraf. Etichetele CSS sunt cunoscute sub numele de elemente sau selectori având un layout asemanator cu etichetele HTML. Text verde Text verde Text verde
Cod:
// eticheta HTML
Cod:
// eticheta CSS
element{argument: valoare;}
elementul poate fi o eticheta HTML, un id sau un class, iar argumentul si valoarea sunt aceleasi ca în HTML.
Exemplu: acelasi text realizat în HTML si în HTML cu CSS
Cod:
// HTML
// HTML cu CSS
Text verde
Comenzile de CSS pot fi plasate si în zona HEAD rezultând o functionare identica, chiar mai mult, aceleasi comenzi putând fi folosite în mai multe locuri în aceeasi pagina.
Exemplu: comenzi CSS incluse în zona HEAD
Cod:
Text negru
R32- Posts : 88
Join date : 24/03/2009
Age : 38
Location : Suceava -
Re: Despre CSS
Scris de R32 Vin Mar 27, 2009 10:30 am
Elementele id si class
id si class sunt comenzi care dau unei formatari CSS un nume. Se folosesc atunci când dorim sa aplicam un style de formatare unei anume zone. Pentru compatibilitate cu versiunile anterioare de browsere, numele asociate zonelor nu vor contine caracterul _
Elementul id se aplica unui style de format o singura data sau la o singura eticheta HTML, plasându-se un nume acelui style. Acest element necesita existenta comezilor CSS în zona HEAD sau într-un fisier extern.
Exemplu: folosirea elementului id
Cod:
Exemplu 2_1
Text negru
Elementul class este similar cu id dar spre deosebire de acesta poate fi folosit de mai multe ori sau pentru zone mai mari. Ca si la id necesita existenta comezilor CSS în zona HEAD sau într-un fisier extern.
Exemplu: folosirea elementului class:
Cod:
Exemplu 2_2
Text negru
Stiluri pentru fonturi
Aceste elemente specifica argumentul fontului care se asociaza unui element HTML fiind incluse ori în zona HEAD ori în interiorul etichetei dorite.
În cazul de fata se remarca asemanarea cu eticheta font din HTML care accepta argumentele type, style, size si weight.
font-family
font-family este de fapt o lista de fonturi din care browserul va folosi în ordinea în care le recunoaste (primul folosit va fi primul din lista, daca nu este recunoscut îl foloseste pe al doilea si tot asa mai departe). Este recomandat ca ultima pozitie din lista sa fie un font generic (de exemplu serif, sans-serif sau monospace).
În situatia în care numele fontului este format din doua cuvinte, se încadreaza între ghilimele duble pentru ca browserul sa le interpreteze împreuna.
Exemplu: CSS introdus în HEAD aplicat etichetei p. Browserul nu recunoaste primele doua fonturi din lista, folosindu-l pe al treilea:
Cod:
Exemplu
Text negru
Exemplu: acelasi exemplu dar CSS introdus în eticheta p din HTML:
Cod:
Exemplu
Text negru
font-size
Este parametrul prin care stabilim dimesiunea fontului, exprimat în pixeli (px), puncte (pt), keywords sau procente. Are o functionare asemanatoare cu eticheta .
Exemplu: CSS introdus în HEAD aplicat etichetei p, dimensiunea exprimata în pixeli:
Cod:
Exemplu
Text negru
Pentru dimensiunea exprimata în puncte folosim acelasi exemplu înlocuind px cu pt.
Dimensiunea exprimata prin keywords foloseste cuvinte în loc de cifre. Sapte cuvinte înlocuiesc dimensiunile de la 1 la 7 de la vechea eticheta FONT FACE din HTML.
CSS keyword numar FONT size
xx-small 1
x-small 2
small 3
medium 4
large 5
x-large 6
xx-large 7
Pentru verificare se poate folosi exemplul anterior în care se înlocuieste 20px cu unul din cuvintele de mai sus.
Procentele sunt o alta valoare pe care o poate lua font-size. Aceasta modalitate poate fi vizualizata diferit de browsere diferite.
Ca verificare folositi acelasi exemplu schimbând 20px cu 200%.
font-style
font-style este folosit pentru a adauga caracteristica italica fontului. Poate lua valorile normal si italic.
Cod:
font-weight
font-weight este parametrul care stabileste grosimea caracterului putând lua valorile numerice de la 100 la 900 sau BOLD, BOLDER, LIGHTER.
Cod:
Compunerea stilurilor
Stilurile prezentate anterior pot fi folosite simultan în interiorul aceeasi etichete fiind despartite de caracterul ; (punct si virgula).
Exemplu: folosirea unui stil compus aplicat etichetei p
Cod:
Exemplu 3_4
Text negru
id si class sunt comenzi care dau unei formatari CSS un nume. Se folosesc atunci când dorim sa aplicam un style de formatare unei anume zone. Pentru compatibilitate cu versiunile anterioare de browsere, numele asociate zonelor nu vor contine caracterul _
Elementul id se aplica unui style de format o singura data sau la o singura eticheta HTML, plasându-se un nume acelui style. Acest element necesita existenta comezilor CSS în zona HEAD sau într-un fisier extern.
Exemplu: folosirea elementului id
Cod:
Text albastru introdus prin id
"albastru"
Text negru
Elementul class este similar cu id dar spre deosebire de acesta poate fi folosit de mai multe ori sau pentru zone mai mari. Ca si la id necesita existenta comezilor CSS în zona HEAD sau într-un fisier extern.
Exemplu: folosirea elementului class:
Cod:
Primul text rosu introdus prin
class "rosu"
Text negru
Al doilea text rosu introdus prin
class "rosu"
Stiluri pentru fonturi
Aceste elemente specifica argumentul fontului care se asociaza unui element HTML fiind incluse ori în zona HEAD ori în interiorul etichetei dorite.
În cazul de fata se remarca asemanarea cu eticheta font din HTML care accepta argumentele type, style, size si weight.
font-family
font-family este de fapt o lista de fonturi din care browserul va folosi în ordinea în care le recunoaste (primul folosit va fi primul din lista, daca nu este recunoscut îl foloseste pe al doilea si tot asa mai departe). Este recomandat ca ultima pozitie din lista sa fie un font generic (de exemplu serif, sans-serif sau monospace).
În situatia în care numele fontului este format din doua cuvinte, se încadreaza între ghilimele duble pentru ca browserul sa le interpreteze împreuna.
Exemplu: CSS introdus în HEAD aplicat etichetei p. Browserul nu recunoaste primele doua fonturi din lista, folosindu-l pe al treilea:
Cod:
Text scris cu cu fontul Arial
Text negru
Text scris cu cu fontul Arial
Exemplu: acelasi exemplu dar CSS introdus în eticheta p din HTML:
Cod:
Text scris cu cu fontul Arial
Text negru
Text scris cu cu fontul Arial
font-size
Este parametrul prin care stabilim dimesiunea fontului, exprimat în pixeli (px), puncte (pt), keywords sau procente. Are o functionare asemanatoare cu eticheta .
Exemplu: CSS introdus în HEAD aplicat etichetei p, dimensiunea exprimata în pixeli:
Cod:
Text scris cu font de 20px
Text negru
Pentru dimensiunea exprimata în puncte folosim acelasi exemplu înlocuind px cu pt.
Dimensiunea exprimata prin keywords foloseste cuvinte în loc de cifre. Sapte cuvinte înlocuiesc dimensiunile de la 1 la 7 de la vechea eticheta FONT FACE din HTML.
CSS keyword numar FONT size
xx-small 1
x-small 2
small 3
medium 4
large 5
x-large 6
xx-large 7
Pentru verificare se poate folosi exemplul anterior în care se înlocuieste 20px cu unul din cuvintele de mai sus.
Procentele sunt o alta valoare pe care o poate lua font-size. Aceasta modalitate poate fi vizualizata diferit de browsere diferite.
Ca verificare folositi acelasi exemplu schimbând 20px cu 200%.
font-style
font-style este folosit pentru a adauga caracteristica italica fontului. Poate lua valorile normal si italic.
Cod:
font-weight
font-weight este parametrul care stabileste grosimea caracterului putând lua valorile numerice de la 100 la 900 sau BOLD, BOLDER, LIGHTER.
Cod:
Compunerea stilurilor
Stilurile prezentate anterior pot fi folosite simultan în interiorul aceeasi etichete fiind despartite de caracterul ; (punct si virgula).
Exemplu: folosirea unui stil compus aplicat etichetei p
Cod:
Text scris cu Arial, 20px, italic, 800
Text negru
R32- Posts : 88
Join date : 24/03/2009
Age : 38
Location : Suceava -
Re: Despre CSS
Scris de R32 Vin Mar 27, 2009 10:30 am
Stiluri pentru text
Aliniere
text-align pozitioneaza pe orizontala obiecte (de exemplu text sau imagini) si admite valorile left, right si center ca si eticheta align din HTML.
În continuare este prezentat ca exemplu codul folosit în HEAD, aplicat etichetei p:
Cod:
Exemplu: prin intermediul lui div aplicam stilul pe centru imaginii si textului:
Cod:
Exemplu
Text neformatat
vertical-align este folosit pentru alinierea pe verticala a obiectelor dintr-un tabel si poate lua valorile: top, middle si bottom.
În exemplul de mai jos este creata clasa sus care va putea fi aplicata elementelor ale tabelului:
Cod:
float este folosit pentru alinierea textului cu imaginile si poate avea valorile: left si right. În functie de valoarea aleasa imaginea va fi aliniata în partea opusa a paginii. Exemplu: se creeaza clasa auto si o aplicam inaginii
Cod:
Exemplu
Textul se aliniaza la dreapta
, iar poza la stanga datorita clasei "auto".
Tabulare
text-indent este folosit pentru alinierea textului în interior având valori exprimate în inci (in), centimetri (cm) sau pixeli (px).
În exemplul de mai jos text-indent este aplicat etichetei p deplasând textul cu 10 pixeli în interior:
Cod:
Decorare
text-decoration adauga sublinierea sau taierea blocului text asociat si poate avea valorile underline, line-through sau none.
Exemplu: stilul asociat etichetei p este prezentat în HEAD:
Cod:
Exemplu
Text normal
Culoare
color defineste culoarea textului dintr-o zona sau întreaga pagina.
Exemplu: stilul asociat etichetei p este prezentat în HEAD:
Cod:
Exemplu
Text normal
Stiluri pentru legaturi
În HTML culoarea legaturilor poate fi stabilita prin atributele LINK, ALINK si VLINK declarate în interiorul etichetei BODY.
Acelasi lucru si chiar mai mult poate fi realizat folosind sintaxa CSS.
Exemplu:
Cod:
Exemplu
Text normal
link catre exemplu
a - defineste stilul general pentru legatura
a:link - defineste stilul legaturii nevizitate
a:visited - defineste stilul legaturii vizitate
a:active - defineste stilul legaturii active (nu prea se foloseste)
a:hover - defineste stilul când mouse-ul este deasupra legaturii
Aliniere
text-align pozitioneaza pe orizontala obiecte (de exemplu text sau imagini) si admite valorile left, right si center ca si eticheta align din HTML.
În continuare este prezentat ca exemplu codul folosit în HEAD, aplicat etichetei p:
Cod:
Exemplu: prin intermediul lui div aplicam stilul pe centru imaginii si textului:
Cod:
Text neformatat
Text formatat
vertical-align este folosit pentru alinierea pe verticala a obiectelor dintr-un tabel si poate lua valorile: top, middle si bottom.
În exemplul de mai jos este creata clasa sus care va putea fi aplicata elementelor
Cod:
float este folosit pentru alinierea textului cu imaginile si poate avea valorile: left si right. În functie de valoarea aleasa imaginea va fi aliniata în partea opusa a paginii. Exemplu: se creeaza clasa auto si o aplicam inaginii
Cod:
Textul se aliniaza la dreapta
, iar poza la stanga datorita clasei "auto".
Tabulare
text-indent este folosit pentru alinierea textului în interior având valori exprimate în inci (in), centimetri (cm) sau pixeli (px).
În exemplul de mai jos text-indent este aplicat etichetei p deplasând textul cu 10 pixeli în interior:
Cod:
Decorare
text-decoration adauga sublinierea sau taierea blocului text asociat si poate avea valorile underline, line-through sau none.
Exemplu: stilul asociat etichetei p este prezentat în HEAD:
Cod:
Text normal
Text subliniat
Culoare
color defineste culoarea textului dintr-o zona sau întreaga pagina.
Exemplu: stilul asociat etichetei p este prezentat în HEAD:
Cod:
Text normal
Text albastru
Stiluri pentru legaturi
În HTML culoarea legaturilor poate fi stabilita prin atributele LINK, ALINK si VLINK declarate în interiorul etichetei BODY.
Acelasi lucru si chiar mai mult poate fi realizat folosind sintaxa CSS.
Exemplu:
Cod:
Text normal
link catre exemplu
a - defineste stilul general pentru legatura
a:link - defineste stilul legaturii nevizitate
a:visited - defineste stilul legaturii vizitate
a:active - defineste stilul legaturii active (nu prea se foloseste)
a:hover - defineste stilul când mouse-ul este deasupra legaturii
R32- Posts : 88
Join date : 24/03/2009
Age : 38
Location : Suceava -
Re: Despre CSS
Scris de R32 Vin Mar 27, 2009 10:31 am
Stiluri pentru background
Culoarea pentru fundal (background) sau imagine poate fi definita pentru întreaga pagina, o celula a tabelului sau pentru text.
Culoare de fond
background-color defineste culoarea de fond si poate fi asociat oricarei etichete HTML.
Exemplu: definim un stil pentru întreg BODY si un altul pentru eticheta p
Cod:
Exemplu
Text normal
Imagine de fond
Imaginile pot fi folosite ca fundal în spatele întregii pagini, a unui obiect sau a textului.
background-image asociaza o imagine ca fundal unui obiect.
Exemplu: definim un stil pentru eticheta p
Cod:
Exemplu
Text normal
Repetare
Functie de dimensiunile obiectului caruia îi sunt asociate imaginile de fond se repeta pe orizontala si verticala.
Repetarea poate fi controlata prin parametrul background-repeat care poate lua valorile:
repeat-x - imaginea se repeta pe orizontala
repeat-y - imaginea se repeta pe verticala
no-repeat - imaginea nu se repeta
Exemplu: imaginea nu se repeta sub eticheta p:
Cod:
Exemplu
Text normal
Pozitia
În mod normal imaginea de fundal începe din coltul stânga sus al obiectului asociat, dar acest lucru poate fi controlat prin comanda CSS background-position.
Sunt acceptate doua valori:
în prima pozitie poate fi: top, center, bottom, percentage sau pixel
în a doua pozitie poate fi: right, center, left, percentage sau pixel
Exemplu: imaginea de fundal este asociata etichetei BODY fiind amplasata top si center, fara repetare:
Cod:
Exemplu 5_4
Text normal
Stiluri pentru liste
list-style-type
Folosind eticheta ol din HTML cream liste ordonate sau numerotate. Adaugând comenzi CSS în zona HEAD putem adauga pe lânga numere si cifre sau alte simboluri. Browserul Netscape nu permite asocierea comenzilor CSS decât pentru eticheta li.
Sintaxa este:
Cod:
valoarea poate fi:
valoare disc
disc disc
circle cerc
square patrat
decimal numere întregi
lower-roman numere romane, caractere mici (i, ii, iii, iv)
upper-roman numere romane, caractere mari (I, II, III, IV)
upper-alpha litere mari (A, B, C, D)
lower-alpha litere mici (a, b, c, d)
none nimic
Exemplu: lista ordonata folosind marcaje cu litere mici:
Cod:
Exemplu
Necesar materiale:
list-style-image
În afara simbolurilor de marcaj prestabilite cunoscute de browser pot fi folosite si imagini prin comanda CSS list-style-image. Imaginile sunt introduse prin adresa url().
Exemplu: lista ordonata folosind ca marcaj imaginea punct.gif
Cod:
Exemplu
Necesar materiale:
Chenare si margini
Fiecare element HTML poate fi înteles ca o caseta dreptunghiulara (box), iar toate cutiile au aceeasi structura: "width", "padding", "border" si "margin".
ochi
ochi
marginea (margin) este spatiul exterior chenarului pâna la celelalte elemente
chenarul (border) este o bordura care înconjoara elementul
completarea (padding) stabileste distanta dintre continut si chenar
continutul include informatia utila (text, tabele, imagini, formulare, etc.)
Originea elementului este considerat coltul din dreapta sus fata de care se vor raporta toate dimensiunile prezentate în continuare.
Domeniul de continut (width si height)
Fiecare element are o latime (width). Daca aceasta nu a fost definita, în cazul elementelor de tip block, box-ul este atât de lat cât trebuie sa fie, deci cât continutul box-ului. Latimea si înaltimea unui element sunt stabilite în HTML prin atributele width si height. Aceste atribute pot fi adaugate sau suprascrise prin comenzi CSS.
Exemplu: folosind comenzi CSS modificam dimensiunile originale ale imaginii:
Cod:
Exemplu
Distanta interioara (padding si margin)
Între continut si marginea box-ului se afla distanta interioara (padding). padding stabileste distanta dintre obiect si chenar simultan pentru toate laturile. De asemenea padding preia culoarea de fundal a documentului continut. Distantele pot fi stabilite si individual folosind padding-top, padding-bottom, padding-left sau padding-right.
margin stabileste distanta dintre chenar si celelalte obiecte din pagina simultan pentru toate laturile. Distantele pot fi stabilite si individual folosind margin-top, margin-bottom, margin-left sau margin-right.
Valorile pentru padding si margin pot fi exprimate în: px (pixeli), in (inci), pt (puncte) sau cm (centimetri).
Exemplu: folosind comenzi CSS imaginea este pozitionata la 100px fata de latura stânga si 25px fata de latura de sus:
Cod:
Exemplu
Marginea (border)
În jurul "padding" se seteaza chenarul (border), care pentru toate patru laturile poate avea o latime (width), culoare (color) si style (taiat, punctat, liniat etc.) diferite. Netscape si Internet Explorer afiseaza diferit chenarele. Comanda CSS pentru definirea chenarului este border având proprietatile asociate width, style si color. Pentru a fi siguri ca aceste proprietati functioneaza atât în Internet Explorer cât si în Netscape trebuie sa declaram pentru border cel putin width si style.
border-width - stabileste grosimea chenarului si poate fi exprimata în px (pixeli), pt (puncte), cm (centimetri) sau in (inci).
border-style - stabileste tipul chenarului si poate fi dotted, dashed, solid, double, groove, ridge, inset si outset.
border-color - stabileste culoarea chenarului si poate fi exprimata prin valoare hexazecimala sau în cuvinte.
Exemplu: definim noua clase utilizând proprietatile border-width, border-style si border-color:
Cod:
Exemplu
Culoarea pentru fundal (background) sau imagine poate fi definita pentru întreaga pagina, o celula a tabelului sau pentru text.
Culoare de fond
background-color defineste culoarea de fond si poate fi asociat oricarei etichete HTML.
Exemplu: definim un stil pentru întreg BODY si un altul pentru eticheta p
Cod:
Text normal
Text cu background rosu
Imagine de fond
Imaginile pot fi folosite ca fundal în spatele întregii pagini, a unui obiect sau a textului.
background-image asociaza o imagine ca fundal unui obiect.
Exemplu: definim un stil pentru eticheta p
Cod:
Text normal
Text cu imagine de fond
Repetare
Functie de dimensiunile obiectului caruia îi sunt asociate imaginile de fond se repeta pe orizontala si verticala.
Repetarea poate fi controlata prin parametrul background-repeat care poate lua valorile:
repeat-x - imaginea se repeta pe orizontala
repeat-y - imaginea se repeta pe verticala
no-repeat - imaginea nu se repeta
Exemplu: imaginea nu se repeta sub eticheta p:
Cod:
Text normal
Text cu imagine de fond
Pozitia
În mod normal imaginea de fundal începe din coltul stânga sus al obiectului asociat, dar acest lucru poate fi controlat prin comanda CSS background-position.
Sunt acceptate doua valori:
în prima pozitie poate fi: top, center, bottom, percentage sau pixel
în a doua pozitie poate fi: right, center, left, percentage sau pixel
Exemplu: imaginea de fundal este asociata etichetei BODY fiind amplasata top si center, fara repetare:
Cod:
Text normal
Stiluri pentru liste
list-style-type
Folosind eticheta ol din HTML cream liste ordonate sau numerotate. Adaugând comenzi CSS în zona HEAD putem adauga pe lânga numere si cifre sau alte simboluri. Browserul Netscape nu permite asocierea comenzilor CSS decât pentru eticheta li.
Sintaxa este:
Cod:
valoarea poate fi:
valoare disc
disc disc
circle cerc
square patrat
decimal numere întregi
lower-roman numere romane, caractere mici (i, ii, iii, iv)
upper-roman numere romane, caractere mari (I, II, III, IV)
upper-alpha litere mari (A, B, C, D)
lower-alpha litere mici (a, b, c, d)
none nimic
Exemplu: lista ordonata folosind marcaje cu litere mici:
Cod:
Necesar materiale:
- caramida
- ciment
- ipsos
list-style-image
În afara simbolurilor de marcaj prestabilite cunoscute de browser pot fi folosite si imagini prin comanda CSS list-style-image. Imaginile sunt introduse prin adresa url().
Exemplu: lista ordonata folosind ca marcaj imaginea punct.gif
Cod:
Necesar materiale:
- caramida
- ciment
- ipsos
Chenare si margini
Fiecare element HTML poate fi înteles ca o caseta dreptunghiulara (box), iar toate cutiile au aceeasi structura: "width", "padding", "border" si "margin".
ochi
ochi
marginea (margin) este spatiul exterior chenarului pâna la celelalte elemente
chenarul (border) este o bordura care înconjoara elementul
completarea (padding) stabileste distanta dintre continut si chenar
continutul include informatia utila (text, tabele, imagini, formulare, etc.)
Originea elementului este considerat coltul din dreapta sus fata de care se vor raporta toate dimensiunile prezentate în continuare.
Domeniul de continut (width si height)
Fiecare element are o latime (width). Daca aceasta nu a fost definita, în cazul elementelor de tip block, box-ul este atât de lat cât trebuie sa fie, deci cât continutul box-ului. Latimea si înaltimea unui element sunt stabilite în HTML prin atributele width si height. Aceste atribute pot fi adaugate sau suprascrise prin comenzi CSS.
Exemplu: folosind comenzi CSS modificam dimensiunile originale ale imaginii:
Cod:
Distanta interioara (padding si margin)
Între continut si marginea box-ului se afla distanta interioara (padding). padding stabileste distanta dintre obiect si chenar simultan pentru toate laturile. De asemenea padding preia culoarea de fundal a documentului continut. Distantele pot fi stabilite si individual folosind padding-top, padding-bottom, padding-left sau padding-right.
margin stabileste distanta dintre chenar si celelalte obiecte din pagina simultan pentru toate laturile. Distantele pot fi stabilite si individual folosind margin-top, margin-bottom, margin-left sau margin-right.
Valorile pentru padding si margin pot fi exprimate în: px (pixeli), in (inci), pt (puncte) sau cm (centimetri).
Exemplu: folosind comenzi CSS imaginea este pozitionata la 100px fata de latura stânga si 25px fata de latura de sus:
Cod:
Marginea (border)
În jurul "padding" se seteaza chenarul (border), care pentru toate patru laturile poate avea o latime (width), culoare (color) si style (taiat, punctat, liniat etc.) diferite. Netscape si Internet Explorer afiseaza diferit chenarele. Comanda CSS pentru definirea chenarului este border având proprietatile asociate width, style si color. Pentru a fi siguri ca aceste proprietati functioneaza atât în Internet Explorer cât si în Netscape trebuie sa declaram pentru border cel putin width si style.
border-width - stabileste grosimea chenarului si poate fi exprimata în px (pixeli), pt (puncte), cm (centimetri) sau in (inci).
border-style - stabileste tipul chenarului si poate fi dotted, dashed, solid, double, groove, ridge, inset si outset.
border-color - stabileste culoarea chenarului si poate fi exprimata prin valoare hexazecimala sau în cuvinte.
Exemplu: definim noua clase utilizând proprietatile border-width, border-style si border-color:
Cod:
border-width: 2px; border-style: dotted; border-color: red;
border-width: 3px; border-style: dashed; border-color: blue;
border-width: 2px; border-style: solid; border-color: green;
border-width: 3px; border-style: double; border-color: black;
border-width: 2px; border-style: groove; border-color: silver;
border-width: 3px; border-style: ridge; border-color: lime;
border-width: 2px; border-style: inset; border-color: yellow;
border-width: 3px; border-style: outset; border-color: aqua;
border-width: 2px; border-style: hidden; border-color: olive;
R32- Posts : 88
Join date : 24/03/2009
Age : 38
Location : Suceava -
Re: Despre CSS
Scris de R32 Vin Mar 27, 2009 10:31 am
Marginea exterioara (margin)
Fiecare box are si o distanta exterioara (margin) pâna la celelalte elemente, care preia culoarea de fundal a elementului înconjurator.
Modelul box serveste pentru formatarea distantelor în si între box-urile unei pagini web si este extrem de diversificat.
Pozitionarea obiectelor
Pozitionarea permite asezarea unui obiect într-un anume loc folosind coordonatele. Totodata obiectele pot fi pozitionate pe straturi diferite, unul deasupra celuilalt.
Atât pozitionarea absoluta (ASOLUTE) cât si cea relativa (RELATIVE) folosesc proprietatile LEFT si TOP exprimate în px (pixeli), in (inci), pt (puncte), ems, procentaje sau cm (centimetri).
Pozitionarea absoluta plaseaza obiectul în pagina exact în locatia data de left si top. Astfel poate fi creat un element liber fata de celelalte din pagina. Obiectul poate fi orice, de exemplu text sau imagine.
Exemplu: am aplicat pozitionarea absoluta etichetei h4:
Cod:
Exemplu 8_1
Pozitionarea relativa este pozitia normala pe care o ocupa un element, dupa elementele anterioare si înaintea celor urmatoare. Poate fi deplasat fata de aceasta pozitie folosind proprietatile left si top.
Exemplu: am folosit doua obiecte unul pozitionat absolut celalalt relativ:
Cod:
Exemplu 8_2
Text
Pozitionarea tridimensionala
Elementele sunt pozitionate pe ecran pe o suprafata bidimensionala dar pot fi asezate si unul deasupra celuilalt, într-o stiva utilizând un indicativ (index-z) începând cu 0, urmatorul 1 si tot asa în continuare. Elementul cu indexul cel mai mare este asezat deasupra.
Exemplu: am folosit doua obiecte unul pozitionat absolut celalalt relativ:
Cod:
Exemplu 8_3
Exemplu de stiluri dedicate
Aceste stiluri se aplica blocurilor de text pentru care sunt definite si apelate pe loc. De exemplu:
Cod:
Explicitarea a fost facuta, asadar, în momentul utilizarii acestora.
Articol preluat de la www.afaceri-online.net
Exemplu de clase de stiluri
Clasele de stiluri permit definirea unui stil general (aplicabil în mai multe locuri în cadrul aceleiasi pagini sau în pagini diferite) în vederea inserarii lui oriunde este necesar prin intermediul unei simple referiri. Sa presupunem ca dorim sa definim o clasa de stiluri "clasa-mea" (pe care dorim sa o aplicam anumitor portiuni de text pentru a le face sa apara de culoare verde si aliniate la stânga). Vom utiliza în acest sens blocul , aflat la rândul sau în interiorul blocului ... (reprezentând head-erul documentului HTML). Vom realiza ceea ce ne-am propus în felul urmator:
Cod:
Cuvantul standard "all" aflat în fata clasei de stiluri "clasa-mea" indica faptul ca aceasta clasa este aplicabila tuturor blocurilor de text, atunci când este necesar. Practic clasa de stiluri "clasa-mea" poate fi asociata tuturor tagurilor HTML care opereaza cu text (ca de exemplu: H2, H6, P, DIV, etc...) utilizând în interiorul fiecarui tag vizat o referire explicita la aceasta clasa:.
Asadar, daca dorim sa aplicam aceasta clasa de stiluri unui titlu de ordinul 3 (specificat în codul HTML prin tagul H3), atunci scriem:
Cod:
Acesta este un header de marime 3, aliniat la stanga
Dupa cum s-a vazut, pentru apelarea unei clase de stiluri în vederea aplicarii sale elementului tag curent se foloseste atributul "class" având ca valoare numele clasei de stil. Împreuna cu specificatia "all" din definirea clasei de stiluri, atributul "class" devine un atribut universal, adica va putea fi asociat tuturor tagurilor HTML carora li se poate aplica (în acest caz celor care opereaza cu text).
Observatii:
- În interiorul unui bloc , comentariile sunt blocuri delimitate de /* si */ (ca si în C, C++, Java si Javascript).
- Daca dorim ca o clasa de stiluri sa fie aplicabila numai pentru anumite elemente ale documentului (spre exemplu pentru paragrafele de text desemnate prin marcajul de paragraf "p"), atunci în constructia clasei va aparea acest element (de exemplu "p.clasa-mea-2").
Exemplu:
Cod:
Clase de stiluri dedicate
Fiecare box are si o distanta exterioara (margin) pâna la celelalte elemente, care preia culoarea de fundal a elementului înconjurator.
Modelul box serveste pentru formatarea distantelor în si între box-urile unei pagini web si este extrem de diversificat.
Pozitionarea obiectelor
Pozitionarea permite asezarea unui obiect într-un anume loc folosind coordonatele. Totodata obiectele pot fi pozitionate pe straturi diferite, unul deasupra celuilalt.
Atât pozitionarea absoluta (ASOLUTE) cât si cea relativa (RELATIVE) folosesc proprietatile LEFT si TOP exprimate în px (pixeli), in (inci), pt (puncte), ems, procentaje sau cm (centimetri).
Pozitionarea absoluta plaseaza obiectul în pagina exact în locatia data de left si top. Astfel poate fi creat un element liber fata de celelalte din pagina. Obiectul poate fi orice, de exemplu text sau imagine.
Exemplu: am aplicat pozitionarea absoluta etichetei h4:
Cod:
Text 1
Text 2
Pozitionarea relativa este pozitia normala pe care o ocupa un element, dupa elementele anterioare si înaintea celor urmatoare. Poate fi deplasat fata de aceasta pozitie folosind proprietatile left si top.
Exemplu: am folosit doua obiecte unul pozitionat absolut celalalt relativ:
Cod:
Pozitionare absoluta, independent
de celelate obiecte din pagina
de celelate obiecte din pagina
Text
Pozitionare relativa, dupa
"Text"
"Text"
Pozitionarea tridimensionala
Elementele sunt pozitionate pe ecran pe o suprafata bidimensionala dar pot fi asezate si unul deasupra celuilalt, într-o stiva utilizând un indicativ (index-z) începând cu 0, urmatorul 1 si tot asa în continuare. Elementul cu indexul cel mai mare este asezat deasupra.
Exemplu: am folosit doua obiecte unul pozitionat absolut celalalt relativ:
Cod:
Exemplu de stiluri dedicate
Aceste stiluri se aplica blocurilor de text pentru care sunt definite si apelate pe loc. De exemplu:
Cod:
În acest exemplu, stilul va determina toate titlurile H3 din paginile HTML care fac apel la acest stil sa apara în browser în culoarea specificata si aliniate la dreapta.
Daca dorim ca acelasi stil sa fie utilizat de catre mai multe elemente-tag (de ex. "H2", "H3", "P" si "DIV"), atunci fie se utilizeaza o lista cu aceste elemente (separate prin virgula) în sectiunea din header-ul documentului (delimitat de marcajele ...), asociindu-i-se elementele de stil comune, fie se va utiliza stilul în mod explicit în cadrul fiecarui tag, ca mai sus.
Exemplu cu lista de stiluri în HEAD-er:
Cod:
Exemplu cu fiecare element de stil definit si apelat în cadrul tagurilor luate separat:
Cod:
Stil dedicat inline
text
text
text
Explicitarea a fost facuta, asadar, în momentul utilizarii acestora.
Articol preluat de la www.afaceri-online.net
Exemplu de clase de stiluri
Clasele de stiluri permit definirea unui stil general (aplicabil în mai multe locuri în cadrul aceleiasi pagini sau în pagini diferite) în vederea inserarii lui oriunde este necesar prin intermediul unei simple referiri. Sa presupunem ca dorim sa definim o clasa de stiluri "clasa-mea" (pe care dorim sa o aplicam anumitor portiuni de text pentru a le face sa apara de culoare verde si aliniate la stânga). Vom utiliza în acest sens blocul , aflat la rândul sau în interiorul blocului ... (reprezentând head-erul documentului HTML). Vom realiza ceea ce ne-am propus în felul urmator:
Cod:
Cuvantul standard "all" aflat în fata clasei de stiluri "clasa-mea" indica faptul ca aceasta clasa este aplicabila tuturor blocurilor de text, atunci când este necesar. Practic clasa de stiluri "clasa-mea" poate fi asociata tuturor tagurilor HTML care opereaza cu text (ca de exemplu: H2, H6, P, DIV, etc...) utilizând în interiorul fiecarui tag vizat o referire explicita la aceasta clasa:
Asadar, daca dorim sa aplicam aceasta clasa de stiluri unui titlu de ordinul 3 (specificat în codul HTML prin tagul H3), atunci scriem:
Cod:
Acesta este un header de marime 3, aliniat la stanga
si de culoare verde
Dupa cum s-a vazut, pentru apelarea unei clase de stiluri în vederea aplicarii sale elementului tag curent se foloseste atributul "class" având ca valoare numele clasei de stil. Împreuna cu specificatia "all" din definirea clasei de stiluri, atributul "class" devine un atribut universal, adica va putea fi asociat tuturor tagurilor HTML carora li se poate aplica (în acest caz celor care opereaza cu text).
Observatii:
- În interiorul unui bloc , comentariile sunt blocuri delimitate de /* si */ (ca si în C, C++, Java si Javascript).
- Daca dorim ca o clasa de stiluri sa fie aplicabila numai pentru anumite elemente ale documentului (spre exemplu pentru paragrafele de text desemnate prin marcajul de paragraf "p"), atunci în constructia clasei va aparea acest element (de exemplu "p.clasa-mea-2").
Exemplu:
Cod:
Acesta este un paragraf normal
Acesta este un paragraf aliniat la stanga si de
culoare verde
R32- Posts : 88
Join date : 24/03/2009
Age : 38
Location : Suceava -
Re: Despre CSS
Scris de R32 Vin Mar 27, 2009 10:31 am
Exemple de stiluri identificate
Absolut toate elementele tag ale unui document HTML admit un atribut universal numit "id". Acest atribut "id" poate identifica prin valorile sale stilul utilizat de un tag HTML.
Pentru a utiliza un stil "identificat" procedam astfel:
1. În blocul introducem definitia stilului conform sintaxei:
Cod:
2. În elementul (tagul) în care dorim utilizarea locala a acestui stil, folosim atributul "id" care primeste ca valoare numele identificator al stilului definit anterior. Exemplu:
Cod:
Daca dorim ca un stil "identificat" sa fie aplicabil numai pentru anumite elemente ale documentului (de exemplu "H3"), atunci în constructia (definitia) identificatorului de stil va aparea acest element (aici "H3"), ca în exemplul urmator:
Cod:
Pagina cu stil identificat
Acesta este un header de marime 3
Articol preluat de la www.afaceri-online.net
Exemplu de stiluri inline
Stilurile in-line sunt acele stiluri definite chiar în eticheta HTML (marcajul) ce initiaza blocul în care dorim sa se aplice aceste stiluri.
Dupa cum am vazut deja, pentru a defini stiluri inline se utilizeaza atributul universal "style" (comun practic tuturor etichetelor ce apar într-un document HTML) în continuarea caruia apare semnul egal, dupa care, între ghilimele, urmeaza definirea stilului, practic valoarea atributului "style".
Valoarea data atributului "style" este tocmai descrierea stilului, cuprinsa nu între acolade {..} (ca la definirea în HEAD sau în fiserul CSS extern - dupa cum vom vedea}, ci între ghilimele "..." (dupa cum am aratat si din exemplele anterioare).
Concret:
Cod:
Acest header are marimea 2, este de
Daca dorim utilizarea unui anumit stil pentru un fragment de text, atunci includem acest text într-un bloc cu ajutorul delimitatorilor ..., dupa care putem utiliza atributul "style", în cadrul etichetei , inline:
Cod:
Pagina HTML cu stil inline
Acesta este un text cu corpul de litera de
dimensine 15 puncte, aliniat pe centru si de culoare verde.
Exemplu de stil CSS în fisier extern
Stilurile definite în interiorul unui bloc pot fi transferate într-un fisier extern existând astfel posibilitatea asocierii lor mai multor fisiere HTML.
Pentru a utiliza un stil definit într-un fisier extern se procedeaza astfel:
1. Se creaza un fisier care sa contina numai descrierea stilurilor si se salveaza cu extensia ".css". Continutul acestui fisier coincide cu continutul unui bloc , fara ca acesti delimitatori sa fie inclusi.
2. În fisierul HTML care utilizeaza stilurile definite în fisierul creat la punctul 1, se include în blocul ... o eticheta , având trei atribute:
- atributul "rel" cu valoarea "stylesheet";
- atributul "type" cu valoarea "text/css".
- atributul "href" având ca valoare adresa URL a fisierului creat la punctul 1;
Stilurile definite din fisierul CSS extern se activeaza ca si cum ar fi stiluri definite în fisierul HTML curent într-un bloc .
Iata un fisier HTML cu un CSS extern:
Cod:
Pagina de text stilizat
Acesta este text formatat ca Header 2, urmat
?Acesta este un text formatat ca Header 3, urmat
Fiserul CSS asociat (plasat în acelasi director) cu fisierul HTML de mai sus, este:
Cod:
H2,H3,h3
{
color:#483d8b;
font-family: "lucida calligraphy", "arial";
}
p, table, li
{
font-family: "lucida calligraphy", "arial";
margin-left: 10pt;
}
body
{
background-color:#fffaf0;
}
li,p,th,td
{
font-size: 80%;
}
table {border-style:outset}
li {list-style: square;)
Mentiune suplimentara:
În cazul în care, dintr-un fisier HTML se face o referire la un fisier CSS care însa lipseste, atunci fisierul HTML va fi afisat în browser fara elementele de stilizare, exact asa cum ar arata daca stilizarile nu ar fi existat.
Absolut toate elementele tag ale unui document HTML admit un atribut universal numit "id". Acest atribut "id" poate identifica prin valorile sale stilul utilizat de un tag HTML.
Pentru a utiliza un stil "identificat" procedam astfel:
1. În blocul introducem definitia stilului conform sintaxei:
Cod:
2. În elementul (tagul) în care dorim utilizarea locala a acestui stil, folosim atributul "id" care primeste ca valoare numele identificator al stilului definit anterior. Exemplu:
Cod:
Acesta este un paragraf de text de culoare rosie
Daca dorim ca un stil "identificat" sa fie aplicabil numai pentru anumite elemente ale documentului (de exemplu "H3"), atunci în constructia (definitia) identificatorului de stil va aparea acest element (aici "H3"), ca în exemplul urmator:
Cod:
Acesta este un header de marime 3
, centrat si de culoare rosie
Articol preluat de la www.afaceri-online.net
Exemplu de stiluri inline
Stilurile in-line sunt acele stiluri definite chiar în eticheta HTML (marcajul) ce initiaza blocul în care dorim sa se aplice aceste stiluri.
Dupa cum am vazut deja, pentru a defini stiluri inline se utilizeaza atributul universal "style" (comun practic tuturor etichetelor ce apar într-un document HTML) în continuarea caruia apare semnul egal, dupa care, între ghilimele, urmeaza definirea stilului, practic valoarea atributului "style".
Valoarea data atributului "style" este tocmai descrierea stilului, cuprinsa nu între acolade {..} (ca la definirea în HEAD sau în fiserul CSS extern - dupa cum vom vedea}, ci între ghilimele "..." (dupa cum am aratat si din exemplele anterioare).
Concret:
Cod:
Acest header are marimea 2, este de
culoare rosie
si se pozitioneaza in pagina centrat.
Daca dorim utilizarea unui anumit stil pentru un fragment de text, atunci includem acest text într-un bloc cu ajutorul delimitatorilor ..., dupa care putem utiliza atributul "style", în cadrul etichetei , inline:
Cod:
Titlu de marime 3
Acesta este un text cu corpul de litera de
dimensine 15 puncte, aliniat pe centru si de culoare verde.
Exemplu de stil CSS în fisier extern
Stilurile definite în interiorul unui bloc pot fi transferate într-un fisier extern existând astfel posibilitatea asocierii lor mai multor fisiere HTML.
Pentru a utiliza un stil definit într-un fisier extern se procedeaza astfel:
1. Se creaza un fisier care sa contina numai descrierea stilurilor si se salveaza cu extensia ".css". Continutul acestui fisier coincide cu continutul unui bloc , fara ca acesti delimitatori sa fie inclusi.
2. În fisierul HTML care utilizeaza stilurile definite în fisierul creat la punctul 1, se include în blocul ... o eticheta , având trei atribute:
- atributul "rel" cu valoarea "stylesheet";
- atributul "type" cu valoarea "text/css".
- atributul "href" având ca valoare adresa URL a fisierului creat la punctul 1;
Stilurile definite din fisierul CSS extern se activeaza ca si cum ar fi stiluri definite în fisierul HTML curent într-un bloc .
Iata un fisier HTML cu un CSS extern:
Cod:
Acesta este text formatat ca Header 1
Acesta este un paragraf
Acesta este text formatat ca Header 2, urmat
de un tabel
| Nume | Prenume | Telefon | |
|---|---|---|---|
| Popescu | Valentin | 4433978 | popescu@yahoo.com |
| Ionescu | Mihai | 5599786 | ionescu@yahoo.com? |
?
Acesta este un text formatat ca Header 3, urmat
de 2 liste:
- Date personale student;
- Calificari student;
- Program zilnic:
- Program dimineata
- Pauza de masa
- Program dupamiaza
Fiserul CSS asociat (plasat în acelasi director) cu fisierul HTML de mai sus, este:
Cod:
H2,H3,h3
{
color:#483d8b;
font-family: "lucida calligraphy", "arial";
}
p, table, li
{
font-family: "lucida calligraphy", "arial";
margin-left: 10pt;
}
body
{
background-color:#fffaf0;
}
li,p,th,td
{
font-size: 80%;
}
table {border-style:outset}
li {list-style: square;)
Mentiune suplimentara:
În cazul în care, dintr-un fisier HTML se face o referire la un fisier CSS care însa lipseste, atunci fisierul HTML va fi afisat în browser fara elementele de stilizare, exact asa cum ar arata daca stilizarile nu ar fi existat.
R32- Posts : 88
Join date : 24/03/2009
Age : 38
Location : Suceava -
Pagina 1 din 1
Permisiunile acestui forum:
Nu puteti raspunde la subiectele acestui forum|
|
|
» haideti sa ne cunoastem :P
» In legatura cu take-ul de aseara si remuser pe userul meu
» despre sex ?
» hmmm scripturi:
» Tu ce preferi?
» DAN DIACONESCU SE EXTINDE SI IN AUSTRIA
» CELE MAI URATE CELEBRITATI MASCULINE
» CNA A DECIS DIFUZAREA REALITY SHOW-URILOR DUPA ORA 23