2.1 INTRODUCCIÓ AL CSS

Els fulls d'estil en cascada (CSS) és un llenguatge que s'utilitza per dissenyar el contingut de les pàgines web. L'HTML indica al navegador quin contingut i tipus de contingut ha de mostrar en una pàgina. El CSS indica al navegador com ha d'aparèixer cada element.

L'especificació CSS ​​ha crescut amb el temps i avui en dia s'utilitza CSS per definir tots els aspectes de l'aparença de les pàgines web, inclòs el disseny, la disposició i les variacions de la visualització per a diferents dispositius i mides de pantalla.

Un fitxer CSS extern té una extensió de fitxer .css. Com que el fitxer CSS està separat de les vostres pàgines HTML, heu d'enllaçar-los afegint un enllaç a la secció de capçalera de cada pàgina HTML:

2.2 COM S'ESCRIU CSS?

• El selector fa referència a l'element que voleu estilitzar. A l'exemple mostrat, el selector és el p que fa referència a un paràgraf (és a dir, un element HTML etiquetat <p>) a la pàgina.

• El bloc de declaració està envoltat de claus i conté una o més declaracions separades per punt i coma ( ; ).

• Cada declaració està formada per una propietat CSS i un valor, separats per dos punts ( : ). L'exemple mostrat especifica que el text de cada paràgraf etiquetat <p> serà de color gris i tindrà una mida de 18 píxels.

El conjunt de regles d'estil que es mostra a dalt es pot escriure en una sola línia:

p {color: grey; font-size: 18px;} 

Però, és molt comú utilitzar diverses línies per facilitar la llegibilitat (especialment amb blocs de declaració llargs):

p {

   color: grey;

   font-size: 18px;

}

2.3 PROPIETATS CSS

Una propietat és una cosa en particular que es pot canviar, com ara el color de fons o el color de la font. Propietats com ara el color de fons són rellevants per a la majoria dels elements de la pàgina, d'altres són específiques per a tipus concrets d'elements.

Algunes de molt comunes i utilitzades són:

Fem una primera prova, obre un arxiu html i escriu un títol, el què vulguis, p.ex. el teu nom i cognoms. A la capçalera (head) de l'arxiu assegura't que hi tens enllaçat un arxiu css. Has de tenir una cosa semblant a:

Ara obre el fitxer .css i dona una mica d'estil a l'element h1. Per exemple:

Executa el codi i comprova que fa tot allò que havies previst.

2.4 SELECTORS

2.4.1 Selectors d'elements

2.4.2 Selectors d'identitat

Els selectors d'ID s'utilitzen per estilitzar elements que són únics (és a dir, només apareixen una vegada) en una pàgina HTML. Quan teniu un sol element a la pàgina que necessita un estil específic, podeu utilitzar un selector d'identitat.

El selector comença amb un # per indicar que és un selector d'identitat. El nom del selector depèn de vosaltres, però no pot començar amb un número ni incloure espais. Com amb tots els identificadors, hauria de ser significatiu.

Aquí teniu un exemple d'un conjunt de regles per a un identificador anomenat error-message:

Per aplicar l'estil a la pàgina web, heu d'incloure el nom d'ID, sense el # , dins de l'etiqueta corresponent, per exemple:

<p id="error_message">This is an error</p> 

2.4.3 Selectors de classe

En general, voldreu que tots els elements HTML del mateix tipus tinguin el mateix estil. Però, no sempre serà així. Per exemple, és possible que vulgueu que els paràgrafs apareguin en colors alternatius o que algunes imatges d'una pàgina estiguin alineades a l'esquerra i d'altres a la dreta.

Un selector de classes us permet aplicar un conjunt de regles CSS a un grup definit d'elements. El selector comença amb un punt per indicar que és un selector de classe. El nom de la classe depèn de vosaltres, però no pot començar amb un número ni incloure espais. Com amb tots els identificadors, hauria de ser significatiu.

Aquí teniu un exemple d'un conjunt de regles per a una classe anomenada white_on_black.

Per aplicar l'estil a un element HTML, especifiqueu el nom de la classe, sense el punt , dins de l'etiqueta HTML. Per exemple, el paràgraf següent apareixerà com a text blanc sobre un fons negre:

<p class="white_on_black">I am a special paragraph.</p> 

A la mateixa pàgina, els paràgrafs que no estan etiquetats per a la classe white_on_black apareixeran amb l'estil de paràgraf habitual.

Altres consideracions:

• Una classe es pot utilitzar per a diversos elements; això s'utilitza quan voleu que molts elements tinguin el mateix aspecte.

• Un element pot tenir diverses classes aplicades; això es pot utilitzar quan es volen combinar estils de diferents classes.

• Podeu canviar l'estil d'una etiqueta dins d'una classe.

2.5 BOX MODEL

El model de caixa s'utilitza quan es parla del disseny d'una pàgina web perquè els navegadors web mostren els elements HTML dins d'un quadre rectangular. El CSS determina la mida, la posició i les propietats de cada caixa.

Hi ha dos tipus de caixes, les de bloc i les de línia. Tots els elements HTML amb els quals hem estat treballant tenen un tipus de quadre predeterminat. Per exemple, <h1> i <p> són elements de bloc, mentre <em> i <strong> són de línia.

Fes una web de prova amb un títol i un paràgraf amb algunes paraules en negreta i cursiva. Ara escriu el següent CSS:

Així podem veure clarament l'espai que ocupa cada element. El títol i el paràgraf haurien de tenir fons gris, mentre que l'element d'èmfasi i el de ressaltar haurien de ser de color blau clar. Això ens mostra un parell de comportaments molt importants associats amb blocs i caixes en línia:

• Els quadres de bloc sempre apareixen a sota de l'element de bloc anterior. Aquest és el flux "natural" o "estàtic" d'un document HTML quan es representa amb un navegador web.

• L'amplada de les caixes de bloc s'estableix automàticament en funció de l'amplada del seu contenidor principal. En aquest cas, els nostres blocs són sempre l'amplada de la finestra del navegador.

• L'alçada predeterminada dels quadres de bloc es basa en el contingut que conté. Quan reduïu la finestra del navegador, <h1> es divideix en dues línies i la seva alçada s'ajusta en conseqüència.

• Els quadres en línia no afecten l'espaiat vertical. No serveixen per determinar el disseny, sinó per dissenyar coses dins d'un bloc.

• L'amplada dels quadres en línia es basa en el contingut que conté, no en l'amplada de l'element principal.

Podem canviar el tipus de caixa predeterminat dels elements HTML amb la propietat display de CSS. Per exemple, si volguéssim fer que els nostres elements <em> i <strong> siguin de bloc podem escriure el següent:

Ara, aquests elements actuen com el títol i el paràgraf: comencen a la seva pròpia línia i omplen tota l'amplada del navegador. Això és útil per convertir elements <a> en botons o canviar el format de <img> (tots dos són caixes en línia per defecte).

Les propietats de totes les capses són:

2.5.1 Amplada i alçada

Les propietats height i width s'utilitzen per establir l'alçada i l'amplada d'un element. Les mesures d'amplada i alçada no inclouen el farciment, les vores o els marges.

Cada element de caixa nou omplirà automàticament tota l'amplada de l'element que el conté (el seu pare); aquesta serà l'amplada de tota la pàgina web si el seu pare és el <body> de la pàgina. O podeu donar-li una amplada específica, que es pot establir en píxels o com a percentatge. Sovint, és millor posar-ho en percentatge, ja que s'escala a qualsevol pantalla on es mostri la vostra pàgina web.

El CSS i l'HTML que hi ha a continuació donaran estil a l'element h1 amb una vora sòlida i un color de fons verd. També estirarà l'element al 50% de l'amplada de la pantalla:

2.5.2 Padding (farciment)

La propietat de farciment s'utilitza per crear espai entre la vora i l'element. En AQUEST exemple, proveu de canviar la mida del farciment i del marge per veure com això afecta l'aparença de l'element.

Cal tenir en compte que el farciment empenyerà el vostre element dins de la seva pròpia caixa, de manera que l'element es mostrarà més petit. Una imatge, per exemple, es reduirà quan afegiu un farciment, i el text pot passar a una línia nova quan el farciment redueixi l'amplada del quadre de text.

2.5.3 Border (contorn)

1. Desplaçament horitzontal: un nombre positiu l'empeny des de l'esquerra i un nombre negatiu l'empeny des de la dreta.

2. Desplaçament vertical: un nombre positiu l'empeny cap avall des de la part superior i un nombre negatiu l'empeny cap amunt des de la part inferior.

3. Radi borrós: ​​un nombre més gran produeix una ombra més borrosa, mentre que un nombre petit produeix una ombra més nítida.

4. Radi de propagació (opcional): un nombre més gran augmenta la mida de l'ombra i un nombre més petit la disminueix.

5. Color: qualsevol valor de color vàlid.

2.5.4 Marges

També podeu canviar la mida dels marges de cada element, que són els espais entre la vora i altres elements. Els marges es creen allunyant altres elements.

CSS té propietats per especificar el marge per a cada costat d'un element:

• Margin-top

• Margin-right

• Margin-bottom

• Margin-left

Cadascun d'ells pot tenir valors de:

• auto -> El navegador calcula el marge

• length -> Especifica un marge en píxels (px) o centímetres (cm)

• % -> Especifica un marge en % de l'amplada de l'element que conté

• inherit -> Especifica que el marge ha de ser el mateix que el de l'element en el qual està a niuat.

Una manera més ràpida de dimensionar cada marge, en lloc de configurar el marge superior, el marge dret, el marge inferior i el marge esquerre individualment, és utilitzar la propietat margin. Els valors s'escriuen en l'ordre: superior, dreta, inferior, esquerra, així:

2.6 CAIXES GENÈRIQUES

Fins ara, totes les etiquetes HTML que hem vist corresponen a algun tipus de contingut (text, imatges, enllaços, etc.). De fet, aquest és l'objectiu de l'HTML, però hi ha moltes vegades en què necessitem una caixa genèrica només per donar estil a la pàgina web. Per això hi ha les etiquetes <div> i <span>.

Tots dos <div> i <span> són elements “contenidor” que no tenen cap efecte sobre l'estructura semàntica d'un document HTML. Però, ens permeten afegir estils CSS a seccions arbitràries d'una pàgina web. Per exemple, de vegades cal afegir un quadre invisible per evitar un col·lapse del marge, o potser voleu agrupar els primers paràgrafs d'un article en una sinopsi amb un format de text lleugerament diferent.

L'única diferència entre <div> i <span> és que el primer és per a contingut a nivell de bloc mentre que el segon està pensat per al contingut en línia.