Skip to main content

Herència, Cascada i Propietats de Text i Tipografies

Aquest capítol aprofundeix en conceptes fonamentals de CSS com l’herència, la cascada, la especificitat i les propietats avançades de text i fonts.

Herència en CSS​

L’herència permet que certs estils aplicats a un element pare es propaguin als seus elements fills.
S’aplica automàticament a propietats com color, font-family, line-height...

body {
  color: navy;
  font-family: Arial, sans-serif;
}

Cascada en CSS​

CSS significa Cascading Style Sheets.
La cascada defineix com es combinen múltiples regles aplicades al mateix element:

  1. L’ordre en què s’escriuen les regles
  2. La especificitat dels selectors
  3. L’ús del modificador !important

Quan hi ha conflicte, guanya la regla més específica o l’última declarada si tenen el mateix nivell.

Especificitat en CSS​

És un sistema de puntuació per determinar quina regla té més pes.

SelectorValor de especificitatExemple
Universal (*)0,0,0*
Etiqueta (div, p)0,0,1p {}
Classe (.classe)0,1,0.principal {}
Atribut ([type="text"])0,1,0[type="text"] {}
Pseudo-classe (:hover, :nth-child)0,1,0a:hover {}
ID (#id)1,0,0#header {}
Estil en línia1,0,0 (extra prioritari)style="color:red"
!importantForça qualsevol reglacolor: blue !important

Exemple comparatiu​

p {
  color: blue;
} /* nivell 1 */
.title {
  color: yellow;
} /* nivell 2 */
#title {
  color: red;
} /* nivell 3 */

→ S'aplicarà vermell perquè #title és més específic.

CSS Intern vs Extern​

  • CSS intern (<style>) i extern (.css) tenen la mateixa especificitat.
  • Quan xoquen, guanya la regla més específica o la declarada més recent.

Propietats de text​

color​

Defineix el color del text.

.text {
  color: red;
}

letter-spacing​

Espaiat entre caràcters.

.text {
  letter-spacing: 2px;
}

line-height​

Espai entre línies.

.text {
  line-height: 1.5;
}

font​

Propietat abreujada que combina font-style, font-weight, font-size, line-height, font-family.

.text {
  font: italic bold 16px/1.5 Arial, sans-serif;
}

Altres propietats de font​

font-style: italic;
font-variant: small-caps;
font-weight: bold; /* o 100–900 */
font-size: 16px;
font-family: "Roboto", sans-serif;

Propietats d'alineació i decoració​

text-align​

.text {
  text-align: justify;
}

Valors: left, right, center, justify

text-decoration​

.text {
  text-decoration: underline;
}

Valors: none, underline, line-through, overline

text-indent​

Sagnat de la primera línia.

p {
  text-indent: 30px;
}

text-overflow​

Controla com es mostra el text quan sobrepassa el contenidor.

.text {
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
  width: 200px;
}

text-shadow​

Aplica ombra al text.

.text {
  text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.4);
}

text-transform​

Controla capitalització:

.text {
  text-transform: uppercase;
}

Valors: none, capitalize, uppercase, lowercase

text-transform vs font-variant​

  • text-transform: Canvia majúscules/minúscules visuals
  • font-variant: Aplica versaletes reals (si la font ho permet)

Fonts i Tipografies​

Tipus de fonts​

  • serif: Times New Roman, Georgia
  • sans-serif: Arial, Helvetica
  • monospace: Courier New, Lucida Console
  • cursive: Comic Sans MS, Brush Script
  • fantasy: Copperplate, Papyrus
.text {
  font-family: "Georgia", serif;
}

Fonts de Google​

  1. Ves a Google Fonts
  2. Tria una font (ex: Roboto)
  3. Copia el codi:
<link
  href="https://fonts.googleapis.com/css2?family=Roboto&display=swap"
  rel="stylesheet"
/>
body {
  font-family: "Roboto", sans-serif;
}

Aquest capítol et dona control total sobre com s’apliquen i prioritzen els estils, i et mostra les principals eines per treballar amb text i tipografia de manera avançada.