Diferència entre revisions de la pàgina «CSS selectors»
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. | 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. | ||
+ | |||
+ | Altres referències interessants: | ||
+ | *[http://www.w3schools.com/cssref/css_selectors.asp CSS selectors a W3Schools]. | ||
+ | *[http://www.w3.org/TR/CSS2/selector.html La referència original a W3C]. | ||
Ens podem adreçar (seleccionar) de diverses maneres als elements del document: | 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: | '''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"> | <syntaxhighlight lang="css"> | ||
− | |||
H3 { | H3 { | ||
font-size: 10px; | font-size: 10px; | ||
Línia 23: | Línia 26: | ||
background-repeat: repeat-x; | background-repeat: repeat-x; | ||
} | } | ||
− | |||
</syntaxhighlight> | </syntaxhighlight> | ||
Revisió de 21:20, 23 jul 2012
Llegeix la secció sobre selectors del curs de CSS de'n Gonzalo Pérez de la Ossa.
Altres referències interessants:
Ens podem adreçar (seleccionar) de diverses maneres als elements del document:
- Per tipus d'element (P, H1, H2, TABLE, etc.)
- Per identificadors
- Per classe
Abans de veure'ls, però, cal que tinguem en compte que quan s'utilitza CSS es sol dividir el document amb les unitats genèriques DIV o SPAN, a més d'utilitzar els tags habituals d'HTML:
- DIV: realitza una divisió del document realitzant un requadre (seguint el CSS box model) o, al menys, un paràgraf.
- SPAN: realitza una divisió de pocs caràcters, permetent per exemple canviar el color d'una sola paraula o d'una sola lletra.
Contingut
Selectors per tipus d'element[modifica]
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:
H3 {
font-size: 10px;
}
BODY {
background-image: url('fons.jpg');
background-repeat: repeat-x;
}
En aquest exemple, a més, hem modificat l'element BODY i l'hem afegit una imatge de fons (background) que es repeteix només en horitzontal. L'element background-repeat pot prendre els valors:
- repeat-y
- repeat-x
- repeat
- no-repeat
Pots aprendre més sobre backgrounds aquí. Pensa que és un tema molt important i que amb CSS podem aplicar propietats de background a qualsevol element, no solsament al BODY!! Típicament ho apliquem als DIV.
Selectors per identificador (ID)[modifica]
A qualsevol elements HTML se li pot assignar un identificador. Es fa de la següent manera: <ELEMENT id="id_element">. Per exemple, per identificar una secció del nostre document podem identificar la capçalera amb:
<H2 id="seccio2">Secció 2: invertebrats</H2>
És responsabilitat del que realitza el document HTML assegurar-se de que no es repeteixen els IDs. En principi han de ser únics.
Doncs bé, per seleccionar un element pel seu ID cal utiltizar el símbol #. Per exemple:
<HTML>
<!-- amb aquest element META podrem fer aparèixer els accents sense problemes -->
<META content="text/html;" http-equiv="content-type" charset="utf-8">
<HEAD>
<STYLE type="text/css">
#vertebrats {
font-size: 20px;
color: green;
}
#invertebrats {
font-size: 26px;
color: teal;
}
</STYLE>
</HEAD>
<BODY>
<H1>Biologia</H1>
<H2 id="vertebrats">Secció 1: Vertebrats</H2>
<P>Els vertebrats son els animals que disposen d'un esquelet...</P>
<H2 id="invertebrats">Secció 2: Invertebrats</H2>
<P>Els invertebrats no tenen esquelet, com pot ser un pop o una estrella de mar...</P>
...
</BODY>
</HTML>
Potser no té massa sentit que el mateix H2 tingui diferents tamanys però potser sí que poden tenir colors diferents depenent de la secció.
Selectors per classe[modifica]
Consulta l'article CSS classes.
Pseudoselectors de link[modifica]
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".
A {
color: orange;
text-decoration: underline;
}
A:visited {
color: green;
text-decoration: line-through;
}
Podeu saber més sobre text-decoration aquí. Pot prendre els valors:
- none
- underline
- overline
- line-through
- blink (pampallugues)
Sobre selectors de link podeu llegir 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:
A:hover {
color: fuchsia;
text-decoration: underline overline; /* fixeu-vos que aquí hem posat 2 propietats alhora (subratllat i "sobreratllat") */
}
Exercicis[modifica]
- 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. El link només ha de contenir unes poques paraules. A continuació de cada link afegiu en text normal una breu descripció de a quina pàgina heu apuntat. O sigui, que ha de quedar algo així:
- Pàgina d'Enric Mieza: el creador de Cacauet wiki.
- 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) però amb el color de fons groc. Pel color de fons cal que utilitizeu la propietat 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 (font-size).
- ...