CSS selectors - Historial de revisió

Enric a 21:20, 23 jul 2012

2012-07-23T21:20:35Z

2011-02-13T22:10:57Z

Selectors per classe

2011-02-13T20:47:07Z

Selectors per classe

2011-01-24T23:51:21Z

Pseudoselectors de link

2011-01-24T23:48:51Z

Exercicis

2011-01-24T23:42:13Z

Exercicis

2011-01-24T23:38:50Z

Exercicis

2011-01-24T23:31:54Z

Pseudoselectors de link

2011-01-24T13:17:34Z

Exercicis

2011-01-23T18:57:16Z

@@ Línia 1: / Línia 1: @@
 Llegeix la [http://www.dense13.com/wec/curscss/curscss.php?seccio=2&capitol=0 secció sobre selectors] del curs de CSS de'n Gonzalo Pérez de la Ossa.
 Ens podem adreçar (seleccionar) de diverses maneres als elements del document:
@@ Línia 15: / Línia 19: @@
 '''Selecciona tots els elements d'aquella fulla'''. Per exemple, per seleccionar TOTS els tags H3 i donar-los el tamany de 10 píxels seria:
 <syntaxhighlight lang="css">
       H3 {
            font-size: 10px;
@@ Línia 23: / Línia 26: @@
            background-repeat: repeat-x;
+      }
 </syntaxhighlight>

@@ Línia 78: / Línia 78: @@
 == Selectors per classe ==
-Les classes són arquetips d'estils. Per exemple, si necessitem 2 tipus (classes) diferents de paràgraf (<nowiki><P></nowiki>) podem crear-les així (les anomenarem "normal" i "cita"):
+Consulta l'article [[CSS classes]].
 == Pseudoselectors de link ==

@@ Línia 78: / Línia 78: @@
 == Selectors per classe ==
-...TODO...
+Les classes són arquetips d'estils. Per exemple, si necessitem 2 tipus (classes) diferents de paràgraf (<nowiki><P></nowiki>) podem crear-les així (les anomenarem "normal" i "cita"):
 == Pseudoselectors de link ==

@@ Línia 104: / Línia 104: @@
 *blink (pampallugues)
-I [http://www.dense13.com/wec/curscss/curscss.php?seccio=2&capitol=5 sobre els selectors dels links] podeu llegir més aquí. En total tenim els següents:
+Sobre selectors de link podeu llegir aquí:
 * Normal (A)
 * Visitats (A:visited)

@@ Línia 128: / Línia 128: @@
 #* Els links normals han de ser de color "teal" i subratllats.
 #* Els links visitats han de ser de color taronja i tatxats i subratllats alhora.
-#* Els links actius han de ser de color fucsia i sense cap ornament (sense subratllat).
+#* Els links actius han de ser de color fucsia i sense cap ornament (sense subratllat) però amb el color de fons groc. Pel color de fons cal que utilitizeu la propietat [http://www.w3schools.com/css/css_background.asp background-color].
-#* Quan es passa el ratolí per sobre el link s'ha de posar en verd i en tamany de lletra més gran.
+#* Quan es passa el ratolí per sobre el link s'ha de posar en verd i en tamany de lletra més gran (font-size).
 #...

@@ Línia 124: / Línia 124: @@
 #* Versió 1: la imatge es repeteix horitzontalment i només en la part més inferior de la pàgina.
 #* Versió 2: la imatge es repeteix verticalment a la dreta de la pàgina.
-#A l'exercici anterior afegeix-li 4 links a diverses pàgines.
+#A l'exercici anterior afegeix-li 4 links a diverses pàgines. El link només ha de contenir unes poques paraules. A continuació de cada link afegiu <u>en text normal</u> una breu descripció de a quina pàgina heu apuntat. O sigui, que ha de quedar algo així:
 #* Els links normals han de ser de color "teal" i subratllats.
 #* Els links visitats han de ser de color taronja i tatxats i subratllats alhora.

← Versió més antiga		Revisió del 23:31, 24 gen 2011
Línia 80:		Línia 80:
	...TODO...		...TODO...

		+
		+
		+	== Pseudoselectors de link ==
		+	Els links tenen un cas especial: ens permeten modificar les propietats del link per quan ha estat visitat, si està actiu o quan passem per sobre.
		+
		+	El següent exemple canviaria el color del link normal a taronja. Pels links visitats els posa a verd i tatxats (line-through). Fixeu-vos en què utilitzem els dos punts (:), per això és un "pseudoelement".
		+	<syntaxhighlight lang="css">
		+	A {
		+	color: orange;
		+	text-decoration: underline;
		+	}
		+	A:visited {
		+	color: green;
		+	text-decoration: line-through;
		+	}
		+	</syntaxhighlight>
		+
		+	Podeu saber [http://www.w3schools.com/css/pr_text_text-decoration.asp més sobre '''''text-decoration''''' aquí]. Pot prendre els valors:
		+	*none
		+	*underline
		+	*overline
		+	*line-through
		+	*blink (pampallugues)
		+
		+	I [http://www.dense13.com/wec/curscss/curscss.php?seccio=2&capitol=5 sobre els selectors dels links] podeu llegir més aquí. En total tenim els següents:
		+	* Normal (A)
		+	* Visitats (A:visited)
		+	* Actius (A:active)
		+	* Passant el ratolí per sobre (A:hover)
		+
		+	Un dels selectors de link més característic és el que '''s'activa al passar el ratolí per sobre: el HOVER''':
		+	<syntaxhighlight lang="css">
		+	A:hover {
		+	color: fuchsia;
		+	text-decoration: underline overline; /* fixeu-vos que aquí hem posat 2 propietats alhora (subratllat i "sobreratllat") */
		+	}
		+	</syntaxhighlight>

	== Exercicis ==		== Exercicis ==

← Versió més antiga		Revisió del 13:17, 24 gen 2011
Línia 82:		Línia 82:

	== Exercicis ==		== Exercicis ==
−	Repassa la secció de selectors per tipus d'element, i en particular mira't el tema del BACKGROUND. Fes una pàgina de presentació teva ~~on col·loquis~~ una imatge en el BODY ~~que~~ es ~~repeteixi~~ horitzontalment i només en la part més inferior de la pàgina.	+
		+
		+	#Repassa la secció de selectors per tipus d'element, i en particular mira't el tema del BACKGROUND. Fes una pàgina de presentació teva (nom, missatge de benvinguda, foto) amb una imatge de background en el BODY en 2 versions:
		+	#* Versió 1: la imatge es repeteix horitzontalment i només en la part més inferior de la pàgina.
		+	#* Versió 2: la imatge es repeteix verticalment a la dreta de la pàgina.
		+	#A l'exercici anterior afegeix-li 4 links a diverses pàgines.
		+	#* Els links normals han de ser de color "teal".
		+	#* Els links visitats han de ser de color groc.
		+	#* Els links actius han de ser de color fucsia.
		+	#* Quan es passa el ratolí per sobre el link s'ha de posar en verd i en tamany de lletra més gran.
		+	#...

← Versió més antiga	Revisió del 18:57, 23 gen 2011
(Cap diferència)