====== 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 [[http://ca.wikipedia.org/wiki/Cascading_Style_Sheets|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//).
Introducció
h1 {
color: red;
}
A l'exemple anterior, el selector XHTML **h1** s'associarà a tots els elements **** (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 del document, apareixeran amb el text de color vermell (//color: red;//).
Introducció
\\
\\
=== Selectors id===
Especifiquen un determinat element del document que conté l'atribut **id**. Per exemple, al document XHTML següent:
Introducció
l'etiqueta **** conté l'atribut **id** de valor **"principal"**. L'especificació d'aquest selector al full d'estil es correspondria amb:
#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;//).
Introducció
\\
\\
=== Selectors class ===
Especifiquen un determinat element del document que conté l'atribut **class**. Per exemple:
Girona
.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**).
Girona
A més, es poden combinar classes diferents en un mateix element XHTML:
Girona
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**:
.ciutat {
color: red;
}
.comarca {
font-size: 20px;
}
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.
#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 **...** que estigui a un paràgraf amb la classe exemple (**
**) que, alhora, aparegui dins d'una capa que tingui **informació** com a identificador (**