Diferència entre revisions de la pàgina «CSS classes»

De Cacauet Wiki
Salta a la navegació Salta a la cerca
Línia 48: Línia 48:
 
  Si ens cal inspiració, sempre podem recordar la invocació a les Muses de la
 
  Si ens cal inspiració, sempre podem recordar la invocació a les Muses de la
 
  Teogonia d'Hesíode per obtenir la capacitat d'encisar els nostres oients: <br/> <br/></P>
 
  Teogonia d'Hesíode per obtenir la capacitat d'encisar els nostres oients: <br/> <br/></P>
  <P style="font-family:serif;padding-left:2em;padding-right:3em;line-height:90%;text-align:justify;">
+
  <P style="font-family:serif;padding-left:2em;padding-right:3em;line-height:90%;">
 
  Salut, filles de Zeus! Atorgueu-me l'encanteri del vostre cant. Celebreu la nissaga
 
  Salut, filles de Zeus! Atorgueu-me l'encanteri del vostre cant. Celebreu la nissaga
 
  sagrada dels sempiterns Immortals, els que naixeren de Gea i de l'estrellat Urà [...] <br/></P>
 
  sagrada dels sempiterns Immortals, els que naixeren de Gea i de l'estrellat Urà [...] <br/></P>
Línia 56: Línia 56:
  
 
Aprofitem per repassar les [http://www.dense13.com/wec/curscss/curscss.php?seccio=3&capitol=3&subcapitol=1 propietats de font] (passeu per tots els capítols del punt 3 per entendre les propietats de '''text''' i '''font'''.
 
Aprofitem per repassar les [http://www.dense13.com/wec/curscss/curscss.php?seccio=3&capitol=3&subcapitol=1 propietats de font] (passeu per tots els capítols del punt 3 per entendre les propietats de '''text''' i '''font'''.
 
  
 
== Classes genèriques ==
 
== Classes genèriques ==

Revisió del 22:20, 13 feb 2011

Les classes són arquetips d'estils. Es poden utiltizar de 2 maneres:

  1. Per fer derivats d'un mateix element. Per exemple, per crear 2 tipus de paràgrafs.
  2. Classes genèriques: afecten a diversos elements.

Derivats d'un element

Per exemple, si necessitem 2 tipus (classes) diferents de paràgraf (<P>) podem crear-les així (les anomenarem "normal" i "cita"):

<STYLE>
      BODY {
             font-size: 14px;
             margin: 0 auto; /* amb això se'ns centrarà la pàgina */
             width: 500px;
      }

      P.normal {
             font-family: Arial, sans-serif;
             font-style: normal;
             font-size: 1.1em;
             line-height: 130%; /* augmenta l'interliniat */

      }

      P.cita {
             font-family: Georgia, serif;
             font-size: 0.9em;
             line-height: 90%;
             padding-left: 2em;  /* amb el padding aconseguirem marges esquerre i dret */
             padding-right: 2em;
             
      }
</STYLE>

Podrem utiltizar els diferents elements al BODY així:

<BODY>
        <P class="normal">Si ens cal inspiració, sempre podem recordar la invocació a les Muses de la
        Teogonia d'Hesíode per obtenir la capacitat d'encisar els nostres oients:</P>
	<P class="cita">Salut, filles de Zeus! Atorgueu-me l'encanteri del vostre cant. Celebreu la nissaga
        sagrada dels sempiterns Immortals, els que naixeren de Gea i de l'estrellat Urà [...]</P>

</BODY>

Obtindriem més o menys aquest resultat:

Si ens cal inspiració, sempre podem recordar la invocació a les Muses de la Teogonia d'Hesíode per obtenir la capacitat d'encisar els nostres oients:

Salut, filles de Zeus! Atorgueu-me l'encanteri del vostre cant. Celebreu la nissaga sagrada dels sempiterns Immortals, els que naixeren de Gea i de l'estrellat Urà [...]

Amb aquest exemple podem crear paràgrafs normals (amb l'interliniat ample, alineació esquerra normal i lletra sense serifa o "sans-serif") i per altra banda paràgafs de cites (per copiar texts d'altres fonts) amb interliniat estret, marges esquerre i dret, font més petita i lletra amb serifa (Georgia per exemple, però si no agafarà qualsevol que sí en tingui com la Times New Roman).

Aprofitem per repassar les propietats de font (passeu per tots els capítols del punt 3 per entendre les propietats de text i font.

Classes genèriques

TODO...

Exercicis

  1. Crea un document exactament com Fitxer:Classes css.pdf. Tingues en compte:
    • Marges
    • "Indent" o sagnat de 1a línia.
    • Cursiva (itàlica) al tipus cita.
    • Cal crear una nova classe "peudecita" amb el nom de l'autor citat alineat a la dreta i amb negreta.
    • Els paràgrafs "cita" estan justificats (ocupen igual totes les línies).
  2. ...