CSS selectors
Llegeix la 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:
- 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:
<STYLE type="text/css">
H3 {
font-size: 10px;
}
BODY {
background-image: url('fons.jpg');
background-repeat: repeat-x;
}
</STYLE>
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
...TODO...
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.
- 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.
- ...
