AcasaPortalCalendarFAQCautareMembriGrupuriInregistrareConectare

Distribuiţi | 
 

 Tutorial complet CSS Part 2

In jos 
AutorMesaj
White.Angel
Administrator
Administrator
avatar

<b>Sex</b> Sex : masculin
<b>Mesaje</b> Mesaje : 133
<b>Credite</b> Credite : 3148
<b>Reputatie</b> Reputatie : 0
<b>Varsta</b> Varsta : 23

MesajSubiect: Tutorial complet CSS Part 2   Dum Sept 26, 2010 4:07 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">
 <!-- p{font-family: font1,font2,arial;}-->
 </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">
 <!-- p{font-size: 20px;}-->
 </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">
 <!-- p{font-style: italic;}-->
 </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">
 <!-- p{font-weight: 700;}-->
 </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">
 <!--
 p{
 font-family: arial;
 font-size: 20px;
 font-style: italic;
 font-weight: 800;}
 -->
 </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>

_________________
Bun venit Vizitator, esti nascut in 0 si ai 0 ani.
Esti membru comunitati My-Space din data de .
Ultima ta vizita a fost in si ai un numar de 0 Mesaje
Sus In jos
Vezi profilul utilizatorului http://my-space.forumz.ro
 
Tutorial complet CSS Part 2
Sus 
Pagina 1 din 1

Permisiunile acestui forum:Nu puteti raspunde la subiectele acestui forum
 :: Codding :: Suport Css :: Tutoriale-
Mergi direct la: