Tutorial complet CSS Part 2

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

Stiluri pentru fonturi

Aceste elemente specifica argumentul fontului care se asociaza unui
element HTML fiind incluse ori in zona HEAD ori in interiorul etichetei
dorite.
In cazul de fata se remarca asemanarea cu eticheta font din HTML care accepta argumentele type, style, size si weight. 3.1 font-family
font-family
este de fapt o lista de fonturi din care browserul va folosi in ordinea
in care le recunoaste (primul folosit va fi primul din lista, daca nu
este recunoscut il 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).
In situatia in care
numele fontului este format din doua cuvinte se incadreaza intre
ghilimele duble pentru ca browserul sa le interpreteze impreuna. Exemplu: CSS introdus in HEAD aplicat etichetei p. Browserul nu recunoaste primele doua fonturi din lista, folosindu-l pe al treilea

Cod:: <html> <head> <title>Exemplu 3_1</title> <style type="text/css">  </style> </head> <body> <p>Text scris cu cu fontul Arial</p> Text negru <p>Text scris cu cu fontul Arial</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> [url=http://www.drogoreanu.ro/tutorials/css/exemplu3_2.html]Exemplu[/url]: acelasi exemplu dar CSS introdus in eticheta [i]p[/i] din HTML <html> <head> <title>Exemplu 3_2</title> </head> <body> <p style="font-family: font1,font2,arial;">Text scris cu cu fontul Arial</p> Text negru <p style="font-family: font1,font2,arial;">Text scris cu cu fontul Arial</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>

3.2 font-size
Este parametrul prin care stabilim
dimesiunea fontului, exprimat in pixeli (px), puncte (pt), keywords sau
procente. Are o functionare asemanatoare cu eticheta . Exemplu: CSS introdus in HEAD aplicat etichetei p, dimensiunea exprimata in pixeli

Cod:: <html> <head> <title>Exemplu 3_3</title> <style type="text/css">  </style> </head> <body> <p>Text scris cu font de 20px</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>

Pentru dimensiunea exprimata in puncte folosim acelasi exemplu inlocuid px cu pt. Dimensiunea exprimata prin keywords foloseste cuvinte in loc de cifre. Sapte cuvinte inlocuiesc dimensiunile de la 1 la 7 de la veche 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 in care se inlocuieste 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 schimband 20px cu 200%. 3.3 font-style
font-style este folosit pentru a adauga caracteristica italica fontului. Poate lua valorile normal si italic.

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

3.4 font-weight
font-weight este paramerul care stabileste grosimea caracterului putand lua valorile numerice de la 100 la 900 sau BOLD, BOLDER, LIGHTER.

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

3.4 Compunerea stilurilor
Stilurile prezentate anterior
pot fi folosite simultan in interiorul aceeasi etichete fiind
despartite de caracterul ; (punct si virgula). Exemplu: folosirea unui stil compus aplicat etichetei p

Cod:: <html> <head> <title>Exemplu 3_4</title> <style type="text/css">  </style> </head> <body> <p>Text scris cu Arial, 20px, italic, 800</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>

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

Bun,continua tot asa cu tutorialele.

Tutorial complet CSS Part 2

Tutorial complet CSS Part 2

Re: Tutorial complet CSS Part 2