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

De Cacauet Wiki
Salta a la navegació Salta a la cerca
(Es crea la pàgina amb «Ens podem adreçar de diverses maneres al elements del document: * Per tipus d'element (P, H1, H2, TABLE, etc.) * Per identificadors * Per classe Abans de veure'ls, per…».)
 
 
(Hi ha 10 revisions intermèdies del mateix usuari que no es mostren)
Línia 1: Línia 1:
−
Ens podem adreçar de diverses maneres al elements del document:
+
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:
 
* Per tipus d'element (P, H1, H2, TABLE, etc.)
 
* Per tipus d'element (P, H1, H2, TABLE, etc.)
 
* Per identificadors
 
* Per identificadors
Línia 10: Línia 16:
  
  
−
== Adreçament per tipus d'element ==
+
== 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:
 
'''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;
 
     }
 
     }
−
</STYLE>
+
    BODY {
 +
          background-image: url('fons.jpg');
 +
          background-repeat: repeat-x;
 +
    }
 +
</syntaxhighlight>
 +
 
 +
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 [http://www.w3schools.com/css/css_background.asp 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:
 +
<syntaxhighlight lang="xml">
 +
<H2 id="seccio2">Secció 2: invertebrats</H2>
 +
</syntaxhighlight>
 +
 
 +
É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:
 +
 
 +
<syntaxhighlight lang="xml">
 +
<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>
 +
</syntaxhighlight>
 +
 
 +
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 ==
 +
Consulta l'article [[CSS classes]].
 +
 
 +
== 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".
 +
<syntaxhighlight lang="css">
 +
  A {
 +
      color: orange;
 +
      text-decoration: underline;
 +
  }
 +
  A:visited {
 +
      color: green;
 +
      text-decoration: line-through;
 +
  }
 
</syntaxhighlight>
 
</syntaxhighlight>
 +
 +
Podeu saber [http://www.w3schools.com/css/pr_text_text-decoration.asp més sobre '''''text-decoration''''' aquí]. Pot prendre els valors:
 +
*none
 +
*underline
 +
*overline
 +
*line-through
 +
*blink (pampallugues)
 +
 +
Sobre selectors de link podeu llegir aquí:
 +
* [http://www.dense13.com/wec/curscss/curscss.php?seccio=2&capitol=5 En català] (Pérez de la Ossa).
 +
* [http://www.w3schools.com/css/css_link.asp En anglès] (W3Schools).
 +
 +
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''':
 +
<syntaxhighlight lang="css">
 +
  A:hover {
 +
      color: fuchsia;
 +
      text-decoration: underline overline; /* fixeu-vos que aquí hem posat 2 propietats alhora (subratllat i "sobreratllat") */
 +
  }
 +
</syntaxhighlight>
 +
 +
== Exercicis ==
  
  
−
== Adreçament per identificador ==
+
#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.
 +
#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 <u>en text normal</u> una breu descripció de a quina pàgina heu apuntat. O sigui, que ha de quedar algo així:
 +
#: [http://www.enricmieza.com 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 [http://www.w3schools.com/css/css_background.asp 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).
 +
#...

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»