CSS basics - Historial de revisió

Toni: /* Aplicar estils CSS a un document HTML */

2012-01-17T12:29:26Z

Aplicar estils CSS a un document HTML

Enric: tag head missing

2011-01-23T18:59:58Z

tag head missing

Enric: colors

2011-01-23T13:09:38Z

colors

Enric a 13:07, 23 gen 2011

2011-01-23T13:07:35Z

Enric: 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…».

2011-01-23T00:32:09Z

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…».

Pàgina nova

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 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>.
* Aplicar-li una determinada '''propietat'''. Per exemple, que volem el <span style="color:red">text en color vermell</span>.

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.
#Amb el tag STYLE (dins el HEAD).
#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 <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="..."'''.
<syntaxhighlight lang="php">
<p style="color:red;">El text en vermell</p>
</syntaxhighlight>
* Al HEAD amb el '''tag STYLE''': assignant als tags de paràgraf (<nowiki><p></nowiki>) el color vermell.
<syntaxhighlight lang="xml">
<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>
</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">
<HTML>
<HEAD>
<TITLE>...</TITLE>
<LINK rel="stylesheet" type="text/css" href="estils.css" />
</HEAD>

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

@@ Línia 11: / Línia 11: @@
 == 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:
+Agafem l'exemple del paràgraf en color vermell. En HTML utilitzaríem el tag FONT. En CSS ho podem fer de 3 maneres:
 #Inline.
 #Amb el tag STYLE (dins el HEAD).
@@ Línia 81: / Línia 81: @@
+     }
 </syntaxhighlight>
 == Exemple amb 2 propietats ==

@@ Línia 100: / Línia 100: @@
+                }
            </STYLE>
       <BODY>
@@ Línia 114: / Línia 115: @@
   <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 ==

@@ Línia 119: / Línia 119: @@
 Ò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)
+#* <span style="color:green">El títol del document amb '''H1''' (en verd, tamany 30)</span>
-#* Els teus plats favorits (mínim 3!) amb H2 (en marró, tamany de lletra 24)
+#* <span style="color:maroon">Els teus plats favorits (mínim 3!) amb '''H2''' (en marró, tamany de lletra 24)</span>
-#* Una llista d'ingredients per cada plat (utilitza llistes HTML amb els tags UL o OL). Color oliva ("olive").
+#* <span style="color:olive">Una llista d'ingredients per cada plat (utilitza llistes HTML amb els tags '''UL''' o '''OL'''). Color oliva ("olive").</span>
-#* Una petita descripció o recepta de cuina amb el tag P (color "teal" o cyan).
+#* <span style="color:teal">Una petita descripció o recepta de cuina amb el tag '''P''' (color "teal" o cyan).</span>
-# Passa l'exercici 1 a una fulla d'estils externa.
+# Passa l'exercici 1 a una fulla d'estils externa.</span>

@@ 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.
 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>.
 * Aplicar-li una determinada '''propietat'''. Per exemple, que volem el <span style="color:red">text en color vermell</span>.
 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.
@@ 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>).
-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="..."'''.
 <p style="color:red;">El text en vermell</p>
 </syntaxhighlight>
-* Al HEAD amb el '''tag STYLE''': assignant als tags de paràgraf (<nowiki><p></nowiki>) el color vermell.
 <syntaxhighlight lang="xml">
   <HTML>
@@ Línia 34: / Línia 56: @@
   </HTML>
 </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">
   <HTML>
       <HEAD>
@@ Línia 47: / Línia 74: @@
   </HTML>
 </syntaxhighlight>