Secció 1: Primeres passes

2. Elements d'un style sheet

Sentència = selector + bloc de declaracions

Un style sheet està format per un seguit de sentències (statements). Cada sentència es compon d'un selector i d'un bloc de declaracions (declaration block).

• Selector: identifica els elements HTML als quals afectarà la sentència.
• Bloc de declaracions: indica al navegador com ha de representar els elements seleccionats, és a dir, quines seran les propietats d'aquests elements. El bloc de declaracions es tanca entre les claus { i }.

P { font-size: 1px; font-color: blue; }

A la sentència anterior P és el selector i tota la resta el bloc de declaracions.

Declaració = propietat + valor

Un bloc de declaracions està format per una o més declaracions, separades per punt i coma. La sintaxi d'una declaració és:

propietat: valor;

Les propietats estan definides per l'especificació CSS, i les veurem amb detall a la Secció 3. A continuació, i separat de la propietat per dos punts, posem el seu valor. Finalment afegim punt i coma (opcional a la darrera declaració del bloc). Un exemple més complet:

P {
font-size: 10px;
color: #000000;
font-family: Verdana }

El bloc de declaracions està format per tres declaracions corresponents a les propietats font-size, color i font-family. Opcionalment la darrera declaració podria acabar en punt i coma.

De forma similar a l'HTML, a l'escriure un style sheet podem deixar tants espais i canvis de línia com volguem. L'únic cas en què no es poden deixar espais és entre un valor i les corresponents unitats (cas de dur-ne), com ara 10px (px = píxels) a l'exemple. En aquest curs s'utilitza una disposició dels elements de la sentència que recorda als blocs de C o Java, però seria el mateix escriure-ho tot en una sola línia:

P {font-size:10px;color:#000000;font-family:Verdana;}

I en una altra disposició una mica més estranya, però equivalent a les anteriors:

P
{
     font-size  :  10px  ;

     color  :  #000000  ;

     font-family  :  Verdana  ;
}

No en tens prou? D'acord, encara una altra alternativa... ;)

    P
{
   font-size        :



10px                     ;color
              :               #000000 ;




   font-family    :Verdana
;}

Estrany, però correcte!