CSS selectors

De Cacauet Wiki
La revisió el 21:20, 23 jul 2012 per Enric (discussió | contribucions)
(dif) ← Versió més antiga | Versió actual (dif) | Versió més nova → (dif)
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.

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.


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]

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