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

De Cacauet Wiki
Salta a la navegació Salta a la cerca
 
(Hi ha una revisió intermèdia del mateix usuari que no es mostren)
Línia 1: Línia 1:
 
Llegeix la [http://www.dense13.com/wec/curscss/curscss.php?seccio=2&capitol=0 secció sobre selectors] del curs de CSS de'n Gonzalo Pérez de la Ossa.
 
Llegeix la [http://www.dense13.com/wec/curscss/curscss.php?seccio=2&capitol=0 secció sobre selectors] del curs de CSS de'n Gonzalo Pérez de la Ossa.
 +
 +
Altres referències interessants:
 +
*[http://www.w3schools.com/cssref/css_selectors.asp CSS selectors a W3Schools].
 +
*[http://www.w3.org/TR/CSS2/selector.html La referència original a W3C].
  
 
Ens podem adreçar (seleccionar) de diverses maneres als elements del document:
 
Ens podem adreçar (seleccionar) de diverses maneres als elements del document:
Línia 15: Línia 19:
 
'''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:
 
'''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:
 
<syntaxhighlight lang="css">
 
<syntaxhighlight lang="css">
−
<STYLE type="text/css">
 
 
     H3 {
 
     H3 {
 
           font-size: 10px;
 
           font-size: 10px;
Línia 23: Línia 26:
 
           background-repeat: repeat-x;
 
           background-repeat: repeat-x;
 
     }
 
     }
−
</STYLE>
 
 
</syntaxhighlight>
 
</syntaxhighlight>
  
Línia 78: Línia 80:
  
 
== Selectors per classe ==
 
== Selectors per classe ==
−
Les classes són arquetips d'estils. Per exemple, si necessitem 2 tipus (classes) diferents de paràgraf (<nowiki><P></nowiki>) podem crear-les així (les anomenarem "normal" i "cita"):
+
Consulta l'article [[CSS classes]].
−
<syntaxhighlight lang="css">
 
−
<STYLE>
 
−
      BODY {
 
−
            font-size: 14px;
 
−
      }
 
−
 
 
−
      P.normal {
 
−
            font-family: Arial, sans-serif;
 
−
            font-style: normal;
 
−
            font-size: 1.1em;
 
−
            line-height: 100%;
 
−
 
 
−
      }
 
−
 
 
−
      P.cita {
 
−
            font-family: Georgia, serif;
 
−
            font-style: normal;
 
−
            font-weight: 100;
 
−
            font-size: 0.8em;
 
−
            line-height: 80%;
 
−
      }
 
−
</STYLE>
 
−
</syntaxhighlight>
 
−
 
 
−
Aprofitem per repassar les [http://www.dense13.com/wec/curscss/curscss.php?seccio=3&capitol=3&subcapitol=1 propietats de font] (passeu per tots els capítols del punt 3 per entendre les propietats de '''text''' i '''font'''.
 
  
 
== Pseudoselectors de link ==
 
== Pseudoselectors de link ==

Revisió de 21:20, 23 jul 2012

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. ...
Obtingut de «https://cacauet.org/wiki/index.php?title=CSS_selectors&oldid=1168»