Fulla d'estils - Cascade style sheet (CSS)
CSS és un llenguatge d'etiquetes que ens permet aplicar un disseny a un document XML o HTML. La seva referència a "cascade" és una clara al·lusió al seu funcionament: l'estil aplicat a una etiqueta és automàticament aplicat a totes les etiquetes filles.
Quan es vol aplicar una fulla d'estils a un document es pot fer de dos sistemes:
- Directament en el document HTML
- En un fitxer apart
Aplicació estils en el document HTML
L'aplicació d'un determinat estil en el propi document HTML es pot fer de dues maneres diferents:
- Definir un estil específic individualment a cada element
- Definir un estil global a un conjunt d'elements
Definir un estil específic individualment a cada element
Per a definir l'estil en primer lloc hem de localitzar l'etiqueta o etiquetes sobre el qual volem aplicar l'estil. Un cop hem localitzat l'etiqueta cal utilitzar un atribut style . A aquest atribut li associem una propietat i un valor per aquesta propietat amb el següent format:
style="propietat:valor"
Si utilitzem l'aplicació de l'estil en línia serà necessari localitzar tots els elements sobre els quals volguem aplicar l'estil i incloure el nou estil per a cada un d'ells. Evidentment, si en un futur es vol canviar l'estil, caldrà tornar a localitzar tots els elements i modificar les propietats i valors antics pel nou disseny. Per aquest motiu, cal evitar l'ús de l'estil en línia sempre que sigui possible.
Vídeo - com aplicar estils en línia
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Sports+</title>
</head>
<body>
<!-- some HTML elements
...
-->
<section class="noticies">
<h2 style="color:green;">Chris Frooem</h2>
<article>
<header>
<p>Font: ...</p>
<p>Data publicació: ...</p>
</header>
<h2 style="color:green;">Anul·lada la sentència</h2>
<p>El ciclista ...</p>
<h3>Antecedents</h3>
<p>...</p>
</article>
</section>
<!-- more HTML elements
...
-->
</body>
</html>
Aplicació estil incrustat en el document
La segona opció dins de la inclusió de l'estil en el document HTML és la d'utilitzar l'etiqueta style , enlloc de l'atribut style . Amb l'etiqueta style podem incloure totes les opcions de disseny per la plana web que s'està editant. Com que l'etiqueta style és per a tots els elements, haurem d'indicar per a cada regla d'estil a quin element o elements de disseny s'ha d'aplicar. El format que s'utilitza per a cada regla de disseny és:
selector { propietat1:valor1; propietat2:valor2; }
on selector determina a quins elements cal aplicar el disseny.
Tot i que l'etiqueta style es pugui ubicar a qualsevol lloc de la plana web, normalment s'inclou en l'etiqueta head del document.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Sports+</title>
<style type="text/css">
h2 {color:green; } <!-- h2 is the selector. color is the property. red is the value for the property color -->
</style>
</head>
<body>
<!-- some HTML elements
...
-->
<section class="noticies">
<h2>Chris Frooem</h2>
<article>
<header>
<p>Font: ...</p>
<p>Data publicació: ...</p>
</header>
<h2>Anul·lada la sentència</h2>
<p>El ciclista ...</p>
<h3>Antecedents</h3>
<p>...</p>
</article>
</section>
<!-- more HTML elements
...
-->
</body>
</html>
Aquest codi i l'anterior són equivalents, tot i que aquest últim sigui molt més fàcil de mantenir. Aixi, si vull canviar el valor d'alguna propietat només ho haig de fer un cop dins de l'etiqueta style :
- Es redueixen possibilitats d'error.
- Es facilita la lectura del document al separar la informació de la seva visualització.
Video - exemple aplicació estils utilitzant etiqueta style
Aplicació estil mitjançant un document extern
La segona opció per aplicar estils és fer-ho en un document totalment separat del document HTML. Anomenarem aquest document "full d'estils". Cal tenir en compte que un mateix full d'estils pot estar associat a múltiples planes web. Aquest fet aporta una sèrie d'avantatges:
- Disminució d'errors: no cal duplicar la informació en múltiples documents.
- Simplifica el manteniment: els canvis només es fan en un document i queden reflectits de forma automàtica en tots els documents.
- Homogeneitat de l'aplicació web. No hi ha incoherències de disseny entre les planes. Tots els elements del mateix tipus tenen la mateixa visualització.
El full d'estils éstà format per una sèrie de regles que defineixen l'estil per a un element o conjunt d'elements. Cada regla està formada per un o varis selectors, i una o vàries duples propietats valors. La sintaxis general és:
selector1[,selector2] { propietat1:valor1; [propietat2:valor2;] }
on els [] determinen que són elements que poden estar presents.
Elements regla CSS
- Selector: expressió que serveix per a identificar una sèrie d'elements d'una plana web. Per exemple, el selector h2 determina tots els títols de nivell 2, p determina tots els paràgrafs o #article determina l'element identificat amb el nom "article" de la plana web. si el selector no coincideix amb cap element de la plana web, el disseny associat a la regla del selector no s'aplicarà en aquella plana web.
- Propietat: la propietat és la característica que es vol canviar pels elements que coincideixen amb el selector especificat. Per exemple, una característica pot ser el color de la lletra, el color de fons, el contorn d'un element ...
- Valor: el valor és el tipus de característica que es vol associar a la propietat. Per exemple, si la propietat és el contorn de l'element, els valors podran ser el color, el gruix, el tipus de línia ...
Com associar una fulla d'estil a un document HTML
Donat que les fulles d'estil són arxius separats del document HTML, cal que hi hagi un sistema per a indicar quina fulla té associada un fitxer HTML. Per a enllaçar fulles d'estils i fitxers HTML utilitzem l'etiqueta link . Cal tenir en compte que la funció de l'etiqueta link és la d'enllaçar amb qualsevol recurs extern, i en aquest cas, l'utilitzem de forma particular per a enllaçar amb el full d'estil.
Etiqueta link
L'etiqueta link pot ubicar-se en l'etiqueta head o body , tot i que la recomanació és la d'ubicar totes les referències a recursos externs com a fills de l'etiqueta head . L'atribut més important és href . Aquest atribut l'hi associem el nom del fitxer que conté el codi CSS, o sigui; de la fulla d'estil que volem aplicar. Per a referenciar l'arxiu CSS sempre utilitzarem una ruta relativa.
Apart de l'atribut href especifiquem dos atributs més en l'etiqueta link : atribut rel i type .
- type : defineix el tipus de recurs sobre el qual s'està fent l'enllaç. Al tractar-se d'un full d'estils, el valor d'aquest atribut sempre serà "text/css". +info
- rel : l'atribut rel defineix la relació del recurs extern. Pels fulls d'estil associarem el valor "stylesheet" a aquest atribut. +info.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Sports+</title>
<link rel="stylesheet" type="text/css" href="estils/main.css" />
</head>
<body>
<!-- some HTML elements
...
-->
<section class="noticies">
<h2>Chris Frooem</h2>
<article>
<header>
<p>Font: ...</p>
<p>Data publicació: ...</p>
</header>
<h2>Anul·lada la sentència</h2>
<p>El ciclista ...</p>
<h3>Antecedents</h3>
<p>...</p>
</article>
</section>
<!-- more HTML elements
...
-->
</body>
</html>
En el codi anterior, la plana web fa referència a un recurs "main.css" que està ubicat en la carpeta "estils". La carpeta estils està ubicada en la mateixa carpeta que el document HTML.
Cal tenir en compte que un document HTML pot tenir diverses fulles d'estil . En aquest cas, caldrà incloure vàries vegades l'etiqueta link cada una d'elles amb els atributs pertinents.
Video - Utlitzant fulles d'estil externes
Prioritat regles estils
Quan un element es visualitza al navegador s'apliquen una sèrie de regles que determinen el disseny final de l'element i, per tant, la seva visualització.
En el cas que els estils siguin complementaris s'apliquen la unió dels estils. Així, per exemple, si apliquem color verd utilitzant un estil inline, negreta mitjançant etiqueta <style> i tamany de font 15 píxels: el resultat final que s'aplicarà a l'element serà: color verd, negreta i 15 píxels.
És important saber com s'apliquen els estils quan hi ha contradiccions entre les diferents regles. Per exemple, suposem que una regla diu que els elements de tipus h2 s'han de veure de color verd i una altra regla defineix que el color ha de ser groc. De quin color es visualitzaran els títols 2?
Els estils que tenen més importància són els estils inline. Així, per exemple, les regles associades a l'estil inline seran les últimes a aplicar-se i, per tant, sobreescriuran el disseny que tenen els elements fins al moment: excepte que s'hagi indicat implícitament que la regla no es pot sobreescriure.
En el cas que no hi hagi regles inline, recordem que és una pràctica no aconsellada, tindran preferència les regles que definides dins l'etiqueta <style> en el propi document HTML. Tampoc s'aconsella l'ús d'aquesta tècnica. Les regles de l'etiqueta <style> sobreescriuran les propietats definides en un document extern
El mètode recomanat per a definir l'estil d'una plana web és mitjançant un document extern. Aquest és, a la vegada, el que menys incidència té: qualsevol propietat d'aquesta fulla pot ser sobreescrita en una etiqueta <style> associada al document HTML a inline en el tag de l'element. Dins de la fulla d'estils també es defineix una prioritat. Tot i això, l'única regla que en aquests moments ens importa és que si es defineix la mateixa propietat a una mateixa etiqueta, tindrà preferència l'últim valor assignat a l'etiqueta.
En la imatge observem com la segona regla acaba sobreescrivint a la primera regla.
Important
Per tal de poder imposar l'aplicació d'un determinat estil podem utilitzar la propietat !important. Aquesta propietat imposa l'aplicació de la propietat independentment d'on estigui definida. És important reduir l'ús d'aquesta propietat el mínim possible, ja que dificulta la comprensió i manteniment de la plana web: tot i això, pot ser útil si s'han definit estils en línia.
La propietat s'aplica després del valor que volem assignar a la propietat. El format general seria:
selector { propietat:valor [!important]; }
Com es pot observar en la sintaxis , l'aplicació o no de la propietat !important és opcional.
