Salta el contingut

UT03 CSS

Què és CSS

CSS són les sigles en anglès per a fulls d'estil en cascada (Cascading Style Sheets). Bàsicament, és un llenguatge que maneja el disseny i presentació de les pàgines web, és a dir, com llueixen quan un usuari les visita. Funciona juntament amb el llenguatge HTML que s’encarrega del contingut bàsic dels llocs.

Se'ls anomena fulles d'estil «en cascada» perquè en pots tenir diverses i una amb les propietats heretades (o «en cascada») d'altres.

Per a moltes persones, una simple plantilla de bloc és suficient. Tot i així, quan vulgueu personalitzar l'aparença d'un lloc, necessitareu implementar CSS que, en conjunt amb un bon CMS, us ajudarà a potenciar l'abast del vostre contingut.

Per a què serveix CSS

Amb CSS, pots crear regles per dir-li al teu lloc web com vols mostrar la informació i desar les ordres per a elements d'estil (com fonts, colors, mides, etc.) separats dels que configuren el contingut.

A més, podeu crear formats específics útils per comunicar les vostres idees i produir experiències més agradables, en l'aspecte visual, per als usuaris del lloc web.

Avantatges i desavantatges d'usar CSS

Avantatges d'usar CSS

  • Separació de l'estructura i la presentació**. CSS permet separar el contingut HTML de la presentació visual. És a dir, us permet mantenir el codi HTML net i estructurat, mentre que l'estil es defineix en un fitxer CSS separat. Aquest ordre millora la llegibilitat del codi i en facilita el manteniment, així com l'actualització dels estils.
  • Consistència i mantenibilitat.** En utilitzar CSS, podeu aplicar estils de manera consistent a un lloc o aplicació web. Els estils es defineixen una vegada i s'apliquen a múltiples elements a les pàgines, cosa que afavoreix la renovació de l'aparença visual de tot el projecte.
  • Eficiència en el rendiment.** CSS permet carregar estils externs en un fitxer separat. Amb això, el navegador emmagatzemarà en memòria cau els estils i els aplicarà a totes les pàgines del lloc, cosa que millora el rendiment en reduir la quantitat de dades que cal transferir entre el servidor i el client.
  • Flexibilitat i control.** Així mateix, ofereix una àmplia gamma de propietats i selectors amb què tindràs un control precís sobre l'estil dels elements HTML. Podràs modificar, de manera senzilla, els colors, fonts, marges, mides, dissenys, etc. Gràcies a aquestes característiques, podràs personalitzar i adaptar a diversos dispositius i mides de pantalla el teu lloc web.

Desavantatges d'usar CSS

  • Corba d'aprenentatge**. CSS pot tenir una corba d'aprenentatge empinada, en particular, per als principiants. Entendre, completament, totes les propietats, selectors i conceptes avançats pot portar temps i pràctica.
  • Compatibilitat entre navegadors**. Tot i que els estàndards de CSS són dels més acceptats, alguns navegadors podrien interpretar i renderitzar els estils de manera diferent. Això pot resultar en inconsistències visuals i requerir proves o ajustaments addicionals per garantir la compatibilitat entre plataformes.
  • Especificitat i herència**. CSS utilitza regles d'especificitat i d'herència per determinar quins estils s'apliquen als elements. De vegades, l'ordre de les regles i la jerarquia poden generar resultats inesperats. Això requereix una comprensió acurada de com funcionen aquestes regles per evitar conflictes i problemes destil.
  • Limitacions a la maquetació. Tot i que CSS ofereix una àmplia gamma de propietats per al disseny i la maquetació, pot presentar limitacions en certs casos més complexos. Alguns dissenys específics poden requerir solucions addicionals o lús de tècniques més avançades per aconseguir el resultat desitjat.

Com funciona CSS

CSS funciona com a complement a la informació que forma part d'un lloc web. Mentre que el codi HTML inclou totes les dades, el codi CSS s'encarrega de donar-los format i presentar-los visualment a través d'un navegador.

En accedir a un lloc web, el navegador ha de rastrejar la informació continguda a l'HTML i traduir-la a un DOM (o model d'objectes del document). Aquests objectes han de ser conjuntats amb els blocs de codi corresponents a CSS perquè l'estil elegit sigui aplicat a ells i apareguin en el format assignat a l'ordinador.

Segons siguin els selectors que hagis utilitzat al teu CSS, s'aplicaran propietats diferents a cada bloc d'informació en HTML. En fer-los servir, podràs modificar, amb facilitat, l'estil d'un conjunt definit de blocs i mantenir la imatge de la teva marca en tot el teu contingut.

Característiques de CSS

  • És un llenguatge de programació diferent a HTML.
  • Permet l'apilament d'instruccions per definir els formats específics.
  • És utilitzable a tots els navegadors i plataformes.
  • Optimitza el funcionament de les pàgines web.
  • Té una sintaxi específica.
  • Permet personalitzar totalment l'aparença de pàgines.

1. És un llenguatge diferent a HTML

HTML és un llenguatge que serveix per gestionar la informació continguda a un lloc web. D'altra banda, CSS té com a funció estructurar l'estil de les pàgines. Tots dos llenguatges treballen en conjunt per presentar la informació al públic final.

2. Permet l'apilament d'instruccions per definir formats específics

Això significa que es poden crear blocs d'instruccions imbricades que permeten fer modificacions generals, de manera senzilla, cosa que simplifica la tasca de disseny i la creació d'estils estandarditzats. Així, es creen formats específics que es poden aplicar a diferents pàgines, els quals, a més, són modificables de forma molt senzilla.

3. És utilitzable en tots els navegadors i plataformes

Com que és un llenguatge popular per donar format als llocs web, el seu ús és universal per a un ampli nombre de dispositius, formats i plataformes com Edge, Safari, Chrome, etc. És per això que és fàcil donar format a les pàgines, segons el navegador utilitzat per cada usuari.

4. Optimitza el funcionament de les pàgines web

En separar el codi de contingut i d'estil, és molt més ràpid el processament de la informació, cosa que es tradueix en una experiència més fluida per als usuaris i en una càrrega de treball menor per als processadors. És important i imprescindible la sincronització del codi en HTML amb CSS perquè la informació es presenti de manera correcta.

5. Té una sintaxi específica

Si bé, la majoria dels llenguatges comparteixen algunes funcions i signes, hi ha particularitats en l'ús de CSS, per la qual cosa cal conèixer el llenguatge de programació, així com les característiques d'apilament. Més endavant revisarem algunes de les utilitats específiques.

6. Permet personalitzar totalment l'aparença de les pàgines

CSS dóna cabuda a una gran llibertat creativa. Els dissenyadors tenen un ampli espectre de possibilitats amb les eines que CSS aporta. L'ús de diferents codis de colors i de fonts permet emprar paletes de moltíssimes tonalitats i múltiples tipografies. Així mateix, es poden disposar els elements visuals d'un lloc segons les necessitats del disseny.

Anem per feina

Feta aquesta introducció és moment de començar a aprendre a utilitzar-lo. Recorda, però, continuar llegint la resta d'aquesta pàgina pel teu compte.

Fes la següent pràctica: Practica CSS W3Schools

Què vol dir que un lloc web sigui responsive?

El disseny web responsive o adaptatiu és una tècnica de disseny web que cerca la correcta visualització duna mateixa pàgina en diferents dispositius. Des d'ordinadors d'escriptori fins a tablets i mòbils.

Avui dia accedim a llocs web des de tota mena de dispositius; ordinador, tablet, smartphone… per la qual cosa, cada cop més, ens sorgeix la necessitat que la nostra web s'adapti a les diferents mides dels mateixos.

Què són les media queries?

Les Media queries s o consultes sobre el medi permeten col·locar diferents propietats en funció de: - Si el mitjà és una pantalla o una impressora - La mida de la pantalla - La resolució de la pantalla - L'orientació de la pantalla - Etc.

Pots visitar https://www.w3schools.com/css/css3_mediaqueries.asp per saber-ne més.

Què vol dir indentar?

S'anomena indentació de codi al fet d'utilitzar sagnat (moure lleugerament cap a la dreta) a les línies de codi per facilitar-ne la lectura, i indicar visualment si ens trobem a l'interior d'una funció, bucle, condicional, etc...

Si vols saber-ne més pots llegir l'article Indentació de codi.

Hi ha la propietat transparency?

No. Hi ha la opacity.

Quin és l'efecte ellipsis de CSS de la propietat text-overflow?

Quan el text no hi cap, s'hi afegeixen punts suspensius.

Pots veure el comportament de la propietat desbordament de text a aquest enllaç.

Per què serveix definir un @font-face a CSS?

La regla @font-face permet descarregar una font o tipografia d'una pàgina web, carregar-la al navegador i utilitzar-la a les nostres pàgines encara que no estigui instal·lada al sistema. Tot això de manera transparent a l'usuari, sense que hagi de fer cap acció.

Què són/fan les funcions skewX() i skewY()?

Les funcions de deformació disponibles a CSS són les següents:

Funcions Significat
skewX(xdeg) Estableix un angle d'ANGLE xdeg per a una deformació 2D respecte a l'eix X.
skewY(ydeg) Estableix un angle d'ANGLE ydeg per a una deformació 2D respecte a l'eix Y.

Pots veure el comportament d'aquesta propietat a aquest enllaç.

Què passa si apliquem el següent estil transform: rotateX (90deg);?

Pots veure el comportament d'aquesta propietat a aquest enllaç.

Què passarà aquí? 

<style>
div {
  width: 100px;
  height: 100px;
  background: red;
  transition: width 2s;
}

div:hover {
  width: 300px;
}
</style>

<body>
  <div>This is a div</div>
</body>
Que l'amplada del div es modificarà depenent de si el ratolí està a sobre o no.

Què fa el valor ease del animation-timing-function?

Mira aquest exemple de W3Schools Elements amb diferents valors de funció de temporització