Cuprins
- Cuprins
- 1. Introducere in CSS
- 2. Introducerea codului CSS in fisierul HTML
- 3. Selectori si declaratii în CSS
- 4. Mostenire
- 5. Corespondente HTML-CSS
- 6. Comentariul in CSS
- 7. Pozitionarea elementelor in CSS
- 8. Filtrele CSS
- 9. Cursorul
- ANEXE :
- Caracteristici :
- 1. Fundal CSS
- 2. Textul CSS
- 3. Fonturi CSS
- 4. Border in CSS
- 5. Margini CSS
- 6. Padding CSS
Extras din proiect
Capitolul 1. Introducere in CSS
CSS este un acronim provenind din Cascading Style Sheets, care înseamnã "foi de stil în cascadã". In documentele W3C, CSS nu e definit ca un nou limbaj, ci ca un mecanism care permite formatarea documentului HTML.
Stilurile rezolva o problema comuna
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 in ce mai greu sa creezi site-uri web in care continutul documentelor HTML sa fie separat clar de aranjamentul documentului.
CSS-ul nu exclude HTML-ul din pagina web. Nu se poate realiza o paginã web folosind numai CSS, care a fost proiectat astfel încât sã conlucreze cu HTML-ul.
Foile de stil pot salva multa munca inutila
Stilurile definesc cum sa fie afisate elementele HTML , asa cum face tagul font sau atributul color in HTML 3.2. Stilurile sunt salvate in mod normal in fisiere diferite de cele cu extensia html.
Foile de stil externe va permit sa schimbati aparitia si aranjarea tuturor paginilor in site-ul dvs. web, doar prin editarea unui singur document CSS. Daca ati incercat vreodata sa schimbati fontul sau culoarea tuturor anteturilor din paginile web pe care le-ati creat, veti intelege cum CSS va poate scuti de multa munca inutila.
CSS este foarte util in Web design, deoarece le permite developerilor sa controleze stilul si chenarul mai multor pagini web in acelasi timp. Ca web developer puteti defini un stil pentru fiecare element HTML si sa-l aplicati cator pagini web doriti.
Stiluri multiple se reduc la unul
Foile de stiluri dau posibilitatea specificarii informatiei despre stil in mai multe feluri.
Stilurile se pot specifica intr-un singur element HTML, in interiorul elementului <head> al unei pagini HTML sau intr-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 inseamna ca va suprascrie fiecare stil declarat in tagul <head>, intr-o foaie de stil externa si in browser.
Folosind CSS, se ajunge la:
1. un control mai fin asupra paginii web
2. scãderea dimensiunii în octeti a paginii web, atunci când codul CSS e continut într-un fisier extern
3. o mai mare comoditate: modificând fisierul CSS extern, modificãm simultan toate paginile web în care acesta e inclus
4. efecte mai sofisticate decât cele produse de codul HTML: suprapunerea unei imagini peste altã imagine, a unui text peste alt text, impresia de relief, efectul hover, afisarea unor fonturi mai mari decât h1 etc.
Dezavantaj: Pagina continand cod CSS poate arata diferit in navigatoare diferite, deoarece nu toate browserele interpreteaza codul CSS. Internet Explorer citeste corect si complet codul CSS, spre deosebire de Netscape Navigator.
Adãugând cod JavaScript, se obtin efecte si mai sofisticate, chiar de animatie. CSS + JavaScript = DHTML ( Dynamic HTML ). Aceste efecte spectaculoase justificã titulatura de "artisti CSS" sau "artizani CSS" acordatã unor creatori de pagini web.
Capitolul 2. Introducerea codului CSS in fisierul HTML
In documentul HTML, codul CSS poate fi introdus în mai multe moduri:
Sintaxa CSS :
Sintaxa CSS este alcatuita din trei parti: un selector, o caracteristica si o valoare:
selector { property: value; }
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 incadrate de acolade:
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:
p { text-align: center; color: red ;}
1. Codul CSS e prezent în pagina web, iar efectul sãu se aplicã asupra întregului document.
Exemplul 1:
<html>
<head>
<style>
b { color:red; }
i { color:blue; }
</style>
</head>
<body>
<p align=center><b>Introducere în CSS</b></p>
<p><i>Aceastã sectiune se adreseazã celor ce
cunosc deja HTML-ul. </i></p>.
</body>
</html>
Preview document
Conținut arhivă zip
- Tehnologii Web - Cascading Style Sheets.doc