27. Conceptes bàsics de CSS

Christian Heilmann. 26 de setembre de 2008. Darrera modificació: 12 de març de 2017 (equip docent del grau de Multimèdia de la UOC). Publicat a: extern, selectors, regla, incrustat, comentaris.

En aquest curs ja hem parlat sobre el contingut dels llocs web i com estructurar el contingut amb l'HTML. Això és molt important, ja que vol dir que donem significat i estructura als nostres documents perquè altres tecnologies s'hi puguin relacionar sense problemes. La tecnologia web més important que discutirem a continuació és el CSS (fulls d'estils en cascada), que es fa servir per aplicar estils a l'HTML i situar-lo en la pàgina web. En aquest apartat parlaré del CSS: què és, com aplicar-lo a l'HTML i quina n'és la sintaxi bàsica.

Els continguts d'aquest apartat són els següents:

• 27.1. Què és el CSS?
• 27.2. Definir les regles dels estils
  • 27.2.1. Comentaris del CSS
  • 27.2.2. Agrupar selectors
• 27.3. Selectors avançats de CSS
  • 27.3.1. Selectors universals
  • 27.3.2. Selectors d'atributs
  • 27.3.3. Selectors de fills
  • 27.3.4. Selectors de descendents
  • 27.3.5. Selectors de germans adjacents
  • 27.3.6. Pseudoclasses
  • 27.3.7. Pseudoelements
• 27.4. CSS abreujat
  • 27.4.1. Comparar valors individuals i abreujats
  • 27.4.2. Donar menys de quatre valors per a una propietat abreujada
  • 27.4.3. Escollir entre utilitzar una propietat única o un valor abreujat
  • 27.4.4. Referència abreujada
• 27.5. Aplicar el CSS a l'HTML
  • 27.5.1. Estils en línia
  • 27.5.2. Estils incrustats
  • 27.5.3. Fulls d'estils externs
  • 27.5.4. Importar fulls d'estils amb @import
• Resum
• Preguntes de repàs

27.1. Què és el CSS?

Això es fa utilitzant un sistema de regles, la sintaxi exacta de les quals veurem més avall. Aquestes regles diuen quins elements de l'HTML han de tenir estils afegits, i a cada regla enumeren les propietats (per exemple, color, mida, tipus de lletra, etc.) d'aquells elements HTML que volen manipular i els valors nous que els volen aplicar.

El CSS no és un llenguatge de programació com JavaScript ni tampoc és un llenguatge d'etiquetes con HTML; de fet, no hi ha res amb què es pugui comparar. Les tecnologies que definien les interfícies abans del desenvolupament del web barrejaven sempre la presentació i l'estructura. Tanmateix, en un entorn que canvia tan sovint com el web aquesta no és una manera gaire intel·ligent de fer les coses, i és per això que es va inventar el CSS.

27.2. Definir les regles dels estils

Així, doncs, vegem un exemple de codi del CSS i després l'analitzarem:

selector {
	propietat1:valor;
	propietat2:valor;
	propietat3:valor;
}

Les parts pertinents són les següents:

• El selector identifica els elements de l'HTML als quals s'aplicarà la regla, que s'identifiquen amb el nom de l'element en si, com per exemple body, o amb algun altre mètode, com els valors de l'atribut class; ja en tornarem a parlar més endavant.

• Les claus contenen les parelles de propietat/valor, que se separen entre elles amb un signe de punt i coma; les propietats se separen dels seus valors respectius amb el signe de dos punts.

• Les propietats defineixen el que voleu fer amb els elements que heu seleccionat. Poden ser molt variades i poden modificar el color, el color de fons, la posició, els marges, la separació, el tipus de lletra i molts altres aspectes de l'element.

• Els valors són els valors als quals voleu canviar cadascuna de les propietats dels elements seleccionats. Els valors depenen de la propietat; per exemple, les propietats que afecten el color poden tenir valors hexadecimals com ara #336699, valors RGB com ara rgb (12,134,22) o noms de colors com vermell, verd o blau. Les propietats que afecten la posició, els marges, l'amplada, l'altura... es poden mesurar en píxels, ems, percentatges, centímetres o altres unitats similars.

Ara en veurem un exemple concret:

p {
	margin:5px;
	font-family:arial;
	color:blue;
}

L'element HTML que selecciona aquesta regla és p; aquesta regla s'aplicarà a tots els p dels documents HTML que utilitzin aquest CSS, a menys que hi hagi regles més concretes que se'ls apliquin, ja que en aquest cas les regles més concretes tindran prioritat sobre aquesta regla. Les propietats que es veuen afectades per aquesta regla són els marges al voltant dels paràgrafs, el tipus de lletra del text dels paràgrafs i el color d'aquest text. Els marges estan definits a 5 píxels, el tipus de lletra està definit a Arial i el color del text és blau.

Ja tornarem a parlar de tots aquests detalls més endavant; l'objectiu principal d'aquest apartat és explicar els fonaments del CSS i no els detalls més petits.

Totes aquestes regles s'uneixen per formar un full d'estils. Aquesta és la sintaxi més bàsica del CSS. Hi ha més coses, però no moltes més; probablement, el millor que té el CSS és la seva senzillesa.

27.2.1. Comentaris del CSS

Una de les primeres coses que cal saber és com fer comentaris en el CSS. Podeu afegir-hi comentaris posant-los entre /* i */. Els comentaris poden ocupar diverses línies, que el navegador ignorarà:

/* Aquests són selectors d'elements bàsics */
selector{
	propietat1:valor;
	propietat2:valor;
	propietat3:valor;
}

Podeu afegir comentaris entre regles o en un bloc de propietats; per exemple, en el següent CSS les propietats 2a. i 3a. es troben entre delimitadors de comentari, per la qual cosa el navegador les ignorarà. Això pot ser molt útil quan vulgueu comprovar els efectes que tenen parts concretes del CSS a la vostra pàgina web; podeu eliminar-les convertint-les en comentaris, guardar el CSS i tornar a carregar l'HTML.

selector{
	propietat1:valor;
	/*
	propietat2:valor;
	propietat3:valor;
	*/
}

A diferència d'altres llenguatges, el CSS només té comentaris de bloc; els comentaris de línia no existeixen. Evidentment, si ho voleu, podeu restringir el comentari a una única línia, però haureu de seguir-hi incloent els delimitadors d'obertura i de tancament de comentari (/* i */).

27.2.2. Agrupar selectors

També podeu agrupar diferents selectors. Posem per cas que voleu aplicar el mateix estil a h1 i p; podríeu escriure el següent CSS:

h1 {color:red}
p {color:red}

Aquesta, però, no és la manera ideal de fer les coses, ja que repetiu informació que és la mateixa. Per tant, podeu escurçar el CSS agrupant els selectors amb una coma; les regles entre claus s'apliquen als dos selectors:

h1, p {color:red}

Hi ha diferents selectors, cadascun dels quals es correspon amb una part diferent de l'etiquetatge. Els tres més bàsics que trobareu més sovint són els següents:

• p {}: selector d'elements. Es correspon amb tots els elements d'aquest nom de la pàgina (en el cas anterior, elements p).

• .example{}: selector de classe. Es correspon amb tots els elements que tenen l'atribut class amb el valor especificat; per tant, el selector anterior es correspondria amb <p class="example">, <li class="example"> o <div class="example">, o amb qualsevol altre element amb class definit com a example. Tingueu en compte que els selectors de classe no comproven cap nom d'element concret.

• #example{}: selector d'id. Es correspon amb tots els elements que tenen un atribut id amb el valor especificat; així, doncs, el selector anterior es correspondria amb <p id="example">, <li id="example"> o <div id="example">, o amb qualsevol altre element amb id definit com a example. Tingueu en compte que els selectors d'ID no comproven cap nom d'element i que podeu tenir només un ID de cada per document HTML, ja que són únics per a cada pàgina.

En els següents exemples podeu veure els selectors anteriors en acció. Observeu que quan obriu l'exemple en un navegador, l'estil warning s'aplica tant al punt de la llista com al paràgraf (si desapareix el pic és perquè definiu un color de text blanc sobre un fons blanc).

• "Selectors example"

• "Selectors.css"

També podeu unir diversos selectors per definir unes regles encara més específiques:

• p.warning{}. Es correspon amb tots els paràgrafs amb el valor warning de class.

• div#example{}. Es correspon amb l'element amb example com a atribut id, però només quan és un div.

• p.info, li.highlight{}. Es correspon amb el valor info de class i amb els punts de llista amb el valor highlight de class.

  En el següent exemple utilitzo selectors específics per diferenciar els diferents estils d'advertències.

• "Specificselectors example"

• "Specificselectors.css"

27.3. Selectors avançats de CSS

Al subapartat anterior he explicat els selectors més bàsics del CSS, que són els selectors d'element, classe i id. Amb aquests selectors es poden fer moltes coses, però això no ho és tot; hi ha altres selectors que permeten seleccionar elements per aplicar-los en funció de criteris més específics:

• Selectors universals: els selectors universals es poden fer servir per seleccionar tots els elements de la pàgina.

• Selectors d'atributs: tal com indica el seu nom, els selectors d'atributs permeten seleccionar elements en funció dels seus atributs.

• Selectors de fills: si voleu seleccionar elements concrets que són fills d'altres elements concrets, utilitzeu aquest selector.

• Selectors de descendents: si voleu seleccionar elements concrets que són descendents d'altres elements concrets (no només fills directes, sinó també més avall de l'arbre), podeu utilitzar aquest tipus de selector.

• Selectors de germans adjacents: si voleu seleccionar només elements concrets que segueixen altres elements concrets, utilitzeu aquests selectors.

• Pseudoclasses: permeten aplicar estils a elements, no en funció de què són els elements, sinó en funció de factors més estranys com per exemple l'estat dels enllaços (per exemple, si s'hi és al damunt o si ja s'han visitat).

• Pseudoelements: permeten aplicar estils a parts concretes dels elements i no a tot l'element (per exemple, la primera lletra d'aquest element); també us permeten inserir contingut abans o després d'elements concrets.

27.3.1. Selectors universals

Per dir-ho ràpidament, els selectors universals seleccionen tots els elements d'una pàgina per aplicar-hi estils. Per exemple, la regla següent diu que tots els elements de la pàgina han de tenir una vora sòlida de color negre d'1 píxel:

* {
	border: 1px solid #000000;
}

27.3.2. Selectors d'atributs

Els selectors d'atributs permeten seleccionar elements en funció dels atributs que contenen. Per exemple, amb el selector següent podeu seleccionar tots els elements img amb un atribut alt:

img[alt]{
	border: 1px solid #000000;
}

Tingueu en compte els claudàtors.

Amb el selector anterior potser podríeu definir una vora negra al voltant de totes les imatges amb un atribut alt i una vora vermella al voltant de totes les altres imatges, una cosa molt útil per a les proves d'accessibilitat.

Però els atributs us poden ser molt més útils si teniu en compte que podeu fer seleccions a partir del valor dels atributs, i no només a partir dels seus noms. La regla següent s'aplica a totes les imatges que tenen un atribut src amb el valor alert.gif:

img[src="alert.gif"]{
	border: 1px solid #000000;
}

Potser penseu que no és gaire útil, però pot ser-ho molt per a la depuració. I encara molt més útil és la possibilitat de seleccionar parts concretes d'atributs, com per exemple extensions d'arxius. I això ja està arribant: el CSS 3 introdueix tres tipus nous de selectors d'atributs que poden fer seleccions en funció de les cadenes de text dels valors dels atributs (al principi, al final o a qualsevol punt del valor). Llegiu l'apartat de Christopher Schmitt sobre els selectors d'atributs del CSS 3.

27.3.3. Selectors de fills

Si voleu seleccionar elements concrets que són fills d'altres elements concrets podeu utilitzar aquest selector. Per exemple, la regla següent posarà de color blau el text dels elements strong que són fills d'elements h3, però cap dels altres elements strong:

h3 > strong {
	color: blue;
}

27.3.4. Selectors de descendents

Els selectors de descendents són molt similars als selectors de fills, excepte que aquests últims seleccionen només els descendentsdirectes; els selectors de descendents seleccionen els elements pertinents en qualsevol punt de la jerarquia de l'element, i no només els descendents directes. Fixem-nos bé en què vol dir això. Posem per cas el següent fragment d'HTML:

<div>
	<em>hello</em>
	<p>In this paragraph I will say
		<em>goodbye</em>.
	</p>
</div>

En aquest fragment, l'element div és el pare de tots els altres. Té dos fills, un em i un p. L'element p té un únic element fill, que és un altre em.

Podeu utilitzar un selector de fills per seleccionar només l'element em que hi ha immediatament dintre de div, de la següent manera:

div > em {
	...
}

Si utilitzeu un selector de descendents de la següent manera:

div em {
	...
}

Llavors se seleccionaran els dos elements em.

27.3.5. Selectors de germans adjacents

Aquests selectors permeten seleccionar un element concret que apareix directament després d'un altre element concret al mateix nivell de la jerarquia de l'element. Per exemple, si volguéssiu seleccionar tots els elements p que apareixen immediatament després dels elements h2, però no els altres elements p, podríeu utilitzar la següent regla:

h2 + p {
	...
}

27.3.6. Pseudoclasses

Les pseudoclasses s'utilitzen per definir estils no per als elements sinó per a diversos estats dels elements. L'ús més habitual que en fareu és per aplicar estils als estats dels enllaços; per tant, són els que veurem en primer lloc. La llista següent especifica les diferents pseudoclasses i descriu l'estat de l'enllaç que seleccionen:

• :link: l'estat normal per defecte dels enllaços, tal com es troben quan es veuen per primera vegada.

• :visited: enllaços que ja heu visitat en el navegador que esteu utilitzant.

• :focus: enllaços (o camps de formularis, o qualsevol altra cosa) que tenen en aquest moment el cursor del teclat en el seu interior.

• :hover: enllaços que tenen en aquest moment el punter del ratolí sobre ells.

• :active: un enllaç que cliqueu.

Les regles següents del CSS defineixen que, per defecte, els enllaços siguin de color blau (el valor per defecte a la majoria dels navegadors). En posar-vos-hi a sobre desapareix el subratllat de l'enllaç. També volem aconseguir aquest mateix efecte quan se selecciona l'enllaç amb el teclat, per la qual cosa dupliquem la regla :hover amb :focus . Una vegada ja s'ha visitat un enllaç, aquest queda de color gris. Per últim, quan un vincle està actiu apareix en negreta per donar una pista addicional que passarà alguna cosa.

a:link{
	color: blue;
}
a:visited{
	color: gray;
}
a:hover a:focus{
	text-decoration: none;
}
a:active{
	font-weight: bold;
}

La pseudoclasse :focus també és útil com a contribució a la usabilitat en els formularis. Per exemple, podeu destacar el camp d'introducció de dades que té el cursor intermitent actiu en el seu interior amb una regla com la següent:

input:focus {
	border: 2px solid black;
	background color:  lightgray;
}

A continuació explicaré :first-child. Aquesta pseudoclasse selecciona qualsevol aparició de l'element que és el primer element fill del seu pare; així que, per exemple, la regla següent selecciona el primer punt (amb pic o numerat) de qualsevol llista i posa el text en negreta:

li:first-child {
	font-weight: bold;
}

Finalment, comentaré breument la pseudoclasse :lang, que selecciona elements que tenen un idioma concret definit amb l'atribut lang. Per exemple, l'element següent:

<p lang="en-US">A paragraph of American text, gee whiz!<p>

Es podria seleccionar de la manera següent:

p:lang(en-US) {
	...
}

27.3.7. Pseudoelements

Els pseudoelements tenen dues finalitats. En primer lloc, els podeu fer servir per seleccionar la primera lletra o la primera línia del text de l'interior d'un element concret. Per crear una caplletra al principi de cada paràgraf del document podeu utilitzar la regla següent:

p:first-letter {
	font-weight:  bold;
	font-size: 300%
	background-color:  red;
}

La primera lletra de cada paràgraf apareixerà en negreta, un 300% més gran que la resta del paràgraf i amb un fons vermell.

Per fer que la primera línia de cada paràgraf aparegui en negreta podeu utilitzar la regla següent:

p:first-line {
	font-weight:  bold; 
}

El segon ús dels pseudoelements és generar contingut a través del CSS, cosa que és més complicada. Podeu utilitzar els pseudoelements :before o :after per especificar que el contingut s'ha d'inserir abans o després de l'element que seleccioneu. Llavors podeu especificar què és el que voleu inserir-hi. Com a exemple molt senzill, podeu utilitzar la regla següent per inserir una imatge decorativa després de cadascun dels enllaços de la pàgina:

a:after{
	content: " " url(flower.gif);
}

També podeu utilitzar la funció attr() per inserir els valors dels atributs dels elements després de l'element. Per exemple, amb la regla següent podeu inserir el destí de cadascun dels enllaços del document entre parèntesis després de l'enllaç:

a:after{
	content: "(" attr(href) ")";
}

Les regles d'aquesta mena són ideals per a fulls d'estils d'impressió, que són fulls d'estils que podeu escriure i que s'apliquen automàticament quan un usuari imprimeix una pàgina. L'avantatge per a l'usuari és que podeu ocultar tota la navegació que un usuari no podrà seguir en una còpia impresa i utilitzar la tècnica anterior perquè el lector pugui veure les URL a què es fa referència en una pàgina.

També podeu inserir valors numèrics incrementats després dels elements que es repeteixen (com per exemple pics o paràgrafs) amb la funció counter(); això s'explica amb molt més detall a l'apartat de dev.opera.com sobre els comptadors del CSS.

27.4. CSS abreujat

Una altra cosa amb què us trobareu normalment en aquest curs és el CSS abreujat. És possible combinar diverses propietats del CSS relacionades en una única propietat per estalviar-vos temps i esforç. En aquest apartat veurem els tipus de propietats abreujades disponibles.

27.4.1. Comparar valors individuals i abreujats

Observeu la regla següent per al marge (les regles abreujades per a separació i vora funcionen de la mateixa manera):

div.foo {
	margin-top: 1em;
	margin-right:  1.5em;
	margin-bottom:  2em;
	margin-left:  2.5em;
}

Aquesta regla també es podria escriure:

div.foo {
	margin: 1em 1.5em 2em 2.5em;
}

27.4.2. Donar menys de quatre valors per a una propietat abreujada

1. Un valor abreujat pot incloure menys de quatre valors, que s'aplicaran segons s'especifica a continuació. Els resultats s'ordenen segons el nombre de valors especificats:

2. El mateix valor s'aplica als quatre costats, per exemple margin: 2px;

3. El primer valor s'aplica als marges superior i inferior, i el segon als marges esquerre i dret, per exemple margin: 2px 5px;.

4. Els valors primer i tercer s'apliquen als marges superior i inferior respectivament, i el segon als marges esquerre i dret, per exemple margin: 2px 5px 1px;.

5. Els valors s'apliquen als marges superior, dret, inferior i esquerre respectivament en l'ordre en què apareixen en el CSS, tal com hem vist abans.

En general, la manera més intel·ligent de fer és especificar els quatre valors en les propietats abreujades, per qüestions de llegibilitat. Aquest consell també serveix per a la propietat abreujada padding.

27.4.3. Escollir entre utilitzar una propietat única o un valor abreujat

Les propietats margin i padding abreujades són les que s'utilitzen més, tot i que hi ha situacions en què és millor no fer servir les propietats abreujades, o com a mínim fer-les servir amb molta cura, com per exemple les següents:

• Només s'ha de definir un únic marge. En una situació en la qual només s'ha de definir una propietat, el fet de definir alhora múltiples propietats representa normalment una violació del principi KISS (Keep It Simple, Stupid o "No ho compliquis, estúpid").

• El selector al qual s'apliquen les propietats està subjecte a molts casos diferents. Quan això passi, i tard o d'hora acabarà passant, l'inevitable piló de valors abreujats farà que tot plegat sigui difícil d'entendre quan hàgiu de reparar o modificar la composició.

• El manteniment del full d'estils que esteu escrivint anirà a càrrec de persones amb un nivell d'habilitats (o de capacitat de raonament espacial) deficient. Si compteu que llegiran aquest apartat, llavors no cal que us preocupeu, però potser és millor no suposar segons quines coses...

• Heu de canviar un valor per a un cas concret. Això és normalment conseqüència d'un document o d'un full d'estils mal dissenyat, però tampoc és una situació excepcional.

27.4.4. Referència abreujada

1. Definició abreujada de vores per a diferents propietats: Ja s'han explicat al principi d'aquest subapartat. Una qüestió addicional que cal mencionar és que fins i tot podeu definir els valors de les propietats de la vora només per a una única vora de l'element al qual s'aplica, de la següent manera:

   	border-left-width: 2px;
   	border-left-style: solid;
   	border-left-color: black;

2. Definició abreujada de marge, farcit i vora per a les mateixes propietats: Totes actuen de la mateixa manera.

   Vegeu també

   Vegeu la definició abreujada de marge, farcit i vora per a les mateixes propietats en el subapartat 30.4.1 d'aquest mòdul.

3. Definició abreujada de tipus de lletra: Podeu especificar la mida del tipus de lletra, el pes, l'estil, la família i l'interlineat fent servir una definició abreujada d'una única línia. Posem per cas el CSS següent:

   font-size: 1.5em;
   line-height: 200%;
   font-weight: bold;
   font-style: italic;
   font-family: Georgia, "Times New Roman", serif;

   Podríeu especificar exactament el mateix amb la línia següent:

   font: 1.5em/200% bold italic Georgia,"Times New Roman",serif;

4. Definició abreujada de fons: podeu especificar el color de fons, la imatge de fons, la repetició de la imatge i la posició de la imatge amb una única línia del CSS. Imaginem-nos el següent:

   background-color: #000;
   background-image: url(image.gif);
   background-repeat: no-repeat;
   background-position: top left;

   Tot això mateix es podria representar amb la següent definició abreujada:

   background: #000 url(image.gif) no-repeat top left;

5. Definició abreujada de llista: Aquí també trobem un codi similar amb propietats d'una llista que permet definir els valors per al tipus de pic, la posició i la imatge en una única línia. Imaginem-nos el següent CSS:

   list-style-type: circle;
   list-style-position: inside;
   list-style-image: url(bullet.gif);

   Això és equivalent a:

   list-style: circle inside url(bullet.gif);

   Nota

   Observeu que #000 és el valor hexadecimal abreujat per al color; és l'equivalent al valor no abreujat #000000 que ja hem vist abans. I si en voleu veure un exemple més complicat, #6c9 és el mateix que #66cc99.

27.5. Aplicar el CSS a l'HTML

Hi ha tres maneres d'aplicar el CSS a un document HTML: estils en línia, estils incrustats i fulls d'estils externs. Tret que tingueu alguna raó molt bona per utilitzar un dels dos primers mètodes, us hauríeu de decidir sempre per la tercera opció. Aviat en veurem el motiu, que és molt obvi, però abans parlarem de les diferents opcions.

27.5.1. Estils en línia

Podeu aplicar estils a un element utilitzant un atribut style, de la manera següent:

<p style="background:blue; color:white; padding:5px;">Paragraph</p>

Vegeu la pàgina exemple a: "CSS Basics Example"

En aquest atribut enumereu totes les propietats del CSS i els seus valors (cada parella de propietat/valor se separa de les altres amb un signe de punt i coma, i cada propietat se separa del seu valor dintre de la parella amb un signe de dos punts). Aquesta és la manera de definir estils amb CSS.

Si obriu aquest exemple en un navegador i mireu, veureu que el paràgraf amb l'atribut style és blau amb el text blanc i que té una mida diferent dels altres, tal com es pot veure a la figura 1.

L'avantatge dels estils inserits és que el navegador es veurà obligat a utilitzar aquests ajustos. Qualsevol altre estil definit amb altres fulls d'estils, o fins i tot els incrustats a l'element head del document, quedaran invalidats per aquests estils.

El gran problema dels estils inserits és que fan que el manteniment sigui molt més difícil del que hauria de ser. L'ús del CSS permet separar la presentació del document de la seva estructura, mentre que el que fan els estils inserits és precisament escampar regles de presentació per tot el document.

A més de la qüestió del manteniment, tampoc s'aprofita l'aspecte més potent del CSS: la cascada. En el següent apartat tornarem a parlar de la cascada en detall, però de moment tot el que cal que sapigueu és que l'ús de la cascada implica definir un aspecte en un lloc que llavors el navegador aplica a tots els elements que compleixen una regla concreta.

27.5.2. Estils incrustats

Els estils incrustats es col·loquen a l'element head del document en un element style, tal com es veu a l'exemple següent:

<style type="text/css" media="screen">
p {
	color:white;  
	background:blue;  
	padding:5px;
}
</style>

Vegeu la pàgina exemple a: "Embedded example"

Si obriu l'enllaç anterior en un navegador veureu que els estils definits s'apliquen a tots els paràgrafs del document, tal com mostra la figura 2. Mireu també el codi font de la pàgina de l'exemple per veure el CSS de l'interior de head.

L'avantatge dels estils incrustats és que no cal afegir un atribut style a cada paràgraf; els estils es poden aplicar a tots els paràgrafs amb una única definició. Això també vol dir que si heu de canviar l'aspecte de tots els paràgrafs podreu fer-ho intervenint en un únic lloc, tot i que això està limitat a un document; però què hauríeu de fer si volguéssiu definir alhora l'aspecte de tots el paràgrafs de tot un lloc web? Doncs utilitzar fulls d'estils externs.

27.5.3. Fulls d'estils externs

Els fulls d'estils externs permeten posar totes les definicions del CSS en un arxiu independent, guardar aquest arxiu amb l'extensió CSS i llavors aplicar-lo a tots els documents HTML amb un element link en el head del document. Consulteu el codi font de la nostra pàgina d'exemple, observeu que head conté un element link que fa referència a un arxiu CSS extern i comproveu que tots els estils definits a l'arxiu CSS extern s'apliquen a l'HTML. Observem més atentament aquest element link:

<link rel="stylesheet" href="styles.css" type="text/css" media="screen">

En aquest curs ja hem parlat de l'element link. Només per recapitular: l'atribut href apunta cap a un arxiu CSS, l'atribut media defineix a quins suports s'aplicaran aquests estils (en aquest cas screen, ja que no volem que un document imprès tingui aquest aspecte) i type defineix què és el recurs al qual apunta l'enllaç (una extensió d'arxiu no és suficient per determinar-ho).

Aquesta és la millor situació imaginable: Totes les definicions d'aspecte es troben en un únic arxiu, la qual cosa significa que podeu fer canvis a tot el lloc web només canviant un arxiu, i el navegador el pot carregar una vegada i llavors guardar-lo a la memòria cau per a tots els altres documents que hi fan referència, amb la qual cosa s'ha de descarregar una quantitat de dades menor.

27.5.4. Importar fulls d'estils amb @import

Hi ha encara una altra manera d'importar fulls d'estils externs cap a arxius HTML: la propietat @import. Aquesta propietat s'insereix en un full d'estils incrustat, de la mateixa manera que el CSS incrustat que hem vist abans. La sintaxi és la següent:

<style type="text/css" media="screen">
	@import url("styles.css");
	...aquí hi poden haver altres enunciats o estils CSS per importar-los...
</style>

Algunes vegades veureu enunciats d'importació sense els parèntesis, però el resultat és el mateix. Una altra cosa que cal tenir en compte és que @import ha d'ocupar sempre el primer lloc en un full d'estils incrustat. Finalment, podeu especificar que el full d'estils importat s'apliqui només a alguns tipus de suports incloent-hi el tipus de suport al final de l'enunciat d'importació (això funciona amb tots els navegadors exceptuant l'IE6 i versions anteriors). El següent codi fa el mateix que l'exemple anterior:

<style type="text/css">
	@import url("styles.css") screen;
	...aquí hi poden haver altres enunciats o estils CSS per importar-los...
</style>

La primera pregunta que us deveu estar fent és: "Per què necessito una altra manera d'aplicar fulls d'estils externs als meus documents HTML?" Doncs bé, en realitat no la necessiteu. Només incloc aquí la informació sobre @import per una qüestió d'exhaustivitat. L'ús de @import en lloc d'elements link té uns quants avantatges i desavantatges menors, però aquests són molt menors, per la qual cosa la decisió serà ben bé vostra. Els elements link són actualment la manera més acceptada de fer les coses:

• Els navegadors antics no reconeixen @import i, per tant, l'ignoren completament (el Netscape 4 i versions anteriors, i l'IE 4 i versions anteriors, si no poseu el nom de l'arxiu entre parèntesis). Per tant, podeu utilitzar un enunciat @import per ocultar estils als navegadors antics que els utilitzarien incorrectament. Podeu posar els estils actualitzats en un full d'estils extern, importar-los amb @import i oferir alguns estils realment bàsics que no facin que l'IE o el Netscape 4 quedin encallats en el full d'estils incrustat. Us pot ser molt útil, però actualment no és gaire habitual que calgui oferir compatibilitat amb l'IE/Netscape 4.

• Tal com ja hem comentat, l'IE6 no accepta la col·locació del tipus de suport al final de la línia de @import; per tant, si voleu inserir múltiples fulls d'estils per a diferents suports aquesta no és una bona opció.

• Podríeu argumentar que el codi per a múltiples enunciats @import és més petit que el codi per a múltiples elements link, però aquest avantatge és insignificant.

Resum

En aquest apartat heu après a aplicar el CSS a documents HTML, ja sigui en forma d'estils inserits utilitzant atributs style, en forma d'estils incrustats en un element style a head del document, o com arxius externs en un document independent. També heu après que aquesta última opció, la d'enllaçar un full d'estils extern utilitzant un element link, és la més recomanable pel que fa al manteniment i a l'ús de la memòria cau. Finalment, hem parlat sobre la sintaxi bàsica del CSS i hem explicat els comentaris, diferents tipus de selectors i l'agrupament de selectors.

En el següent apartat aprofundirem en els detalls del CSS i hi parlarem en detall de la cascada i de l'especificitat dels selectors.

Preguntes de repàs

Preguntes que hauríeu de poder respondre:

1. Quins són els avantatges i els problemes dels estils en línia i com els apliqueu a un element?

2. Què és una regla d'estil? Descriviu-ne els diferents components i la sintaxi.

3. Imagineu que teniu unes quantes regles d'estils; què heu de fer per convertir-les en un full d'estils extern?

4. Amb què es correspon el següent selector CSS: ul#nav{}?

5. Quin és l'vantatge d'agrupar selectors?

6. Com podeu definir un full d'estils d'impressió?

Els continguts recollits en aquest article estan subjectes a una llicència Creative
Commons Reconeixement, No comercial - Compartir Igual 3.0 No adaptada.

: :