CSS classes - Historial de revisió

Enric: /* Exercici 3 */

2011-06-21T16:28:17Z

Exercici 3

Enric: /* Exercicis */

2011-06-20T16:22:20Z

Exercicis

Enric: aplicar 2 classes a un element

2011-02-15T14:44:07Z

aplicar 2 classes a un element

Enric a 13:22, 14 feb 2011

2011-02-14T13:22:46Z

Enric: /* Classes genèriques */

2011-02-14T13:19:49Z

Classes genèriques

Enric a 13:04, 14 feb 2011

2011-02-14T13:04:32Z

Enric: /* Exercicis */

2011-02-13T22:28:05Z

Exercicis

Enric: /* Derivats d'un element */

2011-02-13T22:20:00Z

Derivats d'un element

Enric: /* Exercicis */

2011-02-13T22:18:41Z

Exercicis

Enric: Es crea la pàgina amb «Les classes són arquetips d'estils. Es poden utiltizar de 2 maneres: #Per fer derivats d'un mateix element. Per exemple, per crear 2 tipus de paràgrafs. #Classes genèr…».

2011-02-13T22:11:16Z

Es crea la pàgina amb «Les classes són arquetips d'estils. Es poden utiltizar de 2 maneres: #Per fer derivats d'un mateix element. Per exemple, per crear 2 tipus de paràgrafs. #Classes genèr…».

Pàgina nova

Les classes són arquetips d'estils. Es poden utiltizar de 2 maneres:
#Per fer derivats d'un mateix element. Per exemple, per crear 2 tipus de paràgrafs.
#Classes genèriques: afecten a diversos elements.

== Derivats d'un element ==
Per exemple, si necessitem 2 tipus (classes) diferents de paràgraf (<nowiki><P></nowiki>) podem crear-les així (les anomenarem "normal" i "cita"):
<syntaxhighlight lang="css">
<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>
</syntaxhighlight>

Podrem utiltizar els diferents elements al BODY així:
<syntaxhighlight lang="xml">
<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>
</syntaxhighlight>

Obtindriem més o menys aquest resultat:
<div style="width:500px;background-color:#eeeeff;line-height:20px; padding-left:60px; padding-right:60px;">
<P style="font-family:sans-serif;line-height:130%;">
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: <br/> <br/></P>
<P style="font-family:serif;padding-left:2em;padding-right:3em;line-height:90%;text-align:justify;">
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à [...] <br/></P>
</div>

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 [http://www.dense13.com/wec/curscss/curscss.php?seccio=3&capitol=3&subcapitol=1 propietats de font] (passeu per tots els capítols del punt 3 per entendre les propietats de '''text''' i '''font'''.

== Classes genèriques ==
TODO...

== Exercicis ==
#Crea un document exactament com aquest.

← Versió més antiga		Revisió del 16:28, 21 juny 2011
Línia 123:		Línia 123:
	Realitza una web tan similar a aquesta com et sigui possible:		Realitza una web tan similar a aquesta com et sigui possible:

−	~~[[Imatge:ex2-css-box-model.png]]~~

	<br>		<br>

← Versió més antiga		Revisió del 16:22, 20 juny 2011
Línia 118:		Línia 118:
	#*També has de crear una línia final amb totes les propietats de font juntes (cursiva, negreta, subratllat).		#*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:
		+
		+	[[Imatge:ex2-css-box-model.png]]
		+
		+	<br>

@@ Línia 70: / Línia 70: @@
 <syntaxhighlight lang="xml">
 <STYLE>
-        .vermell{
+        .verd {
-                color: red;
+                color: green;
+        }
         .negre {
                 color: black;
+        }
 </STYLE>
 <BODY>
-        <H1 class="vermell">Títol en vermell</H1>
+        <H1 class="verd">Títol en verd</H1>
         <H1>Títol normal</H1>
-        <P class="vermell">Aquest text també està en vermell, però <SPAN class="negre">enmig podem
+        <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>
 </BODY>
 </syntaxhighlight>
 Això donaria més o menys aquest resultat:
-  <BIG style="color:red;font-weight:bold;padding-bottom:10px">Títol en vermell.</BIG><br/>
+  <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:red;">Aquest text també està en vermell, però <SPAN style="color:black;">enmig podem posar un tros en negre</SPAN> amb el tag SPAN.</SPAN><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.

@@ Línia 5: / Línia 5: @@
 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_text.asp styling text] i [http://www.w3schools.com/css/css_font.asp styling font].
+*W3Schools: [http://www.w3schools.com/css/css_font.asp styling font] i [http://www.w3schools.com/css/css_text.asp styling text].

@@ Línia 2: / Línia 2: @@
 #Per fer derivats d'un mateix element. Per exemple, per crear 2 tipus de paràgrafs.
 #Classes genèriques: afecten a diversos elements.
 == Derivats d'un element ==
@@ Línia 69: / Línia 74: @@
 #*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.
 #...

@@ Línia 63: / Línia 63: @@
 == 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:
 == Exercicis ==

@@ Línia 61: / Línia 61: @@
 == Exercicis ==
 #Crea un document exactament com [[File:Classes_css.pdf|aquest]]. Tingues en compte:
 #*Marges
@@ Línia 67: / Línia 68: @@
 #*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).
 #...

@@ Línia 48: / Línia 48: @@
   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: <br/> <br/></P>
-  <P style="font-family:serif;padding-left:2em;padding-right:3em;line-height:90%;text-align:justify;">
+  <P style="font-family:serif;padding-left:2em;padding-right:3em;line-height:90%;">
   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à [...] <br/></P>
@@ Línia 56: / Línia 56: @@
 Aprofitem per repassar les [http://www.dense13.com/wec/curscss/curscss.php?seccio=3&capitol=3&subcapitol=1 propietats de font] (passeu per tots els capítols del punt 3 per entendre les propietats de '''text''' i '''font'''.
 == Classes genèriques ==

← Versió més antiga		Revisió del 22:18, 13 feb 2011
Línia 62:		Línia 62:

	== Exercicis ==		== Exercicis ==
−	#Crea un document exactament com aquest.	+	#Crea un document exactament com [[File:Classes_css.pdf\|aquest]]. 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).
		+	#...