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…».)
 
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.
 +
 
 +
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 12:
  
  
−
== 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">
 
<STYLE type="text/css">
−
     h3 {
+
     H3 {
 
           font-size: 10px;
 
           font-size: 10px;
 +
    }
 +
    BODY {
 +
          background-image: url('fons.jpg');
 +
          background-repeat: repeat-x;
 
     }
 
     }
 
</STYLE>
 
</STYLE>
 
</syntaxhighlight>
 
</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 ==
 +
...TODO...
  
  
−
== Adreçament per identificador ==
+
== Exercicis ==
 +
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 on col·loquis una imatge en el BODY que es repeteixi horitzontalment i només en la part més inferior de la pàgina.

Revisió del 18:57, 23 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...


Exercicis

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 on col·loquis una imatge en el BODY que es repeteixi horitzontalment i només en la part més inferior de la pàgina.

Obtingut de «https://cacauet.org/wiki/index.php?title=CSS_selectors&oldid=702»