Diferència entre revisions de la pàgina «CSS basics»
| (2 revisions intermèdies per un altre usuari que no es mostra) | |||
| Línia 11: | Línia 11: | ||
== Aplicar estils CSS a un document HTML == | == Aplicar estils CSS a un document HTML == | ||
| − | + | 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. | #Inline. | ||
#Amb el tag STYLE (dins el HEAD). | #Amb el tag STYLE (dins el HEAD). | ||
| Línia 81: | Línia 81: | ||
} | } | ||
</syntaxhighlight> | </syntaxhighlight> | ||
| − | |||
== Exemple amb 2 propietats == | == Exemple amb 2 propietats == | ||
| Línia 100: | Línia 99: | ||
} | } | ||
</STYLE> | </STYLE> | ||
| + | </HEAD> | ||
<BODY> | <BODY> | ||
| Línia 114: | Línia 114: | ||
<DIV style="color:green;font-size:40px">Seguim amb un encapçalament grossot</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/> | <DIV style="color:magenta;font-size:10px">I finalitzem amb un altre paràgraf peitet.</DIV><br/> | ||
| − | |||
== Exercicis == | == Exercicis == | ||
Òbviament s'han de resoldre utilitzant CSS i sense utilitzar tags HTML com <strike>FONT</strike>. | Òbviament s'han de resoldre utilitzant CSS i sense utilitzar tags HTML com <strike>FONT</strike>. | ||
# Fes un document HTML amb CSS incrustada. Escriu: | # 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> |
Revisió de 12:29, 17 gen 2012
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).
Contingut
Aplicar estils CSS a un document HTML[modifica]
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).
- 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[modifica]
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)[modifica]
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[modifica]
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[modifica]
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>
</HEAD>
<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:
Exercicis[modifica]
Òbviament s'han de resoldre utilitzant CSS i sense utilitzar tags HTML com FONT.
- 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.
