Quan volem aplicar una determinat estil o disseny a un element d'una plana web el primer que hem de fer és pensar com hem d'identificar o referenciar aquest element. L'expressió que utilitzem per a determinar un element és el que anomenem selector. Cal tenir en compte que hi ha diverses formes per a poder referenciar un element i que alguns elements poden estar referenciats més d'una vegada en una plana web.
El document està dividit en dues parts: en una primera part veurem les diferents formes de seleccionar un element de la nostra plana web. La segona part discuteix les implicacions i conflictes que hi poden haver quan a un element se li apliquen diverses regles contradictòries o no.
Selector
El selector és la forma d'identificar un o varis elements per aplicar-los-hi un determinat estil. Si observem la sintaxis aplicable a una regla CSS
podem concloure que:
- Tota regla ha de tenir un selector.
- Una regla pot tenir varis selectors.
- Tota regla ha de contenir com a mínim una propietat i un valor.
- Les propietats i valors definides en una regla s'apliquen a tots els selectors.
- Per a cada dupla, propietat i valor, podem definir el modificar !important per a fer prevaldre aquest disseny per damunt dels altres.
Herència
En relació a les propietats cal tenir en compte que algunes propietats s'hereden o es propaguen en cascada. D'aquí el nom de Cascade Style Sheet. L'herència consisteix en que el valor definit per una propietat en una etiqueta pare és també aplicable a totes les etiquetes fills, sempre i quan no es sobreescrigui aquesta propietat en l'element fill.
Per a explicar aquest concepte utilitzarem el següent codi HTML d'exemple:
A continuació s'adjunta el codi HTML utilitzat
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="estils/main.css" />
<title>CSS</title>
</head>
<body>
<main>
<!-- Here goes the main content of our web page -->
<h1>Què és Lorem Ipsum?</h1>
<p>Lorem Ipsum és un text de farciment usat per la indústria de la tipografia i la impremta. Lorem Ipsum ha estat el text estàndard de la indústria des de l'any 1500, quan un impressor desconegut va fer servir una galerada de text i la va mesclar per crear un llibre de mostres tipogràfiques...</p>
<h1>Per què el fem servir?</h1>
<p>És un fet establert de forma evident que un lector es distraurà amb el contingut llegible d'una pàgina quan miri a la seva composició. El fet de fer servir Lorem Ipsum és perquè conté una distribució més o menys normal de lletres, de forma oposada a quan es fa servir "Contingut aquí, contingut aquí", aconseguint així que sembli català llegible...</p>
</main>
</body>
</html>
En la imatge es mostra la visualització del codi sense aplicar cap estil.
En la següent imatge s'aplica un ampliació de 1.5 l'amplada del tamany de la lletra M a l'etiqueta body . A nviell pràctic, s'ha ampliat un 50% la mida per defecte de l'etiqueta h1 i p en elnostre cas: són les úniques etiquetes que contenen text. Hi ha hagut una propagació en cascada als elements fills de body .
Per a confirmar que s'ha propagat la propietat cal tenir en compte diferents factors.
- Cada navegador té un estil per defecte.
- Quan s'utilitzen les unitats em el tamany està en relació a la mida definida en l'element pare.
- Si no s'ha definit cap mida com a element pare, la mida de referència és 1em.
Utilitzem un exemple per entendre el seu funcionament. Per a fer l'exemple, ens centrarem només en l'etiqueta h1 , deixant l'etiqueta p de banda. El primer que necessitem saber és quina mida té l'element h1 en el nostre navegador quan no s'aplica cap propietat.
En la imatge observem com la mida per defecte del text associat a l'etiqueta h1 és de 32 píxels (al final es pinten píxels) i la mida associada a aquest element és de 2em . Quan apliquem la regla body { font-size:1.5em; } s'ha d'incrementar la mida de la lletra en un 50% . Per tant, la mida associada a l'element h1 hauria de ser 48 píxels.
En la imatge observem que la mida de la font són de 48 píxels. Aquest resultat s'obté de multiplicar el tamany per defecte 2em pel valor 1.5em associat a l'etiqueta body . En l'apartat Computed de la imatge podem veure totes les dades involucrades en el procés.
Si assignem el valor de la mida de la font només a l'etiqueta, i no a l'element pare, s'utilitza el valor 1em com a valor per referència. Per tant, utilitzant les unitats em haurem d'associar el valor 3em per a obtenir la mateixa mida de la lletra anterior.
Observem en la imatge com en aquest cas el valor de mida de font associat per defecte 2em ha estat substituit pel nou valor 3em que en el nostre cas equivalen a 48 píxels.
Cal tenir en compte que no totes les propietats s'hereden. Així, per exemple, si utilitzem la propietat padding aquesta només s'aplica a l'etiqueta on s'ha definit. Aquest comportament és desitjable, ja que normalment la propietat padding serà diferent entre els diferents elements.
En les dues imatges anteriors, observem com l'aplicació del padding a l'element body no té cap efecte sobre les etiquetes filles.
Selector universal
El selector universal és aquell aplica l'estil a tots els elements. Utilitzem aquest selector quan volem aplicar una o vàries propietats a tots els elements de la plana web. Utilitzarem aquest selector per eliminar la propietat margin de tots els elements de totes les planes web.
* { margin: 0; }
Selector etiqueta
Es tracta del selector més simple i, a la vegada, un dels més utilitzats. Es tracta de seleccionar tots els elements segons la seva etiqueta o tag. En la següent imatge es mostra com utilitzar aquest selector per aplicar el mateix padding en totes les etiquetes h1 i p.
Identificació dels elements (#)
Quan un estil es vol aplicar a un element concret i hi ha múltiples elements iguals en la nostra plana web, podem identificar aquest element utilitzant l'atribut id . En la fulla d'estils podrem utilitzar aquest identificador per aplicar un estil concret a aquest element.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="css/style.css">
<title>Formulari</title>
</head>
<body>
<ul>
<li>El1</li>
<li>El2</li>
<li>El3</li>
<li **id="element"**>El4</li>
<!-- Més elements -->
<li>ElN</li>
</ul>
</body>
</html>
Per a especificar el selector, utilitzem el símbol # (hashtag), seguit del nom de l'identificador (atribut id associat a l'etiqueta html).
#element { color: #00F; }
Agrupació d'elements (.)
Es poden agrupar els elements mitjançant l'atribut class . Podem utilitzar aquest atribut quan volem aplicar un determinat estil a un conjunt d'elements que no mantenen una relació entre ells.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="css/style.css">
<title>Formulari</title>
</head>
<body>
<ul>
<li>El1</li>
<li class="basic">El2</li>
<li class="basic">El3</li>
<li>El4</li>
<li class="basic">El5</li>
<!-- Més elements -->
<li>ElN</li>
</ul>
</body>
</html>
Per a especificar el selector, utilitzem el símbol . (punt), seguit del nom de l'identificador (atribut id associat a l'etiqueta html).
.basic { color: #00F; }
Selectors segons arbre HTML
El selector permet especificar un element segons la seva posició en l'arbre associat al document HTML.
CSS incorpora diferents selectors d'aquest tipus:
Selector fill ( '>' )
El selector fill em permet agrupar tots els elements fills del pare o pares especificats. Aquest selector només afecta al fill i no als descendents posteriors.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="css/style.css">
<title>Formulari</title>
</head>
<body>
<h1>Què és?</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus tincidunt venenatis varius. Integer lobortis <a href="link.html">quam quis lectus maximus</a>, ac molestie risus pellentesque. Donec fringilla <strong><a href="strong.html">nibh nec velit</a></strong> tincidunt auctor. </p>
</body>
</html>
Selector descendent ( '_' )
El selector descendent consisteix en seleccionar tots els descendents (fills, néts, ...) de l'element especificat. Per a seleccionar els elements descendents utilitzem un espai " ".
Selector adjacent ( + )
El selector adjacent són aquells que ens permeten seleccionar els nodes que són germans: o sigui tots aquells nodes que tenen el mateix pare.
Per exemple, en la següent imatge
Les etiquetes h1 i p són nodes adjacents: tenen el mateix pare.