CSS basics
La revisió el 00:32, 23 gen 2011 per Enric (discussió | contribucions) (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…».)
Llegeix la 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 <P> (paràgraf) o al tag <H1>.
- Aplicar-li una determinada propietat. Per exemple, que volem el text en color vermell.
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 <p>).
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="...".
<p style="color:red;">El text en vermell</p>
- Al HEAD amb el tag STYLE: assignant 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>
- 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).
<HTML>
<HEAD>
<TITLE>...</TITLE>
<LINK rel="stylesheet" type="text/css" href="estils.css" />
</HEAD>
<BODY>
<p>El text en vermell.</p>
</BODY>
</HTML>
