Tutorial complet CSS Part 1

Scris de **Pein** Lun Iul 26, 2010 3:02 am

CSS, prescurtarea de la Cascading Style Sheets, sunt etichete folosite pentru formatarea paginilor web (de exemplu formatare text, background sau aranjare in pagina, etc.). Beneficiile sintaxei CSS sunt:

formatarea este introdusa intr-un singur loc pentru tot documentul
editarea rapida a etichetelor
datorita
introducerii intr-un singur loc a etichetelor se obtine o micsorare a
codului paginii, implicit incarcarea mai rapida a acesteia

Sintaxa CSS este structurata pe trei nivele:
nivelul 1 fiind proprietatile etichetelor din documentul HTML, tip inline
nivelul 2 este informatia introdusa in blocul HEAD, tip embedded
nivelul 3 este reprezentat de comenzile aflate in pagini separate, tip externe Cea mai mare importanta (suprascrie orice alt parametru) o are sintaxa
de nivelul 1 iar cea mai mica importanta o are cea de nivelul 3. Folosirea unui fisier extern
sau nivel 3 care sa contina comenzi CSS este foarte practic deoarece
poate fi utilizat in mai multe situatii (mai multe fisiere HTML pot
folosi acelasi fisier extern CSS) eliminand timpul necesar introducerii
codului corespunzator in fiecare pagina si totodata editarea lor
intr-un singur loc pentru mai multe fisiere.
Extensia acestor fisiere este .css.
Legatura paginilor HTML cu fisierele extene CSS se face prin introducerea urmatoarei linii:

Cod:: <link rel="stylesheet" type="text/css" href="fisier_css.css">

Atributele indica urmatoarele: rel - fisierul este tip styleshhet
type - tip text ce contine comenzi CSS
href - fisierul sau adresa fisierului CSS. Comenzile de nivel 2 sau embedded sunt cele gazduite oriunde intre perechea de etichete si conform sintaxei:

Cod:: <style type="text/css">  </style>

Unde style -specifica unde incepe si unde se termina blocul CSS iar type este folosit pentru a ascunde de browserele vechi, care nu cunosc sintaxa CSS, continutul blocului style. Comenzile CSS de nivel 1 sau inline
sunt cele mai folosite, ele suprascriind orice alte comenzi CSS. Sunt
amplasate in interiorul etichetelor HTML aflate in zona BODY si au
sintaxa:

Cod:: <eticheta style="codul CSS dorit">

...textul sau obiectul asupra caruia este aplicat codul CSS...

Cod:: </eticheta>

Elementele id si class

d si class sunt comenzi care dau unei formatari CSS un
nume. Se folosesc atunci cand 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, plasandu-se un nume acelui style. Acest element necesita existenta comezilor CSS in zona HEAD sau intr-un fisier extern. Exemplu: folosirea elementului id

Cod:: <html> <head> <title>Exemplu 2_1</title> <style type="text/css">  </style> </head> <body> <p id="albastru">Text albastru introdus prin id "albastru"</p> Text negru <script type="text/javascript">//<![CDATA[ var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www."); document.write(unescape("%3Cscript src='" + gaJsHost + "google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E")); //]]></script> <script type="text/javascript">//<![CDATA[ try { var pageTracker = _gat._getTracker("UA-6105650-13"); pageTracker._setDomainName("none"); pageTracker._setAllowLinker(true); pageTracker._trackPageview(); } catch(err){} //]]></script></body> </html>

Elementul class se 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 in zona HEAD sau intr-un fisier extern. Exemplu: folosirea elementului class

Cod:: <html> <head> <title>Exemplu 2_2</title> <style type="text/css">  </style> </head> <body> <p class="rosu">Primul text rosu introdus prin class "rosu"</p> Text negru <p class="rosu">Al doilea text rosu introdus prin class "rosu"</p> <script type="text/javascript">//<![CDATA[ var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www."); document.write(unescape("%3Cscript src='" + gaJsHost + "google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E")); //]]></script> <script type="text/javascript">//<![CDATA[ try { var pageTracker = _gat._getTracker("UA-6105650-13"); pageTracker._setDomainName("none"); pageTracker._setAllowLinker(true); pageTracker._trackPageview(); } catch(err){} //]]></script></body> </html>

Scris de **God** Joi Oct 07, 2010 1:53 am

Ce sa mai zic??Bun tutorial.

Tutorial complet CSS Part 1

Tutorial complet CSS Part 1

Re: Tutorial complet CSS Part 1