El Projecte | Sobre nosaltres | Contribuir | Donacions | Llicència
HOME Els meus cursos Finalitzats
◄ Anterior
◄

Introducció a CSS

Següent ►
►

En aquest tema, aprendrem els fonaments de CSS (Cascading Style Sheets), que és l'eina principal per donar estil i format a les pàgines web. CSS permet separar el contingut HTML de la presentació visual, facilitant el manteniment i la flexibilitat del disseny web.

Què és CSS?

CSS és un llenguatge de fulls d'estil utilitzat per descriure la presentació d'un document escrit en HTML o XML. Amb CSS, pots controlar el color del text, el tipus de lletra, l'espaiat entre paràgrafs, la mida de les columnes, el disseny, els colors de fons, i molt més.

Característiques Clau de CSS

  • Separació de Contingut i Presentació: Permet mantenir el codi HTML net i separat de l'estil.
  • Reutilització: Un sol full d'estil pot ser aplicat a múltiples pàgines web.
  • Consistència: Assegura un aspecte consistent a través de tot el lloc web.
  • Control Precís: Proporciona un control detallat sobre el disseny i la presentació.

Sintaxi Bàsica de CSS

La sintaxi de CSS està composta per selectors i regles. Una regla CSS està formada per un selector i un bloc de declaracions.

selector {
  propietat: valor;
}

Exemple de CSS

body {
  background-color: #f0f0f0;
  font-family: Arial, sans-serif;
}

h1 {
  color: #333;
  text-align: center;
}

p {
  color: #666;
  line-height: 1.5;
}

Explicació:

  • body: Aplica un color de fons gris clar i una font Arial a tot el document.
  • h1: Estableix el color del text a gris fosc i centra el text dels encapçalaments <h1>.
  • p: Defineix el color del text dels paràgrafs a gris i ajusta l'alçada de línia per millorar la llegibilitat.

Tipus de Selectors

  1. Selectors de Tipus: Seleccionen elements HTML pel seu nom.

    • Exemple: p { color: blue; } aplica l'estil a tots els paràgrafs.

  2. Selectors de Classe: Seleccionen elements amb un atribut de classe específic.

    • Exemple: .highlight { background-color: yellow; } aplica l'estil a tots els elements amb la classe highlight.

  3. Selectors d'ID: Seleccionen un element amb un atribut d'ID específic.

    • Exemple: #header { font-size: 24px; } aplica l'estil a l'element amb l'ID header.

  4. Selectors Universals: Seleccionen tots els elements.

    • Exemple: * { margin: 0; } elimina el marge de tots els elements.

Exercici Pràctic

Objectiu: Crea un document HTML senzill i aplica estils CSS per canviar el color de fons, el tipus de lletra i l'alineació del text.

Pas 1: Crea un Document HTML

<!DOCTYPE html>
<html lang="ca">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Exemple CSS</title>
  <link rel="stylesheet" href="styles.css">
</head>
<body>
  <h1>Benvingut al Món del CSS</h1>
  <p>Aquest és un exemple senzill per mostrar com funciona CSS.</p>
</body>
</html>

Pas 2: Crea un Fitxer CSS

body {
  background-color: #e0f7fa;
  font-family: 'Helvetica Neue', sans-serif;
}

h1 {
  color: #00796b;
  text-align: center;
}

p {
  color: #004d40;
  text-align: justify;
}

Solució

  • El color de fons del document és un blau clar (#e0f7fa).
  • La font utilitzada és Helvetica Neue.
  • El color del text de l'encapçalament <h1> és un verd fosc (#00796b) i està centrat.
  • El text dels paràgrafs és d'un verd més fosc (#004d40) i està justificat.

Conclusió

En aquesta secció, hem après els conceptes bàsics de CSS, incloent la seva sintaxi, tipus de selectors i com aplicar estils a un document HTML. Amb aquests fonaments, estàs preparat per explorar més tècniques avançades de CSS en els següents mòduls.

◄ Anterior
◄
Següent ►
►
El Projecte | Sobre nosaltres | Contribuir | Donacions | Llicència
© Copyright 2024. Tots els drets reservats