Logo de Mosaic
CSS
Conceptes bàsics de CSS

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.

Vegeu També

Vegeu com estructurar el contingut dels llocs web en el mòdul "Fonaments d'HTML".

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

27.1. Què és el CSS?

Mentre que l'HTML estructura el document i indica als navegadors quina és la funció d'un element concret (és un vincle cap a una altra pàgina?, és un títol?), el CSS dóna instruccions al navegador sobre com ha de mostrar un element concret: estil, espaiat i posició. Si l'HTML són els puntals i els maons que formen l'estructura d'una casa, el CSS és el guix i la pintura que la decoren.

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.

Una regla del CSS podria dir, per exemple: "Vull trobar tots els elements h2 i aplicar-los el color verd"; o bé: "Vull trobar tots els paràgrafs amb el nom de classe author-name, aplicar-los un fons de color vermell, fer que el text del seu interior sigui el doble de gran que el text dels paràgrafs normals i afegir 10 píxels d'espaiat al seu voltant".

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:

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:

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).

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

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:

Nota

A mesura que aneu progressant per aquest curs trobareu referències a alguns d'aquests selectors més complicats. Si no els enteneu a la primera no cal que us preocupeu; ja els anireu dominant a mesura que guanyeu experiència en els estils de les pàgines web. El millor és començar amb els tres selectors bàsics mencionats al subapartat anterior i anar utilitzant els altres una vegada us aneu sentint més segurs.

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;
}

Nota

L'IE 6 i les versions anteriors no accepten els selectors de fills.

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 {
	...
}

Nota

L'IE 6 i les versions anteriors no accepten els selectors de germans adjacents.

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:

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;
}

Nota

Vigileu si no definiu aquestes regles en l'ordre en què apareixen a l'exemple anterior, ja que d'altra forma podria ser que no funcionessin de la manera esperada. Això és per la manera en què l'especificitat fa que les regles posteriors del full d'estils anul·lin les regles anteriors. En el següent apartat aprendrem més detalls sobre l'especificitat.

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.

Nota

L'IE 6 i les versions anteriors no accepten aquests selectors. També cal tenir en compte que no heu de donar informació important amb el CSS, ja que el contingut no estarà disponible per a les tecnologies d'assistència o si un usuari decideix no utilitzar el vostre full d'estils. La norma bàsica és que el CSS és per als estils i l'HTML és per al contingut important.

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.

Nota

En aquest subapartat ja he utilitzat el CSS abreujat sense dir-ho. La regla border: 2px solid black; és la regla abreujada per especificar per separat border-width: 2px;, border-style: solid; i border-color: black;.

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:

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.

Captura de pantalla del navegador Opera on es veu un full d'estil inserit aplicat.

Figura 1. L'Opera mostra el paràgraf amb els estils inserits aplicats d'una manera diferent que als altres.

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.

Captura de pantalla del navegador Opera que mostra com un full d'estil incrustat afecta a molts elements.

Figura 2. L'Opera mostra tots els paràgrafs amb els estils definits en el full d'estils incrustats.

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).

Vegeu també

Hem parlat de l'element link a l'apartat 18 del mòdul "El text central d'HTML".

Captura de pantalla del navegador Opera que mostra com un full d'estil extern afecta a molts elements.

Figura 3. L'Opera mostra els estils definits en el full d'estils extern quan s'enllaça amb un element link.

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

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:

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ó?

Logo Creative Commons
Els continguts recollits en aquest article estan subjectes a una llicència Creative
Commons Reconeixement, No comercial - Compartir Igual 3.0 No adaptada
.
: Anar a l'índex :