Embedded Files
El llenguatge CSS ens permetrà donar estil a la nostra pàgina.
El llenguatge CSS ens permetrà donar estil a la nostra pàgina.
Amb el codi HTML tenim el contingut de la pàgina web, però ara cal donar l’estil a la nostra pàgina: com veurem les icones, quina mida de lletra farem servir…
Per fer-ho treballarem amb el llenguatge CSS (Cascade Style Sheet), o fulls d’estils en cascada.
L’extensió dels arxius de CSS tenen la terminació .css. Per tal que la nostra pàgina web, i, per tant, el nostre codi HTML, interpreti aquests estils cal indicar on es troba aquest arxiu.
Això ho farem dins de l'etiqueta <head></head> i amb el següent format:
on l’etiqueta href ens indica la ruta del nostre arxiu.
Per exemple, si volem canviar de color tots els paràgrafs d'una pàgina web, si només ho fem amb llenguatge HTML hauríem d'anar paràgraf per paràgraf fent el canvi amb una etiqueta color.
Si fem servir CSS podem indicar que tots els paràgrafs canviïn de color amb una ordre:
Si ens fixem en el codi podem observar:
Selector: és l'element HTML que comença l'ordre, en aquest cas <p>.
Declaració: amb una sola regla determinem les propietats de l'element color: red;
Propietat: És com donem estil a l'element HTML, en aquest cas color
Valor de la propietat: Després dels dos punts donem el valor que desitgem, en el nostre cas red
Les regles han d'anar encapsulades entre {} i al final de cada regla cal utilitzar el ;
Un exemple d’estructura CSS sería la següent:
Si ens fixem, podem veure que cadascun dels blocs defineix un estil (font-size i color).
Podeu trobar tot el conjunt d'etiquetes que es fan servir habitualment amb CSS
from Canva Education
Page updated
Report abuse