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

De Cacauet Wiki
Salta a la navegació Salta a la cerca
(Es crea la pàgina amb «Llegeix la [http://www.imaginaserveis.com/manuals/css/manual_css.html introducció al CSS]. Per començar cal aclarir que el CSS és un afegit de l'estàndard HTML per m…».)
 
Línia 1: Línia 1:
−
Llegeix la [http://www.imaginaserveis.com/manuals/css/manual_css.html introducció al CSS].
+
Llegeix les [http://www.dense13.com/wec/curscss/curscss.php?seccio=1&capitol=0 primeres passes] del curs de CSS de Gonzalo Pérez de la Ossa.
 +
 
 +
També pots llegir la [http://www.imaginaserveis.com/manuals/css/manual_css.html introducció al CSS] d'aquest altre manual.
 +
 
  
 
Per començar cal aclarir que el CSS és un afegit de l'estàndard HTML per manipular elements d'un document HTML. En caldrà, doncs:
 
Per començar cal aclarir que el CSS és un afegit de l'estàndard HTML per manipular elements d'un document HTML. En caldrà, doncs:
 
* '''Adreçar-nos''' a un element del document (tag). Per exemple, al tag <nowiki><P></nowiki> (paràgraf) o al tag <nowiki><H1></nowiki>.
 
* '''Adreçar-nos''' a un element del document (tag). Per exemple, al tag <nowiki><P></nowiki> (paràgraf) o al tag <nowiki><H1></nowiki>.
 
* Aplicar-li una determinada '''propietat'''. Per exemple, que volem el <span style="color:red">text en color vermell</span>.
 
* Aplicar-li una determinada '''propietat'''. Per exemple, que volem el <span style="color:red">text en color vermell</span>.
 +
Llegiu aquest [http://www.dense13.com/wec/curscss/curscss.php?seccio=1&capitol=2 apartat sobre l'adreçament i les propietats] (dins del capítol de ''primeres passes'').
  
  
 +
== Aplicar estils CSS a un document HTML ==
 
Agafgem l'exemple del paràgraf en color vermell. En HTML utilitzaríem el tag FONT. En CSS ho podem fer de 3 maneres:
 
Agafgem l'exemple del paràgraf en color vermell. En HTML utilitzaríem el tag FONT. En CSS ho podem fer de 3 maneres:
 
#Inline.
 
#Inline.
Línia 13: Línia 18:
 
En el cas 2 i 3 caldrà adreçar-se a quin element HTML (tag) volem aplicar el color. Vegeu l'exemple per al paràgraf (tag <nowiki><p></nowiki>).
 
En el cas 2 i 3 caldrà adreçar-se a quin element HTML (tag) volem aplicar el color. Vegeu l'exemple per al paràgraf (tag <nowiki><p></nowiki>).
  
−
Les fulles d'estil CSS s'inclouen dins dels documents HTML de 3 maneres:
+
 
−
* '''Inline''': dins del tag concret que volguem aplicar-li estil amb el '''paràmetre style="..."'''.
+
=== Inline ===
−
<syntaxhighlight lang="php">
+
Apliquem l'estil dins del l'element concret amb el '''paràmetre style="..."'''.
 +
<syntaxhighlight lang="xml">
 
<p style="color:red;">El text en vermell</p>
 
<p style="color:red;">El text en vermell</p>
 
</syntaxhighlight>
 
</syntaxhighlight>
−
* Al HEAD amb el '''tag STYLE''': assignant als tags de paràgraf (<nowiki><p></nowiki>) el color vermell.
+
 
 +
Aquesta forma inline s'utiltiza força en el cas dels elements sense format SPAN (dintre d'un paràgraf). Per exemple:
 +
 
 +
{| border="1" width="800" style=""
 +
! Aquest exemple:
 +
! Donaria com a resultat:
 +
|-
 +
|<syntaxhighlight lang="xml">
 +
Això seria un text normal amb alguna
 +
<SPAN style="color:green">nota verda</SPAN> entre mig.
 +
</syntaxhighlight>
 +
|Això seria un text normal amb alguna <SPAN style="color:green">nota verda</SPAN> entre mig.
 +
|}
 +
 
 +
 
 +
=== Fulla d'estils incrustada (embedded) ===
 +
Podem reunir tots els paràmetres CSS en un apartat del HTML, en particular dins el HEAD en l''''element STYLE'''. Assignarem als tags de paràgraf (<nowiki><p></nowiki>) el color vermell.
 
<syntaxhighlight lang="xml">
 
<syntaxhighlight lang="xml">
 
  <HTML>
 
  <HTML>
Línia 34: Línia 56:
 
  </HTML>
 
  </HTML>
 
</syntaxhighlight>
 
</syntaxhighlight>
−
* Com a '''document extern amb el tag LINK''' dins del HEAD (caldria fer un document "estils.css" amb les dades incloses abans en el tag STYLE).
+
 
−
<syntaxhighlight lang="php">
+
 
 +
=== Fulla d'estils externa ===
 +
Com a '''document extern amb el tag LINK''' dins del HEAD (caldria fer un document "estils.css" amb les dades incloses abans en l'element STYLE).
 +
 
 +
El document HTML pintaría així:
 +
<syntaxhighlight lang="xml">
 
  <HTML>
 
  <HTML>
 
     <HEAD>
 
     <HEAD>
Línia 47: Línia 74:
 
  </HTML>
 
  </HTML>
 
</syntaxhighlight>
 
</syntaxhighlight>
 +
 +
I per altra banda necessitem fer un '''arxiu estils.css''' amb el següent contingut:
 +
<syntaxhighlight lang="css">
 +
    p {
 +
        color: red;
 +
    }
 +
</syntaxhighlight>
 +
 +
 +
== Exemple amb 2 propietats ==
 +
Hem vist com canviar el color del text amb la propietat CSS ''color''. Si volem canviar el tamany de la lletra ho podem fer amb la propietat '''''font-size'''''. Per exemple, farem una lletra molt gran (40px) pel H1 en color verd i una lletra molt petita pel P (8px) en color magenta:
 +
 +
<syntaxhighlight lang="xml">
 +
<HTML>
 +
    <HEAD>
 +
          <TITLE>Exemple de CSS</TITLE>
 +
          <STYLE type="text/css">
 +
              H1 {      /* aquest selector apunta als tags <H1> */
 +
                  color: green;
 +
                  font-size: 40px;
 +
              }
 +
              P {      /* aquest selector apunta als tags <P> (paràgraf) */
 +
                  color: magenta;
 +
                  font-size: 10px;
 +
              }
 +
          </STYLE>
 +
 +
    <BODY>
 +
          <P>Comencem amb un paràgraf normal, petitet.</P>
 +
          <H1>Seguim amb un encapçalament grossot</H1>
 +
          <P>I finalitzem amb un altre paràgraf peitet.</P>
 +
    </BODY>
 +
</HTML>
 +
</syntaxhighlight>
 +
 +
 +
Donaria com a resultat:
 +
<DIV style="color:magenta;font-size:10px">Comencem amb un paràgraf normal, petitet.</DIV><br/>
 +
<DIV style="color:green;font-size:40px">Seguim amb un encapçalament grossot</DIV><br/>
 +
<DIV style="color:magenta;font-size:10px">I finalitzem amb un altre paràgraf peitet.</DIV><br/>
 +
 +
 +
== Exercicis ==
 +
Òbviament s'han de resoldre utilitzant CSS i sense utilitzar tags HTML com <strike>FONT</strike>.
 +
# Fes un document HTML amb CSS incrustada. Escriu:
 +
#* El títol del document amb H1 (en verd, tamany 30)
 +
#* Els teus plats favorits (mínim 3!) amb H2 (en marró, tamany de lletra 24)
 +
#* Una llista d'ingredients per cada plat (utilitza llistes HTML amb els tags UL o OL). Color oliva ("olive").
 +
#* Una petita descripció o recepta de cuina amb el tag P (color "teal" o cyan).
 +
# Passa l'exercici 1 a una fulla d'estils externa.

Revisió del 13:07, 23 gen 2011

Llegeix les primeres passes del curs de CSS de Gonzalo Pérez de la Ossa.

També pots llegir la introducció al CSS d'aquest altre manual.


Per començar cal aclarir que el CSS és un afegit de l'estàndard HTML per manipular elements d'un document HTML. En caldrà, doncs:

  • Adreçar-nos a un element del document (tag). Per exemple, al tag <P> (paràgraf) o al tag <H1>.
  • Aplicar-li una determinada propietat. Per exemple, que volem el text en color vermell.

Llegiu aquest apartat sobre l'adreçament i les propietats (dins del capítol de primeres passes).


Aplicar estils CSS a un document HTML

Agafgem l'exemple del paràgraf en color vermell. En HTML utilitzaríem el tag FONT. En CSS ho podem fer de 3 maneres:

  1. Inline.
  2. Amb el tag STYLE (dins el HEAD).
  3. En una fulla apart (document .css).

En el cas 2 i 3 caldrà adreçar-se a quin element HTML (tag) volem aplicar el color. Vegeu l'exemple per al paràgraf (tag <p>).


Inline

Apliquem l'estil dins del l'element concret amb el paràmetre style="...". 

<p style="color:red;">El text en vermell</p>

Aquesta forma inline s'utiltiza força en el cas dels elements sense format SPAN (dintre d'un paràgraf). Per exemple:

Aquest exemple: Donaria com a resultat: 
Això seria un text normal amb alguna
 <SPAN style="color:green">nota verda</SPAN> entre mig.
Això seria un text normal amb alguna nota verda entre mig.


Fulla d'estils incrustada (embedded)

Podem reunir tots els paràmetres CSS en un apartat del HTML, en particular dins el HEAD en l'element STYLE. Assignarem als tags de paràgraf (<p>) el color vermell. 

 <HTML>
     <HEAD>
          <TITLE>...</TITLE>
          <STYLE type="text/css">
               p {      /* aquest selector apunta als tags <p> (paràgraf) */
                  color: red;
               }
          </STYLE>

     <BODY>
          <p>El text en vermell.</p>
     </BODY>
 </HTML>


Fulla d'estils externa

Com a document extern amb el tag LINK dins del HEAD (caldria fer un document "estils.css" amb les dades incloses abans en l'element STYLE).

El document HTML pintaría així: 

 <HTML>
     <HEAD>
          <TITLE>...</TITLE>
          <LINK rel="stylesheet" type="text/css" href="estils.css" />
     </HEAD>

     <BODY>
          <p>El text en vermell.</p>
     </BODY>
 </HTML>

I per altra banda necessitem fer un arxiu estils.css amb el següent contingut: 

    p {
         color: red;
    }


Exemple amb 2 propietats

Hem vist com canviar el color del text amb la propietat CSS color. Si volem canviar el tamany de la lletra ho podem fer amb la propietat font-size. Per exemple, farem una lletra molt gran (40px) pel H1 en color verd i una lletra molt petita pel P (8px) en color magenta: 

 <HTML>
     <HEAD>
          <TITLE>Exemple de CSS</TITLE>
          <STYLE type="text/css">
               H1 {      /* aquest selector apunta als tags <H1> */
                  color: green;
                  font-size: 40px;
               }
               P {      /* aquest selector apunta als tags <P> (paràgraf) */
                  color: magenta;
                  font-size: 10px;
               }
          </STYLE>

     <BODY>
          <P>Comencem amb un paràgraf normal, petitet.</P>
          <H1>Seguim amb un encapçalament grossot</H1>
          <P>I finalitzem amb un altre paràgraf peitet.</P>
     </BODY>
 </HTML>


Donaria com a resultat:

Comencem amb un paràgraf normal, petitet.


Seguim amb un encapçalament grossot


I finalitzem amb un altre paràgraf peitet.



Exercicis

Òbviament s'han de resoldre utilitzant CSS i sense utilitzar tags HTML com FONT.

  1. Fes un document HTML amb CSS incrustada. Escriu:
    • El títol del document amb H1 (en verd, tamany 30)
    • Els teus plats favorits (mínim 3!) amb H2 (en marró, tamany de lletra 24)
    • Una llista d'ingredients per cada plat (utilitza llistes HTML amb els tags UL o OL). Color oliva ("olive").
    • Una petita descripció o recepta de cuina amb el tag P (color "teal" o cyan).
  2. Passa l'exercici 1 a una fulla d'estils externa.
Obtingut de «https://cacauet.org/wiki/index.php?title=CSS_basics&oldid=700»