CSS selectors

De Cacauet Wiki
Salta a la navegació Salta a la cerca

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.


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

  1. 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.
  2. 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.
  3. ...