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

De Cacauet Wiki
Salta a la navegació Salta a la cerca
 
(Hi ha 6 revisions intermèdies del mateix usuari que no es mostren)
Línia 2: Línia 2:
 
#Per fer derivats d'un mateix element. Per exemple, per crear 2 tipus de paràgrafs.
 
#Per fer derivats d'un mateix element. Per exemple, per crear 2 tipus de paràgrafs.
 
#Classes genèriques: afecten a diversos elements.
 
#Classes genèriques: afecten a diversos elements.
 +
 +
En aquesta secció treballarem les classes i les propietats de text. Per més <u>referències sobre el text</u> consulta aquests enllaços:
 +
*[http://www.dense13.com/wec/curscss/curscss.php?seccio=3&capitol=3&subcapitol=1 CSS en català (text i font)].
 +
*W3Schools: [http://www.w3schools.com/css/css_font.asp styling font] i [http://www.w3schools.com/css/css_text.asp styling text].
 +
 +
Començeu per aclarir què vol dir fonts '''"amb serifa"''' o '''"sense serifa"''', [http://www.w3schools.com/css/css_font.asp consulteu aquí].
 +
 +
  
 
== Derivats d'un element ==
 
== Derivats d'un element ==
Línia 58: Línia 66:
  
 
== Classes genèriques ==
 
== Classes genèriques ==
−
TODO...
+
Podem crear també classes sense un selector d'element. Així la podrem aplicar a qualsevol element HTML. Per exemple, la classe "vermell" la podem aplicar tant a un H1 com a un P:
 +
 
 +
<syntaxhighlight lang="xml">
 +
<STYLE>
 +
      .verd {
 +
              color: green;
 +
      }
 +
      .negre {
 +
              color: black;
 +
      }
 +
      .cursiva {
 +
              font-style: italic;
 +
      }
 +
</STYLE>
 +
<BODY>
 +
      <H1 class="verd">Títol en verd</H1>
 +
      <H1>Títol normal</H1>
 +
      <P class="verd">Aquest text també està en verd, però <SPAN class="negre">enmig podem
 +
        posar un tros en negre</SPAN> amb el tag SPAN.</P>
 +
      <P class="verd cursiva">També es poden combinar 2 classes com aquesta línia en verd
 +
      i cursiva.</P>
 +
</BODY>
 +
</syntaxhighlight>
 +
 
 +
Fixeu-vos que es poden aplicar 2 classes alhora a un element, separant-les per un espai.
 +
Això donaria més o menys aquest resultat:
 +
 
 +
<BIG style="color:green;font-weight:bold;padding-bottom:10px">Títol en verd.</BIG><br/>
 +
<BIG style="color:negre;font-weight:bold;">Títol normal.</BIG><br/>
 +
<SPAN style="color:green;">Aquest text també està en verd, però <SPAN style="color:black;">enmig podem posar un tros en negre</SPAN> amb el tag SPAN.</SPAN><br/>
 +
<SPAN style="color:green;font-style:italic;">També es poden combinar 2 classes com aquesta línia en verd i cursiva.</SPAN>
 +
 
 +
Mira ara de resoldre els exercicis proposats.
  
 
== Exercicis ==
 
== Exercicis ==
 +
Ajudant-te d'[http://www.dense13.com/wec/curscss/curscss.php?seccio=3&capitol=3&subcapitol=1 aquest enllaç amb les propietats del text], fes els següents exercicis:
 
#Crea un document exactament com [[File:Classes_css.pdf|aquest]]. Tingues en compte:
 
#Crea un document exactament com [[File:Classes_css.pdf|aquest]]. Tingues en compte:
 
#*Marges
 
#*Marges
Línia 67: Línia 108:
 
#*Cal crear una nova classe "peudecita" amb el nom de l'autor citat alineat a la dreta i amb negreta.
 
#*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).
 
#*Els paràgrafs "cita" estan justificats (ocupen igual totes les línies).
 +
#*El títol porta ombra acolorida. Si no ho veus fàcil, posa-li una de més senzilla.
 +
#Crea les classes normal, cursiva, negreta, subratllat, vermell, blau i groc. Crea un document amb text on facis totes les combinacions possibles, és a dir:
 +
#*Cursiva i vermell
 +
#*Cursiva i blau
 +
#*Cursiva i groc
 +
#*Negreta i vermell
 +
#*Negreta i blau
 +
#*...
 +
#*També has de crear una línia final amb totes les propietats de font juntes (cursiva, negreta, subratllat).
 
#...
 
#...
 +
 +
 +
== Exercici 3 ==
 +
Realitza una web tan similar a aquesta com et sigui possible:
 +
 +
 +
<br>

Revisió de 16:28, 21 juny 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.

En aquesta secció treballarem les classes i les propietats de text. Per més referències sobre el text consulta aquests enllaços:

Començeu per aclarir què vol dir fonts "amb serifa" o "sense serifa", consulteu aquí.


Derivats d'un element[modifica]

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[modifica]

Podem crear també classes sense un selector d'element. Així la podrem aplicar a qualsevol element HTML. Per exemple, la classe "vermell" la podem aplicar tant a un H1 com a un P: 

<STYLE>
       .verd {
               color: green;
       }
       .negre {
               color: black;
       }
       .cursiva {
               font-style: italic;
       }
</STYLE>
<BODY>
       <H1 class="verd">Títol en verd</H1>
       <H1>Títol normal</H1>
       <P class="verd">Aquest text també està en verd, però <SPAN class="negre">enmig podem
        posar un tros en negre</SPAN> amb el tag SPAN.</P>
       <P class="verd cursiva">També es poden combinar 2 classes com aquesta línia en verd
       i cursiva.</P>
</BODY>

Fixeu-vos que es poden aplicar 2 classes alhora a un element, separant-les per un espai. Això donaria més o menys aquest resultat: 

Títol en verd.

Títol normal.

Aquest text també està en verd, però enmig podem posar un tros en negre amb el tag SPAN.

També es poden combinar 2 classes com aquesta línia en verd i cursiva.

Mira ara de resoldre els exercicis proposats.

Exercicis[modifica]

Ajudant-te d'aquest enllaç amb les propietats del text, fes els següents 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).
    • El títol porta ombra acolorida. Si no ho veus fàcil, posa-li una de més senzilla.
  2. Crea les classes normal, cursiva, negreta, subratllat, vermell, blau i groc. Crea un document amb text on facis totes les combinacions possibles, és a dir:
    • Cursiva i vermell
    • Cursiva i blau
    • Cursiva i groc
    • Negreta i vermell
    • Negreta i blau
    • ...
    • També has de crear una línia final amb totes les propietats de font juntes (cursiva, negreta, subratllat).
  3. ...


Exercici 3[modifica]

Realitza una web tan similar a aquesta com et sigui possible:



Obtingut de «https://cacauet.org/wiki/index.php?title=CSS_classes&oldid=978»