CSS selectors
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
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)
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
Consulta l'article CSS classes.
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".
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
- 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).
- ...
