logo
D304 - Gestió i administració d'un moodle de centre
Mòdul 2 - Pràctica 4

Conceptes bàsics de CSS

Aquesta pràctica és optativa i està dirigida a les persones que no han treballat mai amb CSS i volen aprofundir els coneixements sobre els fulls d'estil en cascada per poder modificar altres aspectes del disseny del seu lloc Moodle.

Els fulls d'estil en cascada (Cascading Style Sheets o CSS) són un llenguatge formal que permet definir la disposició i presentació d'una pàgina web. Per tant, els fulls d'estil permeten canviar el disseny de qualsevol pàgina web sense haver de modificar el seu codi HTML o PHP.

A aquesta pàgina de la Viquipèdia es pot consultar més informació sobre els orígens i funcionament dels fulls d'estil en cascada.

Tipus de selectors

Una pàgina web està composada per peces o elements. Ara bé, no totes les pàgines contenen les mateixes parts. Per exemple, a Moodle, aquestes parts o elements inclouen: el nucli, formularis, la capçalera, el peu, l'administració, els blocs, les bitàcoles, el calendari, els cursos, la documentació, les qualificacions, l'autenticació, els missatges, les anotacions, les preguntes, les pestanyes, les etiquetes, els usuaris i molts més mòduls.

Per permetre l'edició dels seus estils, els elements de cada pàgina web poden tenir associats diferents tipus de selectors.

Selectors XHTML

Identifiquen un determinat element del document XHTML, com ara el paràgraf (p), la capçalera principal (h1), els enllaços (a) o les imatges (img).

Codi XHTML

  <h1>Introducció</p>

Codi CSS

  h1 {
   color: red;
  }

A l'exemple anterior, el selector XHTML h1 s'associarà a tots els elements <h1> (text de capçalera principal o de primer nivell) del document. Per tant, segons la regla anterior, totes les capçaleres de primer nivell, és a dir, tots els elements <h1> del document, apareixeran amb el text de color vermell (color: red;).

Visualització de l'exemple del selector XHTML

Introducció



Selectors id

Especifiquen un determinat element del document que conté l'atribut id. Per exemple, al document XHTML següent:

Codi XHTML

  <h1 id="principal">Introducció</p>

l'etiqueta <h1> conté l'atribut id de valor “principal”. L'especificació d'aquest selector al full d'estil es correspondria amb:

Codi CSS

  #principal {  
    color: green;  
  }

Com es pot veure, davant del valor de l'atribut id (en aquest cas principal), cal afegir el caràcter # (Alt gr + 3). En aquest cas, el resultat serà que els elements que tinguin l'atribut id=“principal” apareixeran amb el text de color verd (color: green;).

Visualització de l'exemple del selector id

Introducció



Selectors class

Especifiquen un determinat element del document que conté l'atribut class. Per exemple:

Codi XHTML

  <p class="ciutat">Girona</p>

Codi CSS

  .ciutat {
    color: red;
  }

Al document anterior l'etiqueta p (paràgraf) conté l'atribut class que té per valor “ciutat” al qual se li vol aplicar un determinat estil. En aquest cas, per definir-ho al full d'estil caldrà afegir el caràcter . (punt) al davant del nom de la classe (.ciutat).

Visualització de l'exemple del selector class

Girona

A més, es poden combinar classes diferents en un mateix element XHTML:

Codi XHTML

  <p class="ciutat comarca">Girona</p>

i aplicar a cadascuna una regla diferent, com ara el text de color vermell pels elements que tinguin la classe ciutat associada i la mida de la lletra (font-size: 20px) pels que tinguin la classe comarca:

Codi CSS

  .ciutat {  
    color: red;  
  }  
 
  .comarca {  
    font-size: 20px;  
  }

Visualització de l'exemple del selector id combinat

Girona



Selectors niuats

És possible niuar diferents selectors amb el propòsit d'associar una regla CSS a un element específic del document XHTML. Per aconseguir-ho és necessari separar cada selector amb un espai.

Codi CSS

  #informacio p.exemple strong {
    color: red;
  }
  #informacio p.exemple {
    color: dark grey;
  }

A aquest exemple, els selectors niuats són #informacio, p.exemple i strong. Per ordre de jerarquia, el primer element (#informació) conté al següent (p.exemple), i així successivament fins l'últim selector.

Com s'aplica aquesta regla? Al cas anterior, tot el text que es trobi entre les etiquetes <strong>…</strong> que estigui a un paràgraf amb la classe exemple (<p class=“exemple”>) que, alhora, aparegui dins d'una capa que tingui informació com a identificador (<div id=“informacio”>), es mostrarà de color vermell. Així ,per exemple, el text “una expressió” del codi XHTML següent apareixerà de color vermell mentre que “2+2 és” es mostrarà en gris fosc:

Codi XHTML

  <div id="informacio">
    <p class="exemple">2+2 és <strong>una expressió</strong></p>  
  </div>

Visualització de l'exemple dels selectors niuats

2+2 és una expressió


Enllaços d'interès

Tutorials

  • Tutorial CSS del W3Schools. Tutorial, en anglès, que explica pas a pas tots els aspectes relacionats amb els fulls d'estil en cascada. A més, conté exemples en línia i proves d'autoavaluació.
  • Zen Garden. Portal de referència dins del món del disseny que conté exemples d'ús dels fulls d'estil en cascada.

Eines

  • Clear Cache Button és una extensió de Mozilla Firefox que facilita la neteja de la memòria cau i l'historial del navegador web (entre d'altres) ja que permet afegir un botó per fer més accessibles aquestes funcionalitats.

CSS a Moodle

 


Inici

Generalitat de Catalunya
Creative Commons License
XTEC