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 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.
