Diferència entre revisions de la pàgina «CSS selectors»

De Cacauet Wiki
Salta a la navegació Salta a la cerca
(Pseudoselectors de link)
Línia 125: Línia 125:
 
#* Versió 2: la imatge es repeteix verticalment a la dreta 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.
 
#A l'exercici anterior afegeix-li 4 links a diverses pàgines.
#* Els links normals han de ser de color "teal".
+
#* Els links normals han de ser de color "teal" i subratllats.
#* Els links visitats han de ser de color groc.
+
#* Els links visitats han de ser de color taronja i tatxats i subratllats alhora.
#* Els links actius han de ser de color fucsia.
+
#* Els links actius han de ser de color fucsia i sense cap ornament (sense subratllat).
 
#* Quan es passa el ratolí per sobre el link s'ha de posar en verd i en tamany de lletra més gran.
 
#* Quan es passa el ratolí per sobre el link s'ha de posar en verd i en tamany de lletra més gran.
 
#...
 
#...

Revisió del 23:38, 24 gen 2011

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


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)

I sobre els selectors dels links podeu llegir més 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

  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" 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).
    • Quan es passa el ratolí per sobre el link s'ha de posar en verd i en tamany de lletra més gran.
  3. ...