Tutorial complet CSS Part 5

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

Chenare si margini

Fiecare element este incadrat intr-o caseta care este compusa din urmatoarele elemente:

marginea (margin) este spatiul exterior chenarului pana la celelalte elemente
chenarul (border) este o bordura care inconjoara 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 in continuare. 7.1 width si height
Latimea si inaltimea unui element sunt stabilite in 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:: <html> <head> <title>Exemplu 7_1</title> <style type="text/css">  </style> </head> <body> <img src="margini.gif"> <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>

7.2 padding si margin
padding stabileste distanta dintre obiect si chenar simultan pentru toate laturile. 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 in: px (pixeli), in (inci), pt (puncte) sau cm (centimetri). Exemplu: folosind comenzi CSS imaginea este pozitionata la 100px fata de latura stanga si 25px fata de latura de sus

Cod:: <html> <head> <title>Exemplu 7_2</title> <style type="text/css">  </style> </head> <body> <img src="margini.gif"> <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>

7.3 border
Netscape si Internet Explorer afiseaza diferit chenarele. Comanda CSS pentru definirea chenarului este border avand proprietatile asociate width, style si color.
Pentru a fi siguri ca aceste proprietati functioneaza atat in Internet
Explorer cat si in Netscape trebuie sa declaram pentru border cel putin
width si style. border-width stabileste grosimea chenarului si poate fi exprimata in 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 in cuvinte. Exemplu: definim noua clase utilizand proprietatile border-width border-style si [i]border-color

Cod:: [/i]<html> <head> <title>Exemplu 7_3</title> <style type="text/css">  </style> </head> <body> <div class="clasa1">border-width: 2px; border-style: dotted; border-color: red;</div><br> <div class="clasa2">border-width: 3px; border-style: dashed; border-color: blue;</div><br> <div class="clasa3">border-width: 2px; border-style: solid; border-color: green;</div><br> <div class="clasa4">border-width: 3px; border-style: double; border-color: black;</div><br> <div class="clasa5">border-width: 2px; border-style: groove; border-color: silver;</div><br> <div class="clasa6">border-width: 3px; border-style: ridge; border-color: lime;</div><br> <div class="clasa7">border-width: 2px; border-style: inset; border-color: yellow;</div><br> <div class="clasa8">border-width: 3px; border-style: outset; border-color: aqua;</div><br> <div class="clasa9">border-width: 2px; border-style: hidden; border-color: olive;</div> <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:57 am

Tare faza cu border...

Tutorial complet CSS Part 5

Tutorial complet CSS Part 5

Re: Tutorial complet CSS Part 5